打通 renderer

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 {

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;
+    }
   }
 }

src/components/ListCheckboxes.tsx

@@ -81,7 +81,11 @@ export class ListCheckboxes extends Checkboxes {
 
     return (
       <div className={cx('ListCheckboxes', className)}>
-        {body && body.length ? body : <div>{placeholder}</div>}
+        {body && body.length ? (
+          body
+        ) : (
+          <div className={cx('ListCheckboxes-placeholder')}>{placeholder}</div>
+        )}
       </div>
     );
   }

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<TransferPorps, TransferState> {
   static defaultProps = {
     selectTitle: '请选择',
-    resultTitle: '当前选择'
+    resultTitle: '当前选择',
+    itemRender: (option: Option) => <span>{option.label}</span>
   };
 
   state = {
@@ -152,7 +153,9 @@ export class Transfer extends React.Component<TransferPorps, TransferState> {
       selectMode,
       classnames: cx,
       selectTitle,
-      onSearch
+      onSearch,
+      disabled,
+      options
     } = this.props;
 
     if (selectRender) {
@@ -172,7 +175,13 @@ export class Transfer extends React.Component<TransferPorps, TransferState> {
             {this.availableOptions.length}）
           </span>
           {selectMode !== 'table' ? (
-            <a onClick={this.toggleAll} className={cx('Transfer-checkAll')}>
+            <a
+              onClick={this.toggleAll}
+              className={cx(
+                'Transfer-checkAll',
+                disabled || !options.length ? 'is-disabled' : ''
+              )}
+            >
               全选
             </a>
           ) : null}
@@ -296,7 +305,8 @@ export class Transfer extends React.Component<TransferPorps, TransferState> {
       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<TransferPorps, TransferState> {
               {resultTitle}（{this.valueArray.length}/
               {this.availableOptions.length}）
             </span>
-            <a onClick={this.clearAll} className={cx('Transfer-clearAll')}>
+            <a
+              onClick={this.clearAll}
+              className={cx(
+                'Transfer-clearAll',
+                disabled || !this.valueArray.length ? 'is-disabled' : ''
+              )}
+            >
               清空
             </a>
           </div>
@@ -325,6 +341,7 @@ export class Transfer extends React.Component<TransferPorps, TransferState> {
             sortable={sortable}
             value={value}
             onChange={onChange}
+            placeholder="请先选择左侧数据"
           />
         </div>
       </div>

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
 };

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,

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<any>;
+  searchApi?: Api; // todo 通过传递进去 onSearch 实现。
+}
+
+@OptionsControl({
+  type: 'transfer'
+})
+export class TransferRenderer extends React.Component<TransferProps> {
+  @autobind
+  handleChange(value: Array<Option>) {
+    const {
+      onChange,
+      joinValues,
+      delimiter,
+      valueField,
+      extractValue
+    } = this.props;
+    let newValue: any = value;
+
+    if (Array.isArray(value)) {
+      if (joinValues) {
+        newValue = value
+          .map(item => item[valueField || 'value'])
+          .join(delimiter || ',');
+      } else if (extractValue) {
+        newValue = value.map(item => item[valueField || 'value']);
+      }
+    }
+
+    onChange(newValue);
+  }
+
+  @autobind
+  option2value(option: Option) {
+    return option;
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      options,
+      selectedOptions,
+      sortable,
+      selectMode,
+      columns
+    } = this.props;
+
+    return (
+      <div className={cx('TransferControl')}>
+        <Transfer
+          value={selectedOptions}
+          options={options}
+          onChange={this.handleChange}
+          option2value={this.option2value}
+          sortable={sortable}
+          selectMode={selectMode}
+          columns={columns}
+        />
+      </div>
+    );
+  }
+}