@alicloud/console-components-search 0.1.3 → 0.2.0

package/lib/modeSingleSingle/index2.js

@@ -0,0 +1,372 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _groupBy = _interopRequireDefault(require("lodash/groupBy"));
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _consoleComponents = require("@alicloud/console-components");
+
+var _style = require("../style");
+
+var _InputPrefix = _interopRequireDefault(require("./InputPrefix"));
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var AutoComplete = _consoleComponents.Select.AutoComplete;
+/**
+ * 
+ * @param IRcSearchOptionsProps options
+ * @returns 
+ */
+
+var normalizeOptions = function normalizeOptions(options) {
+  var optionsCopy = (0, _cloneDeep.default)(options);
+  optionsCopy.forEach(function (o) {
+    var _o$groupName;
+
+    return (_o$groupName = o.groupName) !== null && _o$groupName !== void 0 ? _o$groupName : o.groupName = "选择筛选条件";
+  });
+  return Object.entries((0, _groupBy.default)(optionsCopy, 'groupName')).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        groupName = _ref2[0],
+        children = _ref2[1];
+
+    return {
+      label: groupName,
+      children: children.map(function (l) {
+        return {
+          label: l.label,
+          value: l.dataIndex
+        };
+      })
+    };
+  });
+};
+
+var normalizeSelectDataSource = function normalizeSelectDataSource(title, list) {
+  return [{
+    label: title || '',
+    children: (0, _toConsumableArray2.default)(list)
+  }];
+};
+
+var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
+  var opt = options.find(function (o) {
+    return o.dataIndex === dataIndex;
+  });
+  var valueLabel = value;
+
+  if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
+    var _opt$templateProps;
+
+    valueLabel = (_opt$templateProps = opt.templateProps) === null || _opt$templateProps === void 0 ? void 0 : _opt$templateProps.dataSource.find(function (d) {
+      return d.value === value;
+    }).label;
+  }
+
+  if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
+    var _opt$templateProps2, _opt$templateProps3;
+
+    console.log((_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
+      return value.indexOf(d.value) !== -1;
+    }));
+    valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
+      return value.indexOf(d.value) !== -1;
+    }).map(function (d) {
+      return d.label;
+    }).join('/');
+  }
+
+  return {
+    label: opt === null || opt === void 0 ? void 0 : opt.label,
+    valueLabel: valueLabel
+  };
+};
+
+var ComplexSearch = function ComplexSearch(props) {
+  var options = props.options,
+      fuzzy = props.fuzzy,
+      defaultDataIndex = props.defaultDataIndex,
+      placeholder = props.placeholder,
+      onSearch = props.onSearch,
+      onSuggest = props.onSuggest,
+      _props$suggestions = props.suggestions,
+      suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
+      _props$prefix = props.prefix,
+      prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      selectedFilterType = _useState2[0],
+      setSelectedFilterType = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var autoRef = (0, _react.useRef)(null);
+
+  var field = _consoleComponents.Field.useField();
+
+  var init = field.init,
+      getValue = field.getValue,
+      reset = field.reset,
+      getError = field.getError;
+  var focusProps = {
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    }
+  }; //计算视图，根据内部状态和输入的 props 决定一些值
+
+  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
+  var defaultFilter = options.find(function (t) {
+    return t.dataIndex === defaultDataIndex;
+  });
+  /**
+   * 处理筛选类型选中的情况
+   */
+
+  var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
+    var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    setSelectedFilterType(options.find(function (o) {
+      return o.dataIndex === type;
+    }));
+    resetValue && reset();
+  };
+  /**
+   * 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
+   */
+
+
+  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
+    var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索，则直接处理
+
+    if (isFuzzySearch) {
+      if (actionType !== 'change') {
+        handleSearch();
+      } else {
+        onSuggest && onSuggest(value, defaultDataIndex || '');
+      }
+
+      return;
+    } // 否则处理筛选项改变的情况
+
+
+    handlerFilterTypeChange(value, false);
+  };
+
+  var handlerFilterClear = function handlerFilterClear() {
+    setSelectedFilterType(null);
+    reset();
+  };
+
+  var handleSearch = function handleSearch() {
+    if (onSearch) {
+      var value = getValue('searchValue');
+
+      if (defaultDataIndex && !selectedFilterType) {
+        onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
+      }
+
+      if (selectedFilterType) {
+        onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+      }
+    }
+
+    reset();
+    setFocused(false);
+  };
+
+  var handleKeyUp = function handleKeyUp(e) {
+    if (e.keyCode === 13 && e.currentTarget.value) {
+      handleSearch();
+      document.body.click();
+    }
+  };
+
+  var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
+    var searchValue = getValue('searchValue');
+    var checked = (0, _isArray.default)(searchValue) && searchValue.some(function (v) {
+      return v === item.value;
+    });
+    return /*#__PURE__*/_react.default.createElement(_consoleComponents.Checkbox, {
+      checked: checked
+    }, item.label);
+  };
+
+  var renderSelectedFilter = function renderSelectedFilter() {
+    var _selectedFilterType$t, _selectedFilterType$t2;
+
+    var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
+    var searchValue = getValue('searchValue');
+
+    var props = _objectSpread({
+      hasBorder: false,
+      autoFocus: true,
+      hasClear: true,
+      key: type,
+      placeholder: (selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t = selectedFilterType.templateProps) === null || _selectedFilterType$t === void 0 ? void 0 : _selectedFilterType$t.placeholder) || "\u9ED8\u8BA4\u6309".concat(selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, "\u641C\u7D22")
+    }, focusProps);
+
+    var selectProps = {
+      dataSource: normalizeSelectDataSource(selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, (selectedFilterType === null || selectedFilterType === void 0 ? void 0 : (_selectedFilterType$t2 = selectedFilterType.templateProps) === null || _selectedFilterType$t2 === void 0 ? void 0 : _selectedFilterType$t2.dataSource) || []),
+      defaultVisible: true,
+      popupStyle: {
+        width: 'auto'
+      }
+    };
+
+    switch (type) {
+      case 'input':
+        return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('searchValue', {}), {
+          className: (0, _classnames.default)('main-input', 'multi')
+        }, props, {
+          onKeyUp: handleKeyUp
+        }));
+
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
+          className: (0, _classnames.default)('main-input', 'select')
+        }, init('searchValue', {
+          props: {
+            onChange: handleSearch
+          }
+        }), props, selectProps));
+
+      case 'multiple':
+        return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
+          className: (0, _classnames.default)('main-input', 'multi')
+        }, init('searchValue', {}), props, selectProps, {
+          itemRender: renderMultipleSelectorItem,
+          popupClassName: "xconsole-rcsearch-multi-pop",
+          mode: "multiple",
+          maxTagCount: 0,
+          menuProps: {
+            footer: /*#__PURE__*/_react.default.createElement(_style.MultiBtnWarp, {
+              prefix: prefix
+            }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
+              size: "small",
+              className: (0, _classnames.default)("pri-btn"),
+              type: "primary",
+              disabled: !(searchValue !== null && searchValue !== void 0 && searchValue.length),
+              onClick: function onClick() {
+                handleSearch();
+              }
+            }, "\u786E\u5B9A"), /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
+              size: "small",
+              className: (0, _classnames.default)("cancel-btn"),
+              type: "normal",
+              onClick: function onClick() {
+                reset();
+              }
+            }, "\u53D6\u6D88"))
+          }
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
+    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
+    return hasFilterTypeClearBtn && /*#__PURE__*/_react.default.createElement("div", {
+      className: "clear-level1"
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefix, "input-control")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefix, "input-hint-wrap")
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "".concat(prefix, "icon ").concat(prefix, "icon-delete-filling ").concat(prefix, "medium ").concat(prefix, "input-hint ").concat(prefix, "input-clear-icon"),
+      role: "button",
+      "aria-label": "\u6E05\u9664",
+      onClick: function onClick() {
+        handlerFilterClear();
+      }
+    }))));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_style.SearchWarp, {
+    prefix: prefix
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('left-wrap', "".concat(prefix, "input"), {
+      'focus': focused
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('condition')
+  }, selectedFilterType ? /*#__PURE__*/_react.default.createElement(_InputPrefix.default, {
+    dataSource: normalizeOptions(options),
+    label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
+    defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
+    onChange: function onChange(value) {
+      handlerFilterTypeChange(value);
+    }
+  }) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('forms')
+  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('filterInputValue', {
+    props: {
+      // @ts-ignore
+      onChange: function onChange(value, actionType) {
+        handlerFilterTypeInput(value, actionType, isFuzzy);
+      }
+    }
+  }), {
+    ref: autoRef,
+    placeholder: placeholder ? placeholder : defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? "\u9ED8\u8BA4\u6309".concat(defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label, "\u641C\u7D22") : '请搜索',
+    className: (0, _classnames.default)('main-input', 'multi'),
+    hasBorder: false,
+    onKeyUp: handleKeyUp,
+    dataSource: // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
+    // 则表示需要模糊搜索，调用 handleSuggest
+    isFuzzy ? suggestions : normalizeOptions(options),
+    popupStyle: {
+      width: 'auto'
+    }
+  }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('right-wrap')
+  }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
+    className: (0, _classnames.default)('search-btn', {
+      'focus': focused
+    }),
+    onClick: handleSearch
+  }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
+    type: "search"
+  }))));
+};
+
+var _default = _consoleComponents.ConfigProvider.config(ComplexSearch);
+
+exports.default = _default;

package/lib/search.js

@@ -9,9 +9,7 @@ exports.Search = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _modeSingleSingle = _interopRequireDefault(require("./modeSingleSingle"));
-
-var _modeSingleMulti = _interopRequireDefault(require("./modeSingleMulti"));
+var _index = _interopRequireDefault(require("./modeSingleSingle/index2"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -37,7 +35,7 @@ var Search = function Search(props) {
   }), /*#__PURE__*/_react.default.createElement(SearchWrap, {
     className: (0, _classnames.default)(_constants.baseClassName, className),
     style: style
-  }, simple ? /*#__PURE__*/_react.default.createElement(_modeSingleSingle.default, props) : /*#__PURE__*/_react.default.createElement(_modeSingleMulti.default, props)));
+  }, /*#__PURE__*/_react.default.createElement(_index.default, props)));
 };
 
 exports.Search = Search;

package/lib/searchTagList/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
+import React from "react";
+import { IRcSearchTagListProps } from '../types/IRcSearchTagListProps.type';
+declare const _default: React.FC<IRcSearchTagListProps>;
 export default _default;

package/lib/searchTagList/index.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _consoleComponents = require("@alicloud/console-components");
 
-var _LoggerProvider = _interopRequireDefault(require("../provider/LoggerProvider"));
-
 var _style = require("../style");
 
 var _constants = require("../constants");
@@ -25,7 +23,7 @@ var TagGroup = _consoleComponents.Tag.Group,
     ClosableTag = _consoleComponents.Tag.Closeable;
 
 var SearchTagList = function SearchTagList(props) {
-  var tagList = props.tagList,
+  var dataSource = props.dataSource,
       className = props.className,
       style = props.style,
       onChange = props.onChange,
@@ -33,7 +31,7 @@ var SearchTagList = function SearchTagList(props) {
       prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
   function onRemoveTag(item) {
-    var newTagList = (0, _toConsumableArray2.default)(tagList);
+    var newTagList = (0, _toConsumableArray2.default)(dataSource);
 
     if (onChange) {
       var resFindIndex = newTagList.findIndex(function (x) {
@@ -54,11 +52,7 @@ var SearchTagList = function SearchTagList(props) {
     prefix: prefix,
     className: (0, _classnames.default)(_constants.baseTagListClassName, className),
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_LoggerProvider.default, {
-    regionId: props.regionId,
-    resourceType: props.resourceType || '',
-    componentName: "RcSearch"
-  }), /*#__PURE__*/_react.default.createElement(TagGroup, null, tagList && tagList.length > 0 && tagList.map(function (tagItem) {
+  }, /*#__PURE__*/_react.default.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
     return /*#__PURE__*/_react.default.createElement(ClosableTag, {
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
@@ -67,8 +61,8 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueShow);
-  }), tagList && tagList.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
+    }, tagItem.label, ":", tagItem.valueLabel);
+  }), dataSource && dataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
     className: "remove-btn",
     onClick: onRemoveAllTag
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));

package/lib/style.js

@@ -15,7 +15,7 @@ var prefix = function prefix(props) {
 
 var SearchWarp = _styledComponents.default.div.withConfig({
   componentId: "sc-1afc1cn-0"
-})(["height:100%;width:100%;display:flex;.left-wrap{flex:1;border-left:1px solid rgba(192,198,204,1);border-bottom:1px solid rgba(192,198,204,1);border-top:1px solid rgba(192,198,204,1);border-right:1px solid rgba(192,198,204,1);display:flex;border-bottom-left-radius:2px;border-top-left-radius:2px;&.focus{border:1px solid #0064c8;border:1px solid var(--input-hover-border-color,#0064c8);;}.condition{height:26px;display:inline-block;margin-top:2px;}.condition-item{height:26px;display:inline-block;line-height:26px;background:#EFF3F8;border-radius:2px;background-color:#EFF3F8;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:1px;right:1px;height:28px;width:30px;background-color:#fff;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;border-left:none;}}"], prefix, prefix, prefix, prefix, prefix);
+})(["height:100%;width:100%;display:flex;.left-wrap{flex:1;border-left:1px solid rgba(192,198,204,1);border-bottom:1px solid rgba(192,198,204,1);border-top:1px solid rgba(192,198,204,1);border-right:1px solid rgba(192,198,204,1);display:flex;border-bottom-left-radius:2px;border-top-left-radius: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:#EFF3F8;border-radius:2px;background-color:#EFF3F8;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:1px;right:1px;height:28px;width:30px;background-color:#fff;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;}}"], prefix, prefix, prefix, prefix, prefix);
 
 exports.SearchWarp = SearchWarp;
 

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

@@ -1,5 +1,9 @@
+/**
+ * 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化，因此你可以使用接口来定义Props，从而能便捷地将Props的信息通过文档透出。
+ *
+ * 下面列举的props其实是随便写的，仅仅用来说明breezr-docs的接口提取功能。
+ */
 import { IRcSearchOptionsProps } from './IRcSearchOptions.type';
-import { IRcSearchTagItemProps } from './IRcSearchTagItemProps.type';
 export interface IRcSearchProps {
     /**
      * 是否是简单搜索， 不支持多 filter, 但是支持模糊
@@ -20,42 +24,39 @@ export interface IRcSearchProps {
      */
     options: IRcSearchOptionsProps[];
     /**
-     * tags 传入的taglist, 用于， 同步
+     * 默认placeholder
      */
-    tags?: IRcSearchTagItemProps[];
+    placeholder?: string;
     /**
      * 默认类别
-     * 仅在mode是"single-multi" | "multi-multi"生效
      */
     defaultDataIndex?: string;
     /**
-     * 默认placeholder
-     * 仅在mode是"single-multi" | "multi-multi"生效, 且， 未配置默认值时生效
+     * 搜索触发
      */
-    defaultPlaceholder?: string;
+    onSearch?: (value: string, dataIndex: string, extra?: any) => void;
     /**
-     * regionId
+     * 模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表
      */
-    regionId?: string;
+    onSuggest?: (value: string, dataIndex: string) => void;
     /**
-     * resourceType
+     * 模糊搜索的 suggestions
      */
-    resourceType?: string;
+    suggestions?: any[];
     /**
-     * 搜索触发
+     * 是否是模糊搜索
      */
-    onSearch?: (allFields: any) => void;
+    fuzzy?: boolean;
     /**
-     * 模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表
+     * regionId, 数据上报用
      */
-    onSuggest?: (value: string, dataIndex: string) => void;
+    regionId?: string;
     /**
-     * 模糊搜索的回调函数(仅输入框返回)，当没设置defaultDataIndex，且有多个input类别时触发，
-     * 可自定义二级返回List
-     */
-    onSuggestNoDataIndex?: (value: string) => Promise<any>;
+    * resourceType， 数据上报用, 格式 ACS::ECS::INSTANCE
+    */
+    resourceType?: string;
     /**
-     * 提供单选和多选, 触发。
+     * 样式 class 前缀
      */
-    onSelect?: () => void;
+    prefix?: string;
 }

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

@@ -19,5 +19,5 @@ export interface IRcSearchTagItemProps {
     /**
      * tag的类别的展示值
      */
-    valueShow: string;
+    valueLabel: string;
 }

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

@@ -14,13 +14,13 @@ export interface IRcSearchTagListProps {
      */
     style?: any;
     /**
-     * tags 传入的taglist, 用于， 同步
+     * 筛选项
      */
-    tagList: IRcSearchTagItemProps[];
+    dataSource: IRcSearchTagItemProps[];
     /**
      * regionId
      */
-    regionId: string;
+    regionId?: string;
     /**
      * resourceType
      */

package/package.json

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

package/demos/demo2.demo.tsx

@@ -1,81 +0,0 @@
-/**
- * @title 场景二 +  结合SearchTagList使用
- * @canFullScreen
- */
-
-import React, {useState} from "react";
-import { Search, IRcSearchProps, SearchTagList } from "@alicloud/console-components-search";
-
-// interface IProps {}
-let options = [
-  {
-    label: '实例名称',
-    dataIndex: 'name',
-    template: 'input',
-    templateProps: {
-      placeholder: '按实例名称搜索',
-      dataSource: []
-    }
-  },
-  {
-    label: '网络类型',
-    dataIndex: 'type',
-    template: 'select',
-    templateProps: {
-      placeholder: '请选择网络类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  },
-  {
-    label: '付费类型',
-    dataIndex: 'pay',
-    template: 'multiple',
-    templateProps: {
-      placeholder: '请选择付费类型',
-      dataSource: [
-        {label: 'A', value: 'a'},
-        {label: 'B', value: 'b'},
-        {label: 'C', value: 'c'},
-        {label: 'D', value: 'd'},
-      ]
-    }
-  }
-]
-
-const Demo2: React.FC<IRcSearchProps> = (props) => {
-  const [tagList, setTagList] = useState<any>([]);
-
-  function onTagChangeByTagList (newTags: any) {
-    console.log(`onTagChange:`, newTags);
-    setTagList(newTags);
-  }
-
-  async function onSearch (field:any) {
-    console.log(`onSearch:`, 'allFileds', field)
-    console.log(`提交搜索： ${JSON.stringify(field)}`)
-  }
-
-
-  return (
-    <div>
-      <Search
-        defaultDataIndex="name"
-        regionId="demo"
-        resourceType="demo"
-        options={options}
-        onSearch={onSearch}
-        tags={tagList}
-      />
-      <SearchTagList regionId="demo" resourceType="demo" style={{marginTop: '8px'}} tagList={tagList} onChange={onTagChangeByTagList} />
-      
-    </div>
-    
-  )
-};
- 
-export default Demo2;