@alicloud/console-components-search 0.2.1 → 0.2.4

package/lib/modeSingleSingle/index2.js

@@ -33,6 +33,8 @@ 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; }
@@ -94,12 +96,9 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   }
 
   if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
-    var _opt$templateProps2, _opt$templateProps3;
+    var _opt$templateProps2;
 
-    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) {
+    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;
@@ -114,6 +113,18 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
   };
 };
 
+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,
@@ -142,8 +153,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
   var init = field.init,
       getValue = field.getValue,
-      reset = field.reset,
-      getError = field.getError;
+      reset = field.reset;
   var focusProps = {
     onFocus: function onFocus() {
       setFocused(true);
@@ -153,14 +163,25 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }; //计算视图，根据内部状态和输入的 props 决定一些值
 
-  var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
+  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) {
@@ -174,7 +195,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
 
   var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
-    var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索，则直接处理
+    var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD); // 如果是模糊搜索，则直接处理
 
     if (isFuzzySearch) {
       if (actionType !== 'change') {
@@ -197,10 +218,10 @@ var ComplexSearch = function ComplexSearch(props) {
 
   var handleSearch = function handleSearch() {
     if (onSearch) {
-      var value = getValue('searchValue');
+      var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
 
       if (defaultDataIndex && !selectedFilterType) {
-        onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
+        onSearch(getValue(_constants.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(_constants.SEARCH_FILTER_FIELD), options));
       }
 
       if (selectedFilterType) {
@@ -209,6 +230,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
 
     reset();
+    document.body.click();
     setFocused(false);
   };
 
@@ -220,7 +242,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
     var checked = (0, _isArray.default)(searchValue) && searchValue.some(function (v) {
       return v === item.value;
     });
@@ -233,7 +255,7 @@ var ComplexSearch = function ComplexSearch(props) {
     var _selectedFilterType$t, _selectedFilterType$t2;
 
     var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
-    var searchValue = getValue('searchValue');
+    var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
 
     var props = _objectSpread({
       hasBorder: false,
@@ -253,7 +275,7 @@ var ComplexSearch = function ComplexSearch(props) {
 
     switch (type) {
       case 'input':
-        return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('searchValue', {}), {
+        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
@@ -262,7 +284,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'select':
         return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
           className: (0, _classnames.default)('main-input', 'select')
-        }, init('searchValue', {
+        }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {
           props: {
             onChange: handleSearch
           }
@@ -271,7 +293,7 @@ var ComplexSearch = function ComplexSearch(props) {
       case 'multiple':
         return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
           className: (0, _classnames.default)('main-input', 'multi')
-        }, init('searchValue', {}), props, selectProps, {
+        }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
           itemRender: renderMultipleSelectorItem,
           popupClassName: "xconsole-rcsearch-multi-pop",
           mode: "multiple",
@@ -293,6 +315,7 @@ var ComplexSearch = function ComplexSearch(props) {
               type: "normal",
               onClick: function onClick() {
                 reset();
+                document.body.click();
               }
             }, "\u53D6\u6D88"))
           }
@@ -304,7 +327,7 @@ var ComplexSearch = function ComplexSearch(props) {
   };
 
   var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
-    var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
+    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", {
@@ -338,7 +361,7 @@ var ComplexSearch = function ComplexSearch(props) {
     }
   }) : null), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('forms')
-  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('filterInputValue', {
+  }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
     props: {
       // @ts-ignore
       onChange: function onChange(value, actionType) {
@@ -346,7 +369,8 @@ var ComplexSearch = function ComplexSearch(props) {
       }
     }
   }), {
-    ref: autoRef,
+    // @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,
@@ -358,7 +382,8 @@ var ComplexSearch = function ComplexSearch(props) {
       width: 'auto'
     }
   }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('right-wrap')
+    className: (0, _classnames.default)('right-wrap'),
+    ref: autoRef
   }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
     className: (0, _classnames.default)('search-btn', {
       'focus': focused

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.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -19,52 +21,126 @@ var _style = require("../style");
 
 var _constants = require("../constants");
 
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _PureTag = _interopRequireDefault(require("./PureTag"));
+
+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 TagGroup = _consoleComponents.Tag.Group,
     ClosableTag = _consoleComponents.Tag.Closeable;
+/**
+ * 判断是否是 标签 的数据结构
+ */
+
+var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
+  var isTag = !!value.tagKey;
+
+  if ((0, _isArray.default)(value)) {
+    return value[0] && !!value[0].tagKey;
+  }
+
+  return isTag;
+};
 
 var SearchTagList = function SearchTagList(props) {
   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 onRemoveFilter = function onRemoveFilter(item) {
     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);
     }
-  }
+  };
+
+  var onRemoveAllFilter = function onRemoveAllFilter() {
+    if (onClear) {
+      onClear();
+    }
+  };
+
+  var onRemoveTag = function onRemoveTag(item, tag) {
+    var newDataSource = (0, _toConsumableArray2.default)(dataSource);
 
-  function onRemoveAllTag() {
     if (onChange) {
-      onChange([]);
+      var resFindIndex = item.value.findIndex(function (x) {
+        return x.tagKey === tag.tagKey && x.tagValue === tag.tagValue;
+      });
+      var deletedTags = item.value.splice(resFindIndex, 1);
+      onChange(_objectSpread(_objectSpread({}, item), {}, {
+        value: deletedTags
+      }), newDataSource);
+    }
+  };
+
+  var renderTags = function renderTags(tagItem) {
+    var value = tagItem.value;
+
+    if ((0, _isArray.default)(value)) {
+      return value.map(function (t) {
+        return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
+          showLabel: true,
+          key: "".concat(t.tagKey, "-").concat(t.tagValue),
+          tagKey: t.tagKey,
+          tagValue: t.tagValue,
+          closable: true,
+          onClose: function onClose() {
+            onRemoveTag(tagItem, t);
+            return true;
+          }
+        });
+      });
     }
-  }
+
+    return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
+      showLabel: true,
+      tagKey: value.tagKey,
+      tagValue: value.tagValue,
+      closable: true,
+      onClose: function onClose() {
+        onRemoveFilter(tagItem);
+        return true;
+      }
+    });
+  };
 
   return /*#__PURE__*/_react.default.createElement(_style.TagListWrap, {
     prefix: prefix,
     className: (0, _classnames.default)(_constants.baseTagListClassName, className),
     style: style
   }, /*#__PURE__*/_react.default.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
+    if (isTagLikeDataStructure(tagItem.value)) {
+      return renderTags(tagItem);
+    }
+
     return /*#__PURE__*/_react.default.createElement(ClosableTag, {
+      className: "console-tags-tag",
       key: tagItem.dataIndex + tagItem.value,
       type: "normal",
       size: "medium",
       onClose: function onClose() {
-        onRemoveTag(tagItem);
+        onRemoveFilter(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueLabel);
+    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
+      className: "console-tags-tag-label"
+    }, tagItem.label), tagItem.valueLabel || tagItem.value));
   }), dataSource && dataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
     className: "remove-btn",
-    onClick: onRemoveAllTag
+    onClick: onRemoveAllFilter
   }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));
 };
 

package/lib/style.js

@@ -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;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);
 
 exports.TagListWrap = TagListWrap;

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

@@ -7,11 +7,11 @@ export interface IRcSearchTagItemProps {
     /**
      * tag的类别展示名称
      */
-    label: string;
+    label?: string;
     /**
      * tag的类别的key
      */
-    dataIndex: string;
+    dataIndex?: string;
     /**
      * tag的类别的值
      */
@@ -19,5 +19,5 @@ export interface IRcSearchTagItemProps {
     /**
      * tag的类别的展示值
      */
-    valueLabel: string;
+    valueLabel?: string;
 }

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

@@ -26,7 +26,11 @@ export interface IRcSearchTagListProps {
      */
     resourceType?: string;
     /**
-     * 当删减tag时， 返回新的taglist， 可直接赋值给rc-search组件
+     * 当删减 tag 时， 返回新的筛选项
      */
-    onChange?: (newTags: any) => void;
+    onChange?: (deletedFilter: IRcSearchTagItemProps, remainFilters: IRcSearchTagItemProps[]) => void;
+    /**
+     * 清除山选项
+     */
+    onClear?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alicloud/console-components-search",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "license": "MIT",
@@ -35,6 +35,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@alicloud/console-components-truncate": "^1.0.16",
     "@alicloud/console-logger-sls": "^1.2.31"
   }
 }