@para-ui/core 3.0.55 → 3.0.56

package/SelectorPicker/index.js

@@ -0,0 +1,444 @@
+import { _ as _defineProperty } from '../_verture/defineProperty-62acccfc.js';
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.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-77f9e0fb.js';
+import Selector, { handFieldConfig } from '../Selector/index.js';
+import AutoTips from '../AutoTips/index.js';
+import { Popover } from '../Popover/index.js';
+import CloseCircle from '@para-ui/icons/CloseCircle';
+import Down from '@para-ui/icons/Down';
+import CloseIcon from '@para-ui/icons/Close';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/typeof-498dd2b1.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../Help/index.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Help';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '@paraview/lib';
+import '../_verture/index-beef914f.js';
+import '../Radio/index.js';
+import '../Checkbox/index.js';
+import '../Loading/index.js';
+import '@para-ui/icons/LoadingF';
+import '../Search/index.js';
+import '../TextField/index.js';
+import '@para-ui/icons/PreviewClose';
+import '@para-ui/icons/PreviewOpen';
+import '../_verture/useGlobalProps-1b846a65.js';
+import '@para-ui/core/GlobalContext';
+import '../Button/index.js';
+import '@para-ui/icons/Forbid';
+import '@para-ui/icons/Search';
+import '../Breadcrumbs/index.js';
+import '@para-ui/icons/More';
+import '@para-ui/icons/Return';
+import '../Empty/index.js';
+import '@para-ui/icons/Refresh';
+
+var en = {
+  selected: 'Selected',
+  select: 'Please select'
+};
+
+var zh = {
+  selected: '已选中',
+  select: '请选择'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2022/8/2 5:57 PM\n* @description\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-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-v3-selector-picker > .selector-picker-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 42px 0 12px;\n  border: 1px solid rgba(171, 176, 185, 0.4);\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-v3-selector-picker > .selector-picker-wrapper:hover {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  width: 100%;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  overflow: hidden;\n}\n.paraui-v3-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: rgba(171, 176, 185, 0.2);\n  border-radius: 4px;\n  padding: 0 12px 0 12px;\n  color: rgb(46, 55, 67);\n  margin-right: 8px;\n  vertical-align: top;\n  max-width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-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(46, 55, 67);\n}\n.paraui-v3-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-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > span {\n  color: rgb(46, 55, 67);\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-v3-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(46, 55, 67);\n  font-size: 16px;\n  position: relative;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-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-v3-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(46, 55, 67);\n  word-break: break-all;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-placeholder {\n  flex: 1;\n  color: rgba(46, 55, 67, 0.4);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  width: 20px;\n  height: 20px;\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-arrow > svg {\n  font-size: 20px;\n  color: rgba(46, 55, 67, 0.7);\n  transition: all 0.3s;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear {\n  position: absolute;\n  right: 12px;\n  top: 0;\n  z-index: 2;\n  line-height: 0;\n  opacity: 0;\n  transition: all 0.3s;\n  width: 20px;\n  height: 20px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear > svg {\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n  position: absolute;\n  left: 2px;\n  top: 2px;\n}\n.paraui-v3-selector-picker > .selector-picker-wrapper > .selector-picker-clear:hover > svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-focused > .selector-picker-wrapper > .selector-picker-arrow svg {\n  transform: rotate(180deg);\n  color: #3666d6;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper {\n  background-color: rgba(171, 176, 185, 0.12);\n  cursor: not-allowed;\n}\n.paraui-v3-selector-picker.paraui-v3-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-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover {\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow > svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-error > .selector-picker-wrapper {\n  border-color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear > .selector-picker-wrapper:hover > .selector-picker-clear {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-clear.paraui-v3-selector-picker-disabled > .selector-picker-wrapper:hover > .selector-picker-arrow {\n  opacity: 1;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 5px;\n  height: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 36px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 5px;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-selector-picker.paraui-v3-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-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 7px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 34px;\n  line-height: 34px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-large > .selector-picker-wrapper > .selector-picker-clear {\n  top: 8px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  padding-bottom: 4px;\n  height: 100%;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 32px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item {\n  margin-top: 4px;\n  height: 22px;\n  line-height: 22px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check > .check-select-content-item > svg {\n  top: 3px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 5px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 30px;\n  line-height: 30px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-medium > .selector-picker-wrapper > .selector-picker-clear {\n  top: 6px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper {\n  min-height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-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-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-wrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  min-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper {\n  height: 28px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-check {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small.paraui-v3-selector-picker-nowrap > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-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-v3-selector-picker.paraui-v3-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-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-wrapper-content > .selector-picker-wrapper-content-radio {\n  padding: 3px 0;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-placeholder {\n  height: 26px;\n  line-height: 26px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-arrow {\n  top: 4px;\n}\n.paraui-v3-selector-picker.paraui-v3-selector-picker-small > .selector-picker-wrapper > .selector-picker-clear {\n  top: 4px;\n}\n\n.paraui-v3-selector-picker-dropdown .paraui-v3-selector {\n  border: 0;\n}\n.paraui-v3-selector-picker-dropdown .selector-picker-dropdown-content {\n  max-height: 300px;\n  overflow: auto;\n}\n\n.paraui-v3-selector-more-popover {\n  padding-left: 16px;\n}\n.paraui-v3-selector-more-popover .select-more {\n  width: 300px;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-title {\n  font-size: 14px;\n  padding: 0 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content {\n  max-height: 300px;\n  overflow: auto;\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item {\n  padding: 0 12px;\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n}\n.paraui-v3-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-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg {\n  font-size: 20px;\n  position: relative;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-selector-more-popover .select-more > .select-more-content > .select-more-content-item > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-title {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-small .select-more > .select-more-content > .select-more-content-item {\n  line-height: 28px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-title {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-medium .select-more > .select-more-content > .select-more-content-item {\n  line-height: 32px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-title {\n  line-height: 36px;\n}\n.paraui-v3-selector-more-popover.paraui-v3-selector-more-popover-large .select-more > .select-more-content > .select-more-content-item {\n  line-height: 36px;\n}";
+styleInject(css_248z);
+
+//下拉选择器
+var SelectorPicker = function 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,
+    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({
+    list: []
+  });
+  var prefixCls = $prefixCls + '-selector-picker';
+  constData.current.value = value;
+  constData.current.valueCom = valueCom;
+  /** 处理value,defaultValue */
+  var handValue = function 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];
+    if (val instanceof Array) {
+      handVal = _toConsumableArray(val);
+    }
+    return handVal;
+  };
+  constData.current.list = handComVal();
+  useEffect(function () {
+    if (!overLine && multiple) {
+      window.addEventListener('resize', changeSize);
+    } else {
+      window.removeEventListener("resize", changeSize);
+    }
+    return function () {
+      window.removeEventListener("resize", changeSize);
+    };
+  }, [overLine, multiple]);
+  useEffect(function () {
+    changeSize();
+  }, [valueCom, value]);
+  /**
+   * 多选 不换行 计算
+   * @param index 数组下标
+   */
+  var handMultiline = function handMultiline(index) {
+    if (index === null || index === 0) return;
+    if (index === undefined) index = constData.current.list.length;
+    var refEle = refDom.current;
+    if (!refEle) return;
+    var boxDom = refEle.querySelector('.selector-picker-wrapper-content-check');
+    if (!boxDom) return;
+    if (boxDom.scrollHeight > boxDom.clientHeight) {
+      var num = Number(index) - 1;
+      // 超出
+      setMorePos(num);
+      handMultiline(num);
+    } else {
+      // 一行
+      if (constData.current.list.length <= index) handleCloseMore();
+    }
+  };
+  /** 改变屏幕大小 */
+  var changeSize = function changeSize() {
+    clearTimeout(constData.current.resizeTimer);
+    constData.current.resizeTimer = setTimeout(function () {
+      setMorePos(constData.current.list.length);
+      handMultiline();
+    }, 100);
+  };
+  //删除当前选中项
+  var handleTagRemove = function handleTagRemove(opt, index, e) {
+    e.stopPropagation();
+    constData.current.list.splice(index, 1);
+    onChangeCom(_toConsumableArray(constData.current.list), {}, {});
+  };
+  /** 改变事件 val绑定值, node处理过的数据 rowData原始数据 */
+  var onChangeCom = function onChangeCom(val, node, rowData) {
+    onChange && onChange(val, node, rowData);
+    if (!multiple) setOpen(false);
+    if (value === undefined) {
+      setValueCom(!val ? [] : val);
+    }
+  };
+  /** 处理标题 */
+  var renderLabel = function renderLabel() {
+    if (label || required) {
+      return jsx(Label, Object.assign({
+        label: label,
+        required: required
+      }, labelTooltip));
+    }
+    return null;
+  };
+  /** 下拉浮层 */
+  var renderOverlay = function renderOverlay() {
+    var handSelectorProps = function handSelectorProps() {
+      var obj = Object.assign({
+        layout: 'list',
+        disabled: disabled,
+        selectMode: multiple ? 'check' : 'radio',
+        value: handValue(),
+        defaultValue: defaultValue,
+        onChange: onChangeCom
+      }, selectorProps);
+      return obj;
+    };
+    return jsx("div", Object.assign({
+      className: 'selector-picker-dropdown-content',
+      style: {
+        width: (refDom && refDom.current ? refDom.current.offsetWidth : 0) + 'px'
+      }
+    }, {
+      children: jsx(Selector, Object.assign({}, handSelectorProps()))
+    }));
+  };
+  /**
+   * 点击显示更多
+   * @param e 点击元素
+   */
+  var clickMore = function clickMore(e) {
+    e.stopPropagation();
+    setOpenMore(true);
+    setOpen(false);
+  };
+  // 关闭显示更多
+  var handleCloseMore = function handleCloseMore() {
+    setOpenMore(false);
+  };
+  //全部清空
+  var handleAllClear = function handleAllClear(e) {
+    e.stopPropagation();
+    setOpen(false);
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+    onChangeCom(null, {}, {});
+  };
+  /** 显示下拉 */
+  var onVisibleChange = function onVisibleChange(bol) {
+    if (disabled) return;
+    setOpen(bol);
+  };
+  /** 处理单/多选内容 */
+  var handDetail = function 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) {
+          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;
+          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'
+          }, {
+            children: [jsx("span", {
+              children: jsx(AutoTips, {
+                children: renderVal || val
+              })
+            }), isClose && jsx(CloseIcon, {
+              onClick: function onClick(e) {
+                return 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",
+              onClick: clickMore
+            }, {
+              children: jsxs("span", {
+                children: ["+", constData.current.list.length - morePos]
+              })
+            }));
+          }
+        }()]
+      }));
+    }
+    // 单选
+    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;
+    return jsx("div", Object.assign({
+      className: 'selector-picker-wrapper-content-radio'
+    }, {
+      children: overLine ? resultVal : jsx(AutoTips, {
+        children: resultVal
+      })
+    }));
+  };
+  /** 处理内容 */
+  var renderTagContent = function renderTagContent() {
+    if (!constData.current.list.length) return null;
+    return jsx("div", Object.assign({
+      className: 'selector-picker-wrapper-content'
+    }, {
+      children: handDetail()
+    }));
+  };
+  /** dropdown 主体 */
+  var renderAnchor = function renderAnchor() {
+    return jsxs("div", Object.assign({
+      className: "selector-picker-wrapper"
+    }, {
+      children: [renderTagContent(), !constData.current.list.length && jsx("span", Object.assign({
+        className: 'selector-picker-placeholder'
+      }, {
+        children: placeholder
+      })), jsx("span", Object.assign({
+        className: 'selector-picker-arrow'
+      }, {
+        children: jsx(Down, {})
+      })), allowClear && constData.current.list.length && !disabled ? jsx("span", Object.assign({
+        className: "selector-picker-clear",
+        onClick: handleAllClear
+      }, {
+        children: jsx(CloseCircle, {})
+      })) : null]
+    }));
+  };
+  /** 多选更多弹窗内容 */
+  var morePopoverContent = function morePopoverContent() {
+    return jsxs("div", Object.assign({
+      className: "select-more"
+    }, {
+      children: [jsxs("div", Object.assign({
+        className: "select-more-title"
+      }, {
+        children: [jsx("span", {
+          children: intl({
+            id: 'selected'
+          })
+        }), jsxs("span", {
+          children: ["(", constData.current.list.length - Number(morePos), ")"]
+        })]
+      })), jsx("div", Object.assign({
+        className: "select-more-content"
+      }, {
+        children: constData.current.list.map(function (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;
+          if (disabled === true) {
+            isClose = false; // 禁用不显示×
+          }
+
+          return jsxs("div", Object.assign({
+            className: "select-more-content-item"
+          }, {
+            children: [jsx("span", {
+              children: jsx(AutoTips, {
+                children: renderVal || val
+              })
+            }), isClose && jsx(CloseIcon, {
+              onClick: function onClick(e) {
+                return handleTagRemove === null || handleTagRemove === void 0 ? void 0 : handleTagRemove(item, index, e);
+              }
+            })]
+          }), index);
+        })
+      }))]
+    }));
+  };
+  // 处理下拉框更多class
+  var handleClassMorePopover = function handleClassMorePopover() {
+    var str = "".concat($prefixCls, "-selector-more-popover ").concat($prefixCls, "-scrollbar-small");
+    if (size) str += " ".concat($prefixCls, "-selector-more-popover-").concat(size);
+    if (morePopoverClassName) str += ' ' + morePopoverClassName;
+    return str;
+  };
+  /** 多选超出popover */
+  var morePopover = function morePopover() {
+    return jsx(Popover, Object.assign({
+      placement: "rightTop",
+      visible: openMore,
+      content: morePopoverContent(),
+      onVisibleChange: handleCloseMore,
+      overlayClassName: handleClassMorePopover()
+    }, {
+      children: renderAnchor()
+    }));
+  };
+  /** 处理内容 */
+  var renderContent = function renderContent() {
+    return jsx(Dropdown, Object.assign({
+      visible: open,
+      destroyPopupOnHide: true,
+      overlay: renderOverlay(),
+      placement: 'bottomLeft',
+      trigger: ['click'],
+      onVisibleChange: onVisibleChange,
+      overlayClassName: $prefixCls + '-selector-picker-dropdown',
+      getPopupContainer: getPopupContainer
+    }, {
+      children: morePopover()
+    }));
+  };
+  /** 生成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));
+  };
+  return jsxs("div", Object.assign({
+    className: makeCls(),
+    style: style,
+    ref: refDom
+  }, {
+    children: [renderLabel(), renderContent(), jsx(HelperText, {
+      error: error,
+      helperText: helperText,
+      hideErrorDom: hideErrorDom
+    })]
+  }));
+};
+
+export { SelectorPicker as default };

package/SelectorPicker/lang/en_US.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    selected: string;
+    select: string;
+};
+export default _default;

package/SelectorPicker/lang/index.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    zh: {
+        selected: string;
+        select: string;
+    };
+    en: {
+        selected: string;
+        select: string;
+    };
+};
+export default _default;

package/SelectorPicker/lang/zh_CN.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    selected: string;
+    select: string;
+};
+export default _default;

package/SingleBox/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @author linhd
+ * @date 2021/8/23 14:20
+ * @description 单值框
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import { LabelTooltipProps } from "../Label";
+import { HelperTextDetailProps } from "../HelperText";
+import './index.scss';
+export interface SingleBoxProps extends HelperTextDetailProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 标题 */
+    label?: ReactNode;
+    /** 帮组提示信息 */
+    labelTooltip?: LabelTooltipProps;
+    /** 标题提示 */
+    labelSign?: ReactNode;
+    /** 提示语 */
+    placeholder?: ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否必填 */
+    required?: boolean;
+    /** 默认值 不受控 */
+    defaultValue?: string[];
+    /** 默认值 多选时为数组 单选单值 受控 */
+    value?: string[];
+    /** 没有错误的时候,不渲染 */
+    hideErrorDom?: boolean;
+    /** 错误提示 */
+    helperText?: ReactNode | ReactNode[];
+    /** 改变值 */
+    onChange?: (val: string[]) => void;
+    /** 匹配 */
+    fetchSuggestions?: (val: string, cb: (data: any[]) => void) => void;
+    [name: string]: any;
+}
+export declare const SingleBox: FunctionComponent<SingleBoxProps>;
+export default SingleBox;