@alicloud/console-components-search 0.1.3 → 0.2.2

package/lib/modeSingleSingle/InputPrefix.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _consoleComponents = require("@alicloud/console-components");
+
+var _excluded = ["dataSource", "label"];
+
+var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
+  var _props$dataSource = props.dataSource,
+      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+      label = props.label,
+      reset = (0, _objectWithoutProperties2.default)(props, _excluded);
+  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, {
+    type: "caret-down",
+    size: "xxs"
+  }), /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
+    className: (0, _classnames.default)('condition-select'),
+    hasBorder: false,
+    dataSource: dataSource,
+    autoWidth: true
+  }, reset)));
+};
+
+var _default = SearchConditionSelectPrefix;
+exports.default = _default;

package/lib/modeSingleSingle/index2.d.ts

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

package/lib/modeSingleSingle/index2.js

@@ -0,0 +1,400 @@
+"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"));
+
+var _constants = require("../constants");
+
+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;
+
+    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.default.createElement(_react.default.Fragment, null, startValue, /*#__PURE__*/_react.default.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 = (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(_constants.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(_constants.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(_constants.SEARCH_FILTER_VALUE_FIELD);
+
+      if (defaultDataIndex && !selectedFilterType) {
+        onSearch(getValue(_constants.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(_constants.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(_constants.SEARCH_FILTER_VALUE_FIELD);
+    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(_constants.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.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), {
+          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(_constants.SEARCH_FILTER_VALUE_FIELD, {
+          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(_constants.SEARCH_FILTER_VALUE_FIELD, {}), 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();
+                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(_constants.SEARCH_FILTER_VALUE_FIELD));
+    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(_constants.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: (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'),
+    ref: autoRef
+  }, /*#__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/PureTag.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CloseableProps } from '@alifd/next/lib/tag';
+import './index.less';
+export interface PureTagProps extends CloseableProps {
+    tagKey: string;
+    tagValue: string;
+    disableTruncate?: boolean;
+    closable?: boolean;
+    showDot?: boolean;
+    showLabel?: boolean | string;
+    intl?: any;
+}
+declare const PureTag: React.FC<PureTagProps>;
+export default PureTag;

package/lib/searchTagList/PureTag.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _consoleComponents = require("@alicloud/console-components");
+
+var _consoleComponentsTruncate = _interopRequireDefault(require("@alicloud/console-components-truncate"));
+
+var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
+
+var Empty = function Empty(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var defaultTruncateProps = {
+    threshold: 20,
+    showTooltip: false
+  };
+  var TruncateWrapper = disableTruncate ? Empty : _consoleComponentsTruncate.default;
+  var DotWrapper = showDot ? _consoleComponents.Badge : Empty;
+  var TagWrapper = closable ? _consoleComponents.Tag.Closeable : _consoleComponents.Tag;
+  var transformedTagValue = tagValue;
+
+  if (tagValue === '') {
+    transformedTagValue = '空值';
+  } else if (tagValue === undefined || tagValue === null) {
+    transformedTagValue = '全部值';
+  }
+
+  return (
+    /*#__PURE__*/
+    //@ts-ignore
+    _react.default.createElement(DotWrapper, {
+      title: "\u5373\u5C06\u65B0\u5EFA",
+      className: "console-tags-tag-dot",
+      dot: true
+    }, /*#__PURE__*/_react.default.createElement(TagWrapper, (0, _extends2.default)({
+      title: "".concat(tagKey, ":").concat(tagValue),
+      className: "console-tags-tag"
+    }, resetProps), showLabel && /*#__PURE__*/_react.default.createElement("label", {
+      className: "console-tags-tag-label"
+    }, "\u6807\u7B7E"), /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/_react.default.createElement("span", {
+      className: "console-tags-tag_empty"
+    }, transformedTagValue)))
+  );
+};
+
+var _default = PureTag;
+exports.default = _default;

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,38 +15,39 @@ 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");
 
+var _PureTag = _interopRequireDefault(require("./PureTag"));
+
 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,
+      onClear = props.onClear,
       _props$prefix = props.prefix,
       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) {
         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();
     }
   }
 
@@ -54,12 +55,25 @@ 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) {
+    var value = tagItem.value;
+    var isTag = !!value.tagKey;
+
+    if (isTag) {
+      return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
+        showLabel: true,
+        tagKey: value.tagKey,
+        tagValue: value.tagKey,
+        closable: true,
+        onClose: function onClose() {
+          onRemoveTag(tagItem);
+          return true;
+        }
+      });
+    }
+
     return /*#__PURE__*/_react.default.createElement(ClosableTag, {
+      className: "console-tags-tag",
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
       size: "medium",
@@ -67,8 +81,10 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueShow);
-  }), tagList && tagList.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
+    }, /*#__PURE__*/_react.default.createElement("label", {
+      className: "console-tags-tag-label"
+    }, tagItem.label), tagItem.value || tagItem.valueLabel);
+  }), dataSource && dataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
     className: "remove-btn",
     onClick: onRemoveAllTag
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));