@para-ui/core 3.0.19 → 3.0.21

package/SingleBox/index.js

@@ -6,9 +6,10 @@ import { useState, useEffect } from 'react';
 import { TextField } from '../TextField/index.js';
 import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
-import Plus from '@para-ui/icons/Plus';
+import PlusCircleF from '@para-ui/icons/PlusCircleF';
 import Delete from '@para-ui/icons/Delete';
 import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
@@ -30,7 +31,20 @@ import '../_verture/usePopupContainer-874d101b.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item {\n  padding-bottom: 15px;\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-text-field {\n  width: calc(100% - 30px);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  cursor: pointer;\n}\n.paraui-v3-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(255, 255, 255);\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 24px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgb(54, 102, 214);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .single-box-content-item-svg > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.7);\n}";
+var en = {
+  add: 'Newly Added'
+};
+
+var zh = {
+  add: '新增'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-single-box {\n  display: inline-block;\n  width: 100%;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-single-box > .single-box-content {\n  line-height: 0;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item {\n  display: flex;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item .content-box {\n  flex: 1;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 12px;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-single-box > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box > .single-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgba(171, 176, 185, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-single-box > .single-box-add > svg {\n  font-size: 16px;\n  color: rgb(54, 102, 214);\n  margin-right: 8px;\n}\n.paraui-v3-single-box > .single-box-add:hover {\n  border-color: rgba(54, 102, 214, 0.4);\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-small > .single-box-add {\n  height: 28px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-medium > .single-box-add {\n  height: 32px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  width: 36px;\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-large > .single-box-add {\n  height: 36px;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-content > .single-box-content-item > .opera-box > .del-box svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add {\n  border-color: rgba(171, 176, 185, 0.4);\n  cursor: not-allowed;\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add > svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-single-box.paraui-v3-single-box-disabled > .single-box-add:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n  color: rgba(46, 55, 67, 0.4);\n}";
 styleInject(css_248z);
 
 var SingleBox = function SingleBox(props) {
@@ -48,14 +62,15 @@ var SingleBox = function SingleBox(props) {
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$required = props.required,
       required = _props$required === void 0 ? false : _props$required,
-      _props$error = props.error,
-      error = _props$error === void 0 ? false : _props$error,
       hideErrorDom = props.hideErrorDom,
       _props$helperText = props.helperText,
       helperText = _props$helperText === void 0 ? '' : _props$helperText,
       value = props.value,
       onChange = props.onChange,
       fetchSuggestions = props.fetchSuggestions;
+  var isError = helperText && typeof helperText === 'string' ? true : false;
+  var isErrorArr = helperText instanceof Array;
+  var intl = useFormatMessage('SingleBox', localeJson);
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -68,8 +83,30 @@ var SingleBox = function SingleBox(props) {
   useEffect(function () {
     if (value !== undefined) setValueCom(_toConsumableArray(value));
   }, [value]);
+  /** 处理错误 */
+
+  var handError = function handError(index) {
+    var obj = {
+      error: false,
+      helperText: ''
+    };
+
+    if (isErrorArr) {
+      var errorItem = helperText[index];
+
+      if (errorItem) {
+        obj = {
+          error: true,
+          helperText: errorItem
+        };
+      }
+    }
+
+    return obj;
+  };
   /** 增加 */
 
+
   var add = function add() {
     if (disabled) return;
     valueCom.push('');
@@ -148,7 +185,6 @@ var SingleBox = function SingleBox(props) {
     var str = $prefixCls + '-single-box';
     if (className) str += ' ' + className;
     if (size) str += " ".concat($prefixCls, "-single-box-").concat(size);
-    if (error) str += " ".concat($prefixCls, "-single-box-error");
     if (disabled) str += " ".concat($prefixCls, "-single-box-disabled");
     return str;
   };
@@ -164,34 +200,45 @@ var SingleBox = function SingleBox(props) {
         return jsxs("div", Object.assign({
           className: "single-box-content-item"
         }, {
-          children: [jsx(TextField, {
-            className: 'single-box-text-field',
-            disabled: disabled,
-            value: item,
-            placeholder: placeholder,
-            size: size,
-            hideErrorDom: true,
-            onChange: changeInput(index),
-            fetchSuggestions: fetchSuggestions,
-            onSelect: selectValue(index)
-          }), jsx("span", Object.assign({
-            className: "single-box-content-item-svg"
+          children: [jsx("div", Object.assign({
+            className: "content-box"
+          }, {
+            children: jsx(TextField, Object.assign({
+              className: 'single-box-text-field',
+              disabled: disabled,
+              value: item,
+              placeholder: placeholder,
+              size: size
+            }, handError(index), {
+              onChange: changeInput(index),
+              fetchSuggestions: fetchSuggestions,
+              onSelect: selectValue(index)
+            }))
+          })), jsx("div", Object.assign({
+            className: "opera-box"
           }, {
-            children: jsx(Delete, {
+            children: jsx("span", Object.assign({
+              className: "del-box",
               onClick: del(index)
-            })
+            }, {
+              children: jsx(Delete, {})
+            }))
           }))]
         }), index);
       })
-    })), jsx("div", Object.assign({
+    })), jsxs("div", Object.assign({
       className: "single-box-add",
       onClick: add
     }, {
-      children: jsx(Plus, {})
+      children: [jsx(PlusCircleF, {}), jsx("span", {
+        children: intl({
+          id: 'add'
+        })
+      })]
     })), jsx(HelperText, {
       className: "single-box-error",
-      error: error,
-      helperText: helperText,
+      error: isError,
+      helperText: isError ? helperText : undefined,
       hideErrorDom: hideErrorDom
     })]
   }));

package/SingleBox/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    add: string;
+};
+export default _default;

package/SingleBox/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        add: string;
+    };
+    en: {
+        add: string;
+    };
+};
+export default _default;

package/SingleBox/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    add: string;
+};
+export default _default;

package/TimePicker/index.js

@@ -37,6 +37,7 @@ import '../Label/index.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
 import '../HelperText/index.js';
+import '@paraview/lib';
 import '@para-ui/icons/SortRight';
 
 var InternalTimePicker = DatePicker.TimePicker,

package/Transfer/box.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import { ReactNode, CSSProperties } from 'react';
+import Sortable from 'sortablejs';
 interface IBox {
     title: string;
     data: ItemDataProps[];
@@ -12,6 +13,9 @@ interface IBox {
     fluctuationPosition?: number;
     fluctuationOrther?: number;
     onEndSort?: (oldIndex: any, newIndex: any) => void;
+    rightIcon?: (item: ItemDataProps) => ReactNode;
+    style: CSSProperties | undefined;
+    customKey: string;
 }
 export interface ItemDataProps {
     /** 唯一值,用来过滤 */
@@ -31,3 +35,4 @@ export interface ItemDataProps {
 }
 export declare const Box: (props: IBox) => JSX.Element;
 export default Box;
+export declare const Sortablejs: typeof Sortable;

package/Transfer/index.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties } from 'react';
+/// <reference types="sortablejs" />
+import { CSSProperties, ReactNode } from 'react';
 import { ItemDataProps } from './box';
 import './style/index.scss';
 /**
@@ -15,12 +16,17 @@ interface TransferProps {
     className?: string;
     style?: CSSProperties;
     data?: Array<ItemDataProps>;
-    value?: Array<ItemDataProps>;
-    onChange?: (data: Array<ItemDataProps>) => void;
-    onSort?: (data: Array<ItemDataProps>) => void;
+    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 declare type IItemDataProps = ItemDataProps;
+export declare const SSortablejs: typeof import("sortablejs");

package/Transfer/index.js

@@ -10,7 +10,6 @@ import ExpandLess from '@para-ui/icons/Up';
 import Down from '@para-ui/icons/Down';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
 import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
-import { ArrayToObject } from '@paraview/lib';
 import { Search } from '../Search/index.js';
 import SearchIcon from '@para-ui/icons/Search';
 import AutoTips from '../AutoTips/index.js';
@@ -31,6 +30,7 @@ import '../TextField/index.js';
 import '../Label/index.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
+import '@paraview/lib';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
 import '@para-ui/icons/CloseCircle';
@@ -3123,7 +3123,10 @@ var Box = function Box(props) {
       fluctuationPosition = props.fluctuationPosition,
       fluctuationOrther = props.fluctuationOrther,
       onEndSort = props.onEndSort,
-      multiple = props.multiple;
+      multiple = props.multiple,
+      rightIcon = props.rightIcon,
+      style = props.style,
+      customKey = props.customKey;
   var intl = useFormatMessage('Transfer', localeJson);
 
   var _useState = useState([]),
@@ -3173,7 +3176,8 @@ var Box = function Box(props) {
     onMove(direction === "right" ? 'left' : 'right');
   });
   return jsxs("div", Object.assign({
-    className: "box"
+    className: "box",
+    style: style
   }, {
     children: [jsx("div", Object.assign({
       className: "box-header"
@@ -3210,14 +3214,18 @@ var Box = function Box(props) {
             className: 'item-label'
           }, {
             children: jsx(AutoTips, {
-              children: item.name || item.key
+              children: item.name || item[item[customKey]]
             })
-          })), direction === 'right' ? jsx("div", Object.assign({
+          })), 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.key || item.name);
+        }), item[item[customKey]] || item.name);
       })
     })), jsxs("div", Object.assign({
       className: 'footer'
@@ -3251,8 +3259,9 @@ var Box = function Box(props) {
     }))]
   }));
 };
+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/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-transfer {\n  display: flex;\n  font-size: 14px;\n  user-select: none;\n  width: 680px;\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  flex-grow: 1;\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-checked {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item-checked:hover {\n  background-color: rgba(54, 102, 214, 0.05) !important;\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-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:hover > .item-label {\n  color: rgb(54, 102, 214);\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:hover {\n  background-color: rgba(54, 102, 214, 0.05);\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}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\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) {
@@ -3262,6 +3271,8 @@ var Transfer = function Transfer(props) {
   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({
@@ -3270,74 +3281,58 @@ var Transfer = function Transfer(props) {
     id: 'right'
   })] : _props$titles,
       className = props.className,
-      style = props.style,
+      _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;
+      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(data),
+  var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
-      leftData = _useState2[0],
-      setLeftData = _useState2[1];
+      transData = _useState2[0],
+      setTransData = _useState2[1];
 
   var _useState3 = useState([]),
       _useState4 = _slicedToArray(_useState3, 2),
-      rightData = _useState4[0],
-      setRightData = _useState4[1];
+      leftData = _useState4[0],
+      setLeftData = _useState4[1];
 
   var _useState5 = useState([]),
       _useState6 = _slicedToArray(_useState5, 2),
-      leftCount = _useState6[0],
-      setLeftCount = _useState6[1];
+      rightData = _useState6[0],
+      setRightData = _useState6[1];
 
   var _useState7 = useState([]),
       _useState8 = _slicedToArray(_useState7, 2),
-      rightCount = _useState8[0],
-      setRightCount = _useState8[1];
+      leftCount = _useState8[0],
+      setLeftCount = _useState8[1];
 
-  var _useState9 = useState(),
+  var _useState9 = useState([]),
       _useState10 = _slicedToArray(_useState9, 2),
-      fluctuationPosition = _useState10[0],
-      setFluctuationPosition = _useState10[1];
+      rightCount = _useState10[0],
+      setRightCount = _useState10[1];
 
   var _useState11 = useState(),
       _useState12 = _slicedToArray(_useState11, 2),
-      fluctuationOrther = _useState12[0],
-      setFluctuationOrther = _useState12[1];
+      fluctuationPosition = _useState12[0],
+      setFluctuationPosition = _useState12[1];
 
-  var _useState13 = useState(false),
+  var _useState13 = useState(),
       _useState14 = _slicedToArray(_useState13, 2),
-      animationsLock = _useState14[0],
-      setAnimationLock = _useState14[1];
-
-  useEffect(function () {
-    if (value) {
-      setRightData(_toConsumableArray(value));
-      filterLeftData(_toConsumableArray(value));
-    }
-  }, [value]);
-  /**
-   * @description 过滤左边数据
-   * @param arr {ItemDataProps} 右边数据源
-   * */
+      fluctuationOrther = _useState14[0],
+      setFluctuationOrther = _useState14[1];
 
-  var filterLeftData = function filterLeftData(arr) {
-    var keyJson = ArrayToObject('key', arr);
-    var nameJson = ArrayToObject('name', arr);
-    var handArr = [];
-    var leftArr = props.data || [];
-
-    for (var i = 0, l = leftArr.length; i < l; i++) {
-      var item = leftArr[i];
-      var key = item.key || item.name || '';
-      if (key && (keyJson[key] || nameJson[key])) continue;
-      handArr.push(item);
-    }
-
-    setLeftData(handArr);
-  };
+  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') {
@@ -3395,18 +3390,22 @@ var Transfer = function Transfer(props) {
       });
     } else {
       newData = _toConsumableArray(leftData);
-      newData.forEach(function (item, index) {
+      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(index, 1);
+          leftData.splice(leftData.indexOf(item), 1);
         }
       });
     }
 
     setLeftData(_toConsumableArray(leftData));
     setRightData(_toConsumableArray(rightData));
-    onChange === null || onChange === void 0 ? void 0 : onChange(rightData);
+    var rArr = [];
+    rightData.forEach(function (item) {
+      rArr.push(item[customKey]);
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(rArr);
   }; // 上下移动
 
 
@@ -3422,8 +3421,12 @@ var Transfer = function Transfer(props) {
           setFluctuationOrther(undefined);
           pre.splice.apply(pre, [rightCount[0] - 1, 0].concat(_toConsumableArray(pre.splice(rightCount[0], 1))));
           setAnimationLock(false);
-          onSort === null || onSort === void 0 ? void 0 : onSort(_toConsumableArray(pre));
-          onChange === null || onChange === void 0 ? void 0 : onChange(_toConsumableArray(pre));
+          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);
@@ -3436,8 +3439,12 @@ var Transfer = function Transfer(props) {
           setFluctuationOrther(undefined);
           pre.splice.apply(pre, [rightCount[0] + 1, 0].concat(_toConsumableArray(pre.splice(rightCount[0], 1))));
           setAnimationLock(false);
-          onSort === null || onSort === void 0 ? void 0 : onSort(_toConsumableArray(pre));
-          onChange === null || onChange === void 0 ? void 0 : onChange(_toConsumableArray(pre));
+          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);
@@ -3475,11 +3482,41 @@ var Transfer = function Transfer(props) {
   var onEndSort = useCallback(function (oldIndex, newIndex) {
     setRightData(function (pre) {
       pre.splice.apply(pre, [newIndex, 0].concat(_toConsumableArray(pre.splice(oldIndex, 1))));
-      onSort === null || onSort === void 0 ? void 0 : onSort(pre);
-      onChange === null || onChange === void 0 ? void 0 : onChange(pre);
+      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 = [];
+
+    for (var key in transData) {
+      if (value && value.indexOf(key) >= 0) {
+        rData.push(transData[key]);
+      } else {
+        lData.push(transData[key]);
+      }
+    }
+
+    setRightData([].concat(rData));
+    setLeftData([].concat(lData));
+  }, [value, transData]);
   useEffect(function () {
     var arr = [];
     leftData.forEach(function (item, index) {
@@ -3497,14 +3534,16 @@ var Transfer = function Transfer(props) {
     setRightCount(rArr);
   }, [leftData, rightData]);
   return jsxs("div", Object.assign({
-    className: clsx("".concat($prefixCls, "-transfer"), className),
-    style: style
+    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,
@@ -3582,7 +3621,10 @@ var Transfer = function Transfer(props) {
       title: titles[1],
       queryAll: queryAll,
       data: rightData,
+      style: style,
       direction: "right",
+      customKey: customKey,
+      rightIcon: rightIcon,
       onchange: onchange,
       multiple: multiple,
       onMove: onMove,
@@ -3594,5 +3636,6 @@ var Transfer = function Transfer(props) {
     })]
   }));
 };
+var SSortablejs = Sortablejs;
 
-export { Transfer, Transfer as default };
+export { SSortablejs, Transfer, Transfer as default };