调整 TabsTransfer

scss/components/form/_transfer.scss

@@ -103,6 +103,7 @@
     height: 100%;
 
     > .#{$ns}Tabs-links {
+      border-top: 0 none;
       padding: 5px 0 0 5px;
       display: flex;
       flex-direction: row;

src/components/TabsTransfer.tsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import {autobind} from '../utils/helper';
+import Tabs, {Tab} from './Tabs';
+import SearchBox from './SearchBox';
+import TableCheckboxes from './TableCheckboxes';
+import TreeCheckboxes from './TreeCheckboxes';
+import ChainedCheckboxes from './ChainedCheckboxes';
+import ListCheckboxes from './ListCheckboxes';
+import {Options, Option} from './Select';
+import Transfer, {TransferProps} from './Transfer';
+import {themeable} from '../theme';
+
+export interface TabsTransferProps
+  extends Omit<
+    TransferProps,
+    'selectMode' | 'columns' | 'selectRender' | 'statistics'
+  > {}
+
+export class TabsTransfer extends React.Component<TabsTransferProps> {
+  static defaultProps = {
+    selectTitle: '请选择',
+    resultTitle: '当前选择',
+    itemRender: (option: Option) => <span>{option.label}</span>
+  };
+
+  renderSearchResult(searchResult: Options | null) {
+    const {
+      searchResultMode,
+      noResultsText,
+      searchResultColumns,
+      classnames: cx,
+      value,
+      onChange,
+      option2value
+    } = this.props;
+    const options = searchResult || [];
+    const mode = searchResultMode;
+
+    return mode === 'table' ? (
+      <TableCheckboxes
+        placeholder={noResultsText}
+        className={cx('Transfer-checkboxes')}
+        columns={searchResultColumns!}
+        options={options}
+        value={value}
+        onChange={onChange}
+        option2value={option2value}
+      />
+    ) : mode === 'tree' ? (
+      <TreeCheckboxes
+        placeholder={noResultsText}
+        className={cx('Transfer-checkboxes')}
+        options={options}
+        value={value}
+        onChange={onChange}
+        option2value={option2value}
+      />
+    ) : mode === 'chained' ? (
+      <ChainedCheckboxes
+        placeholder={noResultsText}
+        className={cx('Transfer-checkboxes')}
+        options={options}
+        value={value}
+        onChange={onChange}
+        option2value={option2value}
+      />
+    ) : (
+      <ListCheckboxes
+        placeholder={noResultsText}
+        className={cx('Transfer-checkboxes')}
+        options={options}
+        value={value}
+        onChange={onChange}
+        option2value={option2value}
+      />
+    );
+  }
+
+  @autobind
+  renderSelect({onSearch, onSearchCancel, searchResult}: any) {
+    const {
+      options,
+      placeholder,
+      classnames: cx,
+      value,
+      onChange,
+      onSearch: searchable,
+      option2value
+    } = this.props;
+
+    if (!Array.isArray(options) || !options.length) {
+      return <div>{placeholder || '暂无可选项'}</div>;
+    }
+
+    return (
+      <Tabs
+        mode="card"
+        className={cx('Transfer-tabs')}
+        activeKey={searchResult !== null ? 0 : undefined}
+        toolbar={
+          searchable ? (
+            <>
+              <span className={cx('TabsTransfer-tabsMid')}></span>
+              <SearchBox onSearch={onSearch} onCancel={onSearchCancel} />
+            </>
+          ) : null
+        }
+      >
+        {searchResult !== null
+          ? [
+              <Tab title="搜索结果" key={0} eventKey={0}>
+                {this.renderSearchResult(searchResult)}
+              </Tab>
+            ]
+          : options.map((option, index) => (
+              <Tab
+                eventKey={index}
+                key={index}
+                title={option.label || option.title}
+              >
+                {option.selectMode === 'table' ? (
+                  <TableCheckboxes
+                    className={cx('Transfer-checkboxes')}
+                    columns={option.columns as any}
+                    options={option.children || []}
+                    value={value}
+                    onChange={onChange}
+                    option2value={option2value}
+                  />
+                ) : option.selectMode === 'tree' ? (
+                  <TreeCheckboxes
+                    className={cx('Transfer-checkboxes')}
+                    options={option.children || []}
+                    value={value}
+                    onChange={onChange}
+                    option2value={option2value}
+                  />
+                ) : option.selectMode === 'chained' ? (
+                  <ChainedCheckboxes
+                    className={cx('Transfer-checkboxes')}
+                    options={option.children || []}
+                    value={value}
+                    onChange={onChange}
+                    option2value={option2value}
+                  />
+                ) : (
+                  <ListCheckboxes
+                    className={cx('Transfer-checkboxes')}
+                    options={option.children || []}
+                    value={value}
+                    onChange={onChange}
+                    option2value={option2value}
+                  />
+                )}
+              </Tab>
+            ))}
+      </Tabs>
+    );
+  }
+
+  render() {
+    const {className, classnames: cx} = this.props;
+
+    return (
+      <Transfer
+        {...this.props}
+        statistics={false}
+        className={cx('TabsTransfer', className)}
+        selectRender={this.renderSelect}
+      />
+    );
+  }
+}
+
+export default themeable(TabsTransfer);

src/components/Transfer.tsx

@@ -13,7 +13,7 @@ import {Icon} from './icons';
 import debounce from 'lodash/debounce';
 import ChainedCheckboxes from './ChainedCheckboxes';
 
-export interface TransferPorps extends ThemeProps, CheckboxesProps {
+export interface TransferProps extends ThemeProps, CheckboxesProps {
   inline?: boolean;
   statistics?: boolean;
   showArrow?: boolean;
@@ -42,7 +42,7 @@ export interface TransferPorps extends ThemeProps, CheckboxesProps {
 
   // 自定义选择框相关
   selectRender?: (
-    props: Omit<TransferPorps, 'onSearch'> & {
+    props: Omit<TransferProps, 'onSearch'> & {
       onSearch: (text: string) => void;
       onSearchCancel: () => void;
       searchResult: Options | null;
@@ -58,7 +58,7 @@ export interface TransferState {
   searchResult: Options | null;
 }
 
-export class Transfer extends React.Component<TransferPorps, TransferState> {
+export class Transfer extends React.Component<TransferProps, TransferState> {
   static defaultProps = {
     selectTitle: '请选择',
     resultTitle: '当前选择',

src/renderers/Form/TabsTransfer.tsx

@@ -1,165 +1,22 @@
 import {OptionsControlProps, OptionsControl} from './Options';
 import React from 'react';
-import Transfer from '../../components/Transfer';
 import {Api} from '../../types';
 import Spinner from '../../components/Spinner';
 import {TransferRenderer} from './Transfer';
-import {autobind} from '../../utils/helper';
-import Tabs, {Tab} from '../../components/Tabs';
-import {Icon} from '../../components/icons';
-import TableCheckboxes from '../../components/TableCheckboxes';
-import TreeCheckboxes from '../../components/TreeCheckboxes';
-import ListCheckboxes from '../../components/ListCheckboxes';
-import SearchBox from '../../components/SearchBox';
-import {Options} from '../../components/Select';
-import ChainedCheckboxes from '../../components/ChainedCheckboxes';
+import TabsTransfer from '../../components/TabsTransfer';
 
 export interface TabsTransferProps extends OptionsControlProps {
+  showArrow?: boolean;
   sortable?: boolean;
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
   searchable?: boolean;
   searchApi?: Api;
-  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
 }
 
 @OptionsControl({
   type: 'tabs-transfer'
 })
 export class TabsTransferRenderer extends TransferRenderer<TabsTransferProps> {
-  renderSearchResult(searchResult: Options | null) {
-    const {
-      searchResultMode,
-      selectMode,
-      noResultsText,
-      searchResultColumns,
-      classnames: cx,
-      value,
-      onChange,
-      option2value
-    } = this.props;
-    const options = searchResult || [];
-    const mode = searchResultMode || selectMode;
-
-    return mode === 'table' ? (
-      <TableCheckboxes
-        placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
-        columns={searchResultColumns!}
-        options={options}
-        value={value}
-        onChange={onChange}
-        option2value={option2value}
-      />
-    ) : mode === 'tree' ? (
-      <TreeCheckboxes
-        placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
-        options={options}
-        value={value}
-        onChange={onChange}
-        option2value={option2value}
-      />
-    ) : mode === 'chained' ? (
-      <ChainedCheckboxes
-        placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
-        options={options}
-        value={value}
-        onChange={onChange}
-        option2value={option2value}
-      />
-    ) : (
-      <ListCheckboxes
-        placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
-        options={options}
-        value={value}
-        onChange={onChange}
-        option2value={option2value}
-      />
-    );
-  }
-
-  @autobind
-  renderSelect({onSearch, onSearchCancel, searchResult}: any) {
-    const {
-      options,
-      placeholder,
-      classnames: cx,
-      labelField,
-      selectedOptions,
-      searchable
-    } = this.props;
-
-    if (!Array.isArray(options) || !options.length) {
-      return <div>{placeholder || '暂无可选项'}</div>;
-    }
-
-    return (
-      <Tabs
-        mode="card"
-        className={cx('Transfer-tabs')}
-        activeKey={searchResult !== null ? 0 : undefined}
-        toolbar={
-          searchable ? (
-            <>
-              <span className={cx('TabsTransfer-tabsMid')}></span>
-              <SearchBox onSearch={onSearch} onCancel={onSearchCancel} />
-            </>
-          ) : null
-        }
-      >
-        {searchResult !== null
-          ? [
-              <Tab title="搜索结果" key={0} eventKey={0}>
-                {this.renderSearchResult(searchResult)}
-              </Tab>
-            ]
-          : options.map((option, index) => (
-              <Tab
-                eventKey={index}
-                key={index}
-                title={option[labelField || 'label'] || option.title}
-              >
-                {option.selectMode === 'table' ? (
-                  <TableCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    columns={option.columns as any}
-                    options={option.children || []}
-                    value={selectedOptions}
-                    onChange={this.handleChange}
-                    option2value={this.option2value}
-                  />
-                ) : option.selectMode === 'tree' ? (
-                  <TreeCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={selectedOptions}
-                    onChange={this.handleChange}
-                    option2value={this.option2value}
-                  />
-                ) : option.selectMode === 'chained' ? (
-                  <ChainedCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={selectedOptions}
-                    onChange={this.handleChange}
-                    option2value={this.option2value}
-                  />
-                ) : (
-                  <ListCheckboxes
-                    className={cx('Transfer-checkboxes')}
-                    options={option.children || []}
-                    value={selectedOptions}
-                    onChange={this.handleChange}
-                    option2value={this.option2value}
-                  />
-                )}
-              </Tab>
-            ))}
-      </Tabs>
-    );
-  }
-
   render() {
     const {
       className,
@@ -167,8 +24,6 @@ export class TabsTransferRenderer extends TransferRenderer<TabsTransferProps> {
       options,
       selectedOptions,
       sortable,
-      selectMode,
-      columns,
       loading,
       searchable,
       searchResultMode,
@@ -177,18 +32,13 @@ export class TabsTransferRenderer extends TransferRenderer<TabsTransferProps> {
 
     return (
       <div className={cx('TabsTransferControl', className)}>
-        <Transfer
-          statistics={false}
-          className="TabsTransfer"
-          selectRender={this.renderSelect}
+        <TabsTransfer
           value={selectedOptions}
           options={options}
           onChange={this.handleChange}
           option2value={this.option2value}
           sortable={sortable}
-          selectMode={selectMode}
           searchResultMode={searchResultMode}
-          columns={columns}
           onSearch={searchable ? this.handleSearch : undefined}
           showArrow={showArrow}
         />

src/renderers/Form/Transfer.tsx

@@ -17,8 +17,8 @@ import {optionValueCompare} from '../../components/Select';
 export interface TransferProps extends OptionsControlProps {
   showArrow?: boolean;
   sortable?: boolean;
-  selectMode?: 'table' | 'list' | 'tree';
-  searchResultMode?: 'table' | 'list' | 'tree';
+  selectMode?: 'table' | 'list' | 'tree' | 'chained';
+  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
   columns?: Array<any>;
   searchable?: boolean;
   searchApi?: Api;