@alicloud/console-components-search 0.2.40-beta.0 → 0.2.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/LICENSE +21 -0
  3. package/demos/demo1.demo.tsx +35 -0
  4. package/dist/index.js +106593 -100505
  5. package/es/searchTagList/PureTag.js +6 -3
  6. package/es/searchTagList/TagValue.js +33 -0
  7. package/es/searchTagList/index.js +38 -11
  8. package/es/style.js +1 -1
  9. package/lib/searchTagList/PureTag.js +6 -3
  10. package/lib/searchTagList/TagValue.d.ts +6 -0
  11. package/lib/searchTagList/TagValue.js +40 -0
  12. package/lib/searchTagList/index.js +38 -11
  13. package/lib/style.js +1 -1
  14. package/lib/types/IRcSearchProps.type.d.ts +5 -0
  15. package/lib/types/IRcSearchTagListProps.type.d.ts +5 -0
  16. package/package.json +14 -15
package/es/searchTagList/PureTag.js CHANGED
@@ -5,6 +5,7 @@ import React from 'react';
5
5
  import { Tag, Badge } from '@alicloud/console-components';
6
6
  import Truncate from '@alicloud/console-components-truncate';
7
7
  import message from '../message';
8
+ import TagValue from './TagValue';
8
9
  var Empty = function Empty(_ref) {
9
10
  var children = _ref.children;
10
11
  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
@@ -39,13 +40,15 @@ var PureTag = function PureTag(props) {
39
40
  className: "search-tags-tag-dot",
40
41
  dot: true
41
42
  }, /*#__PURE__*/React.createElement(TagWrapper, _extends({
42
- title: "".concat(tagKey, ":").concat(tagValue),
43
+ title: String(transformedTagValue),
43
44
  className: "search-tags-tag"
44
45
  }, resetProps), showLabel && /*#__PURE__*/React.createElement("label", {
45
46
  className: "search-tags-tag-label"
46
- }, message.tag), /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/React.createElement("span", {
47
+ }, message.tag), /*#__PURE__*/React.createElement("span", {
48
+ className: "search-tags-tag-label-text"
49
+ }, tagKey), ":", /*#__PURE__*/React.createElement(TagValue, null, tagValue ? /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/React.createElement("span", {
47
50
  className: "console-tags-tag_empty"
48
- }, transformedTagValue)))
51
+ }, transformedTagValue))))
49
52
  );
50
53
  };
51
54
  export default PureTag;
package/es/searchTagList/TagValue.js ADDED
@@ -0,0 +1,33 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
+ import React from 'react';
3
+ import classNames from 'classnames';
4
+ var TagValue = function TagValue(_ref) {
5
+ var children = _ref.children;
6
+ var ref = React.useRef(null);
7
+ var _React$useState = React.useState(false),
8
+ _React$useState2 = _slicedToArray(_React$useState, 2),
9
+ overflow = _React$useState2[0],
10
+ setOverflow = _React$useState2[1];
11
+ React.useLayoutEffect(function () {
12
+ var node = ref.current;
13
+ if (!node) return undefined;
14
+ var checkOverflow = function checkOverflow() {
15
+ setOverflow(node.scrollWidth > node.clientWidth);
16
+ };
17
+ checkOverflow();
18
+ var ResizeObserverImpl = window.ResizeObserver;
19
+ if (!ResizeObserverImpl) return undefined;
20
+ var observer = new ResizeObserverImpl(checkOverflow);
21
+ observer.observe(node);
22
+ return function () {
23
+ return observer.disconnect();
24
+ };
25
+ }, [children]);
26
+ return /*#__PURE__*/React.createElement("span", {
27
+ ref: ref,
28
+ className: classNames('search-tags-tag-value', {
29
+ 'search-tags-tag-value-overflow': overflow
30
+ })
31
+ }, children);
32
+ };
33
+ export default TagValue;
package/es/searchTagList/index.js CHANGED
@@ -10,6 +10,7 @@ import isObject from 'lodash/isObject';
10
10
  import { TagListWrap } from '../style';
11
11
  import { baseTagListClassName } from '../constants';
12
12
  import PureTag from './PureTag';
13
+ import TagValue from './TagValue';
13
14
  import { useWindTheme } from '../useCssVar';
14
15
  import message from '../message';
15
16
  var ClosableTag = Tag.Closeable;
@@ -24,13 +25,32 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
24
25
  }
25
26
  return isTag;
26
27
  };
27
- var getFilterTitle = function getFilterTitle(tagItem) {
28
- var label = tagItem.label || tagItem.dataIndex;
29
- var value = tagItem.valueLabel || tagItem.value;
30
- return label ? "".concat(label, ": ").concat(value) : String(value);
28
+ var getFilterValue = function getFilterValue(tagItem) {
29
+ return tagItem.valueLabel || tagItem.value;
31
30
  };
32
- var getTagTitle = function getTagTitle(tag) {
33
- return "".concat(tag === null || tag === void 0 ? void 0 : tag.tagKey, ": ").concat(tag === null || tag === void 0 ? void 0 : tag.tagValue);
31
+ var getTagValue = function getTagValue(tag) {
32
+ if ((tag === null || tag === void 0 ? void 0 : tag.tagValue) === '') {
33
+ return message.emptyValue;
34
+ }
35
+ if ((tag === null || tag === void 0 ? void 0 : tag.tagValue) === undefined || (tag === null || tag === void 0 ? void 0 : tag.tagValue) === null) {
36
+ return message.allValue;
37
+ }
38
+ return tag === null || tag === void 0 ? void 0 : tag.tagValue;
39
+ };
40
+ var getBalloonContent = function getBalloonContent(value) {
41
+ if (/*#__PURE__*/React.isValidElement(value)) {
42
+ return value;
43
+ }
44
+ if (isObject(value)) {
45
+ return String(value);
46
+ }
47
+ return value;
48
+ };
49
+ var getMaxWidth = function getMaxWidth(maxWidth) {
50
+ if (typeof maxWidth === 'number') {
51
+ return "".concat(maxWidth, "px");
52
+ }
53
+ return maxWidth;
34
54
  };
35
55
  var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
36
56
  return /*#__PURE__*/React.createElement(Balloon, {
@@ -52,6 +72,7 @@ var SearchTagList = function SearchTagList(props) {
52
72
  style = props.style,
53
73
  onChange = props.onChange,
54
74
  onClear = props.onClear,
75
+ tagValueMaxWidth = props.tagValueMaxWidth,
55
76
  _props$prefix = props.prefix,
56
77
  prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
57
78
  var onRemoveFilter = function onRemoveFilter(item) {
@@ -90,12 +111,13 @@ var SearchTagList = function SearchTagList(props) {
90
111
  if (isArray(value)) {
91
112
  return value.map(function (t) {
92
113
  var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
93
- return renderWithBalloon(getTagTitle(t), /*#__PURE__*/React.createElement("span", {
114
+ return renderWithBalloon(getBalloonContent(getTagValue(t)), /*#__PURE__*/React.createElement("span", {
94
115
  className: "search-tags-tag-wrap"
95
116
  }, /*#__PURE__*/React.createElement(PureTag, {
96
117
  showLabel: true,
97
118
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
98
119
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
120
+ disableTruncate: true,
99
121
  closable: true,
100
122
  onClose: function onClose() {
101
123
  onRemoveTag(tagItem, t);
@@ -104,12 +126,13 @@ var SearchTagList = function SearchTagList(props) {
104
126
  })), key);
105
127
  });
106
128
  }
107
- return renderWithBalloon(getTagTitle(value), /*#__PURE__*/React.createElement("span", {
129
+ return renderWithBalloon(getBalloonContent(getTagValue(value)), /*#__PURE__*/React.createElement("span", {
108
130
  className: "search-tags-tag-wrap"
109
131
  }, /*#__PURE__*/React.createElement(PureTag, {
110
132
  showLabel: true,
111
133
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
112
134
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
135
+ disableTruncate: true,
113
136
  closable: true,
114
137
  onClose: function onClose() {
115
138
  onRemoveFilter(tagItem);
@@ -129,10 +152,13 @@ var SearchTagList = function SearchTagList(props) {
129
152
  return true;
130
153
  })) || [];
131
154
  var isWindClass = useWindTheme();
155
+ var tagListStyle = tagValueMaxWidth === undefined ? style : _objectSpread(_objectSpread({}, style), {}, {
156
+ '--console-rc-search-tag-value-max-width': getMaxWidth(tagValueMaxWidth)
157
+ });
132
158
  return /*#__PURE__*/React.createElement(TagListWrap, {
133
159
  prefix: prefix,
134
160
  className: classNames(baseTagListClassName, className, isWindClass),
135
- style: style
161
+ style: tagListStyle
136
162
  }, /*#__PURE__*/React.createElement("div", {
137
163
  className: "search-tags-list"
138
164
  }, processDataSource.map(function (tagItem) {
@@ -140,7 +166,8 @@ var SearchTagList = function SearchTagList(props) {
140
166
  return renderTags(tagItem);
141
167
  }
142
168
  var key = tagItem.dataIndex + tagItem.value;
143
- return renderWithBalloon(getFilterTitle(tagItem), /*#__PURE__*/React.createElement("span", {
169
+ var value = getFilterValue(tagItem);
170
+ return renderWithBalloon(getBalloonContent(value), /*#__PURE__*/React.createElement("span", {
144
171
  className: "search-tags-tag-wrap"
145
172
  }, /*#__PURE__*/React.createElement(ClosableTag, {
146
173
  className: "search-tags-tag",
@@ -152,7 +179,7 @@ var SearchTagList = function SearchTagList(props) {
152
179
  }
153
180
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
154
181
  className: "search-tags-tag-label"
155
- }, tagItem.label), tagItem.valueLabel || tagItem.value))), key);
182
+ }, tagItem.label), /*#__PURE__*/React.createElement(TagValue, null, value)))), key);
156
183
  })), processDataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
157
184
  className: "remove-btn",
158
185
  onClick: onRemoveAllFilter
package/es/style.js CHANGED
@@ -13,5 +13,5 @@ var MultiBtnWarp = styled.div.withConfig({
13
13
  })(["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);
14
14
  var TagListWrap = styled.div.withConfig({
15
15
  componentId: "sc-1afc1cn-3"
16
- })(["--console-rc-search-tag-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;max-width:min(100%,var(--console-rc-search-tag-max-width));min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;max-width:min(100%,var(--console-rc-search-tag-max-width));}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;vertical-align:middle;max-width:calc(100% - var(--console-rc-search-tag-close-spacing) - var(--console-rc-search-tag-close-icon-width) - var(--console-rc-search-tag-close-padding-right));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
16
+ })(["--console-rc-search-tag-value-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;width:max-content;max-width:100%;min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{width:max-content;max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;width:max-content;max-width:100%;}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;width:auto;min-width:0;max-width:none;vertical-align:middle;}.search-tags-tag-label,.search-tags-tag-label-text{display:inline-block;line-height:inherit;vertical-align:top;}.search-tags-tag-value{display:inline-block;line-height:inherit;max-width:min(100%,var(--console-rc-search-tag-value-max-width));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;}.search-tags-tag-value-overflow{width:var(--console-rc-search-tag-value-max-width);}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
17
17
  export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };
package/lib/searchTagList/PureTag.js CHANGED
@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
11
11
  var _consoleComponents = require("@alicloud/console-components");
12
12
  var _consoleComponentsTruncate = _interopRequireDefault(require("@alicloud/console-components-truncate"));
13
13
  var _message = _interopRequireDefault(require("../message"));
14
+ var _TagValue = _interopRequireDefault(require("./TagValue"));
14
15
  var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
15
16
  var Empty = function Empty(_ref) {
16
17
  var children = _ref.children;
@@ -46,13 +47,15 @@ var PureTag = function PureTag(props) {
46
47
  className: "search-tags-tag-dot",
47
48
  dot: true
48
49
  }, /*#__PURE__*/_react.default.createElement(TagWrapper, (0, _extends2.default)({
49
- title: "".concat(tagKey, ":").concat(tagValue),
50
+ title: String(transformedTagValue),
50
51
  className: "search-tags-tag"
51
52
  }, resetProps), showLabel && /*#__PURE__*/_react.default.createElement("label", {
52
53
  className: "search-tags-tag-label"
53
- }, _message.default.tag), /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/_react.default.createElement("span", {
54
+ }, _message.default.tag), /*#__PURE__*/_react.default.createElement("span", {
55
+ className: "search-tags-tag-label-text"
56
+ }, tagKey), ":", /*#__PURE__*/_react.default.createElement(_TagValue.default, null, tagValue ? /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/_react.default.createElement("span", {
54
57
  className: "console-tags-tag_empty"
55
- }, transformedTagValue)))
58
+ }, transformedTagValue))))
56
59
  );
57
60
  };
58
61
  var _default = exports.default = PureTag;
package/lib/searchTagList/TagValue.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ interface TagValueProps {
3
+ children: React.ReactNode;
4
+ }
5
+ declare const TagValue: React.FC<TagValueProps>;
6
+ export default TagValue;
package/lib/searchTagList/TagValue.js ADDED
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = void 0;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ var _classnames = _interopRequireDefault(require("classnames"));
11
+ var TagValue = function TagValue(_ref) {
12
+ var children = _ref.children;
13
+ var ref = _react.default.useRef(null);
14
+ var _React$useState = _react.default.useState(false),
15
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
16
+ overflow = _React$useState2[0],
17
+ setOverflow = _React$useState2[1];
18
+ _react.default.useLayoutEffect(function () {
19
+ var node = ref.current;
20
+ if (!node) return undefined;
21
+ var checkOverflow = function checkOverflow() {
22
+ setOverflow(node.scrollWidth > node.clientWidth);
23
+ };
24
+ checkOverflow();
25
+ var ResizeObserverImpl = window.ResizeObserver;
26
+ if (!ResizeObserverImpl) return undefined;
27
+ var observer = new ResizeObserverImpl(checkOverflow);
28
+ observer.observe(node);
29
+ return function () {
30
+ return observer.disconnect();
31
+ };
32
+ }, [children]);
33
+ return /*#__PURE__*/_react.default.createElement("span", {
34
+ ref: ref,
35
+ className: (0, _classnames.default)('search-tags-tag-value', {
36
+ 'search-tags-tag-value-overflow': overflow
37
+ })
38
+ }, children);
39
+ };
40
+ var _default = exports.default = TagValue;
package/lib/searchTagList/index.js CHANGED
@@ -15,6 +15,7 @@ var _isObject = _interopRequireDefault(require("lodash/isObject"));
15
15
  var _style = require("../style");
16
16
  var _constants = require("../constants");
17
17
  var _PureTag = _interopRequireDefault(require("./PureTag"));
18
+ var _TagValue = _interopRequireDefault(require("./TagValue"));
18
19
  var _useCssVar = require("../useCssVar");
19
20
  var _message = _interopRequireDefault(require("../message"));
20
21
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -31,13 +32,32 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
31
32
  }
32
33
  return isTag;
33
34
  };
34
- var getFilterTitle = function getFilterTitle(tagItem) {
35
- var label = tagItem.label || tagItem.dataIndex;
36
- var value = tagItem.valueLabel || tagItem.value;
37
- return label ? "".concat(label, ": ").concat(value) : String(value);
35
+ var getFilterValue = function getFilterValue(tagItem) {
36
+ return tagItem.valueLabel || tagItem.value;
38
37
  };
39
- var getTagTitle = function getTagTitle(tag) {
40
- return "".concat(tag === null || tag === void 0 ? void 0 : tag.tagKey, ": ").concat(tag === null || tag === void 0 ? void 0 : tag.tagValue);
38
+ var getTagValue = function getTagValue(tag) {
39
+ if ((tag === null || tag === void 0 ? void 0 : tag.tagValue) === '') {
40
+ return _message.default.emptyValue;
41
+ }
42
+ if ((tag === null || tag === void 0 ? void 0 : tag.tagValue) === undefined || (tag === null || tag === void 0 ? void 0 : tag.tagValue) === null) {
43
+ return _message.default.allValue;
44
+ }
45
+ return tag === null || tag === void 0 ? void 0 : tag.tagValue;
46
+ };
47
+ var getBalloonContent = function getBalloonContent(value) {
48
+ if (/*#__PURE__*/_react.default.isValidElement(value)) {
49
+ return value;
50
+ }
51
+ if ((0, _isObject.default)(value)) {
52
+ return String(value);
53
+ }
54
+ return value;
55
+ };
56
+ var getMaxWidth = function getMaxWidth(maxWidth) {
57
+ if (typeof maxWidth === 'number') {
58
+ return "".concat(maxWidth, "px");
59
+ }
60
+ return maxWidth;
41
61
  };
42
62
  var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
43
63
  return /*#__PURE__*/_react.default.createElement(_consoleComponents.Balloon, {
@@ -59,6 +79,7 @@ var SearchTagList = function SearchTagList(props) {
59
79
  style = props.style,
60
80
  onChange = props.onChange,
61
81
  onClear = props.onClear,
82
+ tagValueMaxWidth = props.tagValueMaxWidth,
62
83
  _props$prefix = props.prefix,
63
84
  prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
64
85
  var onRemoveFilter = function onRemoveFilter(item) {
@@ -97,12 +118,13 @@ var SearchTagList = function SearchTagList(props) {
97
118
  if ((0, _isArray.default)(value)) {
98
119
  return value.map(function (t) {
99
120
  var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
100
- return renderWithBalloon(getTagTitle(t), /*#__PURE__*/_react.default.createElement("span", {
121
+ return renderWithBalloon(getBalloonContent(getTagValue(t)), /*#__PURE__*/_react.default.createElement("span", {
101
122
  className: "search-tags-tag-wrap"
102
123
  }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
103
124
  showLabel: true,
104
125
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
105
126
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
127
+ disableTruncate: true,
106
128
  closable: true,
107
129
  onClose: function onClose() {
108
130
  onRemoveTag(tagItem, t);
@@ -111,12 +133,13 @@ var SearchTagList = function SearchTagList(props) {
111
133
  })), key);
112
134
  });
113
135
  }
114
- return renderWithBalloon(getTagTitle(value), /*#__PURE__*/_react.default.createElement("span", {
136
+ return renderWithBalloon(getBalloonContent(getTagValue(value)), /*#__PURE__*/_react.default.createElement("span", {
115
137
  className: "search-tags-tag-wrap"
116
138
  }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
117
139
  showLabel: true,
118
140
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
119
141
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
142
+ disableTruncate: true,
120
143
  closable: true,
121
144
  onClose: function onClose() {
122
145
  onRemoveFilter(tagItem);
@@ -136,10 +159,13 @@ var SearchTagList = function SearchTagList(props) {
136
159
  return true;
137
160
  })) || [];
138
161
  var isWindClass = (0, _useCssVar.useWindTheme)();
162
+ var tagListStyle = tagValueMaxWidth === undefined ? style : _objectSpread(_objectSpread({}, style), {}, {
163
+ '--console-rc-search-tag-value-max-width': getMaxWidth(tagValueMaxWidth)
164
+ });
139
165
  return /*#__PURE__*/_react.default.createElement(_style.TagListWrap, {
140
166
  prefix: prefix,
141
167
  className: (0, _classnames.default)(_constants.baseTagListClassName, className, isWindClass),
142
- style: style
168
+ style: tagListStyle
143
169
  }, /*#__PURE__*/_react.default.createElement("div", {
144
170
  className: "search-tags-list"
145
171
  }, processDataSource.map(function (tagItem) {
@@ -147,7 +173,8 @@ var SearchTagList = function SearchTagList(props) {
147
173
  return renderTags(tagItem);
148
174
  }
149
175
  var key = tagItem.dataIndex + tagItem.value;
150
- return renderWithBalloon(getFilterTitle(tagItem), /*#__PURE__*/_react.default.createElement("span", {
176
+ var value = getFilterValue(tagItem);
177
+ return renderWithBalloon(getBalloonContent(value), /*#__PURE__*/_react.default.createElement("span", {
151
178
  className: "search-tags-tag-wrap"
152
179
  }, /*#__PURE__*/_react.default.createElement(ClosableTag, {
153
180
  className: "search-tags-tag",
@@ -159,7 +186,7 @@ var SearchTagList = function SearchTagList(props) {
159
186
  }
160
187
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
161
188
  className: "search-tags-tag-label"
162
- }, tagItem.label), tagItem.valueLabel || tagItem.value))), key);
189
+ }, tagItem.label), /*#__PURE__*/_react.default.createElement(_TagValue.default, null, value)))), key);
163
190
  })), processDataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
164
191
  className: "remove-btn",
165
192
  onClick: onRemoveAllFilter
package/lib/style.js CHANGED
@@ -20,4 +20,4 @@ var MultiBtnWarp = exports.MultiBtnWarp = _styledComponents.default.div.withConf
20
20
  })(["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);
21
21
  var TagListWrap = exports.TagListWrap = _styledComponents.default.div.withConfig({
22
22
  componentId: "sc-1afc1cn-3"
23
- })(["--console-rc-search-tag-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;max-width:min(100%,var(--console-rc-search-tag-max-width));min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;max-width:min(100%,var(--console-rc-search-tag-max-width));}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;vertical-align:middle;max-width:calc(100% - var(--console-rc-search-tag-close-spacing) - var(--console-rc-search-tag-close-icon-width) - var(--console-rc-search-tag-close-padding-right));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
23
+ })(["--console-rc-search-tag-value-max-width:320px;--console-rc-search-tag-close-spacing:8px;--console-rc-search-tag-close-icon-width:12px;--console-rc-search-tag-close-padding-right:var(--tag-size-m-padding-lr,12px);display:flex;align-items:flex-start;min-width:0;.search-tags-list{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:flex-start;min-width:0;}.search-tags-tag-wrap{display:inline-flex;width:max-content;max-width:100%;min-width:0;}.search-tags-tag-wrap > .search-tags-tag,.search-tags-tag-wrap > .search-tags-tag-dot{width:max-content;max-width:100%;min-width:0;}", "tag-medium", "tag-closable{box-sizing:border-box;width:max-content;max-width:100%;}", "tag-medium", "tag-closable > ", "tag-close-btn{margin-left:var(--console-rc-search-tag-close-spacing);padding-right:var(--console-rc-search-tag-close-padding-right);}", "tag-medium", "tag-closable > ", "tag-body{display:inline-block;width:auto;min-width:0;max-width:none;vertical-align:middle;}.search-tags-tag-label,.search-tags-tag-label-text{display:inline-block;line-height:inherit;vertical-align:top;}.search-tags-tag-value{display:inline-block;line-height:inherit;max-width:min(100%,var(--console-rc-search-tag-value-max-width));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top;}.search-tags-tag-value-overflow{width:var(--console-rc-search-tag-value-max-width);}", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{flex:0 0 auto;line-height:24px;margin-left:8px;margin-top:4px;display:inline-block;vertical-align:middle;white-space:nowrap;cursor:pointer;}"], prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
package/lib/types/IRcSearchProps.type.d.ts CHANGED
@@ -19,6 +19,11 @@ export interface IRcSearchProps {
19
19
  * 样式
20
20
  */
21
21
  style?: any;
22
+ /**
23
+ * 筛选标签值的最大宽度，数字默认按 px 处理
24
+ * @default 320
25
+ */
26
+ tagValueMaxWidth?: number | string;
22
27
  /**
23
28
  * 对应不同场景值的类型数组，后面要详细展开列一下
24
29
  * @default []
package/lib/types/IRcSearchTagListProps.type.d.ts CHANGED
@@ -13,6 +13,11 @@ export interface IRcSearchTagListProps {
13
13
  * 样式
14
14
  */
15
15
  style?: any;
16
+ /**
17
+ * 筛选标签值的最大宽度，数字默认按 px 处理
18
+ * @default 320
19
+ */
20
+ tagValueMaxWidth?: number | string;
16
21
  /**
17
22
  * 筛选项
18
23
  */
package/package.json CHANGED
@@ -1,22 +1,9 @@
1
1
  {
2
2
  "name": "@alicloud/console-components-search",
3
- "version": "0.2.40-beta.0",
3
+ "version": "0.2.40",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "license": "MIT",
7
- "scripts": {
8
- "dev": "breezr start --config config/breezr.docs.config.ts",
9
- "doc:build": "rm -rf doc-dist && breezr build --config config/breezr.docs.config.ts",
10
- "doc:serve": "echo \"访问 https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-fe-test-rc-search-doc&servePath=http://localhost:5556/doc-dist/ ，预览本地打包好的文档资源！\n\n您还可以将文档资源部署到自己的cdn，然后将上述url中的servePath修改为自己的cdn地址，得到你自己的文档预览链接。\" && serve -l 5556 --cors",
11
- "upload": "breezr upload --config config/breezr.docs.config.ts",
12
- "upload:pre": "npm run upload -- --tag=pre",
13
- "babel": "breezr build --engine babel",
14
- "babel:esm": "breezr build --engine babel --es-module",
15
- "types": "tsc -p src --emitDeclarationOnly",
16
- "build": "breezr build --engine webpack",
17
- "clean": "rm -rf dist lib es doc-dist",
18
- "prepublishOnly": "npm run clean && npm run babel && npm run babel:esm && npm run types && npm run build"
19
- },
20
7
  "devDependencies": {
21
8
  "@alicloud/console-toolkit-cli": "^1.2.0",
22
9
  "@alicloud/console-toolkit-preset-component": "^1.2.8",
@@ -47,5 +34,17 @@
47
34
  "@babel/runtime": "^7.27.6",
48
35
  "classnames": "^2.5.1",
49
36
  "js-cookie": "^2.0.0"
37
+ },
38
+ "scripts": {
39
+ "dev": "breezr start --config config/breezr.docs.config.ts",
40
+ "doc:build": "rm -rf doc-dist && breezr build --config config/breezr.docs.config.ts",
41
+ "doc:serve": "echo \"访问 https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-fe-test-rc-search-doc&servePath=http://localhost:5556/doc-dist/ ，预览本地打包好的文档资源！\n\n您还可以将文档资源部署到自己的cdn，然后将上述url中的servePath修改为自己的cdn地址，得到你自己的文档预览链接。\" && serve -l 5556 --cors",
42
+ "upload": "breezr upload --config config/breezr.docs.config.ts",
43
+ "upload:pre": "npm run upload -- --tag=pre",
44
+ "babel": "breezr build --engine babel",
45
+ "babel:esm": "breezr build --engine babel --es-module",
46
+ "types": "tsc -p src --emitDeclarationOnly",
47
+ "build": "breezr build --engine webpack",
48
+ "clean": "rm -rf dist lib es doc-dist"
50
49
  }
51
- }
50
+ }