@para-ui/core 3.0.37 → 3.0.39

package/DynamicMultiBox/index.js

@@ -0,0 +1,1312 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-57dd2e23.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-708dbb18.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useMemo } from 'react';
+import { Popover } from '../Popover/index.js';
+import Label from '../Label/index.js';
+import { CheckboxGroup } from '../CheckboxGroup/index.js';
+import { Panel, Delete, Drag, PlusCircleF } from '@para-ui/icons';
+import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
+import { TextField } from '../TextField/index.js';
+import Select from '../Select/index.js';
+import { Switch } from '../Switch/index.js';
+import { InputNumber } from '../InputNumber/index.js';
+import { InputLang } from '../InputLang/index.js';
+import { ComboSelect } from '../ComboSelect/index.js';
+import DatePicker from '../DatePicker/index.js';
+import AutoTips from '../AutoTips/index.js';
+import { UUID } from '@paraview/lib';
+import { s as sortable_esm } from '../_verture/sortable.esm-49896035.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import 'clsx';
+import '../_verture/usePopupContainer-87febeb9.js';
+import '../Help/index.js';
+import '@para-ui/icons/Help';
+import '../Checkbox/index.js';
+import '../HelperText/index.js';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '@para-ui/icons/CloseCircle';
+import '../Loading/index.js';
+import '@para-ui/icons/LoadingF';
+import '../_verture/useGlobalProps-1b846a65.js';
+import '@para-ui/core/GlobalContext';
+import '../_verture/index-be4faaee.js';
+import 'rc-dropdown';
+import 'dayjs';
+import '../Empty/index.js';
+import '../_verture/useFormatMessage-703f8b20.js';
+import '@para-ui/icons/Close';
+import '@para-ui/icons/Down';
+import '@para-ui/icons/Check';
+import '@para-ui/icons/Search';
+import 'rc-switch';
+import 'rc-input-number';
+import '@para-ui/icons/Up';
+import '@para-ui/icons/Minus';
+import '@para-ui/icons/Plus';
+import '../MultiBox/index.js';
+import '@para-ui/icons/Delete';
+import '@para-ui/icons/PlusCircleF';
+import '@para-ui/icons/Application';
+import '../Table/index.js';
+import '../_verture/index-beef914f.js';
+import '../Button/index.js';
+import '@para-ui/icons/Forbid';
+import '@para-ui/icons/ScreenF';
+import '@para-ui/icons/UpTriangleF';
+import '@para-ui/icons/DownTriangleF';
+import '@para-ui/icons/Panel';
+import '../Radio/index.js';
+import '../OperateBtn/index.js';
+import '@para-ui/icons/More';
+import '../Pagination/index.js';
+import '@para-ui/icons/DoubleLeft';
+import '@para-ui/icons/Left';
+import 'rc-pagination';
+import '@para-ui/icons/Right';
+import '@para-ui/icons/DoubleRight';
+import '../_verture/index-da441266.js';
+import 'rc-tree';
+import '@para-ui/icons/Document';
+import 'react-dom';
+import '@para-ui/icons/EditFile';
+import '@para-ui/icons/PlusCircle';
+import '@para-ui/icons/MoreCircle';
+import 'rc-picker/es/generate/dayjs';
+import '../Tag/index.js';
+import 'rc-picker';
+import '@para-ui/icons/Calendar';
+import '@para-ui/icons/Time';
+import 'rc-picker/lib/locale/en_US';
+import 'rc-picker/lib/locale/zh_CN';
+import '@para-ui/icons/SortRight';
+
+function getAugmentedNamespace(n) {
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function () {
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var FormItem = function FormItem(props) {
+  var onChange = props.onChange,
+    formItemProps = props.formItemProps,
+    _props$valueList = props.valueList,
+    valueList = _props$valueList === void 0 ? [] : _props$valueList,
+    _props$errors = props.errors,
+    errors = _props$errors === void 0 ? [] : _props$errors;
+  var _a = formItemProps || {},
+    _a$name = _a.name,
+    name = _a$name === void 0 ? '' : _a$name,
+    inputType = _a.inputType,
+    customRender = _a.customRender,
+    rowIndex = _a.rowIndex,
+    id = _a.id,
+    list = _a.list,
+    isDisabled = _a.isDisabled;
+    _a.isFixed;
+    _a.selected;
+    var text = _a.text,
+    rest = __rest(_a, ["name", "inputType", "customRender", "rowIndex", "id", "list", "isDisabled", "isFixed", "selected", "text"]);
+  var disabled = typeof isDisabled === 'function' ? isDisabled(rowIndex, name, valueList) : isDisabled;
+  var getComponent = function getComponent() {
+    switch (inputType) {
+      case 'TextField':
+        return getTextField();
+      case 'Select':
+        return getSelection();
+      case 'InputNumber':
+        return getInputNumber();
+      case 'Switch':
+        return getSwitch();
+      case 'InputLang':
+        return getInputLang();
+      case 'ComboSelect':
+        return getComboSelect();
+      case 'DatePicker':
+        return getDatePicker();
+      case 'custom':
+        return getCustomCompo();
+      default:
+        return null;
+    }
+  };
+  /**
+   * @description: 输入框回调
+   * @param {any} value value值
+   */
+  var inputChange = function inputChange(value) {
+    onChange && onChange(id, value);
+  };
+  /**
+   * @description: 日期选择回调
+   * @return {*}
+   * @param {Dayjs} date 选择的日期moment类型
+   * @param {string} dateString 选择的日期
+   */
+  var onDatePickerChange = function onDatePickerChange(date, dateString) {
+    onChange && onChange(id, date ? date : dateString);
+  };
+  /**
+   * @description: 返回输入框组件
+   * @param {*} ReactNode
+   */
+  var getTextField = function getTextField() {
+    return jsx(TextField, Object.assign({}, rest, {
+      required: false,
+      label: '',
+      disabled: disabled,
+      onChange: function onChange(e) {
+        return inputChange(e.target.value);
+      }
+    }));
+  };
+  /**
+   * @description: 返回下拉框组件
+   * @return {*} ReactNode
+   */
+  var getSelection = function getSelection() {
+    var selectList = typeof list === 'function' ? list && list(rowIndex, id, name, valueList) : list || [];
+    return jsx(Select, Object.assign({}, rest, {
+      list: selectList,
+      required: false,
+      label: '',
+      disabled: disabled,
+      onChange: function onChange(value) {
+        return inputChange(value);
+      },
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      }
+    }));
+  };
+  /**
+   * @description: 返回开关组件
+   * @return {*}
+   * @param {*} ReactNode
+   */
+  var getSwitch = function getSwitch() {
+    var switchText = typeof text === 'function' ? text(rowIndex, name, valueList) : text;
+    return jsxs("div", Object.assign({
+      className: 'multi-value-switch'
+    }, {
+      children: [switchText && jsx("div", Object.assign({
+        className: 'switch-text'
+      }, {
+        children: jsx(AutoTips, {
+          children: switchText
+        })
+      })), jsx("div", Object.assign({
+        className: 'switch'
+      }, {
+        children: jsx(Switch, Object.assign({}, rest, {
+          label: '',
+          labelPlacement: 'start',
+          onChange: function onChange(checked) {
+            return inputChange(checked);
+          }
+        }))
+      }))]
+    }));
+  };
+  /**
+   * @description: 返回数字输入框组件
+   * @return {*}
+   */
+  var getInputNumber = function getInputNumber() {
+    return jsx(InputNumber, Object.assign({}, rest, {
+      required: false,
+      label: '',
+      disabled: disabled,
+      onChange: function onChange(value) {
+        return inputChange(value);
+      }
+    }));
+  };
+  /**
+   * @description: 返回国际化输入框
+   * @return {*}
+   */
+  var getInputLang = function getInputLang() {
+    return jsx(InputLang, Object.assign({}, rest, {
+      required: false,
+      label: '',
+      onChange: function onChange(value) {
+        return inputChange(value);
+      }
+    }));
+  };
+  /**
+   * @description: 返回日期选择框组件
+   * @return {*}
+   */
+  var getDatePicker = function getDatePicker() {
+    return jsx(DatePicker, Object.assign({}, rest, {
+      required: false,
+      label: '',
+      disabled: disabled,
+      onChange: onDatePickerChange,
+      getPopupContainer: function getPopupContainer() {
+        return document.body;
+      }
+    }));
+  };
+  /**
+   * @description: 返回组合选择器下拉框
+   * @return {*}
+   */
+  var getComboSelect = function getComboSelect() {
+    return jsx(ComboSelect, Object.assign({}, rest, {
+      required: false,
+      label: '',
+      disabled: disabled,
+      onChange: function onChange(options) {
+        return inputChange(options);
+      }
+    }));
+  };
+  /**
+   * @description: 返回自定义组件
+   * @return {*}
+   */
+  var getCustomCompo = function getCustomCompo() {
+    return jsx(Fragment, {
+      children: customRender && customRender(name, rowIndex, valueList, errors)
+    });
+  };
+  return jsx(Fragment, {
+    children: getComponent()
+  });
+};
+
+var RowForm = function RowForm(props) {
+  var _props$valueList = props.valueList,
+    valueList = _props$valueList === void 0 ? [] : _props$valueList,
+    rowError = props.rowError,
+    _props$errors = props.errors,
+    errors = _props$errors === void 0 ? [] : _props$errors,
+    onFormItemChange = props.onFormItemChange,
+    _props$config = props.config,
+    config = _props$config === void 0 ? [] : _props$config,
+    rowIndex = props.rowIndex,
+    icon = props.icon;
+  /**
+   * @desc 回调
+   * @param id 表单所处行中的id
+   * @param value 表单值
+   * @param name 表单名
+   * */
+  var _onChange = function onChange(id, value, name) {
+    onFormItemChange && onFormItemChange(name, id, value);
+  };
+  var renderFormItem = function renderFormItem() {
+    var rowValue = valueList === null || valueList === void 0 ? void 0 : valueList[rowIndex];
+    return jsx(Fragment, {
+      children: (config === null || config === void 0 ? void 0 : config.length) > 0 && config.map(function (data) {
+        var formItemProps = (data === null || data === void 0 ? void 0 : data.inputType) !== 'Switch' ? Object.assign({
+          rowIndex: rowIndex,
+          id: rowValue.id,
+          value: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || ''],
+          error: !!(rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']),
+          helperText: rowError === null || rowError === void 0 ? void 0 : rowError[data.name || '']
+        }, data) : Object.assign({
+          rowIndex: rowIndex,
+          id: rowValue.id,
+          checked: rowValue === null || rowValue === void 0 ? void 0 : rowValue[data.name || '']
+        }, data);
+        return jsxs("div", Object.assign({
+          className: "form-item ".concat((data === null || data === void 0 ? void 0 : data.inputType) === 'Switch' ? 'row-form-switch' : '')
+        }, {
+          children: [jsx(FormItem, {
+            valueList: valueList,
+            errors: errors,
+            formItemProps: formItemProps,
+            onChange: function onChange(id, value) {
+              return _onChange(id, value, (data === null || data === void 0 ? void 0 : data.name) || '');
+            }
+          }), icon && icon]
+        }), data.name);
+      })
+    });
+  };
+  return jsx(Fragment, {
+    children: renderFormItem()
+  });
+};
+
+var dist = {exports: {}};
+
+var require$$0 = /*@__PURE__*/getAugmentedNamespace(sortable_esm);
+
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString === Object.prototype.toString) {
+						for (var key in arg) {
+							if (hasOwn.call(arg, key) && arg[key]) {
+								classes.push(key);
+							}
+						}
+					} else {
+						classes.push(arg.toString());
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames));
+
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix = 'Invariant failed';
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? prefix + ": " + provided : prefix;
+    throw new Error(value);
+}
+
+var tinyInvariant_esm = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	'default': invariant
+});
+
+var require$$3 = /*@__PURE__*/getAugmentedNamespace(tinyInvariant_esm);
+
+(function (module) {
+	var $8zHUo$sortablejs = require$$0;
+	var $8zHUo$classnames = classnames.exports;
+	var $8zHUo$react = React__default;
+	var $8zHUo$tinyinvariant = require$$3;
+
+	function $parcel$interopDefault(a) {
+	  return a && a.__esModule ? a.default : a;
+	}
+	function $parcel$export(e, n, v, s) {
+	  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+	}
+	function $parcel$exportWildcard(dest, source) {
+	  Object.keys(source).forEach(function(key) {
+	    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+	      return;
+	    }
+
+	    Object.defineProperty(dest, key, {
+	      enumerable: true,
+	      get: function get() {
+	        return source[key];
+	      }
+	    });
+	  });
+
+	  return dest;
+	}
+
+	$parcel$export(module.exports, "Sortable", () => $882b6d93070905b3$re_export$Sortable);
+	$parcel$export(module.exports, "Direction", () => $882b6d93070905b3$re_export$Direction);
+	$parcel$export(module.exports, "DOMRect", () => $882b6d93070905b3$re_export$DOMRect);
+	$parcel$export(module.exports, "GroupOptions", () => $882b6d93070905b3$re_export$GroupOptions);
+	$parcel$export(module.exports, "MoveEvent", () => $882b6d93070905b3$re_export$MoveEvent);
+	$parcel$export(module.exports, "Options", () => $882b6d93070905b3$re_export$Options);
+	$parcel$export(module.exports, "PullResult", () => $882b6d93070905b3$re_export$PullResult);
+	$parcel$export(module.exports, "PutResult", () => $882b6d93070905b3$re_export$PutResult);
+	$parcel$export(module.exports, "SortableEvent", () => $882b6d93070905b3$re_export$SortableEvent);
+	$parcel$export(module.exports, "SortableOptions", () => $882b6d93070905b3$re_export$SortableOptions);
+	$parcel$export(module.exports, "Utils", () => $882b6d93070905b3$re_export$Utils);
+	$parcel$export(module.exports, "ReactSortable", () => $7fe8e3ea572bda7a$export$11bbed9ee0012c13);
+
+
+
+
+
+	function $eb03e74f8f7db1f3$export$1d0aa160432dfea5(node) {
+	    if (node.parentElement !== null) node.parentElement.removeChild(node);
+	}
+	function $eb03e74f8f7db1f3$export$6d240faa51aa562f(parent, newChild, index) {
+	    const refChild = parent.children[index] || null;
+	    parent.insertBefore(newChild, refChild);
+	}
+	function $eb03e74f8f7db1f3$export$77f49a256021c8de(customs) {
+	    customs.forEach((curr)=>$eb03e74f8f7db1f3$export$1d0aa160432dfea5(curr.element)
+	    );
+	}
+	function $eb03e74f8f7db1f3$export$a6177d5829f70ebc(customs) {
+	    customs.forEach((curr)=>{
+	        $eb03e74f8f7db1f3$export$6d240faa51aa562f(curr.parentElement, curr.element, curr.oldIndex);
+	    });
+	}
+	function $eb03e74f8f7db1f3$export$4655efe700f887a(evt, list) {
+	    const mode = $eb03e74f8f7db1f3$export$1fc0f6205829e19c(evt);
+	    const parentElement = {
+	        parentElement: evt.from
+	    };
+	    let custom = [];
+	    switch(mode){
+	        case "normal":
+	            /* eslint-disable */ const item = {
+	                element: evt.item,
+	                newIndex: evt.newIndex,
+	                oldIndex: evt.oldIndex,
+	                parentElement: evt.from
+	            };
+	            custom = [
+	                item
+	            ];
+	            break;
+	        case "swap":
+	            const drag = {
+	                element: evt.item,
+	                oldIndex: evt.oldIndex,
+	                newIndex: evt.newIndex,
+	                ...parentElement
+	            };
+	            const swap = {
+	                element: evt.swapItem,
+	                oldIndex: evt.newIndex,
+	                newIndex: evt.oldIndex,
+	                ...parentElement
+	            };
+	            custom = [
+	                drag,
+	                swap
+	            ];
+	            break;
+	        case "multidrag":
+	            custom = evt.oldIndicies.map((curr, index)=>({
+	                    element: curr.multiDragElement,
+	                    oldIndex: curr.index,
+	                    newIndex: evt.newIndicies[index].index,
+	                    ...parentElement
+	                })
+	            );
+	            break;
+	    }
+	    /* eslint-enable */ const customs = $eb03e74f8f7db1f3$export$bc06a3af7dc65f53(custom, list);
+	    return customs;
+	}
+	function $eb03e74f8f7db1f3$export$c25cf8080bd305ec(normalized, list) {
+	    const a = $eb03e74f8f7db1f3$export$be2da95e6167b0bd(normalized, list);
+	    const b = $eb03e74f8f7db1f3$export$eca851ee65ae17e4(normalized, a);
+	    return b;
+	}
+	function $eb03e74f8f7db1f3$export$be2da95e6167b0bd(normalized, list) {
+	    const newList = [
+	        ...list
+	    ];
+	    normalized.concat().reverse().forEach((curr)=>newList.splice(curr.oldIndex, 1)
+	    );
+	    return newList;
+	}
+	function $eb03e74f8f7db1f3$export$eca851ee65ae17e4(normalized, list, evt, clone) {
+	    const newList = [
+	        ...list
+	    ];
+	    normalized.forEach((curr)=>{
+	        const newItem = clone && evt && clone(curr.item, evt);
+	        newList.splice(curr.newIndex, 0, newItem || curr.item);
+	    });
+	    return newList;
+	}
+	function $eb03e74f8f7db1f3$export$1fc0f6205829e19c(evt) {
+	    if (evt.oldIndicies && evt.oldIndicies.length > 0) return "multidrag";
+	    if (evt.swapItem) return "swap";
+	    return "normal";
+	}
+	function $eb03e74f8f7db1f3$export$bc06a3af7dc65f53(inputs, list) {
+	    const normalized = inputs.map((curr)=>({
+	            ...curr,
+	            item: list[curr.oldIndex]
+	        })
+	    ).sort((a, b)=>a.oldIndex - b.oldIndex
+	    );
+	    return normalized;
+	}
+	function $eb03e74f8f7db1f3$export$7553c81e62e31b7e(props) {
+	    /* eslint-disable */ const { list: // react sortable props
+	    list , setList: setList , children: children , tag: tag , style: style , className: className , clone: clone , onAdd: // sortable options that have methods we want to overwrite
+	    onAdd , onChange: onChange , onChoose: onChoose , onClone: onClone , onEnd: onEnd , onFilter: onFilter , onRemove: onRemove , onSort: onSort , onStart: onStart , onUnchoose: onUnchoose , onUpdate: onUpdate , onMove: onMove , onSpill: onSpill , onSelect: onSelect , onDeselect: onDeselect , ...options } = props;
+	    /* eslint-enable */ return options;
+	}
+
+
+	/** Holds a global reference for which react element is being dragged */ // @todo - use context to manage this. How does one use 2 different providers?
+	const $7fe8e3ea572bda7a$var$store = {
+	    dragging: null
+	};
+	class $7fe8e3ea572bda7a$export$11bbed9ee0012c13 extends $8zHUo$react.Component {
+	    constructor(props){
+	        super(props);
+	        // @todo forward ref this component
+	        this.ref = /*#__PURE__*/ $8zHUo$react.createRef();
+	        // make all state false because we can't change sortable unless a mouse gesture is made.
+	        const newList = [
+	            ...props.list
+	        ];
+	        newList.forEach((item)=>{
+	            Object.assign(item, {
+	                chosen: false,
+	                selected: false
+	            });
+	        });
+	        props.setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	        ($parcel$interopDefault($8zHUo$tinyinvariant))(//@ts-expect-error: Doesn't exist. Will deprecate soon.
+	        !props.plugins, `
+Plugins prop is no longer supported.
+Instead, mount it with "Sortable.mount(new MultiDrag())"
+Please read the updated README.md at https://github.com/SortableJS/react-sortablejs.
+      `);
+	    }
+	    componentDidMount() {
+	        if (this.ref.current === null) return;
+	        const newOptions = this.makeOptions();
+	        ($parcel$interopDefault($8zHUo$sortablejs)).create(this.ref.current, newOptions);
+	    }
+	    componentDidUpdate(prevProps) {
+	        if (prevProps.disabled !== this.props.disabled && this.sortable) this.sortable.option("disabled", this.props.disabled);
+	    }
+	    render() {
+	        const { tag: tag , style: style , className: className , id: id  } = this.props;
+	        const classicProps = {
+	            style: style,
+	            className: className,
+	            id: id
+	        };
+	        // if no tag, default to a `div` element.
+	        const newTag = !tag || tag === null ? "div" : tag;
+	        return(/*#__PURE__*/ $8zHUo$react.createElement(newTag, {
+	            // @todo - find a way (perhaps with the callback) to allow AntD components to work
+	            ref: this.ref,
+	            ...classicProps
+	        }, this.getChildren()));
+	    }
+	    getChildren() {
+	        const { children: children , dataIdAttr: dataIdAttr , selectedClass: selectedClass = "sortable-selected" , chosenClass: chosenClass = "sortable-chosen" , dragClass: /* eslint-disable */ dragClass = "sortable-drag" , fallbackClass: fallbackClass = "sortable-falback" , ghostClass: ghostClass = "sortable-ghost" , swapClass: swapClass = "sortable-swap-highlight" , filter: /* eslint-enable */ filter = "sortable-filter" , list: list ,  } = this.props;
+	        // if no children, don't do anything.
+	        if (!children || children == null) return null;
+	        const dataid = dataIdAttr || "data-id";
+	        /* eslint-disable-next-line */ return $8zHUo$react.Children.map(children, (child, index)=>{
+	            if (child === undefined) return undefined;
+	            const item = list[index] || {
+	            };
+	            const { className: prevClassName  } = child.props;
+	            // @todo - handle the function if avalable. I don't think anyone will be doing this soon.
+	            const filtered = typeof filter === "string" && {
+	                [filter.replace(".", "")]: !!item.filtered
+	            };
+	            const className = ($parcel$interopDefault($8zHUo$classnames))(prevClassName, {
+	                [selectedClass]: item.selected,
+	                [chosenClass]: item.chosen,
+	                ...filtered
+	            });
+	            return(/*#__PURE__*/ $8zHUo$react.cloneElement(child, {
+	                [dataid]: child.key,
+	                className: className
+	            }));
+	        });
+	    }
+	    /** Appends the `sortable` property to this component */ get sortable() {
+	        const el = this.ref.current;
+	        if (el === null) return null;
+	        const key = Object.keys(el).find((k)=>k.includes("Sortable")
+	        );
+	        if (!key) return null;
+	        //@ts-expect-error: fix me.
+	        return el[key];
+	    }
+	    /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */ makeOptions() {
+	        const DOMHandlers = [
+	            "onAdd",
+	            "onChoose",
+	            "onDeselect",
+	            "onEnd",
+	            "onRemove",
+	            "onSelect",
+	            "onSpill",
+	            "onStart",
+	            "onUnchoose",
+	            "onUpdate", 
+	        ];
+	        const NonDOMHandlers = [
+	            "onChange",
+	            "onClone",
+	            "onFilter",
+	            "onSort", 
+	        ];
+	        const newOptions = $eb03e74f8f7db1f3$export$7553c81e62e31b7e(this.props);
+	        DOMHandlers.forEach((name)=>newOptions[name] = this.prepareOnHandlerPropAndDOM(name)
+	        );
+	        NonDOMHandlers.forEach((name)=>newOptions[name] = this.prepareOnHandlerProp(name)
+	        );
+	        /** onMove has 2 arguments and needs to be handled seperately. */ const onMove1 = (evt, originalEvt)=>{
+	            const { onMove: onMove  } = this.props;
+	            const defaultValue = evt.willInsertAfter || -1;
+	            if (!onMove) return defaultValue;
+	            const result = onMove(evt, originalEvt, this.sortable, $7fe8e3ea572bda7a$var$store);
+	            if (typeof result === "undefined") return false;
+	            return result;
+	        };
+	        return {
+	            ...newOptions,
+	            onMove: onMove1
+	        };
+	    }
+	    /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method.  */ prepareOnHandlerPropAndDOM(evtName) {
+	        return (evt)=>{
+	            // call the component prop
+	            this.callOnHandlerProp(evt, evtName);
+	            // calls state change
+	            //@ts-expect-error: until @types multidrag item is in
+	            this[evtName](evt);
+	        };
+	    }
+	    /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop */ prepareOnHandlerProp(evtName) {
+	        return (evt)=>{
+	            // call the component prop
+	            this.callOnHandlerProp(evt, evtName);
+	        };
+	    }
+	    /** Calls the `props.on[Handler]` function */ callOnHandlerProp(evt, evtName) {
+	        const propEvent = this.props[evtName];
+	        if (propEvent) propEvent(evt, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    // SORTABLE DOM HANDLING
+	    onAdd(evt) {
+	        const { list: list , setList: setList , clone: clone  } = this.props;
+	        /* eslint-disable-next-line */ const otherList = [
+	            ...$7fe8e3ea572bda7a$var$store.dragging.props.list
+	        ];
+	        const customs = $eb03e74f8f7db1f3$export$4655efe700f887a(evt, otherList);
+	        $eb03e74f8f7db1f3$export$77f49a256021c8de(customs);
+	        const newList = $eb03e74f8f7db1f3$export$eca851ee65ae17e4(customs, list, evt, clone);
+	        newList.forEach((item)=>{
+	            Object.assign(item, {
+	                selected: false
+	            });
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onRemove(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const mode = $eb03e74f8f7db1f3$export$1fc0f6205829e19c(evt);
+	        const customs = $eb03e74f8f7db1f3$export$4655efe700f887a(evt, list);
+	        $eb03e74f8f7db1f3$export$a6177d5829f70ebc(customs);
+	        let newList = [
+	            ...list
+	        ];
+	        // remove state if not in clone mode. otherwise, keep.
+	        if (evt.pullMode !== "clone") newList = $eb03e74f8f7db1f3$export$be2da95e6167b0bd(customs, newList);
+	        else {
+	            // switch used to get the clone
+	            let customClones = customs;
+	            switch(mode){
+	                case "multidrag":
+	                    customClones = customs.map((item, index)=>({
+	                            ...item,
+	                            element: evt.clones[index]
+	                        })
+	                    );
+	                    break;
+	                case "normal":
+	                    customClones = customs.map((item)=>({
+	                            ...item,
+	                            element: evt.clone
+	                        })
+	                    );
+	                    break;
+	                case "swap":
+	                default:
+	                    ($parcel$interopDefault($8zHUo$tinyinvariant))(true, `mode "${mode}" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "${mode}" plugin`);
+	            }
+	            $eb03e74f8f7db1f3$export$77f49a256021c8de(customClones);
+	            // replace selected items with cloned items
+	            customs.forEach((curr)=>{
+	                const index = curr.oldIndex;
+	                /* eslint-disable-next-line */ const newItem = this.props.clone(curr.item, evt);
+	                newList.splice(index, 1, newItem);
+	            });
+	        }
+	        // remove item.selected from list
+	        newList.forEach((item)=>{
+	            Object.assign(item, {
+	                selected: false
+	            });
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onUpdate(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const customs = $eb03e74f8f7db1f3$export$4655efe700f887a(evt, list);
+	        $eb03e74f8f7db1f3$export$77f49a256021c8de(customs);
+	        $eb03e74f8f7db1f3$export$a6177d5829f70ebc(customs);
+	        const newList = $eb03e74f8f7db1f3$export$c25cf8080bd305ec(customs, list);
+	        return setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onStart() {
+	        $7fe8e3ea572bda7a$var$store.dragging = this;
+	    }
+	    onEnd() {
+	        $7fe8e3ea572bda7a$var$store.dragging = null;
+	    }
+	    onChoose(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const newList = list.map((item, index)=>{
+	            if (index === evt.oldIndex) Object.assign(item, {
+	                chosen: true
+	            });
+	            return item;
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onUnchoose(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const newList = list.map((item, index)=>{
+	            if (index === evt.oldIndex) Object.assign(item, {
+	                chosen: false
+	            });
+	            return item;
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onSpill(evt) {
+	        const { removeOnSpill: removeOnSpill , revertOnSpill: revertOnSpill  } = this.props;
+	        if (removeOnSpill && !revertOnSpill) $eb03e74f8f7db1f3$export$1d0aa160432dfea5(evt.item);
+	    }
+	    onSelect(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const newList = [
+	            ...list
+	        ];
+	        newList.forEach((item)=>{
+	            Object.assign(item, {
+	                chosen: false
+	            });
+	        });
+	        evt.newIndicies.forEach((curr)=>{
+	            const index = curr.index;
+	            if (index === -1) {
+	                console.log(`"${evt.type}" had indice of "${curr.index}", which is probably -1 and doesn't usually happen here.`);
+	                console.log(evt);
+	                return;
+	            }
+	            newList[index].selected = true;
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	    onDeselect(evt) {
+	        const { list: list , setList: setList  } = this.props;
+	        const newList = [
+	            ...list
+	        ];
+	        newList.forEach((item)=>{
+	            Object.assign(item, {
+	                chosen: false
+	            });
+	        });
+	        evt.newIndicies.forEach((curr)=>{
+	            const index = curr.index;
+	            if (index === -1) return;
+	            newList[index].selected = true;
+	        });
+	        setList(newList, this.sortable, $7fe8e3ea572bda7a$var$store);
+	    }
+	}
+	$7fe8e3ea572bda7a$export$11bbed9ee0012c13.defaultProps = {
+	    clone: (item)=>item
+	};
+
+
+	var $faefaad95e5fcca0$exports = {};
+
+
+	$parcel$exportWildcard(module.exports, $faefaad95e5fcca0$exports);
+
+
+	
+} (dist));
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-dynamic-multi-box {\n  width: 100%;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content {\n  width: 100%;\n  position: relative;\n  overflow-x: auto;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row {\n  display: flex;\n  flex: 1;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row .title-config-row-item {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 180px;\n  margin-right: 12px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .title-config-row .row-form-switch {\n  flex: 0;\n  min-width: 80px;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .title-config .filter-panel svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 {\n  width: 40px;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon-panel svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon {\n  width: 36px;\n  height: 36px;\n  padding: 6px;\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover {\n  background: rgba(171, 176, 185, 0.12);\n  border-radius: 4px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .operator-column-icon:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .hidden-icon {\n  display: none;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .center-line {\n  width: 1px;\n  height: 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n  margin: 0 3px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-40 .blank-block {\n  width: 44px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .operator-column-80 {\n  width: 80px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form {\n  width: 100%;\n  display: flex;\n  align-items: flex-start;\n  height: 56px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .form-item {\n  display: flex;\n  align-items: flex-start;\n  flex: 1;\n  min-width: 180px;\n  margin-right: 12px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-content .content-row-form .row-form-switch {\n  flex: 0;\n  box-sizing: content-box;\n  align-items: center;\n  height: 36px;\n  min-width: 80px;\n}\n.paraui-v3-dynamic-multi-box .add-button {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 36px;\n  background: rgba(171, 176, 185, 0.12);\n  border: 1px dashed rgba(171, 176, 185, 0.4);\n  border-radius: 4px;\n}\n.paraui-v3-dynamic-multi-box .add-button .text {\n  font-size: 14px;\n  margin-left: 8px;\n}\n.paraui-v3-dynamic-multi-box .multi-value-add-button-top-20 {\n  margin-top: 20px;\n}\n.paraui-v3-dynamic-multi-box .normal-button {\n  cursor: pointer;\n}\n.paraui-v3-dynamic-multi-box .normal-button .text {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-dynamic-multi-box .normal-button:hover {\n  background: rgba(54, 102, 214, 0.05);\n  border: 1px dashed rgba(54, 102, 214, 0.4);\n}\n.paraui-v3-dynamic-multi-box .disabled-add .text {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-dynamic-multi-box .disabled-add svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-dynamic-multi-box .paraui-v3-comboselect,\n.paraui-v3-dynamic-multi-box .paraui-v3-picker-wrapper {\n  width: 100%;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch .switch-text {\n  color: rgba(46, 55, 67, 0.4);\n  margin-right: 4px;\n  overflow: hidden;\n}\n.paraui-v3-dynamic-multi-box .multi-value-switch .switch {\n  flex: 1;\n}\n\n.paraui-v3-dynamic-multi-box-popover .filter-config {\n  width: 200px;\n  max-height: 300px;\n  padding-top: 16px;\n  overflow-y: auto;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list {\n  padding: 0 12px;\n  overflow-y: auto;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .title {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.4);\n  margin-bottom: 12px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .paraui-v3-check-box {\n  margin-bottom: 22px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .check-list .paraui-v3-check-box:last-child {\n  margin-bottom: 22px;\n}\n.paraui-v3-dynamic-multi-box-popover .filter-config .restore-default {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: sticky;\n  width: 100%;\n  left: 0;\n  bottom: 0;\n  top: -2px;\n  height: 44px;\n  color: rgb(54, 102, 214);\n  cursor: pointer;\n  border-top: 1px solid rgba(171, 176, 185, 0.12);\n  background-color: #fff;\n}\n.paraui-v3-dynamic-multi-box-popover .no-other-property {\n  width: 200px;\n  padding: 16px 0;\n  text-align: center;\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.4);\n}";
+styleInject(css_248z);
+
+var DynamicMultiBox = function DynamicMultiBox(props) {
+  var valueList = props.valueList,
+    _props$config = props.config,
+    config = _props$config === void 0 ? [] : _props$config,
+    _props$errors = props.errors,
+    errors = _props$errors === void 0 ? [] : _props$errors,
+    _props$isSort = props.isSort,
+    isSort = _props$isSort === void 0 ? false : _props$isSort,
+    _props$isFilter = props.isFilter,
+    isFilter = _props$isFilter === void 0 ? false : _props$isFilter,
+    className = props.className,
+    _props$disabledAdd = props.disabledAdd,
+    disabledAdd = _props$disabledAdd === void 0 ? false : _props$disabledAdd,
+    _props$titleMode = props.titleMode,
+    titleMode = _props$titleMode === void 0 ? 'all' : _props$titleMode,
+    checkedValue = props.checkedValue,
+    icon = props.icon,
+    _props$deleteDisable = props.deleteDisable,
+    deleteDisable = _props$deleteDisable === void 0 ? [] : _props$deleteDisable,
+    singleTitle = props.singleTitle,
+    initValue = props.initValue,
+    popoverClassName = props.popoverClassName,
+    onChange = props.onChange,
+    onAdd = props.onAdd,
+    onFilter = props.onFilter,
+    onDelete = props.onDelete,
+    onSort = props.onSort;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    checked = _useState2[0],
+    setChecked = _useState2[1];
+  var domRef = useRef(null);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fixedConfig = _useState4[0],
+    setFixedConfig = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedConfig = _useState6[0],
+    setSelectedConfig = _useState6[1];
+  useEffect(function () {
+    if (checkedValue) setChecked(checkedValue);
+  }, [checkedValue]);
+  useEffect(function () {
+    if (!(config === null || config === void 0 ? void 0 : config.length)) return;
+    // 筛选出固定字段
+    var fixedArr = (config === null || config === void 0 ? void 0 : config.filter(function (item) {
+      return item.isFixed;
+    })) || [];
+    setFixedConfig(fixedArr);
+  }, [config]);
+  useEffect(function () {
+    if (!(config === null || config === void 0 ? void 0 : config.length)) return;
+    // 通过透传的checkedValue映射出对应的配置
+    var selectedArr = (config === null || config === void 0 ? void 0 : config.filter(function (item) {
+      return !item.isFixed && (checked === null || checked === void 0 ? void 0 : checked.includes(item.name));
+    })) || [];
+    setSelectedConfig(selectedArr);
+  }, [config, checked]);
+  /**
+   * @desc 内容产生滚动时，给新增按增加marginTop: 20
+   * */
+  useEffect(function () {
+    monitorScroll();
+  }, []);
+  /**
+   * @desc 筛选回调
+   * */
+  var onCheckChange = function onCheckChange(val) {
+    // 1、更新selectedConfig配置 2、更新valueList 3、更新errors
+    // 区分正选反选
+    var bool = (val === null || val === void 0 ? void 0 : val.length) > (checked === null || checked === void 0 ? void 0 : checked.length);
+    // 当前选中数据和上一次选择数据取差值
+    var currentVal = getArrDiffSet(val, checked);
+    var valueArr = _toConsumableArray(valueList);
+    var errorArr = _toConsumableArray(errors);
+    if (bool) {
+      valueArr = handleCheckedConfig(valueArr, currentVal);
+      errorArr = handleCheckedConfig(errorArr, currentVal);
+    } else {
+      handleUncheckedConfig(valueArr, currentVal);
+      handleUncheckedConfig(errorArr, currentVal);
+    }
+    setChecked(val);
+    onFilter && onFilter({
+      name: currentVal,
+      checkedVal: val,
+      valueList: valueArr,
+      errors: errorArr
+    });
+    monitorScroll();
+  };
+  /** 监听内容是否产生横向滚动*/
+  var monitorScroll = function monitorScroll() {
+    setTimeout(function () {
+      var dom = document.querySelector('#multi-value-add-button');
+      if ((domRef === null || domRef === void 0 ? void 0 : domRef.current.offsetWidth) < (domRef === null || domRef === void 0 ? void 0 : domRef.current.scrollWidth)) dom === null || dom === void 0 ? void 0 : dom.classList.add('multi-value-add-button-top-20');else dom === null || dom === void 0 ? void 0 : dom.classList.remove('multi-value-add-button-top-20');
+    }, 0);
+  };
+  /**
+   * @desc 筛选恢复默认,
+   * */
+  var onRestoreDefault = function onRestoreDefault() {
+    if (!(checked === null || checked === void 0 ? void 0 : checked.length)) return;
+    var valueArr = _toConsumableArray(valueList);
+    var errorArr = _toConsumableArray(errors);
+    restoreData(valueArr, checked);
+    restoreData(errorArr, checked);
+    setChecked([]);
+    setSelectedConfig([]);
+    onFilter && onFilter({
+      valueList: valueArr,
+      errors: errorArr
+    });
+  };
+  /**
+   * @desc 数据重置
+   * */
+  var restoreData = function restoreData(data, checked) {
+    data.forEach(function (item) {
+      for (var key in item) {
+        if (checked.includes(key)) delete item[key];
+      }
+    });
+  };
+  /**
+   * @desc 反选时更新错误集合errors和valueList集合
+   * @param dataArr 错误集合errors或者valueList集合
+   * @param currentVal 反选值
+   * */
+  var handleUncheckedConfig = function handleUncheckedConfig() {
+    var dataArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var currentVal = arguments.length > 1 ? arguments[1] : undefined;
+    dataArr.forEach(function (item) {
+      for (var itemKey in item) {
+        if (itemKey === currentVal) delete item[itemKey];
+      }
+    });
+  };
+  /**
+   * @desc 正选时更新错误集合errors和valueList集合
+   * @param dataArr 错误集合errors或者valueList集合
+   * @param currentVal 正选值
+   * */
+  var handleCheckedConfig = function handleCheckedConfig(dataArr, currentVal) {
+    return dataArr.map(function (item) {
+      return Object.assign(Object.assign({}, item), _defineProperty({}, currentVal, ''));
+    });
+  };
+  /**
+   * 弹窗筛选器内容
+   * */
+  var renderPopoverContent = function renderPopoverContent() {
+    var filterConfig = config.filter(function (item) {
+      return !item.isFixed;
+    });
+    return jsx(Fragment, {
+      children: filterConfig && (filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.length) > 0 ? jsxs("div", Object.assign({
+        className: "filter-config"
+      }, {
+        children: [jsxs("div", Object.assign({
+          className: "check-list"
+        }, {
+          children: [jsx("div", Object.assign({
+            className: "title"
+          }, {
+            children: "\u8868\u5355\u914D\u7F6E (\u975E\u5FC5\u586B\u9879)"
+          })), jsx(CheckboxGroup, {
+            list: filterConfig,
+            row: false,
+            value: checked,
+            onChange: onCheckChange
+          })]
+        })), jsx("div", Object.assign({
+          className: "restore-default",
+          onClick: onRestoreDefault
+        }, {
+          children: "\u6062\u590D\u9ED8\u8BA4"
+        }))]
+      })) : jsx("div", Object.assign({
+        className: "no-other-property"
+      }, {
+        children: "\u6682\u65E0\u5176\u4ED6\u5C5E\u6027"
+      }))
+    });
+  };
+  var popoverHandClass = function popoverHandClass() {
+    var str = $prefixCls + '-dynamic-multi-box-popover';
+    if (popoverClassName) str += ' ' + popoverClassName;
+    return str;
+  };
+  /**
+   * 渲染表头
+   * */
+  var renderTitle = useMemo(function () {
+    var _a, _b;
+    if (!((_a = [].concat(_toConsumableArray(fixedConfig), _toConsumableArray(selectedConfig))) === null || _a === void 0 ? void 0 : _a.length)) return null;
+    return jsxs("div", Object.assign({
+      className: 'title-config'
+    }, {
+      children: [titleMode === 'all' ? jsx("div", Object.assign({
+        className: 'title-config-row'
+      }, {
+        children: (_b = [].concat(_toConsumableArray(fixedConfig), _toConsumableArray(selectedConfig))) === null || _b === void 0 ? void 0 : _b.map(function (item, index) {
+          var label = item.label,
+            required = item.required,
+            className = item.className,
+            inputType = item.inputType;
+          return jsx("div", Object.assign({
+            className: "title-config-row-item ".concat(inputType === 'Switch' ? 'row-form-switch' : '', " ").concat(className)
+          }, {
+            children: jsx(Label, {
+              required: required,
+              label: label
+            })
+          }), index);
+        })
+      })) : titleMode === 'single' ? jsx(Label, {
+        required: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.required,
+        label: singleTitle === null || singleTitle === void 0 ? void 0 : singleTitle.label
+      }) : null, jsxs("div", Object.assign({
+        className: "operator-column-40 ".concat(isSort ? 'operator-column-80' : '')
+      }, {
+        children: [isSort && jsx("div", {
+          className: 'blank-block'
+        }), isFilter && jsx(Popover, Object.assign({
+          placement: 'bottom-end',
+          content: renderPopoverContent(),
+          getPopupContainer: function getPopupContainer() {
+            return document.body;
+          },
+          overlayClassName: popoverHandClass()
+        }, {
+          children: jsx("div", Object.assign({
+            className: 'operator-column-icon-panel'
+          }, {
+            children: jsx(Panel, {})
+          }))
+        }))]
+      }))]
+    }));
+  }, [titleMode, fixedConfig, selectedConfig, isSort, isFilter, checked, onCheckChange, onRestoreDefault]);
+  /**
+   *@desc 渲染内容
+   * */
+  var renderContent = useMemo(function () {
+    if (valueList && (valueList === null || valueList === void 0 ? void 0 : valueList.length) > 0) {
+      var showDeleteIcon = valueList.length > 1;
+      return jsx(Fragment, {
+        children: valueList.map(function (item, rowIndex) {
+          var _a;
+          var id = item.id;
+          var rowError = (_a = errors === null || errors === void 0 ? void 0 : errors.filter(function (item) {
+            return item.id === id;
+          })) === null || _a === void 0 ? void 0 : _a[0];
+          return jsxs("div", Object.assign({
+            className: 'content-row-form'
+          }, {
+            children: [jsx(RowForm, {
+              rowIndex: rowIndex,
+              valueList: valueList,
+              errors: errors,
+              rowError: rowError,
+              onFormItemChange: function onFormItemChange(name, id, value) {
+                return _onFormItemChange(name, id, value, rowIndex);
+              },
+              icon: icon,
+              config: [].concat(_toConsumableArray(fixedConfig), _toConsumableArray(selectedConfig))
+            }), jsxs("div", Object.assign({
+              className: "operator-column-40 ".concat(isSort && showDeleteIcon ? 'operator-column-80' : '')
+            }, {
+              children: [jsx("div", Object.assign({
+                className: "operator-column-icon delete-icon ".concat(!showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : ''),
+                onClick: function onClick() {
+                  return onDeleteEvent(rowIndex);
+                }
+              }, {
+                children: jsx(Delete, {})
+              })), jsx("div", {
+                className: 'blank-block'
+              }), isSort && jsx("div", Object.assign({
+                className: !showDeleteIcon || deleteDisable.includes(id) ? 'hidden-icon' : 'center-line'
+              }, {
+                children: jsx("div", {
+                  className: 'line'
+                })
+              })), isSort && jsx("div", Object.assign({
+                className: "sort-handler operator-column-icon ".concat(!showDeleteIcon ? 'hidden-icon' : '')
+              }, {
+                children: jsx(Drag, {})
+              }))]
+            }))]
+          }), rowIndex);
+        })
+      });
+    } else return null;
+  }, [valueList, isSort, isFilter, errors, fixedConfig, selectedConfig]);
+  /**
+   * @desc 删除事件
+   * */
+  var onDeleteEvent = function onDeleteEvent(rowIndex) {
+    var valueArr = _toConsumableArray(valueList);
+    var errorArr = _toConsumableArray(errors);
+    valueArr.splice(rowIndex, 1);
+    errorArr.splice(rowIndex, 1);
+    onDelete && onDelete(valueArr, errorArr);
+  };
+  /**
+   * @desc 表单回调
+   * @param value 表单回调值
+   * @param name
+   * @param rowIndex 表单所处行下标
+   * @param id 表单所处行中的id
+   * */
+  var _onFormItemChange = function _onFormItemChange(name, id, value, rowIndex) {
+    var valueArr = _toConsumableArray(valueList);
+    Object.keys(valueArr[rowIndex]).forEach(function (key) {
+      if (name === key) valueArr[rowIndex][key] = value;
+    });
+    onChange && onChange(valueArr, {
+      name: name,
+      id: id,
+      value: value,
+      rowIndex: rowIndex
+    });
+  };
+  /**
+   * @desc 新增事件
+   * */
+  var onAddEvent = function onAddEvent() {
+    // 根据配置进行valueList更新
+    var valueArr = _toConsumableArray(valueList || []);
+    var errorArr = _toConsumableArray(errors);
+    var id = UUID();
+    // 取出已经筛选的配置数据
+    var configArr = [].concat(_toConsumableArray(fixedConfig), _toConsumableArray(selectedConfig));
+    valueArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'value')), {
+      id: id
+    }));
+    errorArr.push(Object.assign(Object.assign({}, getNewItem(configArr, 'error')), {
+      id: id
+    }));
+    onAdd && onAdd(valueArr, errorArr);
+  };
+  /**
+   * @desc  新增时，获取valueList和errors的新增项
+   * @param configArr 配置表
+   * @param type 区分值和错误
+   * */
+  var getNewItem = function getNewItem(configArr, type) {
+    return configArr.reduce(function (acc, cur) {
+      return Object.assign(Object.assign({}, acc), _defineProperty({}, cur.name, type === 'value' ? initValue === null || initValue === void 0 ? void 0 : initValue[cur.name] : ''));
+    }, {});
+  };
+  /**
+   * @desc 排序
+   * @param newValueList 排序后的数组
+   * */
+  var onDragSort = function onDragSort(newValueList) {
+    // 获取排序后 id映射下标集合
+    var idMapIndex = newValueList.reduce(function (acc, cur, index) {
+      return Object.assign(Object.assign({}, acc), _defineProperty({}, cur.id, index));
+    }, {});
+    // 需要交换的下标集合
+    var swapIds = [];
+    valueList.forEach(function (item, idx) {
+      if (idx !== idMapIndex[item.id]) swapIds.push(idx);
+    });
+    onSort && onSort(newValueList, swapIds);
+  };
+  /**
+   * @description: 获取两个数组的差值
+   * @param {string} currentVal
+   * @param {string} preVal
+   */
+  var getArrDiffSet = function getArrDiffSet(currentVal, preVal) {
+    return currentVal.concat(preVal).filter(function (v) {
+      return !currentVal.includes(v) || !preVal.includes(v);
+    })[0];
+  };
+  /**
+   * @desc 处理className
+   * */
+  var handClass = function handClass() {
+    var str = $prefixCls + '-dynamic-multi-box';
+    if (className) str += ' ' + className;
+    return str;
+  };
+  return jsxs("div", Object.assign({
+    className: handClass()
+  }, {
+    children: [jsxs("div", Object.assign({
+      className: 'multi-value-content',
+      ref: domRef
+    }, {
+      children: [renderTitle, jsx(dist.exports.ReactSortable, Object.assign({
+        list: valueList,
+        handle: '.sort-handler',
+        animation: 150,
+        setList: onDragSort
+      }, {
+        children: renderContent
+      }))]
+    })), jsxs("div", Object.assign({
+      className: "add-button ".concat(disabledAdd ? 'disabled-add' : 'normal-button'),
+      onClick: onAddEvent,
+      id: 'multi-value-add-button'
+    }, {
+      children: [jsx(PlusCircleF, {}), jsx("span", Object.assign({
+        className: 'text'
+      }, {
+        children: "\u65B0 \u589E"
+      }))]
+    }))]
+  }));
+};
+
+export { DynamicMultiBox as default };