@chaoswise/ui 3.0.6 → 3.0.7

package/lib/QuickTransfer/index.js

@@ -0,0 +1,938 @@
+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); }
+import _Empty from "@chaoswise/ui/lib/Empty";
+import _CWTree from "@chaoswise/ui/lib/CWTree";
+import _CWTable from "@chaoswise/ui/lib/CWTable";
+import _Checkbox from "@chaoswise/ui/lib/Checkbox";
+import _TooltipText from "@chaoswise/ui/lib/TooltipText";
+import _Input from "@chaoswise/ui/lib/Input";
+var _excluded = ["onChange", "showLeftSearch", "value"],
+  _excluded2 = ["onChange", "showRightSearch", "value"],
+  _excluded3 = ["checkStrictly", "defaultExpandAll", "treeSelect", "onCheck"],
+  _excluded4 = ["columns", "renderColumns", "searchColumns", "defaultExpandAllRows", "rowSelection"],
+  _excluded5 = ["onSelect", "onChange", "onSelectAll"],
+  _excluded6 = ["onChange"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : 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); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useState, useEffect, Fragment, forwardRef, useMemo } from "react";
+import { filterTreeByName, filterTree, filterTreeByNameTable, filterObj, getNotSelectKeys, getKeysAndTitle, getBottomKey, renderLeafNodetree, renderRelationNode, createTitle } from "./utils";
+import classnames from "classnames";
+import Drag from "./Drag";
+import PropTypes from "prop-types";
+import { isEqual } from "@chaoswise/utils";
+import NoDrag from "./NoDrag";
+import { createTree } from "../CWTree/utils";
+import { useIntl } from "../locales";
+import useStyle from "./index.style";
+var Search = _Input.Search;
+
+/**
+ * 满足公司业务需求的穿梭框，实现点击左侧选中即出现在右侧列表，右侧列表可拖拽顺序
+ */
+
+var QuickTransfer = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? "list" : _props$type,
+    _props$tableProps = props.tableProps,
+    tableProps = _props$tableProps === void 0 ? {} : _props$tableProps,
+    _props$dragList = props.dragList,
+    dragList = _props$dragList === void 0 ? false : _props$dragList,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    _props$treeProps = props.treeProps,
+    treeProps = _props$treeProps === void 0 ? {} : _props$treeProps,
+    _props$searchProps = props.searchProps,
+    searchProps = _props$searchProps === void 0 ? {} : _props$searchProps,
+    leftFooter = props.leftFooter,
+    rightFooter = props.rightFooter,
+    _props$leftContentOpt = props.leftContentOption,
+    leftContentOption = _props$leftContentOpt === void 0 ? {} : _props$leftContentOpt,
+    rightContentRender = props.rightContentRender,
+    _props$render = props.render,
+    render = _props$render === void 0 ? function (text) {
+      return /*#__PURE__*/React.createElement(_TooltipText, null, /*#__PURE__*/React.createElement("span", null, text));
+    } : _props$render,
+    _props$handlePreviewL = props.handlePreviewList,
+    _handlePreviewList = _props$handlePreviewL === void 0 ? function () {} : _props$handlePreviewL,
+    getTargetKeys = props.getTargetKeys,
+    targetKeys = props.targetKeys,
+    leftHeader = props.leftHeader,
+    _props$rightHeader = props.rightHeader,
+    rightHeader = _props$rightHeader === void 0 ? true : _props$rightHeader,
+    _props$leftStyle = props.leftStyle,
+    leftStyle = _props$leftStyle === void 0 ? {} : _props$leftStyle,
+    _props$rightStyle = props.rightStyle,
+    rightStyle = _props$rightStyle === void 0 ? {} : _props$rightStyle,
+    _props$division = props.division,
+    division = _props$division === void 0 ? true : _props$division,
+    _props$divisionStyle = props.divisionStyle,
+    divisionStyle = _props$divisionStyle === void 0 ? {} : _props$divisionStyle,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    transferWrapperClassName = props.transferWrapperClassName,
+    _props$useDndProvider = props.useDndProvider,
+    useDndProvider = _props$useDndProvider === void 0 ? true : _props$useDndProvider,
+    _props$showBorder = props.showBorder,
+    showBorder = _props$showBorder === void 0 ? false : _props$showBorder,
+    _props$searchOption = props.searchOption,
+    searchOption = _props$searchOption === void 0 ? {} : _props$searchOption,
+    _props$caseSensitive = props.caseSensitive,
+    caseSensitive = _props$caseSensitive === void 0 ? false : _props$caseSensitive,
+    _props$isHoverSwitchi = props.isHoverSwitching,
+    isHoverSwitching = _props$isHoverSwitchi === void 0 ? true : _props$isHoverSwitchi;
+  var _searchOption$leftSea = searchOption.leftSearchOption,
+    _searchOption$leftSea2 = _searchOption$leftSea === void 0 ? {} : _searchOption$leftSea,
+    _searchOption$leftSea3 = _searchOption$leftSea2.onChange,
+    onLeftSearchChange = _searchOption$leftSea3 === void 0 ? function () {} : _searchOption$leftSea3,
+    _searchOption$leftSea4 = _searchOption$leftSea2.showLeftSearch,
+    showLeftSearch = _searchOption$leftSea4 === void 0 ? true : _searchOption$leftSea4,
+    searchValueLeft = _searchOption$leftSea2.value,
+    restLeftSearchProps = _objectWithoutProperties(_searchOption$leftSea2, _excluded),
+    _searchOption$rightSe = searchOption.rightSearchOption,
+    _searchOption$rightSe2 = _searchOption$rightSe === void 0 ? {} : _searchOption$rightSe,
+    _searchOption$rightSe3 = _searchOption$rightSe2.onChange,
+    onRightSearchChange = _searchOption$rightSe3 === void 0 ? function () {} : _searchOption$rightSe3,
+    _searchOption$rightSe4 = _searchOption$rightSe2.showRightSearch,
+    showRightSearch = _searchOption$rightSe4 === void 0 ? false : _searchOption$rightSe4,
+    searchValueRight = _searchOption$rightSe2.value,
+    restRightSearchProps = _objectWithoutProperties(_searchOption$rightSe2, _excluded2);
+  var allSelectedTextRender = leftContentOption.allSelectedTextRender;
+  var _treeProps$checkStric = treeProps.checkStrictly,
+    checkStrictly = _treeProps$checkStric === void 0 ? true : _treeProps$checkStric,
+    _treeProps$defaultExp = treeProps.defaultExpandAll,
+    defaultExpandAll = _treeProps$defaultExp === void 0 ? true : _treeProps$defaultExp,
+    _treeProps$treeSelect = treeProps.treeSelect,
+    treeSelect = _treeProps$treeSelect === void 0 ? "leafNode" : _treeProps$treeSelect,
+    _treeProps$onCheck = treeProps.onCheck,
+    _onCheck = _treeProps$onCheck === void 0 ? function () {} : _treeProps$onCheck,
+    treeRest = _objectWithoutProperties(treeProps, _excluded3);
+  //判断父节点选中能否到右侧列表，如果能设置父子节点关联
+  var newCheckStrictly = true;
+  if (treeSelect === "leafNode") {
+    newCheckStrictly = false;
+  } else {
+    newCheckStrictly = true;
+  }
+  var _tableProps$columns = tableProps.columns,
+    columns = _tableProps$columns === void 0 ? [] : _tableProps$columns,
+    renderColumns = tableProps.renderColumns,
+    searchColumns = tableProps.searchColumns,
+    _tableProps$defaultEx = tableProps.defaultExpandAllRows,
+    defaultExpandAllRows = _tableProps$defaultEx === void 0 ? true : _tableProps$defaultEx,
+    _tableProps$rowSelect = tableProps.rowSelection,
+    rowSelection = _tableProps$rowSelect === void 0 ? {} : _tableProps$rowSelect,
+    tableRest = _objectWithoutProperties(tableProps, _excluded4);
+  var _rowSelection$onSelec = rowSelection.onSelect,
+    _onSelect = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
+    _rowSelection$onChang = rowSelection.onChange,
+    _onTableChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
+    _rowSelection$onSelec2 = rowSelection.onSelectAll,
+    _onSelectAll = _rowSelection$onSelec2 === void 0 ? function () {} : _rowSelection$onSelec2,
+    rowSelectionRest = _objectWithoutProperties(rowSelection, _excluded5);
+  var _useStyle = useStyle("cw-transfer-main"),
+    _useStyle2 = _slicedToArray(_useStyle, 3),
+    wrapCSSVar = _useStyle2[0],
+    hashId = _useStyle2[1],
+    cssVarCls = _useStyle2[2];
+  var intl = useIntl();
+  //  初始数据源以及搜索之后的数据源
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    data = _useState2[0],
+    setData = _useState2[1];
+  //右侧列表的数据
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    checkValue = _useState4[0],
+    setCheckValue = _useState4[1];
+
+  //选中的key
+  var _useState5 = useState(targetKeys || []),
+    _useState6 = _slicedToArray(_useState5, 2),
+    checkedKeys = _useState6[0],
+    setCheckedKeys = _useState6[1];
+  // 列表左侧判断全选状态实际选中的key,重新搜索之后会改变
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    listCheckedKeys = _useState8[0],
+    setListCheckedKeys = _useState8[1];
+  // 列表穿梭全选状态
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    checkAll = _useState10[0],
+    setCheckAll = _useState10[1];
+  // 全选按钮效果
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    indeterminate = _useState12[0],
+    setIndeterminate = _useState12[1];
+
+  // 保存搜索结果
+  var _useState13 = useState(""),
+    _useState14 = _slicedToArray(_useState13, 2),
+    saveSearchValueLeft = _useState14[0],
+    setSaveSearchValueLeft = _useState14[1];
+  var _useState15 = useState(""),
+    _useState16 = _slicedToArray(_useState15, 2),
+    saveSearchValueRight = _useState16[0],
+    setSaveSearchValueRight = _useState16[1];
+  //表格情况下右侧列表渲染的列
+  var newRenderColumns = [];
+  var newSearchColumns = [];
+  if (type === "table") {
+    // 处理type为table时的搜索高亮效果
+    // 外面无render传入时默认搜索高亮处理，有render外面自己处理
+    columns = columns.map(function (item) {
+      return !item.render ? _objectSpread(_objectSpread({}, item), {}, {
+        render: function render(text) {
+          text = String(text);
+          var index = text.toLowerCase().indexOf(saveSearchValueLeft === null || saveSearchValueLeft === void 0 ? void 0 : saveSearchValueLeft.toLowerCase());
+          var beforeTitle = text.substr(0, index);
+          var searchValue = text.substr(index, saveSearchValueLeft === null || saveSearchValueLeft === void 0 ? void 0 : saveSearchValueLeft.length);
+          var afterTitle = text.substr(index + (saveSearchValueLeft === null || saveSearchValueLeft === void 0 ? void 0 : saveSearchValueLeft.length));
+          return index > -1 ? /*#__PURE__*/React.createElement("span", null, beforeTitle, /*#__PURE__*/React.createElement("span", {
+            style: {
+              color: "#F5222D"
+            }
+          }, searchValue), afterTitle) : text;
+        }
+      }) : item;
+    });
+    //默认渲染第一列
+    if (!renderColumns) {
+      newRenderColumns = columns.length > 0 && [columns[0].dataIndex] || [];
+    }
+    //表格情况下搜索范围，是按照某一列搜索还是全部列搜索，默认搜索全部列
+    if (!searchColumns) {
+      columns.length > 0 && columns.forEach(function (item) {
+        newSearchColumns.push(item.dataIndex);
+      });
+    }
+  }
+  useEffect(function () {
+    // 设置数据源
+    setData(dataSource);
+    if (type === "list") {
+      if (targetKeys) {
+        setListCheckedStyle(targetKeys, dataSource);
+      }
+    }
+  }, [dataSource]);
+  useEffect(function () {
+    //传入的当前选中的key
+    if (targetKeys) {
+      setCheckedKeys(function (pre) {
+        if (isEqual(targetKeys, pre)) {
+          return pre;
+        }
+        return targetKeys;
+      });
+      //回显列表项
+      if (type === "list") {
+        var finalCheckValue = [];
+        targetKeys.forEach(function (item) {
+          var findValue = dataSource.find(function (i) {
+            return i.key == item;
+          });
+          findValue && finalCheckValue.push(findValue);
+        });
+        finalCheckValue = finalCheckValue.filter(function (i) {
+          return i.disabled;
+        }).concat(finalCheckValue.filter(function (i) {
+          return !i.disabled;
+        }));
+        setCheckValue(finalCheckValue);
+      }
+      //回显table
+      if (type === "table") {
+        setCheckValue(renderRelationNode(targetKeys, dataSource));
+      }
+      //回显树
+      if (type === "tree") {
+        //根据父子节点不同的关联关系设置右侧的列表
+        if (treeSelect === "leafNode") {
+          setCheckValue(renderLeafNodetree(targetKeys, createTree(renderTreeData(dataSource), "", undefined, undefined)));
+        } else {
+          setCheckValue(renderRelationNode(targetKeys, dataSource));
+        }
+      }
+    }
+  }, [targetKeys, dataSource]);
+  //触发前端自定义搜索
+  useEffect(function () {
+    if (searchValueLeft !== undefined) {
+      handleSearch(searchValueLeft);
+      // 初始化搜索结果
+      setSaveSearchValueLeft(searchValueLeft);
+    }
+    if (searchValueRight !== undefined) {
+      // 初始化搜索结果
+      setSaveSearchValueRight(searchValueRight);
+    }
+  }, [searchValueLeft, searchValueRight]);
+  //获取左侧列表选中的key
+  useEffect(function () {
+    if (getTargetKeys) {
+      getTargetKeys(checkedKeys);
+    }
+  }, [checkedKeys]);
+  var isMath = function isMath(title, searchValue) {
+    if (!searchValue) {
+      return true;
+    }
+    if (typeof title === "string" && typeof searchValue === "string") {
+      return title.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+    }
+    return false;
+  };
+
+  // 内置的右侧搜索框内容改变触发搜索
+  var handleRightSearch = function handleRightSearch(searchValue) {
+    var newCheckedValue = [];
+    if (type === "list") {
+      checkValue.forEach(function (item, index) {
+        if (isMath(item.title, searchValue)) {
+          newCheckedValue.push(checkValue[index]);
+        }
+      });
+    }
+    if (type === "tree") {
+      newCheckedValue = filterTree(checkValue, searchValue);
+    }
+    if (type === "table") {
+      newCheckedValue = filterTreeByNameTable(checkValue, searchValue, renderColumns ? renderColumns : newRenderColumns);
+    }
+    return newCheckedValue;
+  };
+  var searchCheckedValue = useMemo(function () {
+    return type === "tree" && treeSelect === "leafNode" ? handleRightSearch(saveSearchValueRight).filter(function (i) {
+      return Boolean(i.isLeaf);
+    }) : handleRightSearch(saveSearchValueRight);
+  }, [checkValue, saveSearchValueRight, type, treeSelect]);
+  // type为list下全选框按钮的样式统一处理
+  var setListCheckedStyle = function setListCheckedStyle(listCheckedKeys, dataSource) {
+    // 设置列表左侧判断全选状态实际选中的key,重新搜索之后会改变
+    setListCheckedKeys(listCheckedKeys);
+    // 设置全选按钮效果
+    setIndeterminate(!!listCheckedKeys.length && listCheckedKeys.length < dataSource.length);
+    setCheckAll(listCheckedKeys.length === dataSource.length);
+  };
+  // 左侧搜索框输入触发
+  var handleSearch = function handleSearch(searchValue) {
+    var newData = [];
+    var listCheckedKeys_ = [];
+    if (type === "list") {
+      dataSource.forEach(function (item, index) {
+        if (isMath(item.title, searchValue)) {
+          newData.push(dataSource[index]);
+        }
+      });
+      listCheckedKeys_ = newData.filter(function (item) {
+        return checkValue.find(function (i) {
+          return i.key == item.key;
+        });
+      }).map(function (item) {
+        return item.key;
+      });
+      setData(newData);
+      setListCheckedStyle(listCheckedKeys_, newData);
+    }
+    // if (type === "tree") {
+    //     newData = filterTree(dataSource, searchValue);
+    //     setData(newData);
+    // }
+    if (type === "table") {
+      newData = filterTreeByNameTable(dataSource, searchValue, searchColumns ? searchColumns : newSearchColumns);
+      setData(newData);
+    }
+  };
+
+  //type为list 左侧列表选中触发的事件
+  var onChangeChecked = function onChangeChecked(e, value) {
+    var target = e.target;
+    //选中
+    var checkValue_ = [];
+    var checkedKeys_ = [];
+    var listCheckedKeys_ = [];
+    if (target.checked) {
+      checkValue_ = filterObj([].concat(_toConsumableArray(checkValue), [value]));
+      checkedKeys_ = checkValue_.map(function (item) {
+        return item.key;
+      });
+      listCheckedKeys_ = [].concat(_toConsumableArray(listCheckedKeys), [value.key]);
+    } else {
+      //未选中
+      checkValue_ = checkValue.filter(function (item) {
+        return !isEqual(item, value);
+      });
+      checkedKeys_ = checkValue_.map(function (item) {
+        return item.key;
+      });
+      listCheckedKeys_ = listCheckedKeys.filter(function (item) {
+        return item !== value.key;
+      });
+    }
+    setCheckValue(checkValue_);
+    setCheckedKeys(checkedKeys_);
+    setListCheckedStyle(listCheckedKeys_, data);
+  };
+  //表格行选择触发的回调
+  var handleRowSelection = _objectSpread({
+    onSelect: function onSelect(record, selected, selectedRows, nativeEvent) {
+      if (selected) {
+        setCheckValue([].concat(_toConsumableArray(checkValue), [record]));
+      } else {
+        setCheckValue(checkValue.filter(function (item) {
+          return item.key !== record.key;
+        }));
+      }
+      _onSelect(record, selected, selectedRows, nativeEvent);
+    },
+    onChange: function onChange(selectedRowKeys, selectedRows) {
+      setCheckedKeys(selectedRowKeys);
+      _onTableChange(selectedRowKeys, selectedRows);
+    },
+    onSelectAll: function onSelectAll(selected, selectedRows, changeRows) {
+      setCheckValue(selectedRows);
+      _onSelectAll(selected, selectedRows, changeRows);
+    },
+    selectedRowKeys: checkedKeys
+  }, rowSelectionRest);
+  //删除右侧列表的某一项
+  var handleDelete = function handleDelete(value) {
+    var checkedKeys_ = [];
+    setCheckValue(checkValue.filter(function (item) {
+      return item !== value;
+    }));
+    checkedKeys_ = checkedKeys.filter(function (item) {
+      return item !== value.key;
+    });
+    setCheckedKeys(checkedKeys_);
+    if (type == "list") {
+      var listCheckedKeys_ = [];
+      listCheckedKeys_ = checkedKeys_.filter(function (item) {
+        return listCheckedKeys.includes(item);
+      });
+      setListCheckedStyle(listCheckedKeys_, data);
+    }
+  };
+  //更新交换后的列表
+  var handlePreviewList = function handlePreviewList(list) {
+    _handlePreviewList(list);
+    setCheckValue(list);
+  };
+  var clearAll = function clearAll() {
+    var newCheckedValue = [];
+    var newCheckedKey = [];
+    newCheckedValue = checkValue.filter(function (i) {
+      return !Boolean(handleRightSearch(saveSearchValueRight).find(function (item) {
+        return item.key == i.key && !item.disabled;
+      }));
+    });
+    newCheckedKey = newCheckedValue.map(function (item) {
+      return item.key;
+    });
+    handlePreviewList(newCheckedValue);
+    setCheckedKeys(newCheckedKey);
+    // 清除所有type为list时全选逻辑
+    if (type === "list") {
+      var newListCheckedKeys = [];
+      newListCheckedKeys = listCheckedKeys.filter(function (item) {
+        return newCheckedKey.includes(item);
+      });
+      setListCheckedStyle(newListCheckedKeys, data);
+    }
+  };
+  var renderTreeData = function renderTreeData(data) {
+    return data.map(function (item) {
+      if (item.children) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          children: renderTreeData(item.children)
+        });
+      } else {
+        return item;
+      }
+    });
+  };
+
+  //树节点选中触发
+  var onCheck = function onCheck(checkedKey, e) {
+    _onCheck(checkedKey, e);
+    var _e$node = e.node,
+      eventKey = _e$node.key,
+      children = _e$node.children,
+      originTitle = _e$node.originTitle,
+      record = _e$node.record;
+    //当前选中的节点和传到右侧列表的的value
+    var newCheckKey = [eventKey];
+    var newCheckValue = [{
+      key: eventKey,
+      title: originTitle
+    }];
+
+    //判断有没有children选中添加
+    if (children && children.length > 0) {
+      newCheckKey = newCheckKey.concat(getNotSelectKeys(children));
+      newCheckValue = newCheckValue.concat(getKeysAndTitle(children));
+    }
+    //父子节点选中不再有关联
+    if (treeSelect === "notRelationNode") {
+      if (e.checked) {
+        setCheckedKeys([].concat(_toConsumableArray(checkedKeys), [eventKey]));
+        setCheckValue([].concat(_toConsumableArray(checkValue), [{
+          key: eventKey,
+          title: originTitle
+        }]));
+      } else {
+        setCheckValue(checkValue.filter(function (item) {
+          return item.key !== eventKey;
+        }));
+        setCheckedKeys(checkedKeys.filter(function (item) {
+          return item !== eventKey;
+        }));
+      }
+    } else if (treeSelect === "relationNode") {
+      //如果被选中,(父节点选中，子节点全部选中，删除右侧列表节点没有父子联动逻辑)
+      if (e.checked) {
+        //排除重复选中
+        var filterKeys = [].concat(_toConsumableArray(checkedKeys), _toConsumableArray(newCheckKey));
+        setCheckedKeys(Array.from(new Set(filterKeys)));
+        var filterValues = [].concat(_toConsumableArray(checkValue), _toConsumableArray(newCheckValue));
+        setCheckValue(filterObj(filterValues));
+      } else {
+        setCheckedKeys(checkedKeys.filter(function (item) {
+          return !newCheckKey.includes(item);
+        }));
+        setCheckValue(checkValue.filter(function (item) {
+          return !newCheckKey.includes(item.key);
+        }));
+      }
+    } else if (treeSelect === "leafNode") {
+      //只有子节点才会被渲染到右侧列表
+      if (e.checked) {
+        //当没有子节点，设置当前节点选中，但不会渲染到右侧列表，因为不是叶子节点
+        if (children && children.length === 0) {
+          setCheckedKeys([].concat(_toConsumableArray(checkedKeys), [eventKey]));
+        } else if (children && children.length > 0) {
+          //当前选中的是父节点，子节点全部被选中，但是只有叶子节点会渲染到列表，避免重复渲染列表，对选中节点和右侧列表去重
+          var bottomKeys = getBottomKey(children);
+          var _filterKeys = [].concat(_toConsumableArray(checkedKeys), _toConsumableArray(bottomKeys.map(function (item) {
+            return item.key;
+          })));
+          setCheckedKeys(Array.from(new Set(_filterKeys)));
+          var _filterValues = [].concat(_toConsumableArray(checkValue), _toConsumableArray(bottomKeys.filter(function (item) {
+            return !item.children;
+          })));
+          setCheckValue(filterObj(_filterValues));
+        } else if (!children) {
+          //当前是叶子节点
+          setCheckedKeys([].concat(_toConsumableArray(checkedKeys), [eventKey]));
+          setCheckValue([].concat(_toConsumableArray(checkValue), [record]));
+        }
+      } else {
+        //取消选中的情况
+        if (children && children.length === 0) {
+          setCheckedKeys(checkedKeys.filter(function (item) {
+            return item !== eventKey;
+          }));
+        } else if (children && children.length > 0) {
+          var _bottomKeys = getBottomKey(children);
+          setCheckedKeys(checkedKeys.filter(function (item) {
+            return !_bottomKeys.map(function (item) {
+              return item.key;
+            }).includes(item);
+          }));
+          setCheckValue(checkValue.filter(function (item) {
+            return !_bottomKeys.map(function (item) {
+              return item.key;
+            }).includes(item.key);
+          }));
+        } else if (!children) {
+          setCheckedKeys(checkedKeys.filter(function (item) {
+            return item !== eventKey;
+          }));
+          setCheckValue(checkValue.filter(function (item) {
+            return item.key !== eventKey;
+          }));
+        }
+      }
+    }
+  };
+  // 左侧搜索框兼容
+  var _searchProps$onChange = searchProps.onChange,
+    onSearchChange = _searchProps$onChange === void 0 ? function () {} : _searchProps$onChange,
+    leftSearchProps = _objectWithoutProperties(searchProps, _excluded6);
+  // 内置的左侧搜索框内容改变触发搜索
+  var showSearchChange = function showSearchChange(e) {
+    onSearchChange && onSearchChange(e);
+    onLeftSearchChange && onLeftSearchChange(e);
+    // 保存搜索结果
+    if (searchValueLeft === undefined) {
+      handleSearch(e.target.value);
+      setSaveSearchValueLeft(e.target.value);
+    }
+  };
+  var showSearchChangeRight = function showSearchChangeRight(e) {
+    onRightSearchChange(e);
+    if (searchValueRight === undefined) {
+      setSaveSearchValueRight(e.target.value);
+    }
+  };
+  // 全选状态改变触发
+  var onCheckAllChange = function onCheckAllChange(e) {
+    var target = e.target;
+    var newCheckedKeys = [];
+    var listCheckedKeys_ = [];
+    var newCheckValue = [];
+    var isChecked = data.filter(function (item) {
+      return !item.disabled;
+    }).length === data.filter(function (item) {
+      return listCheckedKeys.includes(item.key);
+    }).filter(function (item) {
+      return !item.disabled;
+    }).length;
+    if (target.checked && !isChecked) {
+      newCheckValue = filterObj([].concat(_toConsumableArray(checkValue), _toConsumableArray(data.filter(function (item) {
+        return !item.disabled;
+      }))));
+      newCheckedKeys = newCheckValue.map(function (item) {
+        return item.key;
+      });
+      var filterKeys = [].concat(_toConsumableArray(listCheckedKeys), _toConsumableArray(data.filter(function (item) {
+        return !item.disabled;
+      }).map(function (item) {
+        return item.key;
+      })));
+      listCheckedKeys_ = Array.from(new Set(filterKeys));
+    } else {
+      newCheckValue = checkValue.filter(function (item) {
+        return !data.find(function (i) {
+          return i.key == item.key;
+        }) || item.disabled;
+      });
+      newCheckedKeys = newCheckValue.map(function (item) {
+        return item.key;
+      });
+      listCheckedKeys_ = data.filter(function (item) {
+        return listCheckedKeys.includes(item.key);
+      }).filter(function (item) {
+        return item.disabled;
+      }).map(function (item) {
+        return item.key;
+      });
+    }
+    setCheckValue(newCheckValue);
+    setCheckedKeys(newCheckedKeys);
+    setListCheckedStyle(listCheckedKeys_, data);
+  };
+  var allSelectedText = intl.get("aca12e3d-7037-43f5-8fb2-7545ca44955a", {
+    checkedLength: listCheckedKeys.length
+  }).d("全选（{checkedLength}）");
+  // 根据不同的type渲染不同的列表类型，目前支持list tree table
+
+  var getFinalTitle = function getFinalTitle(title) {
+    if (typeof title === "string") {
+      var _createTitle = createTitle(caseSensitive, saveSearchValueLeft, title),
+        index = _createTitle.index,
+        beforeTitle = _createTitle.beforeTitle,
+        afterTitle = _createTitle.afterTitle,
+        searchStr = _createTitle.searchStr;
+      return /*#__PURE__*/React.createElement("span", null, index > -1 ? /*#__PURE__*/React.createElement(React.Fragment, null, beforeTitle, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: "#F5222D"
+        }
+      }, searchStr), afterTitle) : title);
+    }
+    return title;
+  };
+  var transferContent = function transferContent(data) {
+    if (type === "list") {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cw-transfer-left-content-checkbox"
+      }, /*#__PURE__*/React.createElement(_Checkbox, {
+        indeterminate: indeterminate,
+        onChange: onCheckAllChange,
+        checked: checkAll
+      }, allSelectedTextRender ? allSelectedTextRender(listCheckedKeys, data) : allSelectedText), data.map(function (value) {
+        return /*#__PURE__*/React.createElement(_Checkbox, {
+          key: value.key,
+          checked: listCheckedKeys.includes(value.key),
+          onChange: function onChange(e) {
+            return onChangeChecked(e, value);
+          },
+          disabled: value.disabled
+        }, /*#__PURE__*/React.createElement(_TooltipText, {
+          title: value.title,
+          placement: "topLeft"
+        }, getFinalTitle(value.title)));
+      }));
+    }
+    if (type === "table") {
+      return /*#__PURE__*/React.createElement(_CWTable, _extends({
+        dataSource: data,
+        columns: columns,
+        rowSelection: handleRowSelection,
+        defaultExpandAllRows: defaultExpandAllRows,
+        tableWapperClassName: "cw-transfer-table",
+        size: "middle"
+      }, tableRest));
+    }
+    if (type === "tree") {
+      return /*#__PURE__*/React.createElement(_CWTree, _extends({
+        checkable: true,
+        showIcon: false,
+        treeData: renderTreeData(data),
+        onCheck: onCheck,
+        checkedKeys: checkedKeys,
+        checkStrictly: newCheckStrictly,
+        selectable: false,
+        defaultExpandAll: defaultExpandAll,
+        searchValue: saveSearchValueLeft,
+        searchHighlight: true,
+        caseSensitive: caseSensitive
+      }, treeRest));
+    }
+  };
+  // todo - react-dnd：DndProvider的问题拖拽和非拖拽需要分开写
+  var renderRightList = searchCheckedValue.length === 0 ? /*#__PURE__*/React.createElement(_Empty, {
+    description: intl.get("476c8a4c-7d1f-48c8-b645-eeff9f012c80").d("请从左侧列表选择")
+  }) : dragList ? /*#__PURE__*/React.createElement(Drag, {
+    checkValue: searchCheckedValue,
+    handleDelete: handleDelete,
+    type: type,
+    render: render,
+    renderColumns: renderColumns ? renderColumns : newRenderColumns,
+    dragList: dragList,
+    handlePreviewList: handlePreviewList,
+    useDndProvider: useDndProvider,
+    isHoverSwitching: isHoverSwitching
+  }) : /*#__PURE__*/React.createElement(NoDrag, {
+    checkValue: searchCheckedValue,
+    handleDelete: handleDelete,
+    type: type,
+    render: render,
+    renderColumns: renderColumns ? renderColumns : newRenderColumns,
+    dragList: dragList,
+    handlePreviewList: handlePreviewList,
+    useDndProvider: useDndProvider
+  });
+  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
+    className: classnames(hashId, cssVarCls, "cw-transfer-main", {
+      "cw-transfer-main-has-border": showBorder
+    }, transferWrapperClassName),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-left",
+    style: leftStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-left-content"
+  }, leftHeader && /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-left-top"
+  }, leftHeader), showLeftSearch && /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-search"
+  }, /*#__PURE__*/React.createElement(Search, _extends({
+    onChange: showSearchChange,
+    allowClear: true,
+    value: saveSearchValueLeft
+  }, leftSearchProps, restLeftSearchProps))), /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-left-main-wrapper"
+  }, data.length === 0 ? /*#__PURE__*/React.createElement(_Empty, null) : transferContent(data))), leftFooter && /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-footer"
+  }, leftFooter)), division && /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-transfer-division"),
+    style: divisionStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-right",
+    style: rightStyle
+  }, rightContentRender ? rightContentRender(checkValue) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-right-content"
+  }, showRightSearch && /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-search"
+  }, /*#__PURE__*/React.createElement(Search, _extends({
+    onChange: showSearchChangeRight,
+    allowClear: true,
+    value: saveSearchValueRight
+  }, restRightSearchProps))), rightHeader && /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-transfer-right-header", {
+      "cw-transfer-right-header-has-search": showRightSearch
+    })
+  }, typeof rightHeader === "boolean" ? /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-right-header-top"
+  }, /*#__PURE__*/React.createElement("span", null, intl.get("c6914863-5603-4924-a85d-93174e59d02d").d("已添加"), /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginLeft: "8px"
+    }
+  }, "(", searchCheckedValue.length, ")")), Boolean(searchCheckedValue.length) && /*#__PURE__*/React.createElement("span", {
+    onClick: clearAll,
+    className: "cw-transfer-right-header-clear"
+  }, intl.get("53e957d9-8aee-4322-a144-31d4cff11c9f").d("清空"))) : /*#__PURE__*/React.createElement(Fragment, null, rightHeader)), /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-right-main-wrapper"
+  }, renderRightList)), rightFooter && /*#__PURE__*/React.createElement("div", {
+    className: "cw-transfer-footer"
+  }, rightFooter)))));
+});
+QuickTransfer.propTypes = {
+  /**
+   * 搜索框的props属性，指出antd的Input.Search所有属性
+   */
+  searchProps: PropTypes.object,
+  /**
+   * 是否显示右侧列表头部，默认为添加列数量，可自定义传入
+   */
+  rightHeader: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.bool]),
+  /**
+   * 穿梭框左侧的渲染的类型，支持列表，树，表格
+   */
+  type: PropTypes.oneOf(["list", "table", "tree"]),
+  /**
+   * 右侧选中列表是否可拖拽
+   */
+  dragList: PropTypes.bool,
+  /**
+   * 右侧列表开启拖拽后拖拽改变列表顺序触发的函数
+   */
+  handlePreviewList: PropTypes.func,
+  /**
+   * 适用于前端搜索，传入searchValue可使用内置搜索
+   */
+  searchValue: PropTypes.string,
+  /**
+   * 数据源，list遵循[{key: '',title: ''}];
+   * tree遵循[{key: '',title: '',children:[{ key: '',title: '' }]}];
+   * table遵循antd的表格数据类型
+   */
+  dataSource: PropTypes.array,
+  /**
+   * 左侧列表底部自定义
+   */
+  leftFooter: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  /**
+   * 右侧列表底部自定义
+   */
+  rightFooter: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  /**
+   * 支持antd的tree的属性
+   *  不支持传入checkStrictly，此属性会在传入treeSelect类型时自动变化
+   */
+  treeProps: PropTypes.object,
+  /**
+   * 支持@chaoswise/ui的CWtable属性
+   */
+  tableProps: PropTypes.object,
+  /**
+   * tree中额外添加的属性: notRelationNode表示父子节点没有关联关系，点击哪个节点此节点就会穿梭到右面列表;
+   * relationNode代表父节点选中所有的子节点都会被选中，同时选中的节点会穿梭到右面列表，删除哪个节点那个节点就会被删除;
+   * leafNode代表只有叶子节点能被选中，并穿梭到右侧列表(判断一个节点是否是叶子节点:此节点的children是否存在,不存在便为叶子节点);
+   * 默认为leafNode
+   */
+  treeSelect: PropTypes.oneOf(["notRelationNode", "relationNode", "leafNode"]),
+  /**
+   * table中额外添加的属性,点击选中右侧列表要渲染的列,默认为第一列
+   */
+  renderColumns: PropTypes.array,
+  /**
+   * table中额外添加的属性，表格搜素在哪一列搜索，默认搜索所有列的内容
+   */
+  searchColumns: PropTypes.array,
+  /**
+   * 右侧列表自定义渲染的样式
+   * (text) => <a>{text}</a>
+   */
+  render: PropTypes.func,
+  /**
+   * 左侧数据源容器可自定义宽高等样式
+   */
+  leftStyle: PropTypes.object,
+  /**
+   * 右侧数据源容器可自定义宽高等样式
+   */
+  rightStyle: PropTypes.object,
+  /**
+   * 左侧头部自定义
+   */
+  leftHeader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  /**
+   * 展示中间分割线,默认展示
+   */
+  division: PropTypes.bool,
+  /**
+   * 中间分割线的样式，可自定义高度等
+   */
+  divisionStyle: PropTypes.object,
+  /**
+   * 获取左侧列表选中的key
+   */
+  getTargetKeys: PropTypes.func,
+  /**
+   * 设置当前已被选中的项，
+   */
+  targetKeys: PropTypes.array,
+  /**
+   *  设置穿梭框最外部容器的样式
+   */
+  style: PropTypes.object,
+  /**
+   * 是否使用DndProvider，如果自己应用外层有包裹，这里配置false
+   */
+  useDndProvider: PropTypes.bool,
+  /**
+   * 穿梭框外壳是否有边框，默认无
+   */
+  showBorder: PropTypes.bool,
+  /**
+   * 右侧内容区域自定义渲染(checkValue)=>{}
+   */
+  rightContentRender: PropTypes.func,
+  /**
+   * 可配置左侧搜索和右侧搜索内容
+   * searchOption = {
+   *  leftSearchOption : {
+   *    onChange = () => {},
+   *    showLeftSearch = true,
+   *    searchValueLeft,
+   *    ...rest
+   *  },
+   *  rightSearchOption : {
+   *    onChange = () => {},
+   *    showRightSearch = false,
+   *    searchValueRight,
+   *    ...rest
+   *  }
+   * }
+   */
+  searchOption: PropTypes.object,
+  /**
+   * 左侧内容配置项
+   * leftContentOption = {
+   *  allSelectedTextRender(listCheckedKeys,data)
+   * }
+   */
+  leftContentOption: PropTypes.object,
+  /**
+   * 是否区分大小写
+   * leftContentOption = {
+   *  allSelectedTextRender(listCheckedKeys,data)
+   * }
+   */
+  caseSensitive: PropTypes.bool,
+  /**
+   * 开启拖拽后的交互模式，默认为true(true为悬停即交换，false为鼠标松开再交换)
+   */
+  isHoverSwitching: PropTypes.bool
+};
+export default QuickTransfer;