@kdcloudjs/kdesign 1.0.2

package/lib/search/quick-search.js

@@ -0,0 +1,596 @@
+"use strict";
+
+var _typeof3 = 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 _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var _usePopper = _interopRequireDefault(require("../_utils/usePopper"));
+
+var _option = _interopRequireDefault(require("./option"));
+
+var _index = require("../index");
+
+var _arrayUtil = require("../_utils/arrayUtil");
+
+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 || _typeof3(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 INPUT_MIN_WIDTH = 4; // 输入框最小宽度
+
+var InternalQuickSearch = function InternalQuickSearch(props, ref) {
+  var _classNames, _classNames2;
+
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+      getPrefixCls = _useContext.getPrefixCls,
+      prefixCls = _useContext.prefixCls,
+      getLangMsg = _useContext.locale.getLangMsg; // const quickSearchProps = getCompProps('QuickSearch', userDefaultProps, props)
+
+
+  var customPrefixcls = props.prefixCls,
+      className = props.className,
+      placeholder = props.placeholder,
+      style = props.style,
+      desc = props.desc,
+      dropdownStyle = props.dropdownStyle,
+      _props$tags = props.tags,
+      tags = _props$tags === void 0 ? [] : _props$tags,
+      children = props.children,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onChange = props.onChange,
+      onSelect = props.onSelect,
+      onSearch = props.onSearch,
+      disabled = props.disabled,
+      borderType = props.borderType;
+  var realChildren = Array.isArray(tags) && tags.length ? tags : (0, _reactChildren.toArray)(children); // tags配置项和默认children
+
+  var innerRef = (0, _react.useRef)();
+  var quickSearchRef = ref || innerRef;
+  var dropDownRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+
+  var measureRef = _react.default.useRef(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isFocused = _useState2[0],
+      setIsFocused = _useState2[1]; // input focus
+
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      optionShow = _useState4[0],
+      setOptionShow = _useState4[1]; // 下拉列表是否展示
+
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      searchValue = _useState6[0],
+      setSearchValue = _useState6[1]; // input输入值
+
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      tagsList = _useState8[0],
+      setTagsList = _useState8[1]; // tags
+
+
+  var _useState9 = (0, _react.useState)(INPUT_MIN_WIDTH),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      inputWidth = _useState10[0],
+      setInputWidth = _useState10[1]; // 输入框宽度
+
+
+  var _useState11 = (0, _react.useState)(0),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      selectedIndex = _useState12[0],
+      setSelectedIndex = _useState12[1]; // 下拉选中 默认第一个
+  // 处理智能搜索props
+
+
+  var getNlpSearchProps = function getNlpSearchProps() {
+    var nlpSearch = props.nlpSearch;
+    if (!nlpSearch) return {};
+    return (0, _extends2.default)({
+      isSupportNlpSearch: true,
+      nlpSearchLoading: false,
+      nlpSearchResult: {}
+    }, (0, _typeof2.default)(nlpSearch) === 'object' ? nlpSearch : null);
+  };
+
+  var _getNlpSearchProps = getNlpSearchProps(),
+      isSupportNlpSearch = _getNlpSearchProps.isSupportNlpSearch,
+      nlpSearchLoading = _getNlpSearchProps.nlpSearchLoading,
+      onNlpSearch = _getNlpSearchProps.onNlpSearch,
+      nlpSearchResult = _getNlpSearchProps.nlpSearchResult;
+
+  var onNlpSearchDebounce = (0, _react.useMemo)(function () {
+    return (0, _debounce.default)(function (val) {
+      return onNlpSearch === null || onNlpSearch === void 0 ? void 0 : onNlpSearch(val);
+    }, 300);
+  }, [onNlpSearch]);
+  (0, _react.useLayoutEffect)(function () {
+    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
+    setOptionShow(!!searchValue);
+  }, [searchValue]);
+  var quickSearchPrefixCls = getPrefixCls(prefixCls, 'quick-search', customPrefixcls);
+  var quickSearchCls = (0, _classnames.default)(quickSearchPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'border'), _classNames));
+  var quickSearchSelectorCls = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(quickSearchPrefixCls, "-selector"), true), (0, _defineProperty2.default)(_classNames2, "".concat(quickSearchPrefixCls, "-selector-disabled"), disabled), _classNames2));
+  var inputCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-input"), true)); // 下拉列表样式
+
+  var dropDownCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-dropdown"), true));
+  var dropContentCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-dropdown-scroll"), true));
+
+  var setInputFocus = function setInputFocus() {
+    setIsFocused(true);
+    inputRef.current && inputRef.current.focus();
+  };
+
+  var handleFocus = (0, _react.useCallback)(function (event) {
+    setIsFocused(true);
+    onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(event));
+  }, [onFocus]);
+  var handleBlur = (0, _react.useCallback)(function (event) {
+    setIsFocused(false);
+    setSelectedIndex(0);
+    onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(event));
+  }, [onBlur]);
+
+  var handleAddTagsList = function handleAddTagsList(addTag) {
+    var _context;
+
+    setTagsList((0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)(tagsList), [addTag]));
+    setSelectedIndex(0);
+    setSearchValue('');
+    setOptionShow(false);
+    setInputFocus();
+  };
+
+  var handleKeyDownDel = function handleKeyDownDel(val, tags) {
+    if (!val && tags.length) {
+      var popItem = tags.pop();
+      setTagsList(tags);
+      setSearchValue(popItem === null || popItem === void 0 ? void 0 : popItem.label);
+    }
+  };
+
+  var handleKeyDownUp = function handleKeyDownUp(index, length) {
+    // index 为下标 length为长长度
+    var currentIndex = index;
+
+    if (index === 0) {
+      currentIndex = length - 1;
+    } else {
+      currentIndex--;
+    }
+
+    setSelectedIndex(currentIndex);
+  };
+
+  var handleKeyDownDown = function handleKeyDownDown(index, length) {
+    var currentIndex = index;
+
+    if (index === length - 1) {
+      currentIndex = 0;
+    } else {
+      currentIndex++;
+    }
+
+    setSelectedIndex(currentIndex);
+  };
+
+  var handleKeyDownEnter = function handleKeyDownEnter(val, index) {
+    if (!val) {
+      var seletedKeyList = getParamsListByKey(tagsList, 'value');
+      var formatedTagList = (0, _map.default)(tagsList).call(tagsList, function (item) {
+        return (0, _extends2.default)((0, _extends2.default)({}, item), {
+          label: formatSelectedTagsLabel(item.label || '')
+        });
+      });
+      onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(seletedKeyList, formatedTagList));
+      return;
+    }
+
+    if (realChildren[index]) {
+      var selectedTag = realChildren[index];
+
+      if (realChildren[index].props && (realChildren[index].type.displayName === 'Option' || realChildren[index].type.name === 'Option')) {
+        var _realChildren$index$p = realChildren[index].props,
+            value = _realChildren$index$p.value,
+            tag = _realChildren$index$p.tag;
+        selectedTag = {
+          value: value,
+          tag: tag
+        };
+      }
+
+      handleAddTagsList((0, _extends2.default)((0, _extends2.default)({}, selectedTag), {
+        label: val
+      }));
+      handleOption((0, _extends2.default)((0, _extends2.default)({}, selectedTag), {
+        label: val
+      }));
+    } else {
+      var _tag = getLangMsg('Search', 'nplDesc');
+
+      handleAddTagsList((0, _extends2.default)({
+        tag: _tag
+      }, nlpSearchResult));
+      handleOption((0, _extends2.default)({
+        tag: _tag
+      }, nlpSearchResult));
+    }
+
+    setSelectedIndex(0);
+    setSearchValue('');
+    setOptionShow(false);
+    setInputFocus();
+  };
+
+  var onKeyDown = function onKeyDown(e) {
+    var val = e.target.value;
+    var tagsLength = realChildren.length;
+    var hasNlpSearchResult = isSupportNlpSearch && !nlpSearchLoading;
+
+    if (hasNlpSearchResult) {
+      tagsLength++;
+    }
+
+    switch (e.keyCode) {
+      // backspace
+      case 8:
+        !val && e.preventDefault();
+        handleKeyDownDel(val, JSON.parse((0, _stringify.default)(tagsList), e));
+        break;
+      // enter
+
+      case 13:
+        handleKeyDownEnter(val, selectedIndex);
+        break;
+      // up
+
+      case 38:
+        !canShowDesc() && handleKeyDownUp(selectedIndex, tagsLength);
+        break;
+      // down
+
+      case 40:
+        !canShowDesc() && handleKeyDownDown(selectedIndex, tagsLength);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var handleSearchChange = function handleSearchChange(event) {
+    var val = event.target.value;
+    setSearchValue(val);
+    onSearch && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(event));
+    isSupportNlpSearch && (onNlpSearchDebounce === null || onNlpSearchDebounce === void 0 ? void 0 : onNlpSearchDebounce(val));
+  };
+
+  var getParamsListByKey = function getParamsListByKey(params, key) {
+    return (0, _map.default)(params).call(params, function (param) {
+      return param[key];
+    });
+  };
+
+  var handleOption = function handleOption(selectedTag) {
+    var _context2, _context3;
+
+    var value = selectedTag.value,
+        label = selectedTag.label;
+    var formatedTag = (0, _extends2.default)((0, _extends2.default)({}, selectedTag), {
+      label: formatSelectedTagsLabel(label || '')
+    });
+    handleAddTagsList(selectedTag);
+    var seletedKeyList = (0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(getParamsListByKey(tagsList, 'value')), [value]);
+    var formatedTagList = (0, _map.default)(tagsList).call(tagsList, function (item) {
+      return (0, _extends2.default)((0, _extends2.default)({}, item), {
+        label: formatSelectedTagsLabel(item.label || '')
+      });
+    });
+    onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(seletedKeyList, (0, _concat.default)(_context3 = []).call(_context3, (0, _toConsumableArray2.default)(formatedTagList), [formatedTag])));
+    onSelect && (onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, formatedTag));
+    setSearchValue('');
+  };
+
+  var handleDelSelectedTags = function handleDelSelectedTags(e, index) {
+    e.stopPropagation();
+    var newTagsList = (0, _filter.default)(tagsList).call(tagsList, function (_item, ind) {
+      return index !== ind;
+    });
+    setTagsList(newTagsList);
+    setInputFocus();
+    onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(getParamsListByKey(newTagsList, 'value'), newTagsList));
+  };
+
+  var renderSelectedTags = function renderSelectedTags() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(tagsList).call(tagsList, function (item, index) {
+      var formatTag = formatSearchValue(item.label);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index,
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-overflow-item"), true))
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-overflow-item-tag"), true)),
+        title: item.tag
+      }, item.tag), /*#__PURE__*/_react.default.createElement("span", {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-overflow-item-label"), true)),
+        title: formatTag
+      }, formatTag), /*#__PURE__*/_react.default.createElement(_index.Icon, {
+        className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-overflow-item-del"), true)),
+        type: "close-solid",
+        onClick: function onClick(e) {
+          return handleDelSelectedTags(e, index);
+        }
+      }));
+    }));
+  };
+
+  var getInputPlaceholder = function getInputPlaceholder() {
+    return placeholder || getLangMsg('Search', 'placeholder');
+  }; // 实现input placeholder
+
+
+  var renderPlaceholder = function renderPlaceholder() {
+    if (tagsList.length > 0 || searchValue) return null;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-placeholder"), true))
+    }, getInputPlaceholder());
+  };
+
+  var handleClickInputFosus = function handleClickInputFosus(e) {
+    e.stopPropagation();
+    !disabled && setInputFocus();
+  };
+
+  var renderSelect = function renderSelect() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: quickSearchCls,
+      ref: quickSearchRef,
+      style: style,
+      onClick: handleClickInputFosus
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-prefix"), true))
+    }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
+      type: "search"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: quickSearchSelectorCls
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-selection-overflow"), true)),
+      onClick: handleClickInputFosus
+    }, renderSelectedTags(), renderPlaceholder(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(quickSearchPrefixCls, "-selection-search"),
+      style: {
+        width: inputWidth
+      }
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: inputRef,
+      value: searchValue,
+      className: inputCls,
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: onKeyDown
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      ref: measureRef,
+      className: "".concat(quickSearchPrefixCls, "-selection-search-mirror")
+    }, searchValue, "\xA0")))));
+  };
+
+  var formatSelectedTagsLabel = function formatSelectedTagsLabel(val) {
+    return val.indexOf(' ') !== -1 ? (0, _arrayUtil.getStringToArray)(val) : val;
+  };
+
+  var formatSearchValue = function formatSearchValue(val) {
+    return (0, _arrayUtil.getStringToArray)(val).join(" ".concat(getLangMsg('Search', 'or'), " "));
+  };
+
+  var renderOption = function renderOption(child, index, val) {
+    var isFormatVal = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+
+    var _a, _b;
+
+    if ((child === null || child === void 0 ? void 0 : child.props) && (((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === 'Option' || ((_b = child.type) === null || _b === void 0 ? void 0 : _b.name) === 'Option')) {
+      return /*#__PURE__*/_react.default.createElement(_option.default, (0, _extends2.default)({
+        key: index
+      }, child.props, {
+        index: index,
+        selectedIndex: selectedIndex,
+        searchValue: val,
+        onChangeSelect: handleOption,
+        isFormatVal: isFormatVal
+      }));
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_option.default, {
+      key: index,
+      index: index,
+      selectedIndex: selectedIndex,
+      value: child === null || child === void 0 ? void 0 : child.value,
+      tag: child === null || child === void 0 ? void 0 : child.tag,
+      searchValue: val,
+      onChangeSelect: handleOption,
+      isFormatVal: isFormatVal
+    });
+  }; // 是否展示下拉提示
+
+
+  var canShowDesc = function canShowDesc() {
+    return !searchValue && !tagsList.length;
+  }; // loading
+
+
+  var renderLoading = function renderLoading() {
+    var loadingItemPrefixCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-npl-loading-item"), true));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-npl-loading"), true))
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: loadingItemPrefixCls
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: loadingItemPrefixCls
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: loadingItemPrefixCls
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: loadingItemPrefixCls
+    }));
+  }; // 智能搜索
+
+
+  var renderNlpSearch = function renderNlpSearch() {
+    var tag = getLangMsg('Search', 'nplDesc');
+    var value = nlpSearchResult.value,
+        label = nlpSearchResult.label;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-npl"), true))
+    }, nlpSearchLoading ? renderLoading() : renderOption({
+      tag: tag,
+      value: value
+    }, realChildren.length, label, false));
+  }; // 下拉列表为空时显示的内容
+
+
+  var renderNotContent = function renderNotContent() {
+    // 下拉列表为空
+    var emptyListCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-dropdown-empty"), true)); // const { notFoundContent } = quickSearchProps
+
+    var notFoundContent = props.notFoundContent;
+    var emptyContent = notFoundContent || getLangMsg('Search', 'emptyTip'); // 当输入tags为空并且input的输入值不为空时展示
+
+    return realChildren.length === 0 && searchValue && /*#__PURE__*/_react.default.createElement("div", {
+      className: emptyListCls
+    }, emptyContent);
+  }; // 下拉列表
+
+
+  var renderDropDownContent = function renderDropDownContent(tagsTorender, heightStyle) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: dropContentCls,
+      style: heightStyle
+    }, tagsTorender, isSupportNlpSearch && renderNlpSearch());
+  }; // 下拉提示
+
+
+  var renderDesc = function renderDesc() {
+    var dropDoenDescCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(quickSearchPrefixCls, "-dropdown-desc"), true));
+    var dropDoenDesc = desc || getLangMsg('Search', 'desc');
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _map.default)(dropDoenDesc).call(dropDoenDesc, function (item, index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: dropDoenDescCls,
+        key: index,
+        title: dropDoenDesc
+      }, item);
+    }));
+  };
+
+  var renderDropDown = function renderDropDown() {
+    // dropdownRender 自定义下拉列表 待完成
+    // const { listHeight } = quickSearchProps
+    var listHeight = props.listHeight;
+    var tagsTorender = realChildren;
+
+    if (Array.isArray(realChildren) && realChildren.length > 0) {
+      tagsTorender = (0, _map.default)(realChildren).call(realChildren, function (item, index) {
+        if (item === null || item === undefined) return;
+        var temp = renderOption(item, index, searchValue);
+        return temp;
+      });
+    }
+
+    var heightStyle = {
+      maxHeight: listHeight || '300px'
+    }; // 下拉框style属性
+
+    var dropDownStyle = (0, _extends2.default)({
+      width: style === null || style === void 0 ? void 0 : style.width
+    }, dropdownStyle);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: dropDownCls,
+      style: dropDownStyle,
+      ref: dropDownRef
+    }, canShowDesc() ? renderDesc() : renderDropDownContent(tagsTorender, heightStyle), renderNotContent());
+  };
+
+  var catchStyle = function catchStyle() {
+    var _a;
+
+    if (quickSearchRef === null || quickSearchRef === void 0 ? void 0 : quickSearchRef.current) {
+      var _ref = (_a = quickSearchRef.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 canShowDropDown = function canShowDropDown() {
+    return !searchValue && !tagsList.length || searchValue;
+  };
+
+  var handleVisibleChange = function handleVisibleChange(visible) {
+    if (visible) {
+      canShowDropDown() && setOptionShow(visible);
+      return;
+    }
+
+    setIsFocused(false);
+    setOptionShow(visible);
+  };
+
+  var popperProps = (0, _extends2.default)((0, _extends2.default)({}, props), {
+    placement: 'bottomLeft',
+    popperStyle: catchStyle(),
+    defaultVisible: optionShow,
+    visible: optionShow,
+    prefixCls: "".concat(quickSearchPrefixCls, "-dropdown-wrapper"),
+    onVisibleChange: handleVisibleChange
+  });
+  return (0, _usePopper.default)(renderSelect(), renderDropDown(), popperProps);
+};
+
+var QuickSearch = /*#__PURE__*/_react.default.forwardRef(InternalQuickSearch);
+
+QuickSearch.displayName = 'QuickSearch';
+var _default = QuickSearch;
+exports.default = _default;

package/lib/search/search-panel.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface ISearchPanelProps {
+    suffix?: React.ReactNode;
+    placeholder?: string;
+    panelSearch?: PanelSearchProps;
+}
+export interface PanelSearchProps {
+    onPanelSearch?: () => void;
+    onPanelSelect?: () => void;
+    onPanelChange?: () => void;
+    panelResult?: resultProps;
+    panelTypes?: ItypeProps;
+    panelSearchLoading?: boolean;
+    displayImg?: React.ReactNode;
+}
+interface ItypeProps {
+    label?: string;
+    code?: string | number;
+}
+interface resultProps {
+    title?: string;
+    typeName?: string;
+    subTitle?: string;
+    icon?: React.ReactNode;
+    cloud?: string;
+    id?: string | number;
+}
+declare const SearchPanel: React.ForwardRefExoticComponent<ISearchPanelProps & React.RefAttributes<unknown>>;
+export default SearchPanel;