diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss
index a4bdb4a3..ac7db880 100644
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@@ -352,6 +352,16 @@
&-itemLabel {
flex-grow: 1;
}
+
+ &-placeholder {
+ height: $Form-input-height;
+ line-height: $Form-input-lineHeight;
+ font-size: $Form-input-fontSize;
+ padding: (
+ $Form-input-height - $Form-input-lineHeight * $Form-input-fontSize
+ )/2 $gap-sm;
+ color: $text--muted-color;
+ }
}
.#{$ns}TableCheckboxes {
diff --git a/scss/components/form/_transfer.scss b/scss/components/form/_transfer.scss
index 0a04c394..1bb86243 100644
--- a/scss/components/form/_transfer.scss
+++ b/scss/components/form/_transfer.scss
@@ -45,6 +45,14 @@
overflow: auto;
}
+ &-checkboxes .#{$ns}ListCheckboxes-placeholder {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ justify-content: center;
+ }
+
&-search {
padding: $gap-sm;
}
@@ -57,5 +65,10 @@
&-clearAll {
user-select: none;
cursor: pointer;
+
+ &.is-disabled {
+ pointer-events: none;
+ color: $text--muted-color;
+ }
}
}
diff --git a/src/components/ListCheckboxes.tsx b/src/components/ListCheckboxes.tsx
index df042b6c..283518c1 100644
--- a/src/components/ListCheckboxes.tsx
+++ b/src/components/ListCheckboxes.tsx
@@ -81,7 +81,11 @@ export class ListCheckboxes extends Checkboxes {
return (
- {body && body.length ? body :
{placeholder}
}
+ {body && body.length ? (
+ body
+ ) : (
+
{placeholder}
+ )}
);
}
diff --git a/src/components/Transfer.tsx b/src/components/Transfer.tsx
index 9ffd604e..0404dd6d 100644
--- a/src/components/Transfer.tsx
+++ b/src/components/Transfer.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {ThemeProps, themeable} from '../theme';
import {CheckboxesProps, Checkboxes} from './Checkboxes';
-import {Options} from './Select';
+import {Options, Option} from './Select';
import uncontrollable from 'uncontrollable';
import Selections from './Selections';
import TableCheckboxes from './TableCheckboxes';
@@ -52,7 +52,8 @@ export interface TransferState {
export class Transfer extends React.Component {
static defaultProps = {
selectTitle: '请选择',
- resultTitle: '当前选择'
+ resultTitle: '当前选择',
+ itemRender: (option: Option) => {option.label}
};
state = {
@@ -152,7 +153,9 @@ export class Transfer extends React.Component {
selectMode,
classnames: cx,
selectTitle,
- onSearch
+ onSearch,
+ disabled,
+ options
} = this.props;
if (selectRender) {
@@ -172,7 +175,13 @@ export class Transfer extends React.Component {
{this.availableOptions.length})
{selectMode !== 'table' ? (
-
+
全选
) : null}
@@ -296,7 +305,8 @@ export class Transfer extends React.Component {
resultTitle,
sortable,
options,
- option2value
+ option2value,
+ disabled
} = this.props;
this.valueArray = Checkboxes.value2array(value, options, option2value);
@@ -316,7 +326,13 @@ export class Transfer extends React.Component {
{resultTitle}({this.valueArray.length}/
{this.availableOptions.length})
-
+
清空
@@ -325,6 +341,7 @@ export class Transfer extends React.Component {
sortable={sortable}
value={value}
onChange={onChange}
+ placeholder="请先选择左侧数据"
/>
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 53ad6fc9..e64aa3ac 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -39,6 +39,10 @@ import Tooltip from './Tooltip';
import TooltipWrapper from './TooltipWrapper';
import Tree from './Tree';
import Alert2 from './Alert2';
+import Transfer from './Transfer';
+import ListCheckboxes from './ListCheckboxes';
+import TableCheckboxes from './TableCheckboxes';
+import TreeCheckboxes from './TreeCheckboxes';
export {
NotFound,
@@ -80,5 +84,9 @@ export {
toast,
Tooltip,
TooltipWrapper,
- Tree
+ Tree,
+ Transfer,
+ ListCheckboxes,
+ TableCheckboxes,
+ TreeCheckboxes
};
diff --git a/src/index.tsx b/src/index.tsx
index 355908c5..cc11c96a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -27,49 +27,6 @@ import {resizeSensor} from './utils/resize-sensor';
import {setIconVendor} from './renderers/Form/IconPickerIcons';
import {Icon, registerIcon} from './components/icons';
-import {
- NotFound,
- AlertComponent,
- alert,
- ContextMenu,
- openContextMenus,
- Alert2,
- confirm,
- AsideNav,
- Button,
- Checkbox,
- Checkboxes,
- Collapse,
- ColorPicker,
- DatePicker,
- DateRangePicker,
- Drawer,
- Tabs,
- Tab,
- // Editor,
- Icons,
- Html,
- Layout,
- LazyComponent,
- Modal,
- Overlay,
- PopOver,
- Radios,
- Range,
- Rating,
- // RichText,
- Select,
- Spinner,
- Switch,
- Textarea,
- TitleBar,
- ToastComponent,
- toast,
- Tooltip,
- TooltipWrapper,
- Tree
-} from './components/index';
-
// 注册渲染器
import './renderers/Action';
import './renderers/Alert';
@@ -129,6 +86,7 @@ import './renderers/Form/Panel';
import './renderers/Form/Color';
import './renderers/Form/ChainedSelect';
import './renderers/Form/NestedSelect';
+import './renderers/Form/Transfer';
import './renderers/Form/TransferSelect';
import './renderers/Form/Service';
import './renderers/Form/Table';
@@ -203,6 +161,8 @@ import {
} from './theme';
const classPrefix = getClassPrefix();
+export * from './components/index';
+
export {
render,
clearStoresCache,
@@ -212,46 +172,6 @@ export {
wrapFetcher,
buildApi,
filter,
- NotFound,
- AlertComponent,
- alert,
- ContextMenu,
- openContextMenus,
- Alert2,
- confirm,
- AsideNav,
- Button,
- Checkbox,
- Checkboxes,
- Collapse,
- ColorPicker,
- DatePicker,
- DateRangePicker,
- Drawer,
- Tabs,
- Tab,
- // Editor,
- Html,
- Icons,
- Layout,
- LazyComponent,
- Modal,
- Overlay,
- PopOver,
- Radios,
- Range,
- Rating,
- // RichText,
- Select,
- Spinner,
- Switch,
- Textarea,
- TitleBar,
- ToastComponent,
- toast,
- Tooltip,
- TooltipWrapper,
- Tree,
// 其他功能类方法
utils,
resizeSensor,
diff --git a/src/renderers/Form/Transfer.tsx b/src/renderers/Form/Transfer.tsx
new file mode 100644
index 00000000..73c26c75
--- /dev/null
+++ b/src/renderers/Form/Transfer.tsx
@@ -0,0 +1,72 @@
+import {OptionsControlProps, OptionsControl} from './Options';
+import React from 'react';
+import Transfer from '../../components/Transfer';
+import {Option} from './Options';
+import {autobind} from '../../utils/helper';
+import {Api} from '../../types';
+
+export interface TransferProps extends OptionsControlProps {
+ sortable?: boolean;
+ selectMode?: 'table' | 'list' | 'tree';
+ columns?: Array;
+ searchApi?: Api; // todo 通过传递进去 onSearch 实现。
+}
+
+@OptionsControl({
+ type: 'transfer'
+})
+export class TransferRenderer extends React.Component {
+ @autobind
+ handleChange(value: Array