@para-ui/core 4.0.0-rc.4 → 4.0.0-rc.6

package/MultiBox/index.js

@@ -1,6 +1,3 @@
-import { _ as _typeof } from '../_verture/typeof-adeedc13.js';
-import { _ as _toConsumableArray } from '../_verture/toConsumableArray-8f4c9589.js';
-import { _ as _slicedToArray } from '../_verture/slicedToArray-a8206399.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { TextField } from '../TextField/index.js';
@@ -8,28 +5,27 @@ import Label from '../Label/index.js';
 import HelperText from '../HelperText/index.js';
 import Delete from '@para-ui/icons/Delete';
 import PlusCircleF from '@para-ui/icons/PlusCircleF';
-import { $ as $prefixCls } from '../_verture/constant-0d9802f7.js';
-import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { $ as $prefixCls } from '../_verture/constant-5317fc89.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-eb13cf56.js';
+import { Tooltip } from '../Tooltip/index.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '@paraview/lib';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
 import '@para-ui/icons/CloseCircleF';
 import '../AutoTips/index.js';
-import '../Tooltip/index.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 import '@para-ui/icons/Forbid';
 import '../Loading/index.js';
 import '@para-ui/icons/LoadingF';
-import '../_verture/useGlobalProps-1b846a65.js';
+import '../_verture/useGlobalProps-1e416658.js';
 import '@para-ui/core/GlobalContext';
-import '../_verture/index-e9007d6a.js';
+import '../_verture/index-da9097d3.js';
 import 'rc-dropdown';
-import '../_verture/usePopupContainer-87febeb9.js';
+import '../_verture/usePopupContainer-635f66f4.js';
 import 'dayjs';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
@@ -43,78 +39,66 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-multi-box {\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-v4-multi-box > .multi-box-content > .multi-box-content-item {\n  display: flex;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  align-items: flex-start;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input.multi-box-content-item-input-error > .multi-box-separator {\n  padding-bottom: 20px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field {\n  flex: 1;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field .paraui-v4-helper-text {\n  min-height: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-separator {\n  padding-bottom: 10px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0 10px;\n  line-height: 1;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box {\n  display: flex;\n  align-items: center;\n  margin-left: 10px;\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-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-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(87, 131, 235);\n}\n.paraui-v4-multi-box > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  font-size: 20px;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box > .multi-box-add {\n  text-align: center;\n  border: 1px dashed;\n  border-color: rgb(212, 218, 227);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: rgb(247, 248, 250);\n  color: rgb(46, 101, 230);\n  font-size: 14px;\n}\n.paraui-v4-multi-box > .multi-box-add > svg {\n  font-size: 16px;\n  color: rgb(46, 101, 230);\n  margin-right: 4px;\n}\n.paraui-v4-multi-box > .multi-box-add:hover {\n  border-color: rgb(87, 131, 235);\n  background-color: rgb(240, 245, 255);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-separator > .multi-box-content > .multi-box-content-item > .multi-box-content-item-input > .multi-box-text-field:first-child {\n  margin-right: 0;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  cursor: not-allowed;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover {\n  background-color: transparent;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box:hover svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-content > .multi-box-content-item > .opera-box > .del-box svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add {\n  border-color: rgb(212, 218, 227);\n  cursor: not-allowed;\n  background-color: rgb(247, 248, 250);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add > svg {\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-disabled > .multi-box-add:hover {\n  border-color: rgb(212, 218, 227);\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-add {\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-small > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 28px;\n  height: 28px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-add {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-medium > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-add {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box {\n  height: 32px;\n}\n.paraui-v4-multi-box.paraui-v4-multi-box-large > .multi-box-content > .multi-box-content-item > .opera-box > .del-box {\n  width: 32px;\n  height: 32px;\n}";
 styleInject(css_248z);
 
-var MultiBox = function MultiBox(props) {
-  var className = props.className,
-    style = props.style,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    _props$placeholderKey = props.placeholderKey,
-    placeholderKey = _props$placeholderKey === void 0 ? '' : _props$placeholderKey,
-    _props$placeholderVal = props.placeholderValue,
-    placeholderValue = _props$placeholderVal === void 0 ? '' : _props$placeholderVal,
-    _props$label = props.label,
-    label = _props$label === void 0 ? '' : _props$label,
-    labelTooltip = props.labelTooltip,
-    labelSign = props.labelSign,
-    _props$disabled = props.disabled,
-    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$separator = props.separator,
-    separator = _props$separator === void 0 ? ':' : _props$separator,
-    _props$helperText = props.helperText,
-    helperText = _props$helperText === void 0 ? '' : _props$helperText,
-    value = props.value,
-    replaceFields = props.replaceFields,
-    onChange = props.onChange,
-    fetchSuggestionsKey = props.fetchSuggestionsKey,
-    fetchSuggestionsValue = props.fetchSuggestionsValue,
-    keyOtherProps = props.keyOtherProps,
-    valueOtherProps = props.valueOtherProps;
-  var isError = helperText && typeof helperText === 'string' ? true : false;
-  var isErrorArr = helperText instanceof Array;
-  var intl = useFormatMessage('MultiBox', localeJson);
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    valueCom = _useState2[0],
-    setValueCom = _useState2[1];
-  var _useState3 = useState({
-      key: 'label',
-      value: 'value'
-    }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    replaceFieldsCom = _useState4[0],
-    setReplaceFieldsCom = _useState4[1];
-  useEffect(function () {
-    if (props.defaultValue !== undefined) setValueCom(_toConsumableArray(props.defaultValue));
+const MultiBox = props => {
+  const {
+    className,
+    style,
+    size = 'large',
+    placeholderKey = '',
+    placeholderValue = '',
+    label = '',
+    labelTooltip,
+    labelSign,
+    disabled = false,
+    disabledTooltip,
+    required = false,
+    error = false,
+    hideErrorDom,
+    separator = ':',
+    helperText = '',
+    value,
+    replaceFields,
+    onChange,
+    fetchSuggestionsKey,
+    fetchSuggestionsValue,
+    keyOtherProps,
+    valueOtherProps
+  } = props;
+  const isError = helperText && typeof helperText === 'string' ? true : false;
+  const isErrorArr = helperText instanceof Array;
+  const intl = useFormatMessage('MultiBox', localeJson);
+  const [valueCom, setValueCom] = useState([]);
+  const [replaceFieldsCom, setReplaceFieldsCom] = useState({
+    key: 'label',
+    value: 'value'
+  });
+  useEffect(() => {
+    if (props.defaultValue !== undefined) setValueCom([...props.defaultValue]);
   }, []);
-  useEffect(function () {
-    if (value !== undefined) setValueCom(_toConsumableArray(value));
+  useEffect(() => {
+    if (value !== undefined) setValueCom([...value]);
   }, [value]);
-  useEffect(function () {
+  useEffect(() => {
     if (replaceFields) {
-      var json = Object.assign(Object.assign({}, replaceFieldsCom), replaceFields);
+      const json = Object.assign(Object.assign({}, replaceFieldsCom), replaceFields);
       setReplaceFieldsCom(json);
     }
   }, [replaceFields]);
   /** 处理错误 */
-  var handError = function handError(index, name) {
-    var obj = {
+  const handError = (index, name) => {
+    let obj = {
       error: false,
       helperText: ''
     };
     if (isErrorArr) {
-      var errorItem = helperText[index];
+      const errorItem = helperText[index];
       if (errorItem && errorItem[name]) {
         obj = {
           error: true,
@@ -125,36 +109,32 @@ var MultiBox = function MultiBox(props) {
     return obj;
   };
   /** 增加 */
-  var add = function add() {
+  const add = () => {
     if (disabled === true) return;
     valueCom.push({});
-    if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
+    if (props.value === undefined) setValueCom([...valueCom]);
     onChange && onChange(valueCom);
   };
   /** 删除 */
-  var del = function del(index) {
-    return function () {
-      if (disabled === true) return;
-      valueCom.splice(index, 1);
-      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
-      onChange && onChange(valueCom);
-    };
+  const del = index => () => {
+    if (disabled === true) return;
+    valueCom.splice(index, 1);
+    if (props.value === undefined) setValueCom([...valueCom]);
+    onChange && onChange(valueCom);
   };
   /** 改变值 */
-  var changeValue = function changeValue(key, index) {
-    return function (event) {
-      valueCom[index][key] = event.target.value;
-      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
-      onChange && onChange(valueCom);
-    };
+  const changeValue = (key, index) => event => {
+    valueCom[index][key] = event.target.value;
+    if (props.value === undefined) setValueCom([...valueCom]);
+    onChange && onChange(valueCom);
   };
   /**
    * 处理label
    * */
-  var handLabel = function handLabel() {
+  const handLabel = () => {
     if (!label && !labelSign) return null;
-    var handLabelClass = function handLabelClass() {
-      var str = 'multi-box-label';
+    const handLabelClass = () => {
+      let str = 'multi-box-label';
       if (labelTooltip && labelTooltip.className) {
         str += " ".concat(labelTooltip.className);
       }
@@ -169,15 +149,15 @@ var MultiBox = function MultiBox(props) {
     }));
   };
   /** 处理内容每一项 */
-  var handContentItem = function handContentItem(item, index) {
+  const handContentItem = (item, index) => {
     var _a, _b;
-    var keyValue = item[replaceFieldsCom.key || ''] || '';
-    var valValue = item[replaceFieldsCom.value || ''] || '';
-    var disabledKey = disabled instanceof Array ? (_a = disabled[index]) === null || _a === void 0 ? void 0 : _a[keyValue] : disabled;
-    var disabledVal = disabled instanceof Array ? (_b = disabled[index]) === null || _b === void 0 ? void 0 : _b[valValue] : disabled;
-    var errorKeyObj = handError(index, replaceFieldsCom.key || '');
-    var errorValueObj = handError(index, replaceFieldsCom.value || '');
-    var str = 'multi-box-content-item-input';
+    const keyValue = item[replaceFieldsCom.key || ''] || '';
+    const valValue = item[replaceFieldsCom.value || ''] || '';
+    const disabledKey = disabled instanceof Array ? (_a = disabled[index]) === null || _a === void 0 ? void 0 : _a[keyValue] : disabled;
+    const disabledVal = disabled instanceof Array ? (_b = disabled[index]) === null || _b === void 0 ? void 0 : _b[valValue] : disabled;
+    const errorKeyObj = handError(index, replaceFieldsCom.key || '');
+    const errorValueObj = handError(index, replaceFieldsCom.value || '');
+    let str = 'multi-box-content-item-input';
     if (errorKeyObj.error || errorValueObj.error) str += ' multi-box-content-item-input-error';
     return jsxs("div", Object.assign({
       className: str
@@ -210,11 +190,11 @@ var MultiBox = function MultiBox(props) {
     }));
   };
   /** 处理内容 */
-  var handContent = function handContent() {
+  const handContent = () => {
     return jsx("div", Object.assign({
       className: "multi-box-content"
     }, {
-      children: valueCom.map(function (item, index) {
+      children: valueCom.map((item, index) => {
         return jsxs("div", Object.assign({
           className: "multi-box-content-item"
         }, {
@@ -233,25 +213,21 @@ var MultiBox = function MultiBox(props) {
     }));
   };
   /** 模糊匹配 */
-  var fetchSuggestions = function fetchSuggestions(key) {
-    return function (val, cb) {
-      if (key === 'key') fetchSuggestionsKey && fetchSuggestionsKey(val, cb);else fetchSuggestionsValue && fetchSuggestionsValue(val, cb);
-    };
+  const fetchSuggestions = key => (val, cb) => {
+    if (key === 'key') fetchSuggestionsKey && fetchSuggestionsKey(val, cb);else fetchSuggestionsValue && fetchSuggestionsValue(val, cb);
   };
   /** 选择值 */
-  var selectValue = function selectValue(key, index) {
-    return function (item) {
-      valueCom[index][key] = item;
-      if (_typeof(item) === 'object' && item !== null) {
-        valueCom[index][key] = item.value;
-      }
-      if (props.value === undefined) setValueCom(_toConsumableArray(valueCom));
-      onChange && onChange(valueCom);
-    };
+  const selectValue = (key, index) => item => {
+    valueCom[index][key] = item;
+    if (typeof item === 'object' && item !== null) {
+      valueCom[index][key] = item.value;
+    }
+    if (props.value === undefined) setValueCom([...valueCom]);
+    onChange && onChange(valueCom);
   };
   /** 处理class */
-  var handClass = function handClass() {
-    var str = "".concat($prefixCls, "-multi-box multi-box");
+  const handClass = () => {
+    let str = "".concat($prefixCls, "-multi-box multi-box");
     if (className) str += " ".concat(className);
     if (size) str += " ".concat($prefixCls, "-multi-box-").concat(size);
     if (error) str += " ".concat($prefixCls, "-multi-box-error");
@@ -259,11 +235,11 @@ var MultiBox = function MultiBox(props) {
     if (separator) str += " ".concat($prefixCls, "-multi-box-separator");
     return str;
   };
-  return jsxs("div", Object.assign({
-    className: handClass(),
-    style: style
-  }, {
-    children: [handLabel(), handContent(), jsxs("div", Object.assign({
+  /**
+   * 处理添加按钮
+   * */
+  const handleAddBtn = () => {
+    return jsxs("div", Object.assign({
       className: "multi-box-add",
       onClick: add
     }, {
@@ -272,7 +248,27 @@ var MultiBox = function MultiBox(props) {
           id: 'add'
         })
       })]
-    })), jsx(HelperText, {
+    }));
+  };
+  /**
+   * 处理添加按钮是否带提示
+   * */
+  const handleAddBtnTooltip = () => {
+    if (disabledTooltip) {
+      return jsx(Tooltip, Object.assign({
+        disabled: true,
+        placement: disabledTooltip.placement || 'top'
+      }, disabledTooltip, {
+        children: handleAddBtn()
+      }));
+    }
+    return handleAddBtn();
+  };
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style
+  }, {
+    children: [handLabel(), handContent(), handleAddBtnTooltip(), jsx(HelperText, {
       className: "multi-box-error-text",
       error: isError,
       helperText: isError ? helperText : undefined,