@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/dist/Transfer/Transfer.js

@@ -1,103 +1,121 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Transfer/Transfer.tsx
-var Transfer_exports = {};
-__export(Transfer_exports, {
-  default: () => Transfer_default
-});
-module.exports = __toCommonJS(Transfer_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_Empty = require("../Empty");
-var import_Util = require("../Util");
-var import_hooks = require("../hooks");
-var import_List = __toESM(require("./List"));
-var import_operation = __toESM(require("./operation"));
-var Transfer = (props) => {
-  props = (0, import_Util.mergeDefaultProps)(
-    {
-      data: [],
-      titles: ["Source", "Target"],
-      locale: {},
-      filterable: false,
-      listStyle: {}
-    },
-    props
-  );
-  const {
-    className,
-    disabled,
-    operations = [],
-    filterable,
-    footer,
-    style,
-    listStyle,
-    operationStyle,
-    filterMethod,
-    render,
-    children,
-    showSelectAll,
-    pagination,
-    titles,
-    data = [],
-    selectedKeys,
-    selectAllLabels = [],
-    onChange,
-    onScroll,
-    classPrefix = "transfer"
-  } = props;
-  const { b, is } = (0, import_hooks.useClassNames)(classPrefix);
-  const fieldNames = (0, import_react.useMemo)(() => {
-    return { key: "key", title: "label", disabled: "disabled", ...props.fieldNames };
+var _templateObject, _templateObject2;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 { 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
+  props = mergeDefaultProps({
+    data: [],
+    titles: ['Source', 'Target'],
+    locale: {},
+    filterable: false,
+    listStyle: {}
+  }, props);
+  var _props = props,
+    className = _props.className,
+    disabled = _props.disabled,
+    _props$operations = _props.operations,
+    operations = _props$operations === void 0 ? [] : _props$operations,
+    filterable = _props.filterable,
+    footer = _props.footer,
+    style = _props.style,
+    listStyle = _props.listStyle,
+    operationStyle = _props.operationStyle,
+    filterMethod = _props.filterMethod,
+    render = _props.render,
+    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,
+    onChange = _props.onChange,
+    onScroll = _props.onScroll,
+    _props$classPrefix = _props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'transfer' : _props$classPrefix;
+  var _useClassNames = useClassNames(classPrefix),
+    b = _useClassNames.b,
+    is = _useClassNames.is;
+  var fieldNames = useMemo(function () {
+    return _objectSpread({
+      key: 'key',
+      title: 'label',
+      disabled: 'disabled'
+    }, props.fieldNames);
   }, [props.fieldNames]);
-  const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue ?? []);
-  const [sourceSelectedKeys, setSourceSelectedKeys] = (0, import_react.useState)((selectedKeys == null ? void 0 : selectedKeys.filter((key) => data.some((item) => item[fieldNames.key] === key) && !value.includes(key))) ?? []);
-  const [targetSelectedKeys, setTargetSelectedKeys] = (0, import_react.useState)((selectedKeys == null ? void 0 : selectedKeys.filter((key) => value.includes(key))) ?? []);
-  (0, import_react.useEffect)(() => {
+  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) {
-      const mergedTargetKeys = value || [];
-      setSourceSelectedKeys(selectedKeys.filter((key) => data.some((item) => item[fieldNames.key] === key) && !mergedTargetKeys.includes(key)));
-      setTargetSelectedKeys(selectedKeys.filter((key) => mergedTargetKeys.includes(key)));
+      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]);
-  const mergedPagination = (0, import_react.useMemo)(() => !children && pagination, [children, pagination]);
-  const separateDataSource = (0, import_react.useMemo)(() => {
-    const leftDataSource = [];
-    const rightDataSource = new Array(value.length);
-    data.forEach((item) => {
+  var mergedPagination = useMemo(function () {
+    return !children && pagination;
+  }, [children, pagination]);
+  var separateDataSource = useMemo(function () {
+    var leftDataSource = [];
+    var rightDataSource = new Array(value.length);
+    data.forEach(function (item) {
       if (!item.key) {
-        item = {
-          ...item,
+        item = _objectSpread(_objectSpread({}, item), {}, {
           key: item[fieldNames.key]
-        };
+        });
       }
-      const indexOfKey = value.indexOf(item.key);
+
+      // rightDataSource should be ordered by targetKeys
+      // leftDataSource should be ordered by data
+      var indexOfKey = value.indexOf(item.key);
       if (indexOfKey !== -1) {
         rightDataSource[indexOfKey] = item;
       } else {
@@ -105,203 +123,228 @@ var Transfer = (props) => {
       }
     });
     return {
-      leftDataSource,
-      rightDataSource
+      leftDataSource: leftDataSource,
+      rightDataSource: rightDataSource
     };
   }, [data, fieldNames.key, value]);
-  const handleListStyle = (0, import_react.useCallback)((_listStyle, direction) => {
-    if (typeof _listStyle === "function") {
-      return _listStyle({ direction });
+  var handleListStyle = useCallback(function (_listStyle, direction) {
+    if (typeof _listStyle === 'function') {
+      return _listStyle({
+        direction: direction
+      });
     }
     return _listStyle;
   }, []);
-  const setStateKeys = (0, import_react.useCallback)(
-    (direction, keys) => {
-      if (direction === "left") {
-        const result = typeof keys === "function" ? keys(sourceSelectedKeys || []) : keys;
-        setSourceSelectedKeys(result);
-        return;
-      } else {
-        setTargetSelectedKeys(typeof keys === "function" ? keys(targetSelectedKeys || []) : keys);
-      }
-    },
-    [sourceSelectedKeys, targetSelectedKeys]
-  );
-  const handleSelectChange = (0, import_react.useCallback)(
-    (direction, holder) => {
-      const { onSelectChange } = props;
-      if (direction === "left") {
-        onSelectChange == null ? void 0 : onSelectChange(holder, targetSelectedKeys);
+  var setStateKeys = useCallback(function (direction, keys) {
+    if (direction === 'left') {
+      var result = typeof keys === 'function' ? keys(sourceSelectedKeys || []) : keys;
+      setSourceSelectedKeys(result);
+      return;
+    } else {
+      setTargetSelectedKeys(typeof keys === 'function' ? keys(targetSelectedKeys || []) : keys);
+    }
+  }, [sourceSelectedKeys, targetSelectedKeys]);
+  var handleSelectChange = useCallback(function (direction, holder) {
+    var _props2 = props,
+      onSelectChange = _props2.onSelectChange;
+    // if (!onSelectChange) {
+    //     return;
+    // }
+
+    if (direction === 'left') {
+      onSelectChange === null || onSelectChange === void 0 || onSelectChange(holder, targetSelectedKeys);
+    } else {
+      onSelectChange === null || onSelectChange === void 0 || onSelectChange(sourceSelectedKeys, holder);
+    }
+  }, [props, sourceSelectedKeys, targetSelectedKeys]);
+  var moveTo = useCallback(function (direction) {
+    var moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
+    // filter the disabled options
+    var newMoveKeys = moveKeys.filter(function (key) {
+      return !data.some(function (_data) {
+        return !!(key === _data[fieldNames.key] && _data[fieldNames.disabled]);
+      });
+    });
+    // move items to target box
+    var newTargetKeys = direction === 'right' ? newMoveKeys.concat(value) : value.filter(function (targetKey) {
+      return newMoveKeys.indexOf(targetKey) === -1;
+    });
+
+    // empty checked keys
+    var oppositeDirection = direction === 'right' ? 'left' : 'right';
+    setStateKeys(oppositeDirection, []);
+    handleSelectChange(oppositeDirection, []);
+    setValue(newTargetKeys);
+    onChange === null || onChange === void 0 || onChange(newTargetKeys, direction, newMoveKeys);
+  }, [sourceSelectedKeys, targetSelectedKeys, value, setStateKeys, handleSelectChange, setValue, onChange, data, fieldNames.key, fieldNames.disabled]);
+  var moveToLeft = useCallback(function () {
+    return moveTo('left');
+  }, [moveTo]);
+  var moveToRight = useCallback(function () {
+    return moveTo('right');
+  }, [moveTo]);
+
+  /**
+   *
+   * @param direction 方向
+   * @param _selectedKeys 传入的keys
+   * @param check 是否选中
+   * @param overWrite 是否忽略check参数，直接使用_selectedKeys
+   */
+  var onItemSelectAll = useCallback(function (direction, _selectedKeys, check, overWrite) {
+    setStateKeys(direction, function (prevKeys) {
+      var mergedCheckedKeys = [];
+      if (overWrite) {
+        mergedCheckedKeys = _selectedKeys;
       } else {
-        onSelectChange == null ? void 0 : onSelectChange(sourceSelectedKeys, holder);
-      }
-    },
-    [props, sourceSelectedKeys, targetSelectedKeys]
-  );
-  const moveTo = (0, import_react.useCallback)(
-    (direction) => {
-      const moveKeys = direction === "right" ? sourceSelectedKeys : targetSelectedKeys;
-      const newMoveKeys = moveKeys.filter((key) => !data.some((_data) => !!(key === _data[fieldNames.key] && _data[fieldNames.disabled])));
-      const newTargetKeys = direction === "right" ? newMoveKeys.concat(value) : value.filter((targetKey) => newMoveKeys.indexOf(targetKey) === -1);
-      const oppositeDirection = direction === "right" ? "left" : "right";
-      setStateKeys(oppositeDirection, []);
-      handleSelectChange(oppositeDirection, []);
-      setValue(newTargetKeys);
-      onChange == null ? void 0 : onChange(newTargetKeys, direction, newMoveKeys);
-    },
-    [sourceSelectedKeys, targetSelectedKeys, value, setStateKeys, handleSelectChange, setValue, onChange, data, fieldNames.key, fieldNames.disabled]
-  );
-  const moveToLeft = (0, import_react.useCallback)(() => moveTo("left"), [moveTo]);
-  const moveToRight = (0, import_react.useCallback)(() => moveTo("right"), [moveTo]);
-  const onItemSelectAll = (0, import_react.useCallback)(
-    (direction, _selectedKeys, check, overWrite) => {
-      setStateKeys(direction, (prevKeys) => {
-        let mergedCheckedKeys = [];
-        if (overWrite) {
-          mergedCheckedKeys = _selectedKeys;
+        if (check) {
+          // Merge current keys with origin key
+          mergedCheckedKeys = Array.from(new Set([].concat(_toConsumableArray(prevKeys), _toConsumableArray(_selectedKeys))));
         } else {
-          if (check) {
-            mergedCheckedKeys = Array.from(/* @__PURE__ */ new Set([...prevKeys, ..._selectedKeys]));
-          } else {
-            mergedCheckedKeys = prevKeys.filter((key) => _selectedKeys.indexOf(key) === -1);
-          }
+          // Remove current keys from origin keys
+          mergedCheckedKeys = prevKeys.filter(function (key) {
+            return _selectedKeys.indexOf(key) === -1;
+          });
         }
-        handleSelectChange(direction, mergedCheckedKeys);
-        return mergedCheckedKeys;
-      });
-    },
-    [handleSelectChange, setStateKeys]
-  );
-  const onLeftItemSelectAll = (0, import_react.useCallback)(
-    (_selectedKeys, checkAll, overWrite) => onItemSelectAll("left", _selectedKeys, checkAll, overWrite),
-    [onItemSelectAll]
-  );
-  const onRightItemSelectAll = (0, import_react.useCallback)(
-    (_selectedKeys, checkAll, overWrite) => onItemSelectAll("right", _selectedKeys, checkAll, overWrite),
-    [onItemSelectAll]
-  );
-  const handleFilter = (0, import_react.useCallback)(
-    (direction, e) => {
-      const { onSearch } = props;
-      onSearch == null ? void 0 : onSearch(direction, e.target.value);
-    },
-    [props]
-  );
-  const handleLeftFilter = (0, import_react.useCallback)((e) => handleFilter("left", e), [handleFilter]);
-  const handleRightFilter = (0, import_react.useCallback)((e) => handleFilter("right", e), [handleFilter]);
-  const handleClear = (0, import_react.useCallback)(
-    (direction) => {
-      const { onSearch } = props;
-      onSearch == null ? void 0 : onSearch(direction, "");
-    },
-    [props]
-  );
-  const handleLeftClear = (0, import_react.useCallback)(() => handleClear("left"), [handleClear]);
-  const handleRightClear = (0, import_react.useCallback)(() => handleClear("right"), [handleClear]);
-  const onItemSelect = (0, import_react.useCallback)(
-    (direction, selectedKey, checked) => {
-      const holder = direction === "left" ? [...sourceSelectedKeys] : [...targetSelectedKeys];
-      const index = holder.indexOf(selectedKey);
-      if (index > -1) {
-        holder.splice(index, 1);
-      }
-      if (checked) {
-        holder.push(selectedKey);
       }
-      handleSelectChange(direction, holder);
-      if (!props.selectedKeys) {
-        setStateKeys(direction, holder);
-      }
-    },
-    [handleSelectChange, props.selectedKeys, setStateKeys, sourceSelectedKeys, targetSelectedKeys]
-  );
-  const onLeftItemSelect = (0, import_react.useCallback)((selectedKey, checked) => onItemSelect("left", selectedKey, checked), [onItemSelect]);
-  const onRightItemSelect = (0, import_react.useCallback)((selectedKey, checked) => onItemSelect("right", selectedKey, checked), [onItemSelect]);
-  const onRightItemRemove = (0, import_react.useCallback)(
-    (_selectedKeys) => {
-      setStateKeys("right", []);
-      setValue(value.filter((key) => !_selectedKeys.includes(key)));
-      onChange == null ? void 0 : onChange(
-        value.filter((key) => !_selectedKeys.includes(key)),
-        "left",
-        [..._selectedKeys]
-      );
-    },
-    [onChange, setStateKeys, setValue, value]
-  );
-  const handleScroll = (0, import_react.useCallback)(
-    (direction, e) => {
-      onScroll == null ? void 0 : onScroll(direction, e);
-    },
-    [onScroll]
-  );
-  const handleLeftScroll = (0, import_react.useCallback)((e) => handleScroll("left", e), [handleScroll]);
-  const handleRightScroll = (0, import_react.useCallback)((e) => handleScroll("right", e), [handleScroll]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), { [b`customize-list`]: !!children }, is({ disabled }), className), style }, /* @__PURE__ */ import_react.default.createElement(
-    import_List.default,
-    {
-      titleText: titles[0],
-      data: separateDataSource.leftDataSource,
-      filterOption: filterMethod,
-      style: handleListStyle(listStyle, "left"),
-      checkedKeys: sourceSelectedKeys,
-      handleFilter: handleLeftFilter,
-      handleClear: handleLeftClear,
-      onItemSelect: onLeftItemSelect,
-      onItemSelectAll: onLeftItemSelectAll,
-      render,
-      showSearch: filterable,
-      renderList: children,
-      footer,
-      onScroll: handleLeftScroll,
-      disabled,
-      direction: "left",
-      showSelectAll,
-      selectAllLabel: selectAllLabels[0],
-      pagination: mergedPagination,
-      notFoundContent: /* @__PURE__ */ import_react.default.createElement(import_Empty.Empty, { imageSize: 50 }),
-      fieldNames
+      handleSelectChange(direction, mergedCheckedKeys);
+      return mergedCheckedKeys;
+    });
+  }, [handleSelectChange, setStateKeys]);
+  var onLeftItemSelectAll = useCallback(function (_selectedKeys, checkAll, overWrite) {
+    return onItemSelectAll('left', _selectedKeys, checkAll, overWrite);
+  }, [onItemSelectAll]);
+  var onRightItemSelectAll = useCallback(function (_selectedKeys, checkAll, overWrite) {
+    return onItemSelectAll('right', _selectedKeys, checkAll, overWrite);
+  }, [onItemSelectAll]);
+  var handleFilter = useCallback(function (direction, e) {
+    var _props3 = props,
+      onSearch = _props3.onSearch;
+    onSearch === null || onSearch === void 0 || onSearch(direction, e.target.value);
+  }, [props]);
+  var handleLeftFilter = useCallback(function (e) {
+    return handleFilter('left', e);
+  }, [handleFilter]);
+  var handleRightFilter = useCallback(function (e) {
+    return handleFilter('right', e);
+  }, [handleFilter]);
+  var handleClear = useCallback(function (direction) {
+    var _props4 = props,
+      onSearch = _props4.onSearch;
+    onSearch === null || onSearch === void 0 || onSearch(direction, '');
+  }, [props]);
+  var handleLeftClear = useCallback(function () {
+    return handleClear('left');
+  }, [handleClear]);
+  var handleRightClear = useCallback(function () {
+    return handleClear('right');
+  }, [handleClear]);
+  var onItemSelect = useCallback(function (direction, selectedKey, checked) {
+    var holder = direction === 'left' ? _toConsumableArray(sourceSelectedKeys) : _toConsumableArray(targetSelectedKeys);
+    var index = holder.indexOf(selectedKey);
+    if (index > -1) {
+      holder.splice(index, 1);
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_operation.default,
-    {
-      className: b`operation`,
-      rightActive: sourceSelectedKeys.length > 0,
-      rightArrowText: operations[0],
-      moveToRight,
-      leftActive: targetSelectedKeys.length > 0,
-      leftArrowText: operations[1],
-      moveToLeft,
-      style: operationStyle,
-      disabled
+    if (checked) {
+      holder.push(selectedKey);
     }
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_List.default,
-    {
-      titleText: titles[1],
-      data: separateDataSource.rightDataSource,
-      filterOption: filterMethod,
-      style: handleListStyle(listStyle, "right"),
-      checkedKeys: targetSelectedKeys,
-      handleFilter: handleRightFilter,
-      handleClear: handleRightClear,
-      onItemSelect: onRightItemSelect,
-      onItemSelectAll: onRightItemSelectAll,
-      onItemRemove: onRightItemRemove,
-      render,
-      showSearch: filterable,
-      renderList: children,
-      footer,
-      onScroll: handleRightScroll,
-      disabled,
-      direction: "right",
-      showSelectAll,
-      selectAllLabel: selectAllLabels[1],
-      pagination: mergedPagination,
-      notFoundContent: /* @__PURE__ */ import_react.default.createElement(import_Empty.Empty, { imageSize: 50 }),
-      fieldNames
+    handleSelectChange(direction, holder);
+    if (!props.selectedKeys) {
+      setStateKeys(direction, holder);
     }
-  ));
+  }, [handleSelectChange, props.selectedKeys, setStateKeys, sourceSelectedKeys, targetSelectedKeys]);
+  var onLeftItemSelect = useCallback(function (selectedKey, checked) {
+    return onItemSelect('left', selectedKey, checked);
+  }, [onItemSelect]);
+  var onRightItemSelect = useCallback(function (selectedKey, checked) {
+    return onItemSelect('right', selectedKey, checked);
+  }, [onItemSelect]);
+  var onRightItemRemove = useCallback(function (_selectedKeys) {
+    setStateKeys('right', []);
+    setValue(value.filter(function (key) {
+      return !_selectedKeys.includes(key);
+    }));
+    onChange === null || onChange === void 0 || onChange(value.filter(function (key) {
+      return !_selectedKeys.includes(key);
+    }), 'left', _toConsumableArray(_selectedKeys));
+  }, [onChange, setStateKeys, setValue, value]);
+  var handleScroll = useCallback(function (direction, e) {
+    onScroll === null || onScroll === void 0 || onScroll(direction, e);
+  }, [onScroll]);
+  var handleLeftScroll = useCallback(function (e) {
+    return handleScroll('left', e);
+  }, [handleScroll]);
+  var handleRightScroll = useCallback(function (e) {
+    return handleScroll('right', e);
+  }, [handleScroll]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(b(), _defineProperty({}, b(_templateObject || (_templateObject = _taggedTemplateLiteral(["customize-list"]))), !!children), is({
+      disabled: disabled
+    }), className),
+    style: style
+  }, /*#__PURE__*/React.createElement(List, {
+    titleText: titles[0],
+    data: separateDataSource.leftDataSource,
+    filterOption: filterMethod,
+    style: handleListStyle(listStyle, 'left'),
+    checkedKeys: sourceSelectedKeys,
+    handleFilter: handleLeftFilter,
+    handleClear: handleLeftClear,
+    onItemSelect: onLeftItemSelect,
+    onItemSelectAll: onLeftItemSelectAll,
+    render: render,
+    showSearch: filterable,
+    renderList: children,
+    footer: footer,
+    onScroll: handleLeftScroll,
+    disabled: disabled,
+    direction: 'left',
+    showSelectAll: showSelectAll,
+    selectAllLabel: selectAllLabels[0],
+    pagination: mergedPagination,
+    notFoundContent: /*#__PURE__*/React.createElement(Empty, {
+      imageSize: 50
+    }),
+    fieldNames: fieldNames
+    // {...omit(props, ['data', 'onScroll'])}
+  }), /*#__PURE__*/React.createElement(Operation, {
+    className: b(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["operation"]))),
+    rightActive: sourceSelectedKeys.length > 0,
+    rightArrowText: operations[0],
+    moveToRight: moveToRight,
+    leftActive: targetSelectedKeys.length > 0,
+    leftArrowText: operations[1],
+    moveToLeft: moveToLeft,
+    style: operationStyle,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(List, {
+    titleText: titles[1],
+    data: separateDataSource.rightDataSource,
+    filterOption: filterMethod,
+    style: handleListStyle(listStyle, 'right'),
+    checkedKeys: targetSelectedKeys,
+    handleFilter: handleRightFilter,
+    handleClear: handleRightClear,
+    onItemSelect: onRightItemSelect,
+    onItemSelectAll: onRightItemSelectAll,
+    onItemRemove: onRightItemRemove,
+    render: render,
+    showSearch: filterable,
+    renderList: children,
+    footer: footer,
+    onScroll: handleRightScroll,
+    disabled: disabled,
+    direction: 'right',
+    showSelectAll: showSelectAll,
+    selectAllLabel: selectAllLabels[1],
+    pagination: mergedPagination,
+    notFoundContent: /*#__PURE__*/React.createElement(Empty, {
+      imageSize: 50
+    }),
+    fieldNames: fieldNames
+    // {...omit(props, ['data', 'onScroll'])}
+    // {...locale}
+  }));
 };
-Transfer.displayName = "Transfer";
-var Transfer_default = Transfer;
+Transfer.displayName = 'Transfer';
+export default Transfer;