@kdcloudjs/kdesign 1.0.2

package/es/select/select.js

@@ -0,0 +1,684 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
+import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import { useMergedState } from '../_utils/hooks';
+import classNames from 'classnames';
+import ConfigContext from '../config-provider/ConfigContext';
+import { getCompProps } from '../_utils';
+import { toArray } from '../_utils/react-children';
+import { Input, Icon, Checkbox, Tag } from '../index';
+import Option from './option';
+import usePopper from '../_utils/usePopper';
+
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames7, _classNames13, _classNames14;
+
+  var _a;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var selectProps = getCompProps('Select', userDefaultProps, props);
+  var size = selectProps.size,
+      value = selectProps.value,
+      autoFocus = selectProps.autoFocus,
+      className = selectProps.className,
+      defaultOpen = selectProps.defaultOpen,
+      dropdownClassName = selectProps.dropdownClassName,
+      disabled = selectProps.disabled,
+      borderType = selectProps.borderType,
+      _selectProps$showArro = selectProps.showArrow,
+      showArrow = _selectProps$showArro === void 0 ? true : _selectProps$showArro,
+      allowClear = selectProps.allowClear,
+      customPrefixcls = selectProps.prefixCls,
+      onFocus = selectProps.onFocus,
+      onBlur = selectProps.onBlur,
+      onClear = selectProps.onClear,
+      onVisibleChange = selectProps.onVisibleChange,
+      mode = selectProps.mode,
+      showSearch = selectProps.showSearch,
+      onChange = selectProps.onChange,
+      onSearch = selectProps.onSearch,
+      defaultValue = selectProps.defaultValue,
+      labelInValue = selectProps.labelInValue,
+      children = selectProps.children,
+      options = selectProps.options,
+      placeholder = selectProps.placeholder,
+      dropdownStyle = selectProps.dropdownStyle,
+      style = selectProps.style,
+      clearIcon = selectProps.clearIcon;
+  var isMultiple = mode === 'multiple'; // 是否多选
+
+  var _useMergedState = useMergedState(undefined, {
+    value: value,
+    defaultValue: defaultValue
+  }),
+      _useMergedState2 = _slicedToArray(_useMergedState, 2),
+      initValue = _useMergedState2[0],
+      setInitValue = _useMergedState2[1];
+
+  var realChildren = Array.isArray(options) ? options : toArray(children); // options配置项和默认children
+  // console.log('real', realChildren)
+
+  var innerRef = React.useRef();
+  var selectRef = ref || innerRef;
+  var searchRef = useRef(null); // 搜索框ref
+
+  var selectionRef = useRef(null);
+  var dropDownRef = useRef(null);
+  var multipleRef = useRef({
+    selectedVal: isMultiple ? [] : null,
+    selectMulOpts: []
+  }); // 多选ref已选中项
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      mulOptions = _useState2[0],
+      setMulOptions = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      singleVal = _useState4[0],
+      setSingleVal = _useState4[1];
+
+  var _useState5 = useState(!!props.visible || defaultOpen),
+      _useState6 = _slicedToArray(_useState5, 2),
+      optionShow = _useState6[0],
+      setOptionShow = _useState6[1]; // 下拉列表是否展示
+
+
+  var _useState7 = useState(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      searchInput = _useState8[0],
+      setSearchInput = _useState8[1]; // 搜索框值
+
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      timer = _useState10[0],
+      setTimer = _useState10[1]; // 搜索框定时器
+
+
+  var selectPrefixCls = getPrefixCls(prefixCls, 'select', customPrefixcls); // 选择器样式
+
+  var selectCls = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true)); // 下拉列表框样式
+
+  var dropDownCls = classNames(dropdownClassName, _defineProperty({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉搜索框样式
+
+  var searchCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-search"), true)); // 下拉子项列表样式
+
+  var dropContentCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-scroll"), isMultiple ? (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 8 : (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 10)); // 多选底部样式
+
+  var multipleFooterCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
+
+  var commCls = classNames((_classNames7 = {}, _defineProperty(_classNames7, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames7, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-wrapper"), true), _classNames7));
+  React.useEffect(function () {
+    setOptionShow(!!props.visible);
+  }, [props.visible]); // realchildren更新时数据处理---待解决
+
+  useEffect(function () {
+    if (isMultiple) {
+      multipleRef.current.selectedVal = initValue || [];
+
+      if (Array.isArray(initValue)) {
+        if (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) {
+          var _context2;
+
+          var arr = [];
+
+          _mapInstanceProperty(initValue).call(initValue, function (item) {
+            var _a, _b;
+
+            var obj = (realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
+              if (child && child.props) {
+                return child.props.value === item;
+              } else {
+                return child.value === item;
+              }
+            })) || {};
+
+            if (options && options.length) {
+              arr.push({
+                value: obj === null || obj === void 0 ? void 0 : obj.value,
+                label: (obj === null || obj === void 0 ? void 0 : obj.label) || (obj === null || obj === void 0 ? void 0 : obj.value)
+              });
+            } else {
+              arr.push({
+                value: (_a = obj.props) === null || _a === void 0 ? void 0 : _a.value,
+                label: (_b = obj.props) === null || _b === void 0 ? void 0 : _b.children
+              });
+            }
+          });
+
+          setMulOptions(_concatInstanceProperty(_context2 = []).call(_context2, arr));
+          multipleRef.current.selectMulOpts = _concatInstanceProperty(arr).call(arr);
+        }
+
+        if (!(initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+          setMulOptions([]);
+        }
+      }
+    }
+  }, [isMultiple, initValue, children, options]);
+  useEffect(function () {
+    var _a;
+
+    if (!isMultiple) {
+      multipleRef.current.selectedVal = initValue; // 默认选中值
+
+      if (initValue !== undefined) {
+        var obj = (realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
+          var _a;
+
+          if (child && child.props) {
+            return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.value) === initValue;
+          } else {
+            return (child === null || child === void 0 ? void 0 : child.value) === initValue;
+          }
+        })) || {};
+
+        if (options && options.length) {
+          setSingleVal((obj === null || obj === void 0 ? void 0 : obj.label) || (obj === null || obj === void 0 ? void 0 : obj.value));
+        } else {
+          setSingleVal((_a = obj.props) === null || _a === void 0 ? void 0 : _a.children);
+        }
+      } else {
+        setSingleVal(undefined);
+      }
+    }
+  }, [initValue, realChildren]); // 更新搜索框的值，判断清除按钮显隐
+
+  useEffect(function () {
+    var _a;
+
+    setSearchInput((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value);
+  }, [(_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value]);
+  useEffect(function () {
+    handleClear();
+  }, [optionShow === false]);
+  var handleFocus = useCallback(function (e) {
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = useCallback(function (e) {
+    onBlur && onBlur(e);
+  }, [onBlur]); // 点击组件
+
+  var handleClick = function handleClick() {
+    if (disabled) return;
+
+    if (!optionShow) {
+      var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
+      onDropdownVisibleChange && onDropdownVisibleChange(!optionShow);
+    } // handleClear()
+
+  }; // 点击下拉列表中某项回调
+
+
+  var handleOption = function handleOption(key, label, isSelected) {
+    var _a, _b, _c;
+
+    var onSelect = selectProps.onSelect,
+        onDeselect = selectProps.onDeselect,
+        labelInValue = selectProps.labelInValue,
+        value = selectProps.value;
+    var obj = (realChildren === null || realChildren === void 0 ? void 0 : _findInstanceProperty(realChildren).call(realChildren, function (child) {
+      var _a;
+
+      if (child && child.props) {
+        return ((_a = child.props) === null || _a === void 0 ? void 0 : _a.value) === key;
+      } else {
+        return (child === null || child === void 0 ? void 0 : child.value) === key;
+      }
+    })) || {};
+
+    if (value !== undefined) {
+      // onChange && onChange(labelInValue ? { value: key, label } : key)
+      if (isMultiple) {
+        var _multipleRef$current = multipleRef.current,
+            selectedVal = _multipleRef$current.selectedVal,
+            selectMulOpts = _multipleRef$current.selectMulOpts;
+
+        var valArr = _toConsumableArray(selectedVal);
+
+        var optsArr = _toConsumableArray(selectMulOpts);
+
+        if (_includesInstanceProperty(selectedVal).call(selectedVal, key)) {
+          var idx = selectedVal.indexOf(key);
+
+          _spliceInstanceProperty(valArr).call(valArr, idx, 1);
+
+          _spliceInstanceProperty(optsArr).call(optsArr, idx, 1);
+        } else {
+          valArr.push(key);
+          optsArr.push({
+            value: key,
+            label: obj.props ? (_a = obj.props) === null || _a === void 0 ? void 0 : _a.children : obj.label || key
+          });
+        }
+
+        onChange && onChange(labelInValue ? optsArr : valArr);
+
+        if (!isSelected) {
+          onDeselect && onDeselect(key); // 下拉项取消选中时调用，参数为选中项的value,多选模式下生效
+        }
+      } else {
+        props.visible === undefined && setOptionShow(false);
+        onChange && onChange(labelInValue ? {
+          value: key,
+          label: label
+        } : key);
+      }
+
+      onSelect && onSelect(key);
+      return;
+    }
+
+    if (!isMultiple) {
+      setSingleVal(obj.props ? (_b = obj.props) === null || _b === void 0 ? void 0 : _b.children : obj.label || key);
+      multipleRef.current.selectedVal = key;
+      setInitValue(key);
+      props.visible === undefined && setOptionShow(false); // handleClear()
+
+      onChange && onChange(labelInValue ? {
+        value: key,
+        label: label
+      } : key);
+    } else {
+      var _multipleRef$current2 = multipleRef.current,
+          _selectedVal = _multipleRef$current2.selectedVal,
+          _selectMulOpts = _multipleRef$current2.selectMulOpts;
+
+      if (_includesInstanceProperty(_selectedVal).call(_selectedVal, key)) {
+        var _idx = _selectedVal.indexOf(key);
+
+        _spliceInstanceProperty(_selectedVal).call(_selectedVal, _idx, 1);
+
+        _spliceInstanceProperty(_selectMulOpts).call(_selectMulOpts, _idx, 1);
+      } else {
+        _selectedVal.push(key);
+
+        _selectMulOpts.push({
+          value: key,
+          label: obj.props ? (_c = obj.props) === null || _c === void 0 ? void 0 : _c.children : obj.label || key
+        });
+      } // setInitValue([...selectedVal])
+
+
+      setMulOptions(_toConsumableArray(_selectMulOpts));
+      onChange && onChange(labelInValue ? _selectMulOpts : _selectedVal);
+
+      if (!isSelected) {
+        onDeselect && onDeselect(key); // 下拉项取消选中时调用，参数为选中项的value,多选模式下生效
+      }
+    } // if (isSelected) {
+    //   onSelect && onSelect(key) // 下拉项被选中时调用，参数为选中项value或key
+    // }
+
+
+    onSelect && onSelect(key); // 下拉项被选中时调用，参数为选中项value或key
+  }; // 多选模式下选中所有 与清除所有 (可以优化)
+
+
+  var handleSelectAll = function handleSelectAll() {
+    var _multipleRef$current3 = multipleRef.current,
+        selectedVal = _multipleRef$current3.selectedVal,
+        selectMulOpts = _multipleRef$current3.selectMulOpts;
+
+    if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
+      _mapInstanceProperty(realChildren).call(realChildren, function (child) {
+        var _child$props = child.props,
+            value = _child$props.value,
+            children = _child$props.children;
+
+        if (!_includesInstanceProperty(selectedVal).call(selectedVal, value)) {
+          selectedVal.push(value);
+          selectMulOpts.push({
+            value: value,
+            label: children
+          });
+        }
+      });
+
+      setMulOptions(_toConsumableArray(selectMulOpts));
+    } else {
+      multipleRef.current.selectedVal = [];
+      multipleRef.current.selectMulOpts = [];
+      setMulOptions([]);
+    }
+
+    onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
+  }; // 筛选内容 ---可以优化，抽成hook
+
+
+  var handleSearch = useCallback(function (event) {
+    var _a;
+
+    if (event.currentTarget.matches('i')) {
+      onSearch && onSearch((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value);
+    }
+  }, [onSearch]); // 输入框变化搜索内容
+
+  var handleSearchChange = useCallback(function (event) {
+    var val = event.currentTarget.value;
+    clearTimeout(timer);
+    setTimer(setTimeout(function () {
+      onSearch && onSearch(val);
+    }, 500));
+  }, [onSearch, timer]); // 清除搜索内容
+
+  var handleClear = useCallback(function () {
+    if (searchRef.current) {
+      searchRef.current.value = '';
+      onSearch && onSearch('');
+      setSearchInput('');
+    }
+  }, [onSearch, searchRef]); // 清空选择器内容
+
+  var handleReset = function handleReset(e) {
+    e.stopPropagation(); // setOptionShow(false)
+    // e.nativeEvent.stopImmediatePropagation()
+
+    if (isMultiple) {
+      multipleRef.current.selectedVal = [];
+      multipleRef.current.selectMulOpts = [];
+      setMulOptions([]);
+    } else {
+      // setSingleVal('')
+      setInitValue(''); // selectionRef.current.value = ''
+      // multipleRef.current.selectedVal = ''
+    }
+
+    onClear && onClear('');
+    onChange && onChange(isMultiple ? '' : undefined);
+  }; // 多选模式下清除某一项
+
+
+  var handleRemove = function handleRemove(e) {
+    if (disabled) return;
+    var tag = e.currentTarget.parentNode.getAttribute('data-tag'); // const { tag } = e.currentTarget.dataset
+
+    var _multipleRef$current4 = multipleRef.current,
+        selectedVal = _multipleRef$current4.selectedVal,
+        selectMulOpts = _multipleRef$current4.selectMulOpts;
+    var idx = selectedVal.indexOf(tag);
+
+    _spliceInstanceProperty(selectedVal).call(selectedVal, idx, 1);
+
+    _spliceInstanceProperty(selectMulOpts).call(selectMulOpts, idx, 1);
+
+    setMulOptions(_toConsumableArray(selectMulOpts));
+    onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
+    e.stopPropagation();
+  }; // 控制下列面板的显示
+
+
+  var handleDropdownShow = function handleDropdownShow() {
+    if (!optionShow && !disabled) {
+      setOptionShow(true);
+      onVisibleChange && onVisibleChange(true);
+    }
+  }; // 渲染后缀图标
+
+
+  var renderSuffix = function renderSuffix() {
+    var _classNames8;
+
+    var suffixIcon = selectProps.suffixIcon;
+    var selectedVal = multipleRef.current.selectedVal; // 选择器下拉icon样式
+
+    var arrowIconCls = classNames((_classNames8 = {}, _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
+    var iconShow = allowClear && (isMultiple ? mulOptions.length > 0 : selectedVal);
+    var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+      onClick: handleReset,
+      className: clearIconCls
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "close"
+    }) || clearIcon), showArrow && /*#__PURE__*/React.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    })));
+  };
+
+  var renderOption = function renderOption(child, index) {
+    if ((child === null || child === void 0 ? void 0 : child.props) && (child.type.displayName === 'Option' || child.type.name === 'Option')) {
+      return /*#__PURE__*/React.createElement(Option, _extends({
+        isMultiple: isMultiple
+      }, child.props, {
+        key: index,
+        index: index,
+        onChangeSelect: handleOption,
+        values: multipleRef.current.selectedVal
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement(Option, _extends({
+        isMultiple: isMultiple,
+        value: child === null || child === void 0 ? void 0 : child.value,
+        key: index,
+        index: index,
+        onChangeSelect: handleOption,
+        values: multipleRef.current.selectedVal
+      }, child), (child === null || child === void 0 ? void 0 : child.label) || (child === null || child === void 0 ? void 0 : child.value));
+    }
+  };
+
+  var dropRender = function dropRender(childrenToRender, heightStyle) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: dropContentCls,
+      style: heightStyle
+    }, childrenToRender);
+  }; // 下拉列表为空时显示的内容
+
+
+  var renderNotContent = function renderNotContent() {
+    // 下拉列表为空
+    var emptyListCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-empty"), true));
+    var notFoundContent = selectProps.notFoundContent;
+    var emptyContent = notFoundContent || '暂无数据';
+    return (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) === 0 && /*#__PURE__*/React.createElement("div", {
+      className: emptyListCls
+    }, emptyContent);
+  }; // 渲染下拉列表框
+
+
+  var renderContent = function renderContent() {
+    var _a;
+
+    var searchIcon = selectProps.searchIcon,
+        dropdownRender = selectProps.dropdownRender,
+        listHeight = selectProps.listHeight;
+    var selectedVal = multipleRef.current.selectedVal;
+    var childrenToRender = realChildren;
+
+    if (Array.isArray(realChildren) && realChildren.length > 0) {
+      childrenToRender = _mapInstanceProperty(realChildren).call(realChildren, function (item, index) {
+        if (item === null || item === undefined) return;
+        var temp = renderOption(item, index);
+        return temp;
+      });
+    }
+
+    var heightStyle = {
+      maxHeight: listHeight || '300px'
+    }; // 下拉框style属性
+
+    var dropDownStyle = _extends({
+      width: style === null || style === void 0 ? void 0 : style.width
+    }, dropdownStyle);
+
+    var checkboxStyle = {
+      height: '30px',
+      background: 'none'
+    };
+    var indeterminate = mulOptions.length > 0 && mulOptions.length < realChildren.length;
+    var checked = mulOptions.length === realChildren.length;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: dropDownCls,
+      style: dropDownStyle,
+      ref: dropDownRef
+    }, (showSearch || isMultiple) && /*#__PURE__*/React.createElement("div", {
+      className: searchCls
+    }, /*#__PURE__*/React.createElement(Input, {
+      ref: searchRef,
+      value: ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value) || '',
+      borderType: "bordered",
+      placeholder: "\u8BF7\u8F93\u5165\u9700\u8981\u641C\u7D22\u7684\u5185\u5BB9",
+      // 搜索图标
+      prefix: /*#__PURE__*/React.createElement("span", {
+        onClick: handleSearch
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "search"
+      }) || searchIcon),
+      suffix: searchInput && /*#__PURE__*/React.createElement("span", {
+        onClick: handleClear
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "close"
+      })),
+      onChange: handleSearchChange
+    })), !dropdownRender && realChildren.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/React.createElement("div", {
+      className: multipleFooterCls
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      style: checkboxStyle,
+      checked: checked,
+      indeterminate: indeterminate,
+      onChange: handleSelectAll
+    }, "\u5168\u9009"), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-multiple-footer-hadSelected")
+    }, "\u5DF2\u9009", /*#__PURE__*/React.createElement("span", null, isMultiple ? selectedVal.length : 0), "\u9879"))));
+  }; // 处理多选tag
+
+
+  var handleMaxTagHolder = useCallback(function () {
+    var maxTagPlaceholder = selectProps.maxTagPlaceholder;
+    var TagStyle = {
+      margin: '2px 8px 2px 0'
+    };
+
+    if (typeof maxTagPlaceholder === 'function') {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder(mulOptions));
+    } else {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder);
+    }
+  }, [mulOptions]); // 渲染多选选择器 (待优化：多选框下拉按钮样式调整，限制tag数代码优化)
+
+  var renderMultiple = function renderMultiple() {
+    var _context3, _classNames11, _context4, _classNames12;
+
+    var maxTagCount = selectProps.maxTagCount,
+        maxTagPlaceholder = selectProps.maxTagPlaceholder;
+    var multipleCls = classNames(commCls, (_classNames11 = {}, _defineProperty(_classNames11, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames11, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), _defineProperty(_classNames11, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), _defineProperty(_classNames11, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames11));
+    var itemCls = classNames((_classNames12 = {}, _defineProperty(_classNames12, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames12, _concatInstanceProperty(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames12));
+    var TagStyle = {
+      margin: '2px 8px 2px 0'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: multipleCls,
+      ref: selectionRef
+    }, Array.isArray(mulOptions) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(mulOptions).call(mulOptions, function (item, index) {
+      var label = item.label,
+          value = item.value;
+      return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement("span", {
+        key: value
+      }, /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        closable: true,
+        disabled: disabled,
+        onClose: handleRemove,
+        "data-tag": value
+      }, label));
+    }), maxTagCount && mulOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
+      className: itemCls
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item-content")
+    }, "\u5171", mulOptions.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !mulOptions.length && placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix()));
+  };
+
+  var singleCls = classNames(commCls, (_classNames13 = {}, _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames13));
+  var singleTextCls = classNames((_classNames14 = {}, _defineProperty(_classNames14, "".concat(selectPrefixCls, "-single-text"), true), _defineProperty(_classNames14, "".concat(selectPrefixCls, "-single-disabled-text"), disabled), _classNames14));
+
+  var renderSelect = function renderSelect() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: selectCls,
+      ref: selectRef,
+      style: style,
+      onClick: handleDropdownShow
+    }, /*#__PURE__*/React.createElement("span", {
+      className: selectionCls,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, !isMultiple ? /*#__PURE__*/React.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/React.createElement("span", {
+      className: singleTextCls
+    }, singleVal || null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !singleVal && placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())) : renderMultiple()));
+  };
+
+  var catchStyle = function catchStyle() {
+    var _a;
+
+    if (selectRef === null || selectRef === void 0 ? void 0 : selectRef.current) {
+      var _ref = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+          width = _ref.width;
+
+      return {
+        width: (dropdownStyle === null || dropdownStyle === void 0 ? void 0 : dropdownStyle.width) || (width > 75 ? width : 75),
+        zIndex: 1050
+      };
+    }
+  };
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (!visible) {
+      props.visible === undefined && setOptionShow(visible);
+      onVisibleChange && onVisibleChange(visible);
+    }
+  };
+
+  var popperProps = _extends(_extends({}, selectProps), {
+    prefixCls: selectPrefixCls,
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange
+  });
+
+  return usePopper(renderSelect(), renderContent(), popperProps);
+};
+
+var Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+Select.displayName = 'Select';
+export default Select;

package/es/select/style/css.js

@@ -0,0 +1 @@
+import './index.css';