@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Transfer/List.js

@@ -16,8 +16,6 @@ import classNames from 'classnames';
 import omit from 'lodash/omit';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import Checkbox from "../Checkbox/Checkbox";
-import { Dropdown, DropdownItem, DropdownMenu } from "../Dropdown";
-import Icon from "../Icon/Icon";
 import { mergeDefaultProps } from "../Util";
 import { useClassNames } from "../hooks";
 import DefaultListBody from "./ListBody";
@@ -35,9 +33,7 @@ var TransferList = function TransferList(props) {
     data: [],
     titleText: '',
     showSearch: false,
-    itemsUnit: '项',
-    itemUnit: '项',
-    searchPlaceholder: '请输入搜索内容'
+    showSelectAll: true
   }, props);
   var _props = props,
     _props$classPrefix = _props.classPrefix,
@@ -49,23 +45,21 @@ var TransferList = function TransferList(props) {
     footer = _props.footer,
     showSearch = _props.showSearch,
     style = _props.style,
-    searchPlaceholder = _props.searchPlaceholder,
+    filterPlaceholder = _props.filterPlaceholder,
     notFoundContent = _props.notFoundContent,
     renderList = _props.renderList,
     onItemSelectAll = _props.onItemSelectAll,
-    _props$showSelectAll = _props.showSelectAll,
-    showSelectAll = _props$showSelectAll === void 0 ? true : _props$showSelectAll,
+    showSelectAll = _props.showSelectAll,
     pagination = _props.pagination,
-    direction = _props.direction,
-    itemsUnit = _props.itemsUnit,
-    itemUnit = _props.itemUnit,
-    selectAllLabel = _props.selectAllLabel,
+    format = _props.format,
     filterOption = _props.filterOption,
-    render = _props.render,
+    renderContent = _props.renderContent,
     handleFilter = _props.handleFilter,
+    handleClearSearch = _props.handleClearSearch,
     fieldNames = _props.fieldNames;
   var _useClassNames = useClassNames(classPrefix),
-    b = _useClassNames.b;
+    b = _useClassNames.b,
+    e = _useClassNames.e;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     filterValue = _useState2[0],
@@ -91,7 +85,7 @@ var TransferList = function TransferList(props) {
   }, [handleFilter]);
   var handleClear = useCallback(function () {
     setFilterValue('');
-    handleClear();
+    handleClearSearch === null || handleClearSearch === void 0 || handleClearSearch();
   }, []);
   var matchFilter = useCallback(function (text, item) {
     if (filterOption) {
@@ -113,13 +107,13 @@ var TransferList = function TransferList(props) {
     };
   }, [renderList]);
   var renderItem = useCallback(function (item) {
-    var _render;
+    var _renderContent;
     return {
-      renderedText: item[fieldNames.title],
-      renderedEl: (_render = render === null || render === void 0 ? void 0 : render(item)) !== null && _render !== void 0 ? _render : item[fieldNames.title],
+      renderedText: item[fieldNames.label],
+      renderedEl: (_renderContent = renderContent === null || renderContent === void 0 ? void 0 : renderContent(item)) !== null && _renderContent !== void 0 ? _renderContent : item[fieldNames.label],
       item: item
     };
-  }, [fieldNames.title, render]);
+  }, [fieldNames.label, renderContent]);
   var _useMemo = useMemo(function () {
       var _filteredItems = [];
       var _filteredRenderItems = [];
@@ -191,17 +185,16 @@ var TransferList = function TransferList(props) {
     }
   }, [checkedKeys, filteredItems, getEnabledItemKeys, onItemSelectAll, pagination]);
   var getSelectAllLabel = useMemo(function () {
-    var selectedCount = checkedKeys.length;
-    var totalCount = filteredItems.length;
-    if (selectAllLabel) {
-      return typeof selectAllLabel === 'function' ? selectAllLabel === null || selectAllLabel === void 0 ? void 0 : selectAllLabel({
-        selectedCount: selectedCount,
-        totalCount: totalCount
-      }) : selectAllLabel;
+    var checked = checkedKeys.length;
+    var total = filteredItems.length;
+    if (format) {
+      return typeof format === 'function' ? format === null || format === void 0 ? void 0 : format({
+        checked: checked,
+        total: total
+      }) : format;
     }
-    var unit = totalCount > 1 ? itemsUnit : itemUnit;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, (selectedCount > 0 ? "".concat(selectedCount, "/") : '') + totalCount, " ", unit);
-  }, [checkedKeys.length, filteredItems.length, itemUnit, itemsUnit, selectAllLabel]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, (checked > 0 ? "".concat(checked, "/") : '0') + total);
+  }, [checkedKeys.length, filteredItems.length, format]);
 
   // ================================= List Body =================================
 
@@ -212,7 +205,7 @@ var TransferList = function TransferList(props) {
       prefixCls: b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["search"]))),
       onChange: onFilter,
       handleClear: handleClear,
-      placeholder: searchPlaceholder,
+      placeholder: filterPlaceholder,
       value: filterValue,
       disabled: disabled
     })) : null;
@@ -243,14 +236,12 @@ var TransferList = function TransferList(props) {
     return /*#__PURE__*/React.createElement("div", {
       className: showSearch ? classNames(b(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["body"]))), b(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["body-with-search"])))) : b(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["body"])))
     }, search, bodyNode);
-  }, [b, checkedKeys, disabled, filterValue, filteredItems, filteredRenderItems, handleClear, onFilter, notFoundContent, props, renderListBody, searchPlaceholder, showSearch]);
+  }, [b, checkedKeys, disabled, filterValue, filteredItems, filteredRenderItems, handleClear, onFilter, notFoundContent, props, renderListBody, filterPlaceholder, showSearch]);
 
   // Custom Layout
   var footerDom = useMemo(function () {
-    return footer && (footer.length < 2 ? footer(props) : footer(props, {
-      direction: direction
-    }));
-  }, [direction, footer, props]);
+    return footer ? footer(props) : null;
+  }, [footer, props]);
 
   // ================================ List Footer ================================
   var listFooter = useMemo(function () {
@@ -278,36 +269,44 @@ var TransferList = function TransferList(props) {
           return key;
         }), !checkedAll);
       }
-    }, titleText);
+    }, /*#__PURE__*/React.createElement("span", {
+      className: e(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["header-title"])))
+    }, titleText));
     return result;
-  }, [b, disabled, fieldNames.disabled, filteredItems, getCheckStatus, onItemSelectAll, pagination, titleText]);
-  var menu = useMemo(function () {
-    return /*#__PURE__*/React.createElement(DropdownMenu, null, /*#__PURE__*/React.createElement(DropdownItem, {
-      key: "selectAll",
-      command: "selectAll"
-    }, "\u5168\u9009\u6240\u6709"), pagination && /*#__PURE__*/React.createElement(DropdownItem, {
-      key: "pagination",
-      command: "pagination"
-    }, "\u5168\u9009\u5F53\u9875"), /*#__PURE__*/React.createElement(DropdownItem, {
-      key: "selectInvert",
-      command: "selectInvert"
-    }, "\u53CD\u9009\u5F53\u9875"));
-  }, [pagination]);
-  var dropdown = /*#__PURE__*/React.createElement(Dropdown, {
-    className: b(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["header-dropdown"]))),
-    menu: menu,
-    disabled: disabled,
-    onClick: onDropdownClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: "angle-down"
-  }));
+  }, [b, disabled, e, fieldNames.disabled, filteredItems, getCheckStatus, onItemSelectAll, pagination, titleText]);
+
+  // const menu: React.ReactElement = useMemo(
+  //     () => (
+  //         <DropdownMenu>
+  //             <DropdownItem key="selectAll" command="selectAll">
+  //                 全选所有
+  //             </DropdownItem>
+  //             {pagination && (
+  //                 <DropdownItem key="pagination" command="pagination">
+  //                     全选当页
+  //                 </DropdownItem>
+  //             )}
+  //             <DropdownItem key="selectInvert" command="selectInvert">
+  //                 反选当页
+  //             </DropdownItem>
+  //         </DropdownMenu>
+  //     ),
+  //     [pagination],
+  // );
+
+  // const dropdown = (
+  //     <Dropdown className={b`header-dropdown`} menu={menu} disabled={disabled} onClick={onDropdownClick}>
+  //         <Icon name="angle-down" />
+  //     </Dropdown>
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(b(), _defineProperty(_defineProperty({}, b(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["with-pagination"]))), !!pagination), b(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["with-footer"]))), !!footerDom)),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: b(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["header"])))
-  }, showSelectAll ? /*#__PURE__*/React.createElement(React.Fragment, null, checkAllCheckbox, dropdown) : null, /*#__PURE__*/React.createElement("span", {
-    className: b(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["header-title"])))
+  }, showSelectAll ? /*#__PURE__*/React.createElement(React.Fragment, null, checkAllCheckbox) : null, /*#__PURE__*/React.createElement("span", {
+    className: e(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["header-count"])))
   }, getSelectAllLabel)), listBody, listFooter);
 };
 export default TransferList;

package/dist/Transfer/ListItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FieldNames, KeyWiseTransferItem } from './typings';
+import { KeyWiseTransferItem, TransferPropsAlias } from './typings';
 type ListItemProps<RecordType> = {
     renderedText?: string | number;
     renderedEl: React.ReactElement;
@@ -10,7 +10,7 @@ type ListItemProps<RecordType> = {
     onRemove?: (item: RecordType) => void;
     item: RecordType;
     /** 数据源的字段别名 */
-    fieldNames: FieldNames;
+    fieldNames: TransferPropsAlias;
 };
 declare const ListItem: <RecordType extends KeyWiseTransferItem>(props: ListItemProps<RecordType>) => React.JSX.Element;
 export default ListItem;

package/dist/Transfer/Transfer.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TransferItem, TransferProps } from './typings';
-type RecordType = TransferItem;
+import { TransferDataItem, TransferProps } from './typings';
+type RecordType = TransferDataItem;
 declare const Transfer: FC<TransferProps<RecordType>>;
 export default Transfer;

package/dist/Transfer/Transfer.js

@@ -17,45 +17,69 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Empty } from "../Empty";
+import React, { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
 import { mergeDefaultProps } from "../Util";
 import { useClassNames, useControlled } from "../hooks";
 import List from "./List";
 import Operation from "./operation";
 var Transfer = function Transfer(props) {
-  var _props$defaultValue, _selectedKeys$filter, _selectedKeys$filter2;
-  // @ts-ignore
+  var _props$defaultValue;
+  var _useConfigProvider = useConfigProvider(),
+    locale = _useConfigProvider.locale;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   props = mergeDefaultProps({
     data: [],
-    titles: ['Source', 'Target'],
-    locale: {},
+    titles: [t('el.transfer.titles.0', {
+      lng: locale
+    }), t('el.transfer.titles.1', {
+      lng: locale
+    })],
     filterable: false,
-    listStyle: {}
+    listStyle: {},
+    leftDefaultChecked: [],
+    rightDefaultChecked: [],
+    leftEmpty: t('el.transfer.noData', {
+      lng: locale
+    }),
+    rightEmpty: t('el.transfer.noData', {
+      lng: locale
+    }),
+    filterPlaceholder: t('el.transfer.filterPlaceholder', {
+      lng: locale
+    })
   }, props);
   var _props = props,
     className = _props.className,
     disabled = _props.disabled,
-    _props$operations = _props.operations,
-    operations = _props$operations === void 0 ? [] : _props$operations,
+    _props$buttonTexts = _props.buttonTexts,
+    operations = _props$buttonTexts === void 0 ? [] : _props$buttonTexts,
     filterable = _props.filterable,
-    footer = _props.footer,
+    leftFooter = _props.leftFooter,
+    rightFooter = _props.rightFooter,
     style = _props.style,
     listStyle = _props.listStyle,
     operationStyle = _props.operationStyle,
     filterMethod = _props.filterMethod,
-    render = _props.render,
+    filterPlaceholder = _props.filterPlaceholder,
+    renderContent = _props.renderContent,
     children = _props.children,
     showSelectAll = _props.showSelectAll,
     pagination = _props.pagination,
     titles = _props.titles,
     _props$data = _props.data,
     data = _props$data === void 0 ? [] : _props$data,
-    selectedKeys = _props.selectedKeys,
-    _props$selectAllLabel = _props.selectAllLabels,
-    selectAllLabels = _props$selectAllLabel === void 0 ? [] : _props$selectAllLabel,
+    leftDefaultChecked = _props.leftDefaultChecked,
+    rightDefaultChecked = _props.rightDefaultChecked,
+    format = _props.format,
     onChange = _props.onChange,
     onScroll = _props.onScroll,
+    onLeftCheckChange = _props.onLeftCheckChange,
+    onRightCheckChange = _props.onRightCheckChange,
+    leftEmpty = _props.leftEmpty,
+    rightEmpty = _props.rightEmpty,
     _props$classPrefix = _props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'transfer' : _props$classPrefix;
   var _useClassNames = useClassNames(classPrefix),
@@ -64,42 +88,32 @@ var Transfer = function Transfer(props) {
   var fieldNames = useMemo(function () {
     return _objectSpread({
       key: 'key',
-      title: 'label',
+      label: 'label',
       disabled: 'disabled'
-    }, props.fieldNames);
-  }, [props.fieldNames]);
+    }, props.props);
+  }, [props.props]);
   var _useControlled = useControlled(props.value, (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : []),
     _useControlled2 = _slicedToArray(_useControlled, 2),
     value = _useControlled2[0],
     setValue = _useControlled2[1];
-  var _useState = useState((_selectedKeys$filter = selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.filter(function (key) {
-      return data.some(function (item) {
-        return item[fieldNames.key] === key;
-      }) && !value.includes(key);
-    })) !== null && _selectedKeys$filter !== void 0 ? _selectedKeys$filter : []),
-    _useState2 = _slicedToArray(_useState, 2),
-    sourceSelectedKeys = _useState2[0],
-    setSourceSelectedKeys = _useState2[1];
-  var _useState3 = useState((_selectedKeys$filter2 = selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.filter(function (key) {
-      return value.includes(key);
-    })) !== null && _selectedKeys$filter2 !== void 0 ? _selectedKeys$filter2 : []),
-    _useState4 = _slicedToArray(_useState3, 2),
-    targetSelectedKeys = _useState4[0],
-    setTargetSelectedKeys = _useState4[1];
-  useEffect(function () {
-    if (selectedKeys) {
-      var mergedTargetKeys = value || [];
-      setSourceSelectedKeys(selectedKeys.filter(function (key) {
-        return data.some(function (item) {
-          return item[fieldNames.key] === key;
-        }) && !mergedTargetKeys.includes(key);
-      }));
-      setTargetSelectedKeys(selectedKeys.filter(function (key) {
-        return mergedTargetKeys.includes(key);
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedKeys]);
+  var _useControlled3 = useControlled(undefined, leftDefaultChecked),
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    sourceSelectedKeys = _useControlled4[0],
+    setSourceSelectedKeys = _useControlled4[1];
+  var _useControlled5 = useControlled(undefined, rightDefaultChecked),
+    _useControlled6 = _slicedToArray(_useControlled5, 2),
+    targetSelectedKeys = _useControlled6[0],
+    setTargetSelectedKeys = _useControlled6[1];
+
+  // useEffect(() => {
+  //     if (leftDefaultChecked) {
+  //         setSourceSelectedKeys(leftDefaultChecked);
+  //     }
+  //     if (rightDefaultChecked) {
+  //         setTargetSelectedKeys(rightDefaultChecked);
+  //     }
+  // }, [leftDefaultChecked, rightDefaultChecked]);
+
   var mergedPagination = useMemo(function () {
     return !children && pagination;
   }, [children, pagination]);
@@ -143,7 +157,7 @@ var Transfer = function Transfer(props) {
     } else {
       setTargetSelectedKeys(typeof keys === 'function' ? keys(targetSelectedKeys || []) : keys);
     }
-  }, [sourceSelectedKeys, targetSelectedKeys]);
+  }, [setSourceSelectedKeys, setTargetSelectedKeys, sourceSelectedKeys, targetSelectedKeys]);
   var handleSelectChange = useCallback(function (direction, holder) {
     var _props2 = props,
       onSelectChange = _props2.onSelectChange;
@@ -248,11 +262,14 @@ var Transfer = function Transfer(props) {
     if (checked) {
       holder.push(selectedKey);
     }
-    handleSelectChange(direction, holder);
-    if (!props.selectedKeys) {
-      setStateKeys(direction, holder);
+    if (direction === 'left') {
+      onLeftCheckChange === null || onLeftCheckChange === void 0 || onLeftCheckChange(holder, [selectedKey]);
+    } else {
+      onRightCheckChange === null || onRightCheckChange === void 0 || onRightCheckChange(holder, [selectedKey]);
     }
-  }, [handleSelectChange, props.selectedKeys, setStateKeys, sourceSelectedKeys, targetSelectedKeys]);
+    handleSelectChange(direction, holder);
+    setStateKeys(direction, holder);
+  }, [handleSelectChange, onLeftCheckChange, onRightCheckChange, setStateKeys, sourceSelectedKeys, targetSelectedKeys]);
   var onLeftItemSelect = useCallback(function (selectedKey, checked) {
     return onItemSelect('left', selectedKey, checked);
   }, [onItemSelect]);
@@ -289,31 +306,30 @@ var Transfer = function Transfer(props) {
     style: handleListStyle(listStyle, 'left'),
     checkedKeys: sourceSelectedKeys,
     handleFilter: handleLeftFilter,
-    handleClear: handleLeftClear,
+    handleClearSearch: handleLeftClear,
     onItemSelect: onLeftItemSelect,
     onItemSelectAll: onLeftItemSelectAll,
-    render: render,
+    renderContent: renderContent,
     showSearch: filterable,
     renderList: children,
-    footer: footer,
+    footer: leftFooter,
     onScroll: handleLeftScroll,
     disabled: disabled,
     direction: 'left',
     showSelectAll: showSelectAll,
-    selectAllLabel: selectAllLabels[0],
+    format: format,
     pagination: mergedPagination,
-    notFoundContent: /*#__PURE__*/React.createElement(Empty, {
-      imageSize: 50
-    }),
-    fieldNames: fieldNames
+    notFoundContent: leftEmpty,
+    fieldNames: fieldNames,
+    filterPlaceholder: filterPlaceholder
     // {...omit(props, ['data', 'onScroll'])}
   }), /*#__PURE__*/React.createElement(Operation, {
     className: b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["operation"]))),
     rightActive: sourceSelectedKeys.length > 0,
-    rightArrowText: operations[0],
+    rightArrowText: operations[1],
     moveToRight: moveToRight,
     leftActive: targetSelectedKeys.length > 0,
-    leftArrowText: operations[1],
+    leftArrowText: operations[0],
     moveToLeft: moveToLeft,
     style: operationStyle,
     disabled: disabled
@@ -324,27 +340,25 @@ var Transfer = function Transfer(props) {
     style: handleListStyle(listStyle, 'right'),
     checkedKeys: targetSelectedKeys,
     handleFilter: handleRightFilter,
-    handleClear: handleRightClear,
+    handleClearSearch: handleRightClear,
     onItemSelect: onRightItemSelect,
     onItemSelectAll: onRightItemSelectAll,
     onItemRemove: onRightItemRemove,
-    render: render,
+    renderContent: renderContent,
     showSearch: filterable,
     renderList: children,
-    footer: footer,
+    footer: rightFooter,
     onScroll: handleRightScroll,
     disabled: disabled,
     direction: 'right',
     showSelectAll: showSelectAll,
-    selectAllLabel: selectAllLabels[1],
+    format: format,
     pagination: mergedPagination,
-    notFoundContent: /*#__PURE__*/React.createElement(Empty, {
-      imageSize: 50
-    }),
-    fieldNames: fieldNames
+    notFoundContent: rightEmpty,
+    fieldNames: fieldNames,
+    filterPlaceholder: filterPlaceholder
     // {...omit(props, ['data', 'onScroll'])}
-    // {...locale}
   }));
 };
-Transfer.displayName = 'Transfer';
+Transfer.displayName = 'ElTransfer';
 export default Transfer;

package/dist/Transfer/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Transfer } from './Transfer';
-export type { ListStyle, SelectAllLabel, TransferDirection, TransferItem, TransferLocale, TransferProps, TransferRender } from './typings';
+export type { ListStyle, TransferDataItem, TransferDirection, TransferFormat, TransferKey, TransferLocale, TransferProps, TransferPropsAlias, TransferRender } from './typings';

package/dist/Transfer/operation.js

@@ -16,21 +16,19 @@ var Operation = function Operation(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: className,
     style: style
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, !oneWay && /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    disabled: disabled || !leftActive,
+    onClick: moveToLeft,
+    icon: 'angle-left'
+  }, leftArrowText), /*#__PURE__*/React.createElement(Button, {
     type: "primary",
-    size: "small",
     disabled: disabled || !rightActive,
     onClick: moveToRight,
-    icon: rightArrowText ? false : 'angle-right',
+    icon: 'angle-right',
     style: {
       marginBottom: 4
     }
-  }, rightArrowText), !oneWay && /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
-    size: "small",
-    disabled: disabled || !leftActive,
-    onClick: moveToLeft,
-    icon: leftArrowText ? false : 'angle-left'
-  }, leftArrowText));
+  }, rightArrowText));
 };
 export default Operation;

package/dist/Transfer/typings/index.d.ts

@@ -5,8 +5,9 @@ import { TransferListProps } from './list';
 import { TransferListBodyProps } from './listBody';
 export type TransferDirection = 'left' | 'right';
 export type RenderResult = React.ReactElement | string;
-export interface TransferItem {
-    key?: string | number;
+export type TransferKey = string | number;
+export interface TransferDataItem {
+    key?: TransferKey;
     title?: string;
     description?: string;
     disabled?: boolean;
@@ -15,81 +16,91 @@ export interface TransferItem {
 export type KeyWise<T> = T & {
     key: string;
 };
-export type KeyWiseTransferItem = KeyWise<TransferItem>;
+export type KeyWiseTransferItem = KeyWise<TransferDataItem>;
 export type TransferRender<RecordType> = (item: RecordType) => RenderResult;
 export interface ListStyle {
     direction: TransferDirection;
 }
 /** 自定义顶部多选框标题的集合 */
-export type SelectAllLabel = React.ReactElement<any> | ((info: {
-    selectedCount: number;
-    totalCount: number;
-}) => React.ReactElement<any>);
-export type FieldNames = {
+export type TransferFormat = React.ReactElement<any> | ((info: {
+    checked: number;
+    total: number;
+}) => React.ReactNode);
+export type TransferPropsAlias = {
     key?: string;
-    title?: string;
+    label?: string;
     disabled?: string;
 };
 export interface TransferLocale {
-    notFoundContent?: React.ReactElement;
-    searchPlaceholder?: string;
+    notFoundContent?: React.ReactNode;
+    filterPlaceholder?: string;
     itemUnit?: string;
     itemsUnit?: string;
     remove?: string;
     removeAll?: string;
     removeCurrent?: string;
 }
-export interface TransferProps<RecordType extends TransferItem = TransferItem> extends Omit<BaseProps, 'children'>, NativeProps {
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外 */
-    data: RecordType[];
+export interface TransferProps<RecordType extends TransferDataItem = TransferDataItem> extends Omit<BaseProps, 'children'>, NativeProps {
     /** 默认显示在右侧框数据的 key 集合 */
     defaultValue?: (string | number)[];
     /** 显示在右侧框数据的 key 集合（控制模式） */
     value?: (string | number)[];
-    /** 设置哪些项应该被选中 */
-    selectedKeys?: (string | number)[];
-    /** 每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 label 字段为 ReactElement，value 字段为 title */
-    render?: TransferRender<RecordType>;
+    /** 数据源，其中的数据将会被渲染到左边一栏中，targetKeys 中指定的除外 */
+    data: RecordType[];
+    /** 是否显示搜索框 */
+    filterable?: boolean;
+    /** 接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false */
+    filterMethod?: (inputValue: string, item: RecordType) => boolean;
+    /** 搜索框占位符 */
+    filterPlaceholder?: string;
+    /** 自定义列表标题，顺序从左至右 */
+    titles?: (React.ReactElement | string)[];
+    /** 自定义按钮文案 */
+    buttonTexts?: string[];
+    /** 每行数据渲染函数，该函数的入参为 dataSource 中的项，返回值为 ReactElement。或者返回一个普通对象 */
+    renderContent?: TransferRender<RecordType>;
+    /** 列表顶部勾选状态文案 */
+    format?: TransferFormat;
+    /** 数据源的字段别名 */
+    props?: TransferPropsAlias;
+    /** 初始状态下左侧列表的已勾选项的 key 数组 */
+    leftDefaultChecked?: (string | number)[];
+    /** 初始状态下右侧列表的已勾选项的 key 数组 */
+    rightDefaultChecked?: (string | number)[];
+    /** 是否禁用 */
+    disabled?: boolean;
     /** 选项在两栏之间转移时的回调函数 */
     onChange?: (targetKeys: (string | number)[], direction: TransferDirection, moveKeys: (string | number)[]) => void;
     /** 选中项发生改变时的回调函数 */
     onSelectChange?: (sourceSelectedKeys: (string | number)[], targetSelectedKeys: (string | number)[]) => void;
+    /** 左侧列表元素被用户选中 / 取消选中时触发 */
+    onLeftCheckChange?: (value: (string | number)[], movedKeys?: (string | number)[]) => void;
+    /** 右侧列表元素被用户选中 / 取消选中时触发 */
+    onRightCheckChange?: (value: (string | number)[], movedKeys?: (string | number)[]) => void;
     /** 两个穿梭框的自定义样式 */
     listStyle?: ((style: ListStyle) => React.CSSProperties) | React.CSSProperties;
     /** 操作栏的自定义样式 */
     operationStyle?: React.CSSProperties;
-    /** 标题集合，顺序从左至右 */
-    titles?: (React.ReactElement | string)[];
-    /** 操作文案集合，顺序从上至下 */
-    operations?: string[];
-    /** 是否显示搜索框 */
-    filterable?: boolean;
-    /** 接收 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false */
-    filterMethod?: (inputValue: string, item: RecordType) => boolean;
-    /**  */
-    locale?: Partial<TransferLocale>;
-    /** 底部渲染函数 */
-    footer?: (props: TransferListProps<RecordType>, extra: {
-        direction: TransferDirection;
-    }) => React.ReactElement;
+    /** 左侧列表底部的内容 */
+    leftFooter?: (props: TransferListProps<RecordType>) => React.ReactElement;
+    /** 右侧列表底部的内容 */
+    rightFooter?: (props: TransferListProps<RecordType>) => React.ReactElement;
     /** 搜索框内容时改变时的回调函数 */
     onSearch?: (direction: TransferDirection, value: string) => void;
     /** 选项列表滚动时的回调函数 */
     onScroll?: (direction: TransferDirection, e: any) => void;
     /**  */
     children?: (props: TransferListBodyProps<RecordType>) => React.ReactElement;
+    /** 左侧列表为空时的提示内容 */
+    leftEmpty?: React.ReactNode;
+    /** 右侧列表为空时的提示内容 */
+    rightEmpty?: React.ReactNode;
     /** 是否展示全选勾选框 */
     showSelectAll?: boolean;
-    /** 自定义顶部多选框标题的集合 */
-    selectAllLabels?: SelectAllLabel[];
     /** 展示为单向样式 */
     oneWay?: boolean;
     /** 使用分页样式，自定义渲染列表下无效 */
     pagination?: PaginationType;
-    /** 数据源的字段别名 */
-    fieldNames?: FieldNames;
     /** 表单校验错误提示 */
     error?: boolean;
     /** 表单校验警告提示 */