@para-ui/core 3.0.55 → 3.0.56

package/Transfer/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="sortablejs" />
+import { CSSProperties, ReactNode } from 'react';
+import { ItemDataProps } from './box';
+import './style/index.scss';
+/**
+ * @description: 穿梭框
+ * @param className{string} 类名
+ * @param style{string} 样式
+ * @param data{Array} 数据源
+ * @param value{Array} 当前选中的值
+ * @param onChange{Function} 值改变时的回调
+ * @param title{String} 标题
+ *
+ */
+interface TransferProps {
+    className?: string;
+    style?: CSSProperties;
+    data?: Array<ItemDataProps>;
+    value?: Array<string>;
+    onChange?: (data: Array<string>) => void;
+    onSort?: (data: Array<string>) => void;
+    titles?: Array<string>;
+    trim?: boolean;
+    multiple?: boolean;
+    rightIcon?: (item: ItemDataProps) => ReactNode;
+    render?: (data: ItemDataProps) => void;
+    customKey?: string;
+}
+export declare const Transfer: (props: TransferProps) => JSX.Element;
+export default Transfer;
+export type IItemDataProps = ItemDataProps;
+export declare const SSortablejs: typeof import("sortablejs");

package/Transfer/index.js

@@ -0,0 +1,611 @@
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { Button } from '../Button/index.js';
+import NavigateBefore from '@para-ui/icons/Left';
+import Right from '@para-ui/icons/Right';
+import ExpandLess from '@para-ui/icons/Up';
+import Down from '@para-ui/icons/Down';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { Search } from '../Search/index.js';
+import SearchIcon from '@para-ui/icons/Search';
+import AutoTips from '../AutoTips/index.js';
+import Drag from '@para-ui/icons/Drag';
+import { S as Sortable } from '../_verture/sortable.esm-49896035.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '../_verture/index-77f9e0fb.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '@paraview/lib';
+import '@para-ui/core/GlobalContext';
+import '../TextField/index.js';
+import '../Label/index.js';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '@para-ui/icons/CloseCircle';
+import '../Loading/index.js';
+import '../HelperText/index.js';
+import '../_verture/useGlobalProps-1b846a65.js';
+
+var en = {
+  left: 'Left',
+  right: 'Right',
+  allCheck: 'Select All',
+  inVertCheck: 'Invert selection',
+  searchPlaceholder: 'Please enter the search content',
+  leftBtnTips: 'Please check the content on the right first',
+  rightBtnTips: 'Please check the content on the left first'
+};
+
+var zh = {
+  left: '左侧',
+  right: '右侧',
+  allCheck: '全选',
+  inVertCheck: '反选',
+  searchPlaceholder: '请输入搜索内容',
+  leftBtnTips: '请先勾选右侧内容',
+  rightBtnTips: '请先勾选左侧内容'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var useClick = function useClick(callback, doubleCallback) {
+  var clickRef = useRef({
+    clickCount: 0,
+    time: 0,
+    timer: null
+  });
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clickRef.current.clickCount += 1;
+    clickRef.current.time = Date.now();
+    clickRef.current.timer = setTimeout(function () {
+      if (Date.now() - clickRef.current.time <= 200 && clickRef.current.clickCount === 2) {
+        doubleCallback && doubleCallback.apply(null, args);
+      }
+      if (clickRef.current.clickCount === 1) {
+        callback && callback.apply(null, args);
+      }
+      clearTimeout(clickRef.current.timer);
+      clickRef.current.clickCount = 0;
+    }, 200);
+  };
+};
+
+var Box = function Box(props) {
+  var title = props.title,
+    data = props.data,
+    onSearch = props.onSearch,
+    onchange = props.onchange,
+    onMove = props.onMove,
+    queryAll = props.queryAll,
+    inverse = props.inverse,
+    direction = props.direction,
+    fluctuationPosition = props.fluctuationPosition,
+    fluctuationOrther = props.fluctuationOrther,
+    onEndSort = props.onEndSort,
+    multiple = props.multiple,
+    rightIcon = props.rightIcon,
+    style = props.style,
+    customKey = props.customKey;
+  var intl = useFormatMessage('Transfer', localeJson);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    checkCount = _useState2[0],
+    setCheckCount = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disabledCount = _useState4[0],
+    setDisabledCount = _useState4[1];
+  var ref = useRef();
+  useEffect(function () {
+    var arr = [];
+    var count = 0;
+    data.forEach(function (item, index) {
+      if (item.checked && !item.hide) {
+        arr.push(index);
+      }
+      if (item.disabled || item.hide) {
+        count++;
+      }
+    });
+    setDisabledCount(count);
+    setCheckCount(arr);
+  }, [data]);
+  useEffect(function () {
+    if (direction == 'right') {
+      new Sortable(ref.current, {
+        animation: 180,
+        ghostClass: 'blue-background-class',
+        handle: '.handle',
+        onEnd: function onEnd(evt) {
+          onEndSort === null || onEndSort === void 0 ? void 0 : onEndSort(evt.oldIndex, evt.newIndex);
+        }
+      });
+    }
+  }, []);
+  var handler = useClick(function (e, index, item) {
+    if (item.disabled) return;
+    onchange(e, !item.checked, index, direction, multiple);
+  }, function (e, index, item) {
+    if (item === null || item === void 0 ? void 0 : item.disabled) return;
+    onchange(e, true, index, direction, false);
+    onMove(direction === "right" ? 'left' : 'right');
+  });
+  return jsxs("div", Object.assign({
+    className: "box",
+    style: style
+  }, {
+    children: [jsx("div", Object.assign({
+      className: "box-header"
+    }, {
+      children: title
+    })), jsx(Search, {
+      btnType: "inside",
+      placeholder: intl({
+        id: 'searchPlaceholder'
+      }),
+      showBtn: false,
+      rightIcon: jsx(SearchIcon, {}),
+      rightIconExist: true,
+      onChange: function onChange(val) {
+        onSearch(val, direction);
+      },
+      onClickRightIcon: function onClickRightIcon(val) {
+        onSearch(val, direction);
+      },
+      onEnter: function onEnter(event) {
+        var _a;
+        var val = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value) || '';
+        onSearch(val, direction);
+      },
+      allowClear: false
+    }), jsx("div", Object.assign({
+      className: "context",
+      ref: ref
+    }, {
+      children: data.map(function (item, index) {
+        if (item === null || item === void 0 ? void 0 : item.hide) return null;
+        return jsxs("div", Object.assign({
+          className: clsx('item', (item === null || item === void 0 ? void 0 : item.disabled) && 'item-disabled', (item === null || item === void 0 ? void 0 : item.checked) && 'item-checked', fluctuationPosition === index && 'item-fluctuation', fluctuationOrther === index && 'item-fluctuationOrther'),
+          style: (item === null || item === void 0 ? void 0 : item.tagColor) ? {
+            borderLeft: "4px solid ".concat(item.tagColor)
+          } : undefined,
+          onClick: function onClick(e) {
+            handler(e, index, item);
+          }
+        }, {
+          children: [jsx("div", Object.assign({
+            className: 'item-label'
+          }, {
+            children: jsx(AutoTips, {
+              children: (item === null || item === void 0 ? void 0 : item.name) || item[item[customKey]]
+            })
+          })), rightIcon ? jsx("div", Object.assign({
+            className: 'right-icon'
+          }, {
+            children: rightIcon(item)
+          })) : null, direction === 'right' ? jsx("div", Object.assign({
+            className: 'handle'
+          }, {
+            children: jsx(Drag, {})
+          })) : null]
+        }), item[item[customKey]] || item.name);
+      })
+    })), jsxs("div", Object.assign({
+      className: 'footer'
+    }, {
+      children: [jsx(Button, Object.assign({
+        variant: "text",
+        className: "".concat(checkCount.length === data.length - disabledCount && data.length > 0 ? 'btn-on' : ''),
+        onClick: function onClick() {
+          queryAll(checkCount.length !== data.length - disabledCount, direction);
+        }
+      }, {
+        children: intl({
+          id: 'allCheck'
+        })
+      })), jsx(Button, Object.assign({
+        variant: "text",
+        className: "".concat(checkCount.length === 0 || checkCount.length === data.length - disabledCount ? 'btn-off' : ''),
+        disabled: checkCount.length === 0 || checkCount.length === data.length - disabledCount,
+        onClick: function onClick() {
+          inverse(direction);
+        }
+      }, {
+        children: intl({
+          id: 'inVertCheck'
+        })
+      })), jsxs("div", Object.assign({
+        className: "count"
+      }, {
+        children: [checkCount.length, "/", data.length]
+      }))]
+    }))]
+  }));
+};
+var Sortablejs = Sortable;
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n}\n.paraui-v3-transfer .blue-background-class {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box {\n  border-radius: 4px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  overflow: hidden;\n}\n.paraui-v3-transfer .box .box-header {\n  background: rgba(171, 176, 185, 0.12);\n  color: rgb(46, 55, 67);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-left: 10px;\n  height: 36px;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .count {\n  margin: 0 10px 0 0;\n  color: rgb(46, 55, 67);\n  letter-spacing: 1px;\n  margin: 0 16px 0 auto;\n}\n.paraui-v3-transfer .box .context {\n  height: 400px;\n  overflow: auto;\n  scrollbar-base-color: red;\n}\n.paraui-v3-transfer .box .context .item-fluctuation {\n  animation: flucturation 0.4s forwards;\n}\n.paraui-v3-transfer .box .context .item-fluctuationOrther {\n  animation: flucturationOrther 0.5s forwards;\n}\n.paraui-v3-transfer .box .context .item {\n  padding: 0px 8px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.paraui-v3-transfer .box .context .item.item-checked {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item.item-checked:hover {\n  background-color: rgba(54, 102, 214, 0.05) !important;\n}\n.paraui-v3-transfer .box .context .item.item-checked > .item-label {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .context .item > .item-label {\n  margin-left: 8px;\n  flex: 1;\n  overflow: hidden;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-transfer .box .context .item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-transfer .box .context .item.item-disabled:hover {\n  background: inherit;\n  cursor: no-drop;\n}\n.paraui-v3-transfer .box .context .item.item-disabled > .item-label {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-transfer .box .context .item .handle {\n  margin-left: 14px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v3-transfer .box .context .item .handle svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-transfer .box .context .item .handle:hover {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item .handle:hover svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-transfer .box .text-field-content {\n  border: none;\n  border-radius: 0;\n  border-bottom: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer {\n  display: flex;\n  align-items: center;\n  border-top: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer .btn-on {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .box .footer .btn-off {\n  color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-transfer .box .footer button {\n  color: rgb(46, 55, 67);\n  padding: 0 0 0 16px;\n}\n.paraui-v3-transfer .box .footer button:hover {\n  color: #3666D6;\n}\n.paraui-v3-transfer ::-webkit-scrollbar-thumb {\n  border-radius: 4px;\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn {\n  display: flex;\n  height: 500px;\n  flex-direction: column;\n  justify-content: center;\n  margin: 0 24px;\n}\n.paraui-v3-transfer .moveBtn > button:hover {\n  color: white;\n  background: rgb(54, 102, 214);\n}\n.paraui-v3-transfer .moveBtn .btn-left {\n  margin-top: 20px;\n}\n\n@keyframes flucturation {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(36px);\n  }\n}\n@keyframes flucturationOrther {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-36px);\n  }\n}";
+styleInject(css_248z);
+
+var Transfer = function Transfer(props) {
+  var _a, _b, _c, _d;
+  var intl = useFormatMessage('Transfer', localeJson);
+  var _props$data = props.data,
+    data = _props$data === void 0 ? [] : _props$data,
+    value = props.value,
+    _props$customKey = props.customKey,
+    customKey = _props$customKey === void 0 ? 'key' : _props$customKey,
+    onChange = props.onChange,
+    _props$titles = props.titles,
+    titles = _props$titles === void 0 ? [intl({
+      id: 'left'
+    }), intl({
+      id: 'right'
+    })] : _props$titles,
+    className = props.className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {
+      width: '298px'
+    } : _props$style,
+    onSort = props.onSort,
+    _props$trim = props.trim,
+    trim = _props$trim === void 0 ? false : _props$trim,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? true : _props$multiple,
+    rightIcon = props.rightIcon,
+    _props$render = props.render,
+    render = _props$render === void 0 ? function (item) {} : _props$render;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    transData = _useState2[0],
+    setTransData = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    leftData = _useState4[0],
+    setLeftData = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rightData = _useState6[0],
+    setRightData = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    leftCount = _useState8[0],
+    setLeftCount = _useState8[1];
+  var _useState9 = useState([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    rightCount = _useState10[0],
+    setRightCount = _useState10[1];
+  var _useState11 = useState(),
+    _useState12 = _slicedToArray(_useState11, 2),
+    fluctuationPosition = _useState12[0];
+    _useState12[1];
+  var _useState13 = useState(),
+    _useState14 = _slicedToArray(_useState13, 2),
+    fluctuationOrther = _useState14[0];
+    _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    animationsLock = _useState16[0],
+    setAnimationLock = _useState16[1];
+  var onchange = useCallback(function (e, bol, index, direction, multiple) {
+    if (direction === 'left') {
+      !multiple && leftData.forEach(function (item) {
+        return item.checked = false;
+      });
+      leftData[index].checked = bol;
+      setLeftData(_toConsumableArray(leftData));
+    } else {
+      !multiple && rightData.forEach(function (item) {
+        return item.checked = false;
+      });
+      rightData[index].checked = bol;
+      setRightData(_toConsumableArray(rightData));
+    }
+  }, [leftData, rightData]);
+  var queryAll = useCallback(function (checked, direction) {
+    if (direction === 'left') {
+      leftData.forEach(function (item) {
+        if (!item.disabled && !item.hide) item.checked = checked;
+      });
+      setLeftData(_toConsumableArray(leftData));
+    } else {
+      rightData.forEach(function (item) {
+        if (!item.disabled && !item.hide) item.checked = checked;
+      });
+      setRightData(_toConsumableArray(rightData));
+    }
+  }, [leftData, rightData]);
+  var inverse = useCallback(function (direction) {
+    if (direction === 'left') {
+      leftData.forEach(function (item) {
+        if (!item.disabled && !item.hide) item.checked = !item.checked;
+      });
+      setLeftData(_toConsumableArray(leftData));
+    } else {
+      rightData.forEach(function (item) {
+        if (!item.disabled && !item.hide) item.checked = !item.checked;
+      });
+      setRightData(_toConsumableArray(rightData));
+    }
+  }, [leftData, rightData]);
+  var onMove = function onMove(direction) {
+    var newData = [];
+    if (direction === 'left') {
+      newData = _toConsumableArray(rightData);
+      newData.forEach(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.checked) && !(item === null || item === void 0 ? void 0 : item.hide)) {
+          item.checked = false;
+          leftData.push(item);
+          rightData.splice(rightData.indexOf(item), 1);
+        }
+      });
+    } else {
+      newData = _toConsumableArray(leftData);
+      newData.forEach(function (item) {
+        if ((item === null || item === void 0 ? void 0 : item.checked) && !(item === null || item === void 0 ? void 0 : item.hide)) {
+          item.checked = false;
+          rightData.push(item);
+          leftData.splice(leftData.indexOf(item), 1);
+        }
+      });
+    }
+    setLeftData(_toConsumableArray(leftData));
+    setRightData(_toConsumableArray(rightData));
+    var rArr = [];
+    rightData.forEach(function (item) {
+      rArr.push(item[customKey]);
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(rArr);
+  };
+  // 上下移动
+  var fluctuation = function fluctuation(direction) {
+    setAnimationLock(true);
+    console.log(rightCount);
+    if (direction == 'up') {
+      // setFluctuationPosition(rightCount[0] - 1)
+      // setFluctuationOrther(rightCount[0])
+      // setTimeout(() => {
+      setRightData(function (pre) {
+        // setFluctuationPosition(undefined)
+        // setFluctuationOrther(undefined)
+        rightCount.forEach(function (item) {
+          pre.splice.apply(pre, [item - 1, 0].concat(_toConsumableArray(pre.splice(item, 1))));
+        });
+        setAnimationLock(false);
+        var rArr = [];
+        pre.forEach(function (item) {
+          rArr.push(item[customKey]);
+        });
+        onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
+        onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
+        return _toConsumableArray(pre);
+      });
+      // }, 400)
+    } else {
+      // setFluctuationPosition(rightCount[0])
+      // setFluctuationOrther(rightCount[0] + 1)
+      // setTimeout(() => {
+      setRightData(function (pre) {
+        // setFluctuationPosition(undefined)
+        // setFluctuationOrther(undefined)
+        rightCount.reverse().forEach(function (item) {
+          pre.splice.apply(pre, [item + 1, 0].concat(_toConsumableArray(pre.splice(item, 1))));
+        });
+        setAnimationLock(false);
+        var rArr = [];
+        pre.forEach(function (item) {
+          rArr.push(item[customKey]);
+        });
+        onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
+        onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
+        return _toConsumableArray(pre);
+      });
+      // }, 400)
+    }
+  };
+
+  var onSearch = function onSearch(e, direction) {
+    var str = trim ? e.toUpperCase().trim() : e.toUpperCase();
+    if (direction === 'left') {
+      leftData.forEach(function (item) {
+        item.hide = false;
+        var name = (item.name || '').toUpperCase();
+        var description = (item.description || '').toUpperCase();
+        if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
+          item.hide = true;
+        }
+      });
+      setLeftData(_toConsumableArray(leftData));
+    } else {
+      rightData.filter(function (item) {
+        item.hide = false;
+        var name = (item.name || '').toUpperCase();
+        var description = (item.description || '').toUpperCase();
+        if (!(name.indexOf(str) !== -1 || description.indexOf(str) !== -1)) {
+          item.hide = true;
+        }
+      });
+      setRightData(_toConsumableArray(rightData));
+    }
+  };
+  var onEndSort = useCallback(function (oldIndex, newIndex) {
+    setRightData(function (pre) {
+      pre.splice.apply(pre, [newIndex, 0].concat(_toConsumableArray(pre.splice(oldIndex, 1))));
+      var rArr = [];
+      pre.forEach(function (item) {
+        rArr.push(item[customKey]);
+      });
+      onSort === null || onSort === void 0 ? void 0 : onSort([].concat(rArr));
+      onChange === null || onChange === void 0 ? void 0 : onChange([].concat(rArr));
+      return _toConsumableArray(pre);
+    });
+  }, []);
+  useEffect(function () {
+    if (data.length) {
+      var _leftData = {};
+      data.forEach(function (item) {
+        var key = item[customKey];
+        render(item);
+        _leftData[key] = item;
+      });
+      setTransData(Object.assign({}, _leftData));
+    }
+  }, [data]);
+  useEffect(function () {
+    var rData = [];
+    var lData = [];
+    value === null || value === void 0 ? void 0 : value.forEach(function (item) {
+      if (transData[item]) {
+        rData.push(transData[item]);
+        delete transData[item];
+      }
+    });
+    for (var key in transData) {
+      lData.push(transData[key]);
+    }
+    setRightData([].concat(rData));
+    setLeftData([].concat(lData));
+  }, [value, transData]);
+  useEffect(function () {
+    var arr = [];
+    leftData.forEach(function (item, index) {
+      if (item.checked && !item.hide) {
+        arr.push(index);
+      }
+    });
+    setLeftCount(arr);
+    var rArr = [];
+    rightData.forEach(function (item, index) {
+      if (item.checked && !item.hide) {
+        rArr.push(index);
+      }
+    });
+    setRightCount(rArr);
+  }, [leftData, rightData]);
+  return jsxs("div", Object.assign({
+    className: clsx("".concat($prefixCls, "-transfer"), className)
+  }, {
+    children: [jsx(Box, {
+      title: titles[0],
+      queryAll: queryAll,
+      data: leftData,
+      style: style,
+      direction: "left",
+      customKey: customKey,
+      rightIcon: rightIcon,
+      onchange: onchange,
+      multiple: multiple,
+      onMove: onMove,
+      inverse: inverse,
+      onSearch: onSearch
+    }), jsxs("div", Object.assign({
+      className: "moveBtn"
+    }, {
+      children: [jsx(Button.IconButton, Object.assign({
+        className: 'btn btn-right',
+        variant: 'outlined',
+        disabled: leftCount.length <= 0,
+        toolTipTitle: leftCount.length <= 0 ? intl({
+          id: 'rightBtnTips'
+        }) : '',
+        TooltipProps: {
+          arrow: false,
+          placement: 'bottomRight'
+        },
+        onClick: function onClick() {
+          onMove("right");
+        }
+      }, {
+        children: jsx(Right, {})
+      })), jsx(Button.IconButton, Object.assign({
+        className: 'btn btn-left',
+        variant: 'outlined',
+        disabled: rightCount.length <= 0 || ((_a = rightData[0]) === null || _a === void 0 ? void 0 : _a.checked) || animationsLock,
+        toolTipTitle: rightCount.length <= 0 || ((_b = rightData[0]) === null || _b === void 0 ? void 0 : _b.checked) ? intl({
+          id: 'leftBtnTips'
+        }) : '',
+        TooltipProps: {
+          arrow: false,
+          placement: 'bottomRight'
+        },
+        onClick: function onClick() {
+          fluctuation('up');
+        }
+      }, {
+        children: jsx(ExpandLess, {})
+      })), jsx(Button.IconButton, Object.assign({
+        className: 'btn btn-left',
+        variant: 'outlined',
+        disabled: rightCount.length <= 0 || ((_c = rightData[rightData.length - 1]) === null || _c === void 0 ? void 0 : _c.checked) || animationsLock,
+        toolTipTitle: rightCount.length <= 0 || ((_d = rightData[rightData.length - 1]) === null || _d === void 0 ? void 0 : _d.checked) ? intl({
+          id: 'leftBtnTips'
+        }) : '',
+        TooltipProps: {
+          arrow: false,
+          placement: 'bottomRight'
+        },
+        onClick: function onClick() {
+          fluctuation('down');
+        }
+      }, {
+        children: jsx(Down, {})
+      })), jsx(Button.IconButton, Object.assign({
+        className: 'btn btn-left',
+        variant: 'outlined',
+        disabled: rightCount.length <= 0,
+        toolTipTitle: rightCount.length <= 0 ? intl({
+          id: 'leftBtnTips'
+        }) : '',
+        TooltipProps: {
+          arrow: false,
+          placement: 'bottomRight'
+        },
+        onClick: function onClick() {
+          onMove('left');
+        }
+      }, {
+        children: jsx(NavigateBefore, {})
+      }))]
+    })), jsx(Box, {
+      title: titles[1],
+      queryAll: queryAll,
+      data: rightData,
+      style: style,
+      direction: "right",
+      customKey: customKey,
+      rightIcon: rightIcon,
+      onchange: onchange,
+      multiple: multiple,
+      onMove: onMove,
+      inverse: inverse,
+      fluctuationPosition: fluctuationPosition,
+      fluctuationOrther: fluctuationOrther,
+      onEndSort: onEndSort,
+      onSearch: onSearch
+    })]
+  }));
+};
+var SSortablejs = Sortablejs;
+
+export { SSortablejs, Transfer, Transfer as default };

package/Transfer/lang/en_US.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    left: string;
+    right: string;
+    allCheck: string;
+    inVertCheck: string;
+    searchPlaceholder: string;
+    leftBtnTips: string;
+    rightBtnTips: string;
+};
+export default _default;

package/Transfer/lang/index.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    zh: {
+        left: string;
+        right: string;
+        allCheck: string;
+        inVertCheck: string;
+        searchPlaceholder: string;
+        leftBtnTips: string;
+        rightBtnTips: string;
+    };
+    en: {
+        left: string;
+        right: string;
+        allCheck: string;
+        inVertCheck: string;
+        searchPlaceholder: string;
+        leftBtnTips: string;
+        rightBtnTips: string;
+    };
+};
+export default _default;

package/Transfer/lang/zh_CN.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    left: string;
+    right: string;
+    allCheck: string;
+    inVertCheck: string;
+    searchPlaceholder: string;
+    leftBtnTips: string;
+    rightBtnTips: string;
+};
+export default _default;

package/Transfer/useClick.d.ts

@@ -0,0 +1,3 @@
+type Iclick = Function;
+export declare const useClick: (callback: Iclick, doubleCallback: Function) => (...args: unknown[]) => void;
+export {};