@alicloud/console-components-search 0.1.3 → 0.2.2

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.46s
+✔ Webpack: Compiled successfully in 12.79s
  WARN  asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
 This can impact web performance.
 Assets: 
-  main.js (2.44 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.49 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.44 MiB)
+  main (2.49 MiB)
       main.css
       main.js
 ,webpack performance recommendations: 

package/es/constants.js

@@ -3,4 +3,7 @@ export var baseTagListClassName = "".concat(baseClassName, "-taglist"); // expor
 // export const titleContainerClassName = `${titleClassName}-container`
 // export const titleExtraClassName = `${titleClassName}-extra`
 // export const titleChildrenClassName = `${titleClassName}-children`
-// export const contentClassName = `${baseClassName}-content`
+// export const contentClassName = `${baseClassName}-content`
+
+export var SEARCH_FILTER_FIELD = 'filterInputValue';
+export var SEARCH_FILTER_VALUE_FIELD = 'searchValue';

package/es/index.js

@@ -4,4 +4,4 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
 import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
 import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
 import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
-export { Search, SearchTagList, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };
+export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };

package/es/modeSingleSingle/InputPrefix.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["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,
+      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+      label = props.label,
+      reset = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition-item')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames('condition-item-txt')
+  }, label), /*#__PURE__*/React.createElement(Icon, {
+    type: "caret-down",
+    size: "xxs"
+  }), /*#__PURE__*/React.createElement(Select, _extends({
+    className: classNames('condition-select'),
+    hasBorder: false,
+    dataSource: dataSource,
+    autoWidth: true
+  }, reset)));
+};
+
+export default SearchConditionSelectPrefix;

package/es/modeSingleSingle/index2.js

@@ -0,0 +1,369 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+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) { _defineProperty(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; }
+
+import classNames from 'classnames';
+import cloneDeep from 'lodash/cloneDeep';
+import groupBy from 'lodash/groupBy';
+import isArray from 'lodash/isArray';
+import React, { useState, useRef } from "react";
+import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
+import { SearchWarp, MultiBtnWarp } from "../style";
+import SearchConditionSelectPrefix from "./InputPrefix";
+import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from "../constants";
+var AutoComplete = Select.AutoComplete;
+/**
+ * 
+ * @param IRcSearchOptionsProps options
+ * @returns 
+ */
+
+var normalizeOptions = function normalizeOptions(options) {
+  var optionsCopy = cloneDeep(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(groupBy(optionsCopy, 'groupName')).map(function (_ref) {
+    var _ref2 = _slicedToArray(_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: _toConsumableArray(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;
+
+    valueLabel = (_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.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,
+    value: value,
+    dataIndex: dataIndex
+  };
+};
+
+var highlightKeyword = function highlightKeyword(value, keywords) {
+  var idx = value.toLowerCase().indexOf(keywords.toLowerCase());
+  var startValue = value.slice(0, idx);
+  var highlightValue = value.slice(idx, idx + keywords.length);
+  var endValue = value.slice(idx + keywords.length);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, startValue, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'var(--color-brand1-6)'
+    }
+  }, highlightValue), endValue);
+};
+
+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 = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedFilterType = _useState2[0],
+      setSelectedFilterType = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var autoRef = useRef(null);
+  var field = 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(SEARCH_FILTER_FIELD);
+  var defaultFilter = options.find(function (t) {
+    return t.dataIndex === defaultDataIndex;
+  });
+
+  var highlightItem = function highlightItem(item, searchKey) {
+    var label = item.label;
+
+    if (searchKey && searchKey.length) {
+      label = highlightKeyword(item.label, searchKey);
+    }
+
+    return label;
+  };
+  /**
+   * 处理筛选类型选中的情况
+   */
+
+
+  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(SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
+
+    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(SEARCH_FILTER_VALUE_FIELD);
+
+      if (defaultDataIndex && !selectedFilterType) {
+        onSearch(getValue(SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(SEARCH_FILTER_FIELD), options));
+      }
+
+      if (selectedFilterType) {
+        onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
+      }
+    }
+
+    reset();
+    document.body.click();
+    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(SEARCH_FILTER_VALUE_FIELD);
+    var checked = isArray(searchValue) && searchValue.some(function (v) {
+      return v === item.value;
+    });
+    return /*#__PURE__*/React.createElement(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(SEARCH_FILTER_VALUE_FIELD);
+
+    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.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_VALUE_FIELD, {}), {
+          className: classNames('main-input', 'multi')
+        }, props, {
+          onKeyUp: handleKeyUp
+        }));
+
+      case 'select':
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          className: classNames('main-input', 'select')
+        }, init(SEARCH_FILTER_VALUE_FIELD, {
+          props: {
+            onChange: handleSearch
+          }
+        }), props, selectProps));
+
+      case 'multiple':
+        return /*#__PURE__*/React.createElement(Select, _extends({
+          className: classNames('main-input', 'multi')
+        }, init(SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
+          itemRender: renderMultipleSelectorItem,
+          popupClassName: "xconsole-rcsearch-multi-pop",
+          mode: "multiple",
+          maxTagCount: 0,
+          menuProps: {
+            footer: /*#__PURE__*/React.createElement(MultiBtnWarp, {
+              prefix: prefix
+            }, /*#__PURE__*/React.createElement(Button, {
+              size: "small",
+              className: classNames("pri-btn"),
+              type: "primary",
+              disabled: !(searchValue !== null && searchValue !== void 0 && searchValue.length),
+              onClick: function onClick() {
+                handleSearch();
+              }
+            }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement(Button, {
+              size: "small",
+              className: classNames("cancel-btn"),
+              type: "normal",
+              onClick: function onClick() {
+                reset();
+                document.body.click();
+              }
+            }, "\u53D6\u6D88"))
+          }
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
+    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(SEARCH_FILTER_VALUE_FIELD));
+    return hasFilterTypeClearBtn && /*#__PURE__*/React.createElement("div", {
+      className: "clear-level1"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefix, "input-control")
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefix, "input-hint-wrap")
+    }, /*#__PURE__*/React.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.createElement(SearchWarp, {
+    prefix: prefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('left-wrap', "".concat(prefix, "input"), {
+      'focus': focused
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('condition')
+  }, selectedFilterType ? /*#__PURE__*/React.createElement(SearchConditionSelectPrefix, {
+    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.createElement("div", {
+    className: classNames('forms')
+  }, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
+    props: {
+      // @ts-ignore
+      onChange: function onChange(value, actionType) {
+        handlerFilterTypeInput(value, actionType, isFuzzy);
+      }
+    }
+  }), {
+    // @ts-ignore
+    itemRender: highlightItem,
+    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: classNames('main-input', 'multi'),
+    hasBorder: false,
+    onKeyUp: handleKeyUp,
+    dataSource: // 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
+    // 则表示需要模糊搜索，调用 handleSuggest
+    isFuzzy ? suggestions : normalizeOptions(options),
+    popupStyle: {
+      width: 'auto'
+    }
+  }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/React.createElement("div", {
+    className: classNames('right-wrap'),
+    ref: autoRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: classNames('search-btn', {
+      'focus': focused
+    }),
+    onClick: handleSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: "search"
+  }))));
+};
+
+export default ConfigProvider.config(ComplexSearch);

package/es/search.js

@@ -1,6 +1,5 @@
 import React from "react";
-import ModeSingleSingle from "./modeSingleSingle";
-import ModeSingleMulti from "./modeSingleMulti";
+import ComplexSearch from "./modeSingleSingle/index2";
 import classNames from 'classnames';
 import styled from "styled-components";
 import { baseClassName } from './constants';
@@ -20,5 +19,5 @@ export var Search = function Search(props) {
   }), /*#__PURE__*/React.createElement(SearchWrap, {
     className: classNames(baseClassName, className),
     style: style
-  }, simple ? /*#__PURE__*/React.createElement(ModeSingleSingle, props) : /*#__PURE__*/React.createElement(ModeSingleMulti, props)));
+  }, /*#__PURE__*/React.createElement(ComplexSearch, props)));
 };

package/es/searchTagList/PureTag.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
+import React from 'react';
+import { Tag, Badge } from '@alicloud/console-components';
+import Truncate from '@alicloud/console-components-truncate';
+
+var Empty = function Empty(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+
+var PureTag = function PureTag(props) {
+  var intl = props.intl,
+      tagKey = props.tagKey,
+      disableTruncate = props.disableTruncate,
+      showDot = props.showDot,
+      tagValue = props.tagValue,
+      showLabel = props.showLabel,
+      _props$closable = props.closable,
+      closable = _props$closable === void 0 ? true : _props$closable,
+      resetProps = _objectWithoutProperties(props, _excluded);
+
+  var defaultTruncateProps = {
+    threshold: 20,
+    showTooltip: false
+  };
+  var TruncateWrapper = disableTruncate ? Empty : Truncate;
+  var DotWrapper = showDot ? Badge : Empty;
+  var TagWrapper = closable ? Tag.Closeable : Tag;
+  var transformedTagValue = tagValue;
+
+  if (tagValue === '') {
+    transformedTagValue = '空值';
+  } else if (tagValue === undefined || tagValue === null) {
+    transformedTagValue = '全部值';
+  }
+
+  return (
+    /*#__PURE__*/
+    //@ts-ignore
+    React.createElement(DotWrapper, {
+      title: "\u5373\u5C06\u65B0\u5EFA",
+      className: "console-tags-tag-dot",
+      dot: true
+    }, /*#__PURE__*/React.createElement(TagWrapper, _extends({
+      title: "".concat(tagKey, ":").concat(tagValue),
+      className: "console-tags-tag"
+    }, resetProps), showLabel && /*#__PURE__*/React.createElement("label", {
+      className: "console-tags-tag-label"
+    }, "\u6807\u7B7E"), /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/React.createElement("span", {
+      className: "console-tags-tag_empty"
+    }, transformedTagValue)))
+  );
+};
+
+export default PureTag;

package/es/searchTagList/index.js

@@ -2,35 +2,36 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import React from "react";
 import classNames from 'classnames';
 import { ConfigProvider, Tag } from '@alicloud/console-components';
-import LoggerProvider from '../provider/LoggerProvider';
 import { TagListWrap } from '../style';
 import { baseTagListClassName } from '../constants';
+import PureTag from "./PureTag";
 var TagGroup = Tag.Group,
     ClosableTag = Tag.Closeable;
 
 var SearchTagList = function SearchTagList(props) {
-  var tagList = props.tagList,
+  var dataSource = props.dataSource,
       className = props.className,
       style = props.style,
       onChange = props.onChange,
+      onClear = props.onClear,
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
   function onRemoveTag(item) {
-    var newTagList = _toConsumableArray(tagList);
+    var newTagList = _toConsumableArray(dataSource);
 
     if (onChange) {
       var resFindIndex = newTagList.findIndex(function (x) {
         return x.dataIndex === item.dataIndex;
       });
-      newTagList.splice(resFindIndex, 1);
-      onChange(newTagList);
+      var deletedTags = newTagList.splice(resFindIndex, 1);
+      onChange(deletedTags[0], newTagList);
     }
   }
 
   function onRemoveAllTag() {
-    if (onChange) {
-      onChange([]);
+    if (onClear) {
+      onClear();
     }
   }
 
@@ -38,12 +39,25 @@ var SearchTagList = function SearchTagList(props) {
     prefix: prefix,
     className: classNames(baseTagListClassName, className),
     style: style
-  }, /*#__PURE__*/React.createElement(LoggerProvider, {
-    regionId: props.regionId,
-    resourceType: props.resourceType || '',
-    componentName: "RcSearch"
-  }), /*#__PURE__*/React.createElement(TagGroup, null, tagList && tagList.length > 0 && tagList.map(function (tagItem) {
+  }, /*#__PURE__*/React.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
+    var value = tagItem.value;
+    var isTag = !!value.tagKey;
+
+    if (isTag) {
+      return /*#__PURE__*/React.createElement(PureTag, {
+        showLabel: true,
+        tagKey: value.tagKey,
+        tagValue: value.tagKey,
+        closable: true,
+        onClose: function onClose() {
+          onRemoveTag(tagItem);
+          return true;
+        }
+      });
+    }
+
     return /*#__PURE__*/React.createElement(ClosableTag, {
+      className: "console-tags-tag",
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
       size: "medium",
@@ -51,8 +65,10 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueShow);
-  }), tagList && tagList.length > 0 && /*#__PURE__*/React.createElement("a", {
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "console-tags-tag-label"
+    }, tagItem.label), tagItem.value || tagItem.valueLabel);
+  }), dataSource && dataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
     className: "remove-btn",
     onClick: onRemoveAllTag
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));

package/es/style.js

@@ -6,7 +6,7 @@ var prefix = function prefix(props) {
 
 var SearchWarp = styled.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);
 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);
@@ -15,5 +15,5 @@ var MultiBtnWarp = styled.div.withConfig({
 })(["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;content:var(--icon-content-delete-filling);}.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']: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);
 export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };

package/lib/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const baseClassName = "rc-search";
 export declare const baseTagListClassName: string;
+export declare const SEARCH_FILTER_FIELD = "filterInputValue";
+export declare const SEARCH_FILTER_VALUE_FIELD = "searchValue";

package/lib/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.baseTagListClassName = exports.baseClassName = void 0;
+exports.baseTagListClassName = exports.baseClassName = exports.SEARCH_FILTER_VALUE_FIELD = exports.SEARCH_FILTER_FIELD = void 0;
 var baseClassName = 'rc-search';
 exports.baseClassName = baseClassName;
 var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const titleClassName = `${baseClassName}-title`
@@ -12,4 +12,8 @@ var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const
 // export const titleChildrenClassName = `${titleClassName}-children`
 // export const contentClassName = `${baseClassName}-content`
 
-exports.baseTagListClassName = baseTagListClassName;
+exports.baseTagListClassName = baseTagListClassName;
+var SEARCH_FILTER_FIELD = 'filterInputValue';
+exports.SEARCH_FILTER_FIELD = SEARCH_FILTER_FIELD;
+var SEARCH_FILTER_VALUE_FIELD = 'searchValue';
+exports.SEARCH_FILTER_VALUE_FIELD = SEARCH_FILTER_VALUE_FIELD;

package/lib/index.d.ts

@@ -4,4 +4,5 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
 import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
 import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
 import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
-export { Search, SearchTagList, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };
+import './index.less';
+export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };

package/lib/index.js

@@ -35,7 +35,7 @@ Object.defineProperty(exports, "Search", {
     return _search.Search;
   }
 });
-Object.defineProperty(exports, "SearchTagList", {
+Object.defineProperty(exports, "SearchFilter", {
   enumerable: true,
   get: function get() {
     return _searchTagList.default;

package/lib/modeSingleSingle/InputPrefix.d.ts

@@ -0,0 +1,2 @@
+declare const SearchConditionSelectPrefix: (props: any) => JSX.Element;
+export default SearchConditionSelectPrefix;