@alicloud/console-components-search 0.2.1 → 0.2.2

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

@@ -19,6 +19,8 @@ var _style = require("../style");
 
 var _constants = require("../constants");
 
+var _PureTag = _interopRequireDefault(require("./PureTag"));
+
 var TagGroup = _consoleComponents.Tag.Group,
     ClosableTag = _consoleComponents.Tag.Closeable;
 
@@ -27,6 +29,7 @@ var SearchTagList = function SearchTagList(props) {
       className = props.className,
       style = props.style,
       onChange = props.onChange,
+      onClear = props.onClear,
       _props$prefix = props.prefix,
       prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
 
@@ -37,14 +40,14 @@ var SearchTagList = function SearchTagList(props) {
       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();
     }
   }
 
@@ -53,7 +56,24 @@ var SearchTagList = function SearchTagList(props) {
     className: (0, _classnames.default)(_constants.baseTagListClassName, className),
     style: style
   }, /*#__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",
@@ -61,7 +81,9 @@ var SearchTagList = function SearchTagList(props) {
         onRemoveTag(tagItem);
         return true;
       }
-    }, tagItem.label, ":", tagItem.valueLabel);
+    }, /*#__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

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

@@ -11,7 +11,7 @@ export interface IRcSearchTagItemProps {
     /**
      * 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.2",
   "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"
   }
 }