@kdcloudjs/kdesign 1.0.2

package/lib/select/select.js

@@ -0,0 +1,712 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _hooks = require("../_utils/hooks");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _utils = require("../_utils");
+
+var _reactChildren = require("../_utils/react-children");
+
+var _index = require("../index");
+
+var _option = _interopRequireDefault(require("./option"));
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames7, _classNames13, _classNames14;
+
+  var _a;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      userDefaultProps = _useContext.compDefaultProps;
+
+  var selectProps = (0, _utils.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 = (0, _hooks.useMergedState)(undefined, {
+    value: value,
+    defaultValue: defaultValue
+  }),
+      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+      initValue = _useMergedState2[0],
+      setInitValue = _useMergedState2[1];
+
+  var realChildren = Array.isArray(options) ? options : (0, _reactChildren.toArray)(children); // options配置项和默认children
+  // console.log('real', realChildren)
+
+  var innerRef = _react.default.useRef();
+
+  var selectRef = ref || innerRef;
+  var searchRef = (0, _react.useRef)(null); // 搜索框ref
+
+  var selectionRef = (0, _react.useRef)(null);
+  var dropDownRef = (0, _react.useRef)(null);
+  var multipleRef = (0, _react.useRef)({
+    selectedVal: isMultiple ? [] : null,
+    selectMulOpts: []
+  }); // 多选ref已选中项
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      mulOptions = _useState2[0],
+      setMulOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      singleVal = _useState4[0],
+      setSingleVal = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(!!props.visible || defaultOpen),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      optionShow = _useState6[0],
+      setOptionShow = _useState6[1]; // 下拉列表是否展示
+
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      searchInput = _useState8[0],
+      setSearchInput = _useState8[1]; // 搜索框值
+
+
+  var _useState9 = (0, _react.useState)(null),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      timer = _useState10[0],
+      setTimer = _useState10[1]; // 搜索框定时器
+
+
+  var selectPrefixCls = getPrefixCls(prefixCls, 'select', customPrefixcls); // 选择器样式
+
+  var selectCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
+  var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true)); // 下拉列表框样式
+
+  var dropDownCls = (0, _classnames.default)(dropdownClassName, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉搜索框样式
+
+  var searchCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-search"), true)); // 下拉子项列表样式
+
+  var dropContentCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".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 = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
+
+  var commCls = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames7, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-wrapper"), true), _classNames7));
+
+  _react.default.useEffect(function () {
+    setOptionShow(!!props.visible);
+  }, [props.visible]); // realchildren更新时数据处理---待解决
+
+
+  (0, _react.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 = [];
+          (0, _map.default)(initValue).call(initValue, function (item) {
+            var _a, _b;
+
+            var obj = (realChildren === null || realChildren === void 0 ? void 0 : (0, _find.default)(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((0, _concat.default)(_context2 = []).call(_context2, arr));
+          multipleRef.current.selectMulOpts = (0, _concat.default)(arr).call(arr);
+        }
+
+        if (!(initValue === null || initValue === void 0 ? void 0 : initValue.length)) {
+          setMulOptions([]);
+        }
+      }
+    }
+  }, [isMultiple, initValue, children, options]);
+  (0, _react.useEffect)(function () {
+    var _a;
+
+    if (!isMultiple) {
+      multipleRef.current.selectedVal = initValue; // 默认选中值
+
+      if (initValue !== undefined) {
+        var obj = (realChildren === null || realChildren === void 0 ? void 0 : (0, _find.default)(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]); // 更新搜索框的值，判断清除按钮显隐
+
+  (0, _react.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]);
+  (0, _react.useEffect)(function () {
+    handleClear();
+  }, [optionShow === false]);
+  var handleFocus = (0, _react.useCallback)(function (e) {
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  var handleBlur = (0, _react.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 : (0, _find.default)(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 = (0, _toConsumableArray2.default)(selectedVal);
+        var optsArr = (0, _toConsumableArray2.default)(selectMulOpts);
+
+        if ((0, _includes.default)(selectedVal).call(selectedVal, key)) {
+          var idx = selectedVal.indexOf(key);
+          (0, _splice.default)(valArr).call(valArr, idx, 1);
+          (0, _splice.default)(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 ((0, _includes.default)(_selectedVal).call(_selectedVal, key)) {
+        var _idx = _selectedVal.indexOf(key);
+
+        (0, _splice.default)(_selectedVal).call(_selectedVal, _idx, 1);
+        (0, _splice.default)(_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((0, _toConsumableArray2.default)(_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) {
+      (0, _map.default)(realChildren).call(realChildren, function (child) {
+        var _child$props = child.props,
+            value = _child$props.value,
+            children = _child$props.children;
+
+        if (!(0, _includes.default)(selectedVal).call(selectedVal, value)) {
+          selectedVal.push(value);
+          selectMulOpts.push({
+            value: value,
+            label: children
+          });
+        }
+      });
+      setMulOptions((0, _toConsumableArray2.default)(selectMulOpts));
+    } else {
+      multipleRef.current.selectedVal = [];
+      multipleRef.current.selectMulOpts = [];
+      setMulOptions([]);
+    }
+
+    onChange && onChange(labelInValue ? selectMulOpts : selectedVal);
+  }; // 筛选内容 ---可以优化，抽成hook
+
+
+  var handleSearch = (0, _react.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 = (0, _react.useCallback)(function (event) {
+    var val = event.currentTarget.value;
+    clearTimeout(timer);
+    setTimer(setTimeout(function () {
+      onSearch && onSearch(val);
+    }, 500));
+  }, [onSearch, timer]); // 清除搜索内容
+
+  var handleClear = (0, _react.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);
+    (0, _splice.default)(selectedVal).call(selectedVal, idx, 1);
+    (0, _splice.default)(selectMulOpts).call(selectMulOpts, idx, 1);
+    setMulOptions((0, _toConsumableArray2.default)(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 = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
+    var iconShow = allowClear && (isMultiple ? mulOptions.length > 0 : selectedVal);
+    var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
+      onClick: handleReset,
+      className: clearIconCls
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "close"
+    }) || clearIcon), showArrow && /*#__PURE__*/_react.default.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.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.default.createElement(_option.default, (0, _extends2.default)({
+        isMultiple: isMultiple
+      }, child.props, {
+        key: index,
+        index: index,
+        onChangeSelect: handleOption,
+        values: multipleRef.current.selectedVal
+      }));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_option.default, (0, _extends2.default)({
+        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.default.createElement("div", {
+      className: dropContentCls,
+      style: heightStyle
+    }, childrenToRender);
+  }; // 下拉列表为空时显示的内容
+
+
+  var renderNotContent = function renderNotContent() {
+    // 下拉列表为空
+    var emptyListCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".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.default.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 = (0, _map.default)(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 = (0, _extends2.default)({
+      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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: dropDownCls,
+      style: dropDownStyle,
+      ref: dropDownRef
+    }, (showSearch || isMultiple) && /*#__PURE__*/_react.default.createElement("div", {
+      className: searchCls
+    }, /*#__PURE__*/_react.default.createElement(_index.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.default.createElement("span", {
+        onClick: handleSearch
+      }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+        type: "search"
+      }) || searchIcon),
+      suffix: searchInput && /*#__PURE__*/_react.default.createElement("span", {
+        onClick: handleClear
+      }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+        type: "close"
+      })),
+      onChange: handleSearchChange
+    })), !dropdownRender && realChildren.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/_react.default.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/_react.default.createElement("div", {
+      className: multipleFooterCls
+    }, /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
+      style: checkboxStyle,
+      checked: checked,
+      indeterminate: indeterminate,
+      onChange: handleSelectAll
+    }, "\u5168\u9009"), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-multiple-footer-hadSelected")
+    }, "\u5DF2\u9009", /*#__PURE__*/_react.default.createElement("span", null, isMultiple ? selectedVal.length : 0), "\u9879"))));
+  }; // 处理多选tag
+
+
+  var handleMaxTagHolder = (0, _react.useCallback)(function () {
+    var maxTagPlaceholder = selectProps.maxTagPlaceholder;
+    var TagStyle = {
+      margin: '2px 8px 2px 0'
+    };
+
+    if (typeof maxTagPlaceholder === 'function') {
+      return /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        type: "edit",
+        style: TagStyle,
+        size: size,
+        disabled: disabled
+      }, maxTagPlaceholder(mulOptions));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_index.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 = (0, _classnames.default)(commCls, (_classNames11 = {}, (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames11, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames11));
+    var itemCls = (0, _classnames.default)((_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames12, (0, _concat.default)(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames12));
+    var TagStyle = {
+      margin: '2px 8px 2px 0'
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: multipleCls,
+      ref: selectionRef
+    }, Array.isArray(mulOptions) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(mulOptions).call(mulOptions, function (item, index) {
+      var label = item.label,
+          value = item.value;
+      return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/_react.default.createElement("span", {
+        key: value
+      }, /*#__PURE__*/_react.default.createElement(_index.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.default.createElement("span", {
+      className: itemCls
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item-content")
+    }, "\u5171", mulOptions.length, "\u9879")) : null), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !mulOptions.length && placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix()));
+  };
+
+  var singleCls = (0, _classnames.default)(commCls, (_classNames13 = {}, (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames13));
+  var singleTextCls = (0, _classnames.default)((_classNames14 = {}, (0, _defineProperty2.default)(_classNames14, "".concat(selectPrefixCls, "-single-text"), true), (0, _defineProperty2.default)(_classNames14, "".concat(selectPrefixCls, "-single-disabled-text"), disabled), _classNames14));
+
+  var renderSelect = function renderSelect() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: selectCls,
+      ref: selectRef,
+      style: style,
+      onClick: handleDropdownShow
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: selectionCls,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }, !isMultiple ? /*#__PURE__*/_react.default.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: singleTextCls
+    }, singleVal || null), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder")
+    }, !singleVal && placeholder), /*#__PURE__*/_react.default.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 = (0, _extends2.default)((0, _extends2.default)({}, selectProps), {
+    prefixCls: selectPrefixCls,
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    onVisibleChange: handleVisibleChange
+  });
+  return (0, _usePopper.default)(renderSelect(), renderContent(), popperProps);
+};
+
+var Select = /*#__PURE__*/_react.default.forwardRef(InternalSelect);
+
+Select.displayName = 'Select';
+var _default = Select;
+exports.default = _default;