@kdcloudjs/kdesign 1.6.34 → 1.6.35

package/es/search/quick-search.js

@@ -17,77 +17,60 @@ import Option from './option';
 import { Icon } from '../index';
 import { getStringToArray } from '../_utils/arrayUtil';
 var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
-
 var InternalQuickSearch = function InternalQuickSearch(props, ref) {
   var _classNames, _classNames2;
-
   var _useContext = useContext(ConfigContext),
-      getPrefixCls = _useContext.getPrefixCls,
-      prefixCls = _useContext.prefixCls,
-      getLangMsg = _useContext.locale.getLangMsg; // const quickSearchProps = getCompProps('QuickSearch', userDefaultProps, props)
-
-
+    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;
+    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 : toArray(children); // tags配置项和默认children
-
   var innerRef = useRef();
   var quickSearchRef = ref || innerRef;
   var dropDownRef = useRef(null);
   var inputRef = useRef(null);
   var measureRef = React.useRef(null);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1]; // input focus
-
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1]; // input focus
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      optionShow = _useState4[0],
-      setOptionShow = _useState4[1]; // 下拉列表是否展示
-
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    optionShow = _useState4[0],
+    setOptionShow = _useState4[1]; // 下拉列表是否展示
   var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      searchValue = _useState6[0],
-      setSearchValue = _useState6[1]; // input输入值
-
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1]; // input输入值
   var _useState7 = useState([]),
-      _useState8 = _slicedToArray(_useState7, 2),
-      tagsList = _useState8[0],
-      setTagsList = _useState8[1]; // tags
-
-
+    _useState8 = _slicedToArray(_useState7, 2),
+    tagsList = _useState8[0],
+    setTagsList = _useState8[1]; // tags
   var _useState9 = useState(INPUT_MIN_WIDTH),
-      _useState10 = _slicedToArray(_useState9, 2),
-      inputWidth = _useState10[0],
-      setInputWidth = _useState10[1]; // 输入框宽度
-
-
+    _useState10 = _slicedToArray(_useState9, 2),
+    inputWidth = _useState10[0],
+    setInputWidth = _useState10[1]; // 输入框宽度
   var _useState11 = useState(0),
-      _useState12 = _slicedToArray(_useState11, 2),
-      selectedIndex = _useState12[0],
-      setSelectedIndex = _useState12[1]; // 下拉选中 默认第一个
+    _useState12 = _slicedToArray(_useState11, 2),
+    selectedIndex = _useState12[0],
+    setSelectedIndex = _useState12[1]; // 下拉选中 默认第一个
   // 处理智能搜索props
-
-
   var getNlpSearchProps = function getNlpSearchProps() {
     var nlpSearch = props.nlpSearch;
     if (!nlpSearch) return {};
@@ -97,13 +80,11 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       nlpSearchResult: {}
     }, _typeof(nlpSearch) === 'object' ? nlpSearch : null);
   };
-
   var _getNlpSearchProps = getNlpSearchProps(),
-      isSupportNlpSearch = _getNlpSearchProps.isSupportNlpSearch,
-      nlpSearchLoading = _getNlpSearchProps.nlpSearchLoading,
-      onNlpSearch = _getNlpSearchProps.onNlpSearch,
-      nlpSearchResult = _getNlpSearchProps.nlpSearchResult;
-
+    isSupportNlpSearch = _getNlpSearchProps.isSupportNlpSearch,
+    nlpSearchLoading = _getNlpSearchProps.nlpSearchLoading,
+    onNlpSearch = _getNlpSearchProps.onNlpSearch,
+    nlpSearchResult = _getNlpSearchProps.nlpSearchResult;
   var onNlpSearchDebounce = useMemo(function () {
     return debounce(function (val) {
       return onNlpSearch === null || onNlpSearch === void 0 ? void 0 : onNlpSearch(val);
@@ -116,16 +97,14 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
   var quickSearchPrefixCls = getPrefixCls(prefixCls, 'quick-search', customPrefixcls);
   var quickSearchCls = classNames(quickSearchPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-focused"), isFocused || tagsList.length), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames, "".concat(quickSearchPrefixCls, "-border"), borderType === 'bordered'), _classNames));
   var quickSearchSelectorCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(quickSearchPrefixCls, "-selector"), true), _defineProperty(_classNames2, "".concat(quickSearchPrefixCls, "-selector-disabled"), disabled), _classNames2));
-  var inputCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-input"), true)); // 下拉列表样式
-
+  var inputCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-input"), true));
+  // 下拉列表样式
   var dropDownCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-dropdown"), true));
   var dropContentCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-dropdown-scroll"), true));
-
   var setInputFocus = function setInputFocus() {
     setIsFocused(true);
     inputRef.current && inputRef.current.focus();
   };
-
   var handleFocus = useCallback(function (event) {
     setIsFocused(true);
     onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(event));
@@ -135,17 +114,14 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
     setSelectedIndex(0);
     onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(event));
   }, [onBlur]);
-
   var handleAddTagsList = function handleAddTagsList(addTag) {
     var _context;
-
     setTagsList(_concatInstanceProperty(_context = []).call(_context, _toConsumableArray(tagsList), [addTag]));
     setSelectedIndex(0);
     setSearchValue('');
     setOptionShow(false);
     setInputFocus();
   };
-
   var handleKeyDownDel = function handleKeyDownDel(val, tags) {
     if (!val && tags.length) {
       var popItem = tags.pop();
@@ -153,59 +129,47 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       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 = _mapInstanceProperty(tagsList).call(tagsList, function (item) {
         return _extends(_extends({}, 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;
+          value = _realChildren$index$p.value,
+          tag = _realChildren$index$p.tag;
         selectedTag = {
           value: value,
           tag: tag
         };
       }
-
       handleAddTagsList(_extends(_extends({}, selectedTag), {
         label: val
       }));
@@ -214,7 +178,6 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       }));
     } else {
       var _tag = getLangMsg('Search', 'nplDesc');
-
       handleAddTagsList(_extends({
         tag: _tag
       }, nlpSearchResult));
@@ -222,22 +185,18 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
         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:
@@ -245,76 +204,59 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
         handleKeyDownDel(val, JSON.parse(_JSON$stringify(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 _mapInstanceProperty(params).call(params, function (param) {
       return param[key];
     });
   };
-
   var handleOption = function handleOption(selectedTag) {
     var _context2, _context3;
-
     var value = selectedTag.value,
-        label = selectedTag.label;
-
+      label = selectedTag.label;
     var formatedTag = _extends(_extends({}, selectedTag), {
       label: formatSelectedTagsLabel(label || '')
     });
-
     handleAddTagsList(selectedTag);
-
     var seletedKeyList = _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(getParamsListByKey(tagsList, 'value')), [value]);
-
     var formatedTagList = _mapInstanceProperty(tagsList).call(tagsList, function (item) {
       return _extends(_extends({}, item), {
         label: formatSelectedTagsLabel(item.label || '')
       });
     });
-
     onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(seletedKeyList, _concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(formatedTagList), [formatedTag])));
     onSelect && (onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, formatedTag));
     setSearchValue('');
   };
-
   var handleDelSelectedTags = function handleDelSelectedTags(e, index) {
     e.stopPropagation();
-
     var newTagsList = _filterInstanceProperty(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.createElement(React.Fragment, null, _mapInstanceProperty(tagsList).call(tagsList, function (item, index) {
       var formatTag = formatSearchValue(item.label);
@@ -336,24 +278,20 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       }));
     }));
   };
-
   var getInputPlaceholder = function getInputPlaceholder() {
     return placeholder || getLangMsg('Search', 'placeholder');
-  }; // 实现input placeholder
-
-
+  };
+  // 实现input placeholder
   var renderPlaceholder = function renderPlaceholder() {
     if (tagsList.length > 0 || searchValue) return null;
     return /*#__PURE__*/React.createElement("span", {
       className: classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-selection-placeholder"), true))
     }, getInputPlaceholder());
   };
-
   var handleClickInputFosus = function handleClickInputFosus(e) {
     e.stopPropagation();
     !disabled && setInputFocus();
   };
-
   var renderSelect = function renderSelect() {
     return /*#__PURE__*/React.createElement("div", {
       className: quickSearchCls,
@@ -387,20 +325,15 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       className: "".concat(quickSearchPrefixCls, "-selection-search-mirror")
     }, searchValue, "\xA0")))));
   };
-
   var formatSelectedTagsLabel = function formatSelectedTagsLabel(val) {
     return val.indexOf(' ') !== -1 ? getStringToArray(val) : val;
   };
-
   var formatSearchValue = function formatSearchValue(val) {
     return 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.createElement(Option, _extends({
         key: index
@@ -412,7 +345,6 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
         isFormatVal: isFormatVal
       }));
     }
-
     return /*#__PURE__*/React.createElement(Option, {
       key: index,
       index: index,
@@ -423,14 +355,12 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       onChangeSelect: handleOption,
       isFormatVal: isFormatVal
     });
-  }; // 是否展示下拉提示
-
-
+  };
+  // 是否展示下拉提示
   var canShowDesc = function canShowDesc() {
     return !searchValue && !tagsList.length;
-  }; // loading
-
-
+  };
+  // loading
   var renderLoading = function renderLoading() {
     var loadingItemPrefixCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-npl-loading-item"), true));
     return /*#__PURE__*/React.createElement("div", {
@@ -444,43 +374,39 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
     }), /*#__PURE__*/React.createElement("span", {
       className: loadingItemPrefixCls
     }));
-  }; // 智能搜索
-
-
+  };
+  // 智能搜索
   var renderNlpSearch = function renderNlpSearch() {
     var tag = getLangMsg('Search', 'nplDesc');
     var value = nlpSearchResult.value,
-        label = nlpSearchResult.label;
+      label = nlpSearchResult.label;
     return /*#__PURE__*/React.createElement("div", {
       className: classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-npl"), true))
     }, nlpSearchLoading ? renderLoading() : renderOption({
       tag: tag,
       value: value
     }, realChildren.length, label, false));
-  }; // 下拉列表为空时显示的内容
-
-
+  };
+  // 下拉列表为空时显示的内容
   var renderNotContent = function renderNotContent() {
     // 下拉列表为空
-    var emptyListCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-dropdown-empty"), true)); // const { notFoundContent } = quickSearchProps
-
+    var emptyListCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-dropdown-empty"), true));
+    // const { notFoundContent } = quickSearchProps
     var notFoundContent = props.notFoundContent;
-    var emptyContent = notFoundContent || getLangMsg('Search', 'emptyTip'); // 当输入tags为空并且input的输入值不为空时展示
-
+    var emptyContent = notFoundContent || getLangMsg('Search', 'emptyTip');
+    // 当输入tags为空并且input的输入值不为空时展示
     return realChildren.length === 0 && searchValue && /*#__PURE__*/React.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  }; // 下拉列表
-
-
+  };
+  // 下拉列表
   var renderDropDownContent = function renderDropDownContent(tagsTorender, heightStyle) {
     return /*#__PURE__*/React.createElement("div", {
       className: dropContentCls,
       style: heightStyle
     }, tagsTorender, isSupportNlpSearch && renderNlpSearch());
-  }; // 下拉提示
-
-
+  };
+  // 下拉提示
   var renderDesc = function renderDesc() {
     var dropDoenDescCls = classNames(_defineProperty({}, "".concat(quickSearchPrefixCls, "-dropdown-desc"), true));
     var dropDoenDesc = desc || getLangMsg('Search', 'desc');
@@ -492,13 +418,11 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
       }, item);
     }));
   };
-
   var renderDropDown = function renderDropDown() {
     // dropdownRender 自定义下拉列表 待完成
     // const { listHeight } = quickSearchProps
     var listHeight = props.listHeight;
     var tagsTorender = realChildren;
-
     if (Array.isArray(realChildren) && realChildren.length > 0) {
       tagsTorender = _mapInstanceProperty(realChildren).call(realChildren, function (item, index) {
         if (item === null || item === undefined) return;
@@ -506,50 +430,41 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
         return temp;
       });
     }
-
     var heightStyle = {
       maxHeight: listHeight || '300px'
-    }; // 下拉框style属性
-
+    };
+    // 下拉框style属性
     var dropDownStyle = _extends({
       width: style === null || style === void 0 ? void 0 : style.width
     }, dropdownStyle);
-
     return /*#__PURE__*/React.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;
-
+        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 = _extends(_extends({}, props), {
     placement: 'bottomLeft',
     popperStyle: catchStyle(),
@@ -558,10 +473,8 @@ var InternalQuickSearch = function InternalQuickSearch(props, ref) {
     prefixCls: "".concat(quickSearchPrefixCls, "-dropdown-wrapper"),
     onVisibleChange: handleVisibleChange
   });
-
   return usePopper(renderSelect(), renderDropDown(), popperProps);
 };
-
 var QuickSearch = /*#__PURE__*/React.forwardRef(InternalQuickSearch);
 QuickSearch.displayName = 'QuickSearch';
 export default QuickSearch;