@para-ui/core 3.0.20 → 3.0.21

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';
@@ -3125,8 +3125,8 @@ var Box = function Box(props) {
       onEndSort = props.onEndSort,
       multiple = props.multiple,
       rightIcon = props.rightIcon,
-      onRightClick = props.onRightClick,
-      style = props.style;
+      style = props.style,
+      customKey = props.customKey;
   var intl = useFormatMessage('Transfer', localeJson);
 
   var _useState = useState([]),
@@ -3214,21 +3214,18 @@ var Box = function Box(props) {
             className: 'item-label'
           }, {
             children: jsx(AutoTips, {
-              children: item.name || item.key
+              children: item.name || item[item[customKey]]
             })
           })), rightIcon ? jsx("div", Object.assign({
-            className: 'right-icon',
-            onClick: function onClick() {
-              !item.disabled && onRightClick(item);
-            }
+            className: 'right-icon'
           }, {
-            children: rightIcon
+            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'
@@ -3262,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}\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-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, .paraui-v3-transfer .box .context .item .right-icon {\n  margin-left: 14px;\n  display: flex;\n  align-content: center;\n}\n.paraui-v3-transfer .box .context .item .handle svg, .paraui-v3-transfer .box .context .item .right-icon svg {\n  color: rgb(28, 41, 60);\n}\n.paraui-v3-transfer .box .context .item .handle:hover, .paraui-v3-transfer .box .context .item .right-icon:hover {\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-transfer .box .context .item .handle:hover svg, .paraui-v3-transfer .box .context .item .right-icon: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}";
+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) {
@@ -3273,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({
@@ -3290,74 +3290,49 @@ var Transfer = function Transfer(props) {
       trim = _props$trim === void 0 ? false : _props$trim,
       _props$multiple = props.multiple,
       multiple = _props$multiple === void 0 ? true : _props$multiple,
-      _props$rightIcon = props.rightIcon,
-      rightIcon = _props$rightIcon === void 0 ? '' : _props$rightIcon,
-      _props$onRightClick = props.onRightClick,
-      onRightClick = _props$onRightClick === void 0 ? function (item) {
-    console.log(item);
-  } : _props$onRightClick;
-
-  var _useState = useState(data),
+      rightIcon = props.rightIcon,
+      _props$render = props.render,
+      render = _props$render === void 0 ? function (item) {} : _props$render;
+
+  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') {
@@ -3426,7 +3401,11 @@ var Transfer = function Transfer(props) {
 
     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);
   }; // 上下移动
 
 
@@ -3442,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);
@@ -3456,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);
@@ -3495,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) {
@@ -3525,8 +3542,8 @@ var Transfer = function Transfer(props) {
       data: leftData,
       style: style,
       direction: "left",
+      customKey: customKey,
       rightIcon: rightIcon,
-      onRightClick: onRightClick,
       onchange: onchange,
       multiple: multiple,
       onMove: onMove,
@@ -3606,8 +3623,8 @@ var Transfer = function Transfer(props) {
       data: rightData,
       style: style,
       direction: "right",
+      customKey: customKey,
       rightIcon: rightIcon,
-      onRightClick: onRightClick,
       onchange: onchange,
       multiple: multiple,
       onMove: onMove,
@@ -3619,5 +3636,6 @@ var Transfer = function Transfer(props) {
     })]
   }));
 };
+var SSortablejs = Sortablejs;
 
-export { Transfer, Transfer as default };
+export { SSortablejs, Transfer, Transfer as default };

package/_verture/{index-35fb8f69.js → index-b4f57a63.js}

@@ -43,7 +43,7 @@ var FormRadioGroup = function FormRadioGroup(props) {
   return jsx(RadioGroup, Object.assign({
     value: selectValue,
     onChange: changeValue,
-    hideErrorDom: true
+    hideErrorDom: null
   }, props));
 };
 
@@ -76,7 +76,7 @@ var FormSelect = function FormSelect(props) {
   return jsx(Select, Object.assign({
     labelMode: "inside",
     onChange: changeValue,
-    hideErrorDom: true
+    hideErrorDom: null
   }, props, {
     value: selectValue
   }));
@@ -106,7 +106,7 @@ var FormCheckboxGroup = function FormCheckboxGroup(props) {
   return jsx(CheckboxGroup, Object.assign({
     value: selectValue,
     onChange: changeValue,
-    hideErrorDom: true
+    hideErrorDom: null
   }, props));
 };
 
@@ -402,7 +402,7 @@ var DefaultCompoments = function DefaultCompoments(props) {
     placeholder: placeholder,
     value: dValue,
     disabled: disabled,
-    hideErrorDom: true
+    hideErrorDom: null
   }, inputProps), {
     onChange: function onChange(e) {
       var _a;
@@ -566,7 +566,7 @@ var ItemType = function ItemType(props) {
           multiline: true,
           rows: 3,
           name: name,
-          hideErrorDom: true,
+          hideErrorDom: null,
           onChange: function onChange(e) {
             validateFunction(e.target.value);
           }
@@ -579,7 +579,7 @@ var ItemType = function ItemType(props) {
           defaultValue: backData[name],
           disabled: disabled,
           name: name,
-          hideErrorDom: true,
+          hideErrorDom: null,
           onChange: function onChange(val) {
             validateFunction(val);
           }
@@ -619,7 +619,7 @@ var ItemType = function ItemType(props) {
             validateFunction(e.target.value);
           },
           name: name,
-          hideErrorDom: true,
+          hideErrorDom: null,
           disabled: disabled
         }, inputProps));
     }

package/index.js

@@ -20,7 +20,7 @@ export { Drawer } from './Drawer/index.js';
 export { Dropdown } from './Dropdown/index.js';
 export { default as Empty } from './Empty/index.js';
 export { default as Form } from './Form/index.js';
-export { F as FormItem } from './_verture/index-35fb8f69.js';
+export { F as FormItem } from './_verture/index-b4f57a63.js';
 export { u as FunctionModal, F as FunctionModalProvider, a as useClose } from './_verture/modalContext-8522aa7e.js';
 export { default as GlobalContext, changeConfirmLocale, getConfirmLocale } from './GlobalContext/index.js';
 export { default as Help } from './Help/index.js';
@@ -65,7 +65,7 @@ export { Timeline } from './Timeline/index.js';
 export { Title } from './Title/index.js';
 export { ToggleButton, ToggleButtonGroup } from './ToggleButton/index.js';
 export { Tooltip } from './Tooltip/index.js';
-export { Transfer } from './Transfer/index.js';
+export { SSortablejs, Transfer } from './Transfer/index.js';
 export { T as Tree } from './_verture/index-6807c0e0.js';
 export { default as Upload } from './Upload/index.js';
 import './_verture/slicedToArray-d7722f4b.js';
@@ -130,6 +130,7 @@ import '@para-ui/icons/CheckCircleF';
 import '@para-ui/icons/CloseCircleF';
 import 'rc-dialog';
 import '@para-ui/icons/WarningCircle';
+import '@para-ui/icons/PlusCircleF';
 import 'rc-notification';
 import 'rc-pagination';
 import '@para-ui/icons/Left';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@para-ui/core",
   "private": false,
-  "version": "3.0.20",
+  "version": "3.0.21",
   "main": "./index.js",
   "typings": "./index.d.ts",
   "description": "Powered by Para FED",