@para-ui/core 4.0.0-rc.3 → 4.0.0-rc.5

package/SelectorPicker/index.js

@@ -1,24 +1,19 @@
-import { _ as _defineProperty } from '../_verture/defineProperty-1d116156.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, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import HelperText from '../HelperText/index.js';
 import Label from '../Label/index.js';
-import { D as Dropdown } from '../_verture/index-e9007d6a.js';
+import { D as Dropdown } from '../_verture/index-da9097d3.js';
 import Selector, { handFieldConfig } from '../Selector/index.js';
 import AutoTips from '../AutoTips/index.js';
 import { Popover } from '../Popover/index.js';
 import CloseCircleF from '@para-ui/icons/CloseCircleF';
 import Down from '@para-ui/icons/Down';
 import CloseIcon from '@para-ui/icons/Close';
-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/typeof-adeedc13.js';
-import '../_verture/unsupportedIterableToArray-cb478f24.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Help/index.js';
 import '@para-ui/icons/Help';
@@ -26,10 +21,10 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import '@para-ui/icons/Forbid';
 import 'rc-dropdown';
-import '../_verture/usePopupContainer-87febeb9.js';
+import '../_verture/usePopupContainer-635f66f4.js';
 import 'dayjs';
 import '@paraview/lib';
-import '../_verture/index-232d890b.js';
+import '../_verture/slicedToArray-8223a2ef.js';
 import '../_verture/typeof-c310ee4a.js';
 import '../Radio/index.js';
 import '../Checkbox/index.js';
@@ -39,7 +34,7 @@ import '../Search/index.js';
 import '../TextField/index.js';
 import '@para-ui/icons/PreviewClose';
 import '@para-ui/icons/PreviewOpen';
-import '../_verture/useGlobalProps-1b846a65.js';
+import '../_verture/useGlobalProps-1e416658.js';
 import '@para-ui/core/GlobalContext';
 import '@para-ui/icons/Search';
 import '../Breadcrumbs/index.js';
@@ -61,102 +56,84 @@ var zh = {
 };
 
 var localeJson = {
-  zh: zh,
-  en: en
+  zh,
+  en
 };
 
 var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author linhd\n* @date 2023/4/11 14:16\n* @description 最新色卡\n*/\n.paraui-v4-selector-picker {\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  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 38px 0 10px;\n  border: 1px solid rgb(212, 218, 227);\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  cursor: pointer;\n  transition: 0.3s;\n  padding-right: 40px;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgb(87, 131, 235);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  display: inline-block;\n  background-color: rgb(234, 236, 241);\n  border-radius: 4px;\n  padding: 0 10px;\n  color: rgb(29, 33, 38);\n  margin-right: 4px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more {\n  cursor: pointer;\n  color: rgb(29, 33, 38);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item.check-select-content-item-more > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(29, 33, 38);\n  display: inline-block;\n  height: 100%;\n  vertical-align: top;\n  max-width: calc(100% - 20px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  cursor: pointer;\n  margin-left: 8px;\n  color: rgb(29, 33, 38);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check.check-select-content-item-noclose > span {\n  max-width: none;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  font-size: 14px;\n  line-height: 1.429;\n  color: rgb(29, 33, 38);\n  word-break: break-all;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgb(161, 168, 179);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 18px;\n  height: 18px;\n  transition: all 0.3s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 18px;\n  color: rgb(92, 101, 115);\n  transition: all 0.3s;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 10px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgb(161, 168, 179);\n}\n.paraui-v4-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: rgb(46, 101, 230);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgb(247, 248, 250);\n  cursor: not-allowed;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  max-width: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgb(212, 218, 227);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(244, 66, 66) !important;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-clear.paraui-v4-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 3px;\n  height: 100%;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small.paraui-v4-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 3px;\n  height: 20px;\n  line-height: 20px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 2px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v4-selector-picker.paraui-v4-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v4-selector-picker-dropdown {\n  padding: 4px 0;\n}\n.paraui-v4-selector-picker-dropdown .paraui-v4-selector {\n  border: 0;\n}\n.paraui-v4-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v4-selector-more-popover {\n  /*// 小\n  &.paraui-v4-selector-more-popover-small {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 28px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 28px;\n        }\n      }\n    }\n  }\n\n  // 中\n  &.paraui-v4-selector-more-popover-medium {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 32px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 32px;\n        }\n      }\n    }\n  }\n\n  // 大\n  &.paraui-v4-selector-more-popover-large {\n    & .select-more {\n      & > .select-more-title {\n        line-height: 36px;\n      }\n\n      & > .select-more-content {\n        & > .select-more-content-item {\n          line-height: 36px;\n        }\n      }\n    }\n  }*/\n}\n.paraui-v4-selector-more-popover .select-more {\n  width: 290px;\n  padding: 4px 0;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 10px;\n  color: rgb(161, 168, 179);\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content {\n  max-height: 320px;\n  overflow: auto;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 10px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  line-height: 30px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item:hover {\n  background-color: rgb(247, 248, 250);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > span {\n  width: calc(100% - 25px);\n  display: inline-block;\n  font-size: 14px;\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 18px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(92, 101, 115);\n}\n.paraui-v4-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(46, 101, 230);\n  border-radius: 2px;\n}";
 styleInject(css_248z);
 
 //下拉选择器
-var SelectorPicker = function SelectorPicker(props) {
+const SelectorPicker = props => {
   var _a, _b, _c;
-  var intl = useFormatMessage('SelectorPicker', localeJson);
-  var className = props.className,
-    label = props.label,
-    value = props.value,
-    defaultValue = props.defaultValue,
-    _props$required = props.required,
-    required = _props$required === void 0 ? false : _props$required,
-    labelTooltip = props.labelTooltip,
-    _props$error = props.error,
-    error = _props$error === void 0 ? false : _props$error,
-    hideErrorDom = props.hideErrorDom,
-    helperText = props.helperText,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'large' : _props$size,
-    _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled,
-    disabledTooltip = props.disabledTooltip,
-    style = props.style,
-    _props$placeholder = props.placeholder,
-    placeholder = _props$placeholder === void 0 ? intl('select') : _props$placeholder,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple,
-    _props$allowClear = props.allowClear,
-    allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
-    _props$overLine = props.overLine,
-    overLine = _props$overLine === void 0 ? false : _props$overLine,
-    selectorProps = props.selectorProps,
-    onChange = props.onChange,
-    onClear = props.onClear,
-    tagRender = props.tagRender,
-    morePopoverClassName = props.morePopoverClassName,
-    getPopupContainer = props.getPopupContainer;
-  var fieldConfigHand = handFieldConfig((_a = props.selectorProps) === null || _a === void 0 ? void 0 : _a.fieldConfig, ((_b = props.selectorProps) === null || _b === void 0 ? void 0 : _b.rowKey) || 'key'); // 字段配置,对应数据字段
-  var selectorFieldConfigHand = Object.assign(Object.assign({}, fieldConfigHand), (_c = props.selectorProps) === null || _c === void 0 ? void 0 : _c.backDataFieldConfig); // 选中值字段配置,对应数据字段
-  var _useState = useState(!defaultValue ? [] : defaultValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    valueCom = _useState2[0],
-    setValueCom = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    open = _useState4[0],
-    setOpen = _useState4[1]; // 显示下拉
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    openMore = _useState6[0],
-    setOpenMore = _useState6[1]; // 显示更多
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    morePos = _useState8[0],
-    setMorePos = _useState8[1]; // 超出在原始位置
-  var refDom = useRef(null); // 容器
-  var constData = useRef({
+  const intl = useFormatMessage('SelectorPicker', localeJson);
+  const {
+    className,
+    label,
+    value,
+    defaultValue,
+    required = false,
+    labelTooltip,
+    error = false,
+    hideErrorDom,
+    helperText,
+    size = 'large',
+    disabled = false,
+    disabledTooltip,
+    style,
+    placeholder = intl('select'),
+    multiple = false,
+    allowClear = false,
+    overLine = false,
+    selectorProps,
+    onChange,
+    onClear,
+    tagRender,
+    morePopoverClassName,
+    getPopupContainer
+  } = props;
+  const fieldConfigHand = handFieldConfig((_a = props.selectorProps) === null || _a === void 0 ? void 0 : _a.fieldConfig, ((_b = props.selectorProps) === null || _b === void 0 ? void 0 : _b.rowKey) || 'key'); // 字段配置,对应数据字段
+  const selectorFieldConfigHand = Object.assign(Object.assign({}, fieldConfigHand), (_c = props.selectorProps) === null || _c === void 0 ? void 0 : _c.backDataFieldConfig); // 选中值字段配置,对应数据字段
+  const [valueCom, setValueCom] = useState(!defaultValue ? [] : defaultValue);
+  const [open, setOpen] = useState(false); // 显示下拉
+  const [openMore, setOpenMore] = useState(false); // 显示更多
+  const [morePos, setMorePos] = useState(null); // 超出在原始位置
+  const refDom = useRef(null); // 容器
+  const constData = useRef({
     list: []
   });
-  var prefixCls = "".concat($prefixCls, "-selector-picker");
+  const prefixCls = "".concat($prefixCls, "-selector-picker");
   constData.current.value = value;
   constData.current.valueCom = valueCom;
   constData.current.openMore = openMore;
   /** 处理value,defaultValue */
-  var handValue = function handValue() {
+  const handValue = () => {
     if (constData.current.value !== undefined) return constData.current.value;
     return constData.current.valueCom;
   };
   /** 处理组件绑定的值 */
-  var handComVal = function handComVal() {
-    var val = handValue();
-    var handVal = !val ? [] : [val];
+  const handComVal = () => {
+    const val = handValue();
+    let handVal = !val ? [] : [val];
     if (val instanceof Array) {
-      handVal = _toConsumableArray(val);
+      handVal = [...val];
     }
     return handVal;
   };
   constData.current.list = handComVal();
-  useEffect(function () {
+  useEffect(() => {
     if (!overLine && multiple) {
       window.addEventListener('resize', changeSize);
     } else {
       window.removeEventListener('resize', changeSize);
     }
-    return function () {
+    return () => {
       window.removeEventListener('resize', changeSize);
     };
   }, [overLine, multiple]);
-  useEffect(function () {
+  useEffect(() => {
     changeSize();
-    return function () {
+    return () => {
       clearTimeout(constData.current.resizeTimer);
     };
   }, [valueCom, value]);
@@ -164,15 +141,15 @@ var SelectorPicker = function SelectorPicker(props) {
    * 多选 不换行 计算
    * @param index 数组下标
    */
-  var handMultiline = function handMultiline(index) {
+  const handMultiline = index => {
     if (index === null || index === 0) return;
     if (index === undefined) index = constData.current.list.length;
-    var refEle = refDom.current;
+    const refEle = refDom.current;
     if (!refEle) return;
-    var boxDom = refEle.querySelector('.selector-picker-wrapper-content-check');
+    const boxDom = refEle.querySelector('.selector-picker-wrapper-content-check');
     if (!boxDom) return;
     if (boxDom.scrollHeight > boxDom.clientHeight) {
-      var num = Number(index) - 1;
+      const num = Number(index) - 1;
       // 超出
       setMorePos(num);
       handMultiline(num);
@@ -182,22 +159,22 @@ var SelectorPicker = function SelectorPicker(props) {
     }
   };
   /** 改变屏幕大小 */
-  var changeSize = function changeSize() {
+  const changeSize = () => {
     if (constData.current.list.length === 0) return setMorePos(null);
     clearTimeout(constData.current.resizeTimer);
-    constData.current.resizeTimer = setTimeout(function () {
+    constData.current.resizeTimer = setTimeout(() => {
       setMorePos(constData.current.list.length);
       handMultiline();
     }, 50);
   };
   //删除当前选中项
-  var handleTagRemove = function handleTagRemove(opt, index, e) {
+  const handleTagRemove = (opt, index, e) => {
     e.stopPropagation();
     constData.current.list.splice(index, 1);
-    onChangeCom(_toConsumableArray(constData.current.list), {}, {});
+    onChangeCom([...constData.current.list], {}, {});
   };
   /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
-  var onChangeCom = function onChangeCom(val, node, rowData) {
+  const onChangeCom = (val, node, rowData) => {
     onChange && onChange(val, node, rowData);
     if (!multiple) setOpen(false);
     if (value === undefined) {
@@ -205,7 +182,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }
   };
   /** 处理标题 */
-  var renderLabel = function renderLabel() {
+  const renderLabel = () => {
     if (label || required) {
       return jsx(Label, Object.assign({
         label: label,
@@ -214,14 +191,14 @@ var SelectorPicker = function SelectorPicker(props) {
     }
   };
   /** 下拉浮层 */
-  var renderOverlay = function renderOverlay() {
-    var handSelectorProps = function handSelectorProps() {
-      var obj = Object.assign({
+  const renderOverlay = () => {
+    const handSelectorProps = () => {
+      const obj = Object.assign({
         layout: 'list',
-        disabled: disabled,
+        disabled,
         selectMode: multiple ? 'check' : 'radio',
         value: handValue(),
-        defaultValue: defaultValue,
+        defaultValue,
         onChange: onChangeCom
       }, selectorProps);
       return obj;
@@ -239,46 +216,45 @@ var SelectorPicker = function SelectorPicker(props) {
    * 点击显示更多
    * @param e 点击元素
    */
-  var clickMore = function clickMore(e) {
+  const clickMore = e => {
     e.stopPropagation();
     setOpenMore(true);
     setOpen(false);
   };
   // 关闭显示更多
-  var handleCloseMore = function handleCloseMore() {
+  const handleCloseMore = () => {
     if (constData.current.openMore) setOpenMore(false);
   };
   //全部清空
-  var handleAllClear = function handleAllClear(e) {
+  const handleAllClear = e => {
     e.stopPropagation();
     setOpen(false);
     onClear === null || onClear === void 0 ? void 0 : onClear();
     onChangeCom(null, {}, {});
   };
   /** 显示下拉 */
-  var onVisibleChange = function onVisibleChange(bol) {
+  const onVisibleChange = bol => {
     if (disabled) return;
     setOpen(bol);
   };
   /** 处理单/多选内容 */
-  var handDetail = function handDetail() {
+  const handDetail = () => {
     var _a, _b;
     if (multiple) {
       // 多选
       return jsxs("div", Object.assign({
         className: 'selector-picker-wrapper-content-check'
       }, {
-        children: [constData.current.list.map(function (item, index) {
+        children: [constData.current.list.map((item, index) => {
           if (morePos !== null && morePos <= index) return null;
-          var labelStr = selectorFieldConfigHand.mainTitle || '';
-          var valKey = selectorFieldConfigHand.key || '';
-          var val = item[labelStr] || item[valKey];
-          var renderVal = tagRender && tagRender(item);
-          var isClose = true;
+          const labelStr = selectorFieldConfigHand.mainTitle || '';
+          const valKey = selectorFieldConfigHand.key || '';
+          const val = item[labelStr] || item[valKey];
+          const renderVal = tagRender && tagRender(item);
+          let isClose = true;
           if (disabled === true) {
             isClose = false; // 禁用不显示×
           }
-
           return jsxs("div", Object.assign({
             className: isClose ? 'check-select-content-item' : 'check-select-content-item check-select-content-item-noclose'
           }, {
@@ -289,12 +265,10 @@ var SelectorPicker = function SelectorPicker(props) {
                 children: renderVal || val
               }))
             }), isClose && jsx(CloseIcon, {
-              onClick: function onClick(e) {
-                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
-              }
+              onClick: e => handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e)
             })]
           }), index);
-        }), function () {
+        }), (() => {
           if (morePos !== null && constData.current.list.length > morePos) {
             return jsx("div", Object.assign({
               className: "check-select-content-item check-select-content-item-more",
@@ -305,15 +279,15 @@ var SelectorPicker = function SelectorPicker(props) {
               })
             }));
           }
-        }()]
+        })()]
       }));
     }
     // 单选
-    var labelStr = selectorFieldConfigHand.mainTitle || '';
-    var valKey = selectorFieldConfigHand.key || '';
-    var val = ((_a = constData.current.list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = constData.current.list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
-    var renderVal = tagRender && tagRender(constData.current.list[0]);
-    var resultVal = renderVal || val;
+    const labelStr = selectorFieldConfigHand.mainTitle || '';
+    const valKey = selectorFieldConfigHand.key || '';
+    const val = ((_a = constData.current.list[0]) === null || _a === void 0 ? void 0 : _a[labelStr]) || ((_b = constData.current.list[0]) === null || _b === void 0 ? void 0 : _b[valKey]);
+    const renderVal = tagRender && tagRender(constData.current.list[0]);
+    const resultVal = renderVal || val;
     return jsx("div", Object.assign({
       className: 'selector-picker-wrapper-content-radio'
     }, {
@@ -325,7 +299,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   /** 处理内容 */
-  var renderTagContent = function renderTagContent() {
+  const renderTagContent = () => {
     if (!constData.current.list.length) return null;
     return jsx("div", Object.assign({
       className: 'selector-picker-wrapper-content'
@@ -334,7 +308,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   /** dropdown 主体 */
-  var renderAnchor = function renderAnchor() {
+  const renderAnchor = () => {
     return jsxs("div", Object.assign({
       className: "selector-picker-wrapper"
     }, {
@@ -355,7 +329,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   /** 多选更多弹窗内容 */
-  var morePopoverContent = function morePopoverContent() {
+  const morePopoverContent = () => {
     return jsxs("div", Object.assign({
       className: "select-more"
     }, {
@@ -370,17 +344,16 @@ var SelectorPicker = function SelectorPicker(props) {
       })), jsx("div", Object.assign({
         className: "select-more-content"
       }, {
-        children: constData.current.list.map(function (item, index) {
+        children: constData.current.list.map((item, index) => {
           if (morePos !== null && morePos > index) return null;
-          var labelStr = selectorFieldConfigHand.mainTitle || '';
-          var valKey = selectorFieldConfigHand.key || '';
-          var val = item[labelStr] || item[valKey];
-          var renderVal = tagRender && tagRender(item);
-          var isClose = true;
+          const labelStr = selectorFieldConfigHand.mainTitle || '';
+          const valKey = selectorFieldConfigHand.key || '';
+          const val = item[labelStr] || item[valKey];
+          const renderVal = tagRender && tagRender(item);
+          let isClose = true;
           if (disabled === true) {
             isClose = false; // 禁用不显示×
           }
-
           return jsxs("div", Object.assign({
             className: "select-more-content-item"
           }, {
@@ -391,9 +364,7 @@ var SelectorPicker = function SelectorPicker(props) {
                 children: renderVal || val
               }))
             }), isClose && jsx(CloseIcon, {
-              onClick: function onClick(e) {
-                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
-              }
+              onClick: e => handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e)
             })]
           }), index);
         })
@@ -401,14 +372,14 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   // 处理下拉框更多class
-  var handleClassMorePopover = function handleClassMorePopover() {
-    var str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
+  const handleClassMorePopover = () => {
+    let str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
     if (size) str += " ".concat($prefixCls, "-selector-more-popover-").concat(size);
     if (morePopoverClassName) str += " ".concat(morePopoverClassName);
     return str;
   };
   /** 多选超出popover */
-  var morePopover = function morePopover() {
+  const morePopover = () => {
     return jsx(Popover, Object.assign({
       placement: "rightTop",
       visible: openMore,
@@ -420,7 +391,7 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   /** 处理内容 */
-  var renderContent = function renderContent() {
+  const renderContent = () => {
     return jsx(Dropdown, Object.assign({
       visible: open,
       destroyPopupOnHide: true,
@@ -439,9 +410,16 @@ var SelectorPicker = function SelectorPicker(props) {
     }));
   };
   /** 生成cls */
-  var makeCls = function makeCls() {
-    var _clsx;
-    return clsx(prefixCls, className, (_clsx = {}, _defineProperty(_clsx, "".concat(prefixCls, "-focused"), open), _defineProperty(_clsx, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_clsx, "".concat(prefixCls, "-error"), error), _defineProperty(_clsx, "".concat(prefixCls, "-clear"), allowClear && constData.current.list.length), _defineProperty(_clsx, "".concat(prefixCls, "-").concat(size), size), _defineProperty(_clsx, "".concat(prefixCls, "-wrap"), overLine), _defineProperty(_clsx, "".concat(prefixCls, "-nowrap"), !overLine), _clsx));
+  const makeCls = () => {
+    return clsx(prefixCls, className, {
+      ["".concat(prefixCls, "-focused")]: open,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-error")]: error,
+      ["".concat(prefixCls, "-clear")]: allowClear && constData.current.list.length,
+      ["".concat(prefixCls, "-").concat(size)]: size,
+      ["".concat(prefixCls, "-wrap")]: overLine,
+      ["".concat(prefixCls, "-nowrap")]: !overLine
+    });
   };
   return jsxs("div", Object.assign({
     className: makeCls(),

package/SingleBox/index.d.ts

@@ -7,6 +7,7 @@ import React, { FunctionComponent, ReactNode } from 'react';
 import { TextFieldProps } from '../TextField';
 import { LabelTooltipProps } from '../Label';
 import { HelperTextDetailProps } from '../HelperText';
+import { TooltipProps } from "../Tooltip";
 import './index.scss';
 export interface SingleBoxProps extends HelperTextDetailProps {
     /** 样式class */
@@ -25,6 +26,10 @@ export interface SingleBoxProps extends HelperTextDetailProps {
     placeholder?: ReactNode;
     /** 是否禁用 */
     disabled?: boolean;
+    /**
+     * 禁用提示
+     */
+    disabledTooltip?: TooltipProps;
     /** 是否必填 */
     required?: boolean;
     /** 默认值 不受控 */