@alicloud/console-components-search 0.2.20 → 0.2.21

package/doc-dist/log-deps-build.log

@@ -1,13 +1,13 @@
 开始构建微应用external依赖...
 BreezrPluginStyledComponentsIsolation  The plugin will trying to use the package's name as isolation id of styled-components. This behavior usually occurred on dev mode. And if you were received this warning on publish mode then you should to set `options.styledComponentStyleSheetId` implicitly.
 ℹ Compiling Webpack
-✔ Webpack: Compiled successfully in 13.20s
+✔ Webpack: Compiled successfully in 12.34s
  WARN  asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
 This can impact web performance.
 Assets: 
-  main.js (2.5 MiB),entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+  main.js (2.52 MiB),entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
 Entrypoints:
-  main (2.5 MiB)
+  main (2.52 MiB)
       main.css
       main.js
 ,webpack performance recommendations: 

package/es/ComplexSearch/InputPrefix.js

@@ -1,26 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["dataSource", "label"];
+var _excluded = ["defaultValue", "dataSource", "label"];
 import React from 'react';
 import classNames from 'classnames';
 import { Icon, Select } from '@alicloud/console-components';
 
 var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
-  var _props$dataSource = props.dataSource,
+  var defaultValue = props.defaultValue,
+      _props$dataSource = props.dataSource,
       dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
       label = props.label,
       reset = _objectWithoutProperties(props, _excluded);
 
+  var noSelect = dataSource.length < 2;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('condition-item')
   }, /*#__PURE__*/React.createElement("span", {
     className: classNames('condition-item-txt')
-  }, label), /*#__PURE__*/React.createElement(Icon, {
+  }, label), noSelect ? null : /*#__PURE__*/React.createElement(Icon, {
     type: "caret-down",
     size: "xxs"
   }), /*#__PURE__*/React.createElement(Select, _extends({
-    className: classNames('condition-select'),
+    className: classNames('condition-select', {
+      'rc-search-prefix-no-select': noSelect
+    }),
+    defaultValue: defaultValue,
     hasBorder: false,
+    disabled: noSelect,
+    autoHighlightFirstItem: false,
     dataSource: dataSource,
     itemRender: function itemRender(_ref) {
       var label = _ref.label,
@@ -28,9 +35,11 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
       return /*#__PURE__*/React.createElement("span", {
         "data-value": value
       }, label);
-    },
-    autoWidth: true
-  }, reset)));
+    }
+  }, reset, {
+    autoWidth: false,
+    popupClassName: "rc-search-prefix"
+  })));
 };
 
 export default SearchConditionSelectPrefix;

package/es/ComplexSearch/index.js

@@ -17,7 +17,7 @@ import { SearchWarp, MultiBtnWarp } from "../style";
 import SearchConditionSelectPrefix from "./InputPrefix";
 import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from "../constants";
 import message from "../message";
-import { template } from 'lodash';
+import { isPlainObject, template } from 'lodash';
 var AutoComplete = Select.AutoComplete;
 /**
  * 
@@ -47,6 +47,20 @@ var normalizeOptions = function normalizeOptions(options) {
   });
 };
 
+var normalizeSuggestion = function normalizeSuggestion(suggestion) {
+  var suggestionCopy = cloneDeep(suggestion);
+  suggestionCopy.forEach(function (s) {
+    if (s.children) {
+      s.children.forEach(function (child) {
+        if (isPlainObject(child)) {
+          child.dataIndex = s.value;
+        }
+      });
+    }
+  });
+  return suggestionCopy;
+};
+
 var normalizeSelectDataSource = function normalizeSelectDataSource(title, list) {
   return [{
     label: title || '',
@@ -99,9 +113,11 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
 };
 
 var ComplexSearch = function ComplexSearch(props) {
-  var options = props.options,
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
       fuzzy = props.fuzzy,
       defaultDataIndex = props.defaultDataIndex,
+      defaultSelectedDataIndex = props.defaultSelectedDataIndex,
       placeholder = props.placeholder,
       onSearch = props.onSearch,
       onSuggest = props.onSuggest,
@@ -110,7 +126,9 @@ var ComplexSearch = function ComplexSearch(props) {
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
 
-  var _useState = useState(null),
+  var _useState = useState(options.find(function (o) {
+    return o.dataIndex === defaultSelectedDataIndex;
+  })),
       _useState2 = _slicedToArray(_useState, 2),
       selectedFilterType = _useState2[0],
       setSelectedFilterType = _useState2[1];
@@ -121,6 +139,7 @@ var ComplexSearch = function ComplexSearch(props) {
       setFocused = _useState4[1];
 
   var autoRef = useRef(null);
+  var fuzzyAutoRef = useRef(null);
   var field = Field.useField();
   var init = field.init,
       getValue = field.getValue,
@@ -167,12 +186,12 @@ var ComplexSearch = function ComplexSearch(props) {
    */
 
 
-  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
     var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
 
     if (isFuzzySearch) {
       if (actionType !== 'change') {
-        handleSearch();
+        handleSearch(option.dataIndex);
       } else {
         onSuggest && onSuggest(value, defaultDataIndex || '');
       }
@@ -189,12 +208,17 @@ var ComplexSearch = function ComplexSearch(props) {
     reset();
   };
 
-  var handleSearch = function handleSearch() {
+  var handleSearch = function handleSearch(dataIndex) {
     if (onSearch) {
-      var value = getValue(SEARCH_FILTER_VALUE_FIELD);
+      var value = getValue(SEARCH_FILTER_VALUE_FIELD); // 如果是没有选择下拉
 
       if (defaultDataIndex && !selectedFilterType) {
         onSearch(getValue(SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(SEARCH_FILTER_FIELD), options));
+      } // 如果是用户没有指定 defaultDataIndex 但是设置了 fuzzy
+
+
+      if (fuzzy && !selectedFilterType) {
+        onSearch(getValue(SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(SEARCH_FILTER_FIELD), options));
       }
 
       if (selectedFilterType) {
@@ -212,6 +236,10 @@ var ComplexSearch = function ComplexSearch(props) {
       handleSearch();
       document.body.click();
     }
+
+    if (e.keyCode === 8 && !e.currentTarget.value) {
+      handlerFilterClear();
+    }
   };
 
   var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
@@ -225,7 +253,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderSelectedFilter = function renderSelectedFilter() {
-    var _selectedFilterType$t, _selectedFilterType$t2;
+    var _selectedFilterType$t, _selectedFilterType$t2, _selectedFilterType$t3;
 
     var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
     var searchValue = getValue(SEARCH_FILTER_VALUE_FIELD);
@@ -249,9 +277,12 @@ var ComplexSearch = function ComplexSearch(props) {
     switch (type) {
       case 'input':
         return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_VALUE_FIELD, {}), {
-          className: classNames('main-input', 'multi')
+          className: classNames('main-input', 'multi'),
+          autoHighlightFirstItem: false
         }, props, {
-          onKeyUp: handleKeyUp
+          autoWidth: true,
+          onKeyUp: handleKeyUp,
+          dataSource: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t3 = selectedFilterType.templateProps) === null || _selectedFilterType$t3 === void 0 ? void 0 : _selectedFilterType$t3.dataSource
         }));
 
       case 'select':
@@ -261,7 +292,9 @@ var ComplexSearch = function ComplexSearch(props) {
           props: {
             onChange: handleSearch
           }
-        }), props, selectProps));
+        }), {
+          autoHighlightFirstItem: false
+        }, props, selectProps));
 
       case 'multiple':
         return /*#__PURE__*/React.createElement(Select, _extends({
@@ -270,6 +303,7 @@ var ComplexSearch = function ComplexSearch(props) {
           itemRender: renderMultipleSelectorItem,
           popupClassName: "xconsole-rcsearch-multi-pop",
           mode: "multiple",
+          autoHighlightFirstItem: false,
           maxTagCount: 0,
           menuProps: {
             footer: /*#__PURE__*/React.createElement(MultiBtnWarp, {
@@ -336,12 +370,14 @@ var ComplexSearch = function ComplexSearch(props) {
   }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
-      onChange: function onChange(value, actionType) {
-        handlerFilterTypeInput(value, actionType, isFuzzy);
+      onChange: function onChange(value, actionType, option) {
+        handlerFilterTypeInput(value, actionType, !!isFuzzy, option);
       }
     }
   }), {
-    // @ts-ignore
+    autoFocus: true,
+    autoHighlightFirstItem: false // @ts-ignore
+    ,
     itemRender: highlightItem,
     placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
@@ -351,10 +387,11 @@ var ComplexSearch = function ComplexSearch(props) {
     onKeyUp: handleKeyUp,
     dataSource: // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
     // 则表示需要模糊搜索，调用 handleSuggest
-    isFuzzy ? suggestions : normalizeOptions(options),
+    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
     popupStyle: {
       width: 'auto'
-    }
+    },
+    popupClassName: 'rc-search-auto-complete'
   }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/React.createElement("div", {
     className: classNames('right-wrap'),
     ref: autoRef
@@ -362,7 +399,9 @@ var ComplexSearch = function ComplexSearch(props) {
     className: classNames('search-btn', {
       'focus': focused
     }),
-    onClick: handleSearch
+    onClick: function onClick() {
+      return handleSearch();
+    }
   }, /*#__PURE__*/React.createElement(Icon, {
     type: "search"
   }))));

package/es/style.js

@@ -6,14 +6,14 @@ var prefix = function prefix(props) {
 
 var SearchWarp = styled.div.withConfig({
   componentId: "sc-1afc1cn-0"
-})(["height:100%;width:100%;display:flex;--input-clear-icon-transform:1;--input-hint-icon-color:#808080;.left-wrap{flex:1;border:1px solid var(--btn-pure-normal-border-color,#d1d5d9);display:flex;border-bottom-left-radius:var(--corner-1,2px);border-top-left-radius:var(--corner-1,2px);&.focus{border:1px solid #0064c8;border:1px solid var(--input-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background-color:var(--console-rc-search-label-color,#F7F9FA);:hover{background-color:var(--console-rc-search-label-hover-color,#EFF3F8);}border-radius:var(--corner-1,2px);padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:var(--console-rc-search-close-btn-top,1px);right:var(--console-rc-search-close-btn-left,1px);height:28px;width:30px;background-color:transparent;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}& ", "input-control ", "input-clear-icon::before{content:var(--icon-content-close,\"ea22\") !important;}.isWidget & ", "input-control ", "input-clear-icon::before{content:\"\\E697\" !important;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["height:100%;width:100%;display:flex;--input-clear-icon-transform:1;--input-hint-icon-color:#808080;.left-wrap{flex:1;border:1px solid var(--btn-pure-normal-border-color,#d1d5d9);display:flex;border-bottom-left-radius:var(--corner-1,2px);border-top-left-radius:var(--corner-1,2px);&.focus{border:1px solid #0064c8;border:1px solid var(--input-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background-color:var(--console-rc-search-label-color,#F7F9FA);:hover{background-color:var(--console-rc-search-label-hover-color,#EFF3F8);}border-radius:var(--corner-1,2px);padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;&.rc-search-prefix-no-select{", "input", "disabled{cursor:auto;}}", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:var(--console-rc-search-close-btn-top,1px);right:var(--console-rc-search-close-btn-left,1px);height:28px;width:30px;background-color:transparent;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{", "select-arrow{display:none !important;}height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}& ", "input-control ", "input-clear-icon::before{content:var(--icon-content-close,\"ea22\") !important;}.isWidget & ", "input-control ", "input-clear-icon::before{content:\"\\E697\" !important;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 var MenuContentWrap = styled.ul.withConfig({
   componentId: "sc-1afc1cn-1"
-})(["", "tag-small", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}", "tag-small", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:13px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-small", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}", "tag-small", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:13px;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 var MultiBtnWarp = styled.div.withConfig({
   componentId: "sc-1afc1cn-2"
 })(["padding:\"0 4px\";text-align:\"center\";.pri-btn{margin-right:8px;width:auto;min-width:auto;padding:3px 12px;}.cancel-btn{padding:3px 12px;width:auto;min-width:auto;}", "btn", "small:not(.isOnlyIcon):not(", "btn-text){min-width:auto;}"], prefix, prefix, prefix);
 var TagListWrap = styled.div.withConfig({
   componentId: "sc-1afc1cn-3"
-})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };

package/lib/ComplexSearch/InputPrefix.js

@@ -17,23 +17,30 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _consoleComponents = require("@alicloud/console-components");
 
-var _excluded = ["dataSource", "label"];
+var _excluded = ["defaultValue", "dataSource", "label"];
 
 var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
-  var _props$dataSource = props.dataSource,
+  var defaultValue = props.defaultValue,
+      _props$dataSource = props.dataSource,
       dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
       label = props.label,
       reset = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var noSelect = dataSource.length < 2;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('condition-item')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)('condition-item-txt')
-  }, label), /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
+  }, label), noSelect ? null : /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
     type: "caret-down",
     size: "xxs"
   }), /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
-    className: (0, _classnames.default)('condition-select'),
+    className: (0, _classnames.default)('condition-select', {
+      'rc-search-prefix-no-select': noSelect
+    }),
+    defaultValue: defaultValue,
     hasBorder: false,
+    disabled: noSelect,
+    autoHighlightFirstItem: false,
     dataSource: dataSource,
     itemRender: function itemRender(_ref) {
       var label = _ref.label,
@@ -41,9 +48,11 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
       return /*#__PURE__*/_react.default.createElement("span", {
         "data-value": value
       }, label);
-    },
-    autoWidth: true
-  }, reset)));
+    }
+  }, reset, {
+    autoWidth: false,
+    popupClassName: "rc-search-prefix"
+  })));
 };
 
 var _default = SearchConditionSelectPrefix;

package/lib/ComplexSearch/index.js

@@ -76,6 +76,20 @@ var normalizeOptions = function normalizeOptions(options) {
   });
 };
 
+var normalizeSuggestion = function normalizeSuggestion(suggestion) {
+  var suggestionCopy = (0, _cloneDeep.default)(suggestion);
+  suggestionCopy.forEach(function (s) {
+    if (s.children) {
+      s.children.forEach(function (child) {
+        if ((0, _lodash.isPlainObject)(child)) {
+          child.dataIndex = s.value;
+        }
+      });
+    }
+  });
+  return suggestionCopy;
+};
+
 var normalizeSelectDataSource = function normalizeSelectDataSource(title, list) {
   return [{
     label: title || '',
@@ -128,9 +142,11 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
 };
 
 var ComplexSearch = function ComplexSearch(props) {
-  var options = props.options,
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
       fuzzy = props.fuzzy,
       defaultDataIndex = props.defaultDataIndex,
+      defaultSelectedDataIndex = props.defaultSelectedDataIndex,
       placeholder = props.placeholder,
       onSearch = props.onSearch,
       onSuggest = props.onSuggest,
@@ -139,7 +155,9 @@ var ComplexSearch = function ComplexSearch(props) {
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
 
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react.useState)(options.find(function (o) {
+    return o.dataIndex === defaultSelectedDataIndex;
+  })),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       selectedFilterType = _useState2[0],
       setSelectedFilterType = _useState2[1];
@@ -150,6 +168,7 @@ var ComplexSearch = function ComplexSearch(props) {
       setFocused = _useState4[1];
 
   var autoRef = (0, _react.useRef)(null);
+  var fuzzyAutoRef = (0, _react.useRef)(null);
 
   var field = _consoleComponents.Field.useField();
 
@@ -198,12 +217,12 @@ var ComplexSearch = function ComplexSearch(props) {
    */
 
 
-  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
     var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
 
     if (isFuzzySearch) {
       if (actionType !== 'change') {
-        handleSearch();
+        handleSearch(option.dataIndex);
       } else {
         onSuggest && onSuggest(value, defaultDataIndex || '');
       }
@@ -220,12 +239,17 @@ var ComplexSearch = function ComplexSearch(props) {
     reset();
   };
 
-  var handleSearch = function handleSearch() {
+  var handleSearch = function handleSearch(dataIndex) {
     if (onSearch) {
-      var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
+      var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD); // 如果是没有选择下拉
 
       if (defaultDataIndex && !selectedFilterType) {
         onSearch(getValue(_constants.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(_constants.SEARCH_FILTER_FIELD), options));
+      } // 如果是用户没有指定 defaultDataIndex 但是设置了 fuzzy
+
+
+      if (fuzzy && !selectedFilterType) {
+        onSearch(getValue(_constants.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(_constants.SEARCH_FILTER_FIELD), options));
       }
 
       if (selectedFilterType) {
@@ -243,6 +267,10 @@ var ComplexSearch = function ComplexSearch(props) {
       handleSearch();
       document.body.click();
     }
+
+    if (e.keyCode === 8 && !e.currentTarget.value) {
+      handlerFilterClear();
+    }
   };
 
   var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
@@ -256,7 +284,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderSelectedFilter = function renderSelectedFilter() {
-    var _selectedFilterType$t, _selectedFilterType$t2;
+    var _selectedFilterType$t, _selectedFilterType$t2, _selectedFilterType$t3;
 
     var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
     var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
@@ -280,9 +308,12 @@ var ComplexSearch = function ComplexSearch(props) {
     switch (type) {
       case 'input':
         return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), {
-          className: (0, _classnames.default)('main-input', 'multi')
+          className: (0, _classnames.default)('main-input', 'multi'),
+          autoHighlightFirstItem: false
         }, props, {
-          onKeyUp: handleKeyUp
+          autoWidth: true,
+          onKeyUp: handleKeyUp,
+          dataSource: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t3 = selectedFilterType.templateProps) === null || _selectedFilterType$t3 === void 0 ? void 0 : _selectedFilterType$t3.dataSource
         }));
 
       case 'select':
@@ -292,7 +323,9 @@ var ComplexSearch = function ComplexSearch(props) {
           props: {
             onChange: handleSearch
           }
-        }), props, selectProps));
+        }), {
+          autoHighlightFirstItem: false
+        }, props, selectProps));
 
       case 'multiple':
         return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
@@ -301,6 +334,7 @@ var ComplexSearch = function ComplexSearch(props) {
           itemRender: renderMultipleSelectorItem,
           popupClassName: "xconsole-rcsearch-multi-pop",
           mode: "multiple",
+          autoHighlightFirstItem: false,
           maxTagCount: 0,
           menuProps: {
             footer: /*#__PURE__*/_react.default.createElement(_style.MultiBtnWarp, {
@@ -367,12 +401,14 @@ var ComplexSearch = function ComplexSearch(props) {
   }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
-      onChange: function onChange(value, actionType) {
-        handlerFilterTypeInput(value, actionType, isFuzzy);
+      onChange: function onChange(value, actionType, option) {
+        handlerFilterTypeInput(value, actionType, !!isFuzzy, option);
       }
     }
   }), {
-    // @ts-ignore
+    autoFocus: true,
+    autoHighlightFirstItem: false // @ts-ignore
+    ,
     itemRender: highlightItem,
     placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
       value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
@@ -382,10 +418,11 @@ var ComplexSearch = function ComplexSearch(props) {
     onKeyUp: handleKeyUp,
     dataSource: // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
     // 则表示需要模糊搜索，调用 handleSuggest
-    isFuzzy ? suggestions : normalizeOptions(options),
+    isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
     popupStyle: {
       width: 'auto'
-    }
+    },
+    popupClassName: 'rc-search-auto-complete'
   }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('right-wrap'),
     ref: autoRef
@@ -393,7 +430,9 @@ var ComplexSearch = function ComplexSearch(props) {
     className: (0, _classnames.default)('search-btn', {
       'focus': focused
     }),
-    onClick: handleSearch
+    onClick: function onClick() {
+      return handleSearch();
+    }
   }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
     type: "search"
   }))));

package/lib/style.js

@@ -15,13 +15,13 @@ var prefix = function prefix(props) {
 
 var SearchWarp = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-0"
-})(["height:100%;width:100%;display:flex;--input-clear-icon-transform:1;--input-hint-icon-color:#808080;.left-wrap{flex:1;border:1px solid var(--btn-pure-normal-border-color,#d1d5d9);display:flex;border-bottom-left-radius:var(--corner-1,2px);border-top-left-radius:var(--corner-1,2px);&.focus{border:1px solid #0064c8;border:1px solid var(--input-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background-color:var(--console-rc-search-label-color,#F7F9FA);:hover{background-color:var(--console-rc-search-label-hover-color,#EFF3F8);}border-radius:var(--corner-1,2px);padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:var(--console-rc-search-close-btn-top,1px);right:var(--console-rc-search-close-btn-left,1px);height:28px;width:30px;background-color:transparent;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}& ", "input-control ", "input-clear-icon::before{content:var(--icon-content-close,\"ea22\") !important;}.isWidget & ", "input-control ", "input-clear-icon::before{content:\"\\E697\" !important;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["height:100%;width:100%;display:flex;--input-clear-icon-transform:1;--input-hint-icon-color:#808080;.left-wrap{flex:1;border:1px solid var(--btn-pure-normal-border-color,#d1d5d9);display:flex;border-bottom-left-radius:var(--corner-1,2px);border-top-left-radius:var(--corner-1,2px);&.focus{border:1px solid #0064c8;border:1px solid var(--input-focus-border-color,#0064c8);;border-right:1px solid rgba(192,198,204,1);}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background-color:var(--console-rc-search-label-color,#F7F9FA);:hover{background-color:var(--console-rc-search-label-hover-color,#EFF3F8);}border-radius:var(--corner-1,2px);padding:0 8px;margin:0 2px;font-size:12px;color:#333;position:relative;&-txt{padding-right:4px;}&:hover{background-color:#E0E4E8;}}.condition-select{width:100%;height:100%;opacity:0;position:absolute;top:0;left:0;min-width:auto;&.rc-search-prefix-no-select{", "input", "disabled{cursor:auto;}}", "select-inner{min-width:auto;}}.forms{flex:1;position:relative;.clear-level1{position:absolute;top:var(--console-rc-search-close-btn-top,1px);right:var(--console-rc-search-close-btn-left,1px);height:28px;width:30px;background-color:transparent;z-index:99;color:#333;text-align:center;line-height:28px;font-size:12px;cursor:pointer;padding:6px 0 0 6px;}}.main-input{", "select-arrow{display:none !important;}height:auto;border:none;box-shadow:none;&.single{flex:1;}&.select{width:100%;}&.multi{width:100%;}", "input,", "input{height:auto;box-shadow:none;}}", "input", "medium{height:auto;}}.right-wrap{width:32px;.search-btn{width:32px;padding:0 !important;border-bottom-left-radius:0;border-top-left-radius:0;&.focus{border-color:#0064c8;border-color:var(--input-focus-border-color,#0064c8);}border-left:none;}}& ", "input-control ", "input-clear-icon::before{content:var(--icon-content-close,\"ea22\") !important;}.isWidget & ", "input-control ", "input-clear-icon::before{content:\"\\E697\" !important;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 
 exports.SearchWarp = SearchWarp;
 
 var MenuContentWrap = _styledComponents.default.ul.withConfig({
   componentId: "sc-1afc1cn-1"
-})(["", "tag-small", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}", "tag-small", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:13px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;content:var(--icon-content-delete-filling);}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-small", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:4px;padding-top:1px;}", "tag-small", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:13px;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 
 exports.MenuContentWrap = MenuContentWrap;
 
@@ -33,6 +33,6 @@ exports.MultiBtnWarp = MultiBtnWarp;
 
 var TagListWrap = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-3"
-})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']:hover::before{color:#181818;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+})(["", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:8px;padding-right:6px;}", "tag-medium", "tag-closable > ", "tag-body{max-width:calc(100% - 8px - 8px - var(--tag-size-m-padding-lr,8px));}", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before,", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{font-size:16px;}&& [class*='-icon-close']::before{color:#808080;font-size:12px !important;}.remove-btn{margin-bottom:8px;line-height:24px;display:inline-block;vertical-align:middle;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
 
 exports.TagListWrap = TagListWrap;

package/lib/types/IRcSearchProps.type.d.ts

@@ -28,9 +28,13 @@ export interface IRcSearchProps {
      */
     placeholder?: string;
     /**
-     * 默认类别
+     * 默认搜索类别
      */
     defaultDataIndex?: string;
+    /**
+    * 默认选中的类别
+    */
+    defaultSelectedDataIndex?: string;
     /**
      * 搜索触发
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",