@alicloud/console-components-search 0.2.39 → 0.2.40-beta.1

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 +12 -0
  2. package/demos/demo1.demo.tsx +36 -1
  3. package/dist/index.js +90843 -96578
  4. package/es/searchTagList/PureTag.js +6 -3
  5. package/es/searchTagList/TagValue.js +33 -0
  6. package/es/searchTagList/index.js +68 -11
  7. package/es/style.js +1 -1
  8. package/lib/searchTagList/PureTag.js +6 -3
  9. package/lib/searchTagList/TagValue.d.ts +6 -0
  10. package/lib/searchTagList/TagValue.js +40 -0
  11. package/lib/searchTagList/index.js +67 -10
  12. package/lib/style.js +1 -1
  13. package/lib/types/IRcSearchProps.type.d.ts +5 -0
  14. package/lib/types/IRcSearchTagListProps.type.d.ts +5 -0
  15. package/package.json +15 -14
  16. package/LICENSE +0 -21
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
@@ -4,12 +4,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  import React from 'react';
6
6
  import classNames from 'classnames';
7
- import { ConfigProvider, Tag } from '@alicloud/console-components';
7
+ import { Balloon, ConfigProvider, Tag } from '@alicloud/console-components';
8
8
  import isArray from 'lodash/isArray';
9
9
  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,12 +25,54 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
24
25
  }
25
26
  return isTag;
26
27
  };
28
+ var getFilterValue = function getFilterValue(tagItem) {
29
+ return tagItem.valueLabel || tagItem.value;
30
+ };
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;
54
+ };
55
+ var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
56
+ return /*#__PURE__*/React.createElement(Balloon, {
57
+ key: key,
58
+ trigger: trigger,
59
+ align: "t",
60
+ alignEdge: true,
61
+ needAdjust: true,
62
+ closable: false,
63
+ popupStyle: {
64
+ maxWidth: 480,
65
+ wordBreak: 'break-all'
66
+ }
67
+ }, content);
68
+ };
27
69
  var SearchTagList = function SearchTagList(props) {
28
70
  var dataSource = props.dataSource,
29
71
  className = props.className,
30
72
  style = props.style,
31
73
  onChange = props.onChange,
32
74
  onClear = props.onClear,
75
+ tagValueMaxWidth = props.tagValueMaxWidth,
33
76
  _props$prefix = props.prefix,
34
77
  prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
35
78
  var onRemoveFilter = function onRemoveFilter(item) {
@@ -67,29 +110,35 @@ var SearchTagList = function SearchTagList(props) {
67
110
  var value = tagItem.value;
68
111
  if (isArray(value)) {
69
112
  return value.map(function (t) {
70
- return /*#__PURE__*/React.createElement(PureTag, {
113
+ var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
114
+ return renderWithBalloon(getBalloonContent(getTagValue(t)), /*#__PURE__*/React.createElement("span", {
115
+ className: "search-tags-tag-wrap"
116
+ }, /*#__PURE__*/React.createElement(PureTag, {
71
117
  showLabel: true,
72
- key: "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue),
73
118
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
74
119
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
120
+ disableTruncate: true,
75
121
  closable: true,
76
122
  onClose: function onClose() {
77
123
  onRemoveTag(tagItem, t);
78
124
  return true;
79
125
  }
80
- });
126
+ })), key);
81
127
  });
82
128
  }
83
- return /*#__PURE__*/React.createElement(PureTag, {
129
+ return renderWithBalloon(getBalloonContent(getTagValue(value)), /*#__PURE__*/React.createElement("span", {
130
+ className: "search-tags-tag-wrap"
131
+ }, /*#__PURE__*/React.createElement(PureTag, {
84
132
  showLabel: true,
85
133
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
86
134
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
135
+ disableTruncate: true,
87
136
  closable: true,
88
137
  onClose: function onClose() {
89
138
  onRemoveFilter(tagItem);
90
139
  return true;
91
140
  }
92
- });
141
+ })));
93
142
  };
94
143
  var processDataSource = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.filter(function (t) {
95
144
  if (isArray(t === null || t === void 0 ? void 0 : t.value)) {
@@ -103,17 +152,25 @@ var SearchTagList = function SearchTagList(props) {
103
152
  return true;
104
153
  })) || [];
105
154
  var isWindClass = useWindTheme();
155
+ var tagListStyle = tagValueMaxWidth === undefined ? style : _objectSpread(_objectSpread({}, style), {}, {
156
+ '--console-rc-search-tag-value-max-width': getMaxWidth(tagValueMaxWidth)
157
+ });
106
158
  return /*#__PURE__*/React.createElement(TagListWrap, {
107
159
  prefix: prefix,
108
160
  className: classNames(baseTagListClassName, className, isWindClass),
109
- style: style
161
+ style: tagListStyle
162
+ }, /*#__PURE__*/React.createElement("div", {
163
+ className: "search-tags-list"
110
164
  }, processDataSource.map(function (tagItem) {
111
165
  if (isTagLikeDataStructure(tagItem.value)) {
112
166
  return renderTags(tagItem);
113
167
  }
114
- return /*#__PURE__*/React.createElement(ClosableTag, {
168
+ var key = tagItem.dataIndex + tagItem.value;
169
+ var value = getFilterValue(tagItem);
170
+ return renderWithBalloon(getBalloonContent(value), /*#__PURE__*/React.createElement("span", {
171
+ className: "search-tags-tag-wrap"
172
+ }, /*#__PURE__*/React.createElement(ClosableTag, {
115
173
  className: "search-tags-tag",
116
- key: tagItem.dataIndex + tagItem.value,
117
174
  type: "normal",
118
175
  size: "medium",
119
176
  onClose: function onClose() {
@@ -122,8 +179,8 @@ var SearchTagList = function SearchTagList(props) {
122
179
  }
123
180
  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
124
181
  className: "search-tags-tag-label"
125
- }, tagItem.label), tagItem.valueLabel || tagItem.value));
126
- }), processDataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
182
+ }, tagItem.label), /*#__PURE__*/React.createElement(TagValue, null, value)))), key);
183
+ })), processDataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
127
184
  className: "remove-btn",
128
185
  onClick: onRemoveAllFilter
129
186
  }, message.clearFilter));
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
- })(["", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{line-height:24px;margin-top:4px;display:inline-block;vertical-align:middle;cursor:pointer;}"], 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,12 +32,54 @@ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
31
32
  }
32
33
  return isTag;
33
34
  };
35
+ var getFilterValue = function getFilterValue(tagItem) {
36
+ return tagItem.valueLabel || tagItem.value;
37
+ };
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;
61
+ };
62
+ var renderWithBalloon = function renderWithBalloon(content, trigger, key) {
63
+ return /*#__PURE__*/_react.default.createElement(_consoleComponents.Balloon, {
64
+ key: key,
65
+ trigger: trigger,
66
+ align: "t",
67
+ alignEdge: true,
68
+ needAdjust: true,
69
+ closable: false,
70
+ popupStyle: {
71
+ maxWidth: 480,
72
+ wordBreak: 'break-all'
73
+ }
74
+ }, content);
75
+ };
34
76
  var SearchTagList = function SearchTagList(props) {
35
77
  var dataSource = props.dataSource,
36
78
  className = props.className,
37
79
  style = props.style,
38
80
  onChange = props.onChange,
39
81
  onClear = props.onClear,
82
+ tagValueMaxWidth = props.tagValueMaxWidth,
40
83
  _props$prefix = props.prefix,
41
84
  prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
42
85
  var onRemoveFilter = function onRemoveFilter(item) {
@@ -74,29 +117,35 @@ var SearchTagList = function SearchTagList(props) {
74
117
  var value = tagItem.value;
75
118
  if ((0, _isArray.default)(value)) {
76
119
  return value.map(function (t) {
77
- return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
120
+ var key = "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue);
121
+ return renderWithBalloon(getBalloonContent(getTagValue(t)), /*#__PURE__*/_react.default.createElement("span", {
122
+ className: "search-tags-tag-wrap"
123
+ }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
78
124
  showLabel: true,
79
- key: "".concat(t === null || t === void 0 ? void 0 : t.tagKey, "-").concat(t === null || t === void 0 ? void 0 : t.tagValue),
80
125
  tagKey: t === null || t === void 0 ? void 0 : t.tagKey,
81
126
  tagValue: t === null || t === void 0 ? void 0 : t.tagValue,
127
+ disableTruncate: true,
82
128
  closable: true,
83
129
  onClose: function onClose() {
84
130
  onRemoveTag(tagItem, t);
85
131
  return true;
86
132
  }
87
- });
133
+ })), key);
88
134
  });
89
135
  }
90
- return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
136
+ return renderWithBalloon(getBalloonContent(getTagValue(value)), /*#__PURE__*/_react.default.createElement("span", {
137
+ className: "search-tags-tag-wrap"
138
+ }, /*#__PURE__*/_react.default.createElement(_PureTag.default, {
91
139
  showLabel: true,
92
140
  tagKey: value === null || value === void 0 ? void 0 : value.tagKey,
93
141
  tagValue: value === null || value === void 0 ? void 0 : value.tagValue,
142
+ disableTruncate: true,
94
143
  closable: true,
95
144
  onClose: function onClose() {
96
145
  onRemoveFilter(tagItem);
97
146
  return true;
98
147
  }
99
- });
148
+ })));
100
149
  };
101
150
  var processDataSource = (dataSource === null || dataSource === void 0 ? void 0 : dataSource.filter(function (t) {
102
151
  if ((0, _isArray.default)(t === null || t === void 0 ? void 0 : t.value)) {
@@ -110,17 +159,25 @@ var SearchTagList = function SearchTagList(props) {
110
159
  return true;
111
160
  })) || [];
112
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
+ });
113
165
  return /*#__PURE__*/_react.default.createElement(_style.TagListWrap, {
114
166
  prefix: prefix,
115
167
  className: (0, _classnames.default)(_constants.baseTagListClassName, className, isWindClass),
116
- style: style
168
+ style: tagListStyle
169
+ }, /*#__PURE__*/_react.default.createElement("div", {
170
+ className: "search-tags-list"
117
171
  }, processDataSource.map(function (tagItem) {
118
172
  if (isTagLikeDataStructure(tagItem.value)) {
119
173
  return renderTags(tagItem);
120
174
  }
121
- return /*#__PURE__*/_react.default.createElement(ClosableTag, {
175
+ var key = tagItem.dataIndex + tagItem.value;
176
+ var value = getFilterValue(tagItem);
177
+ return renderWithBalloon(getBalloonContent(value), /*#__PURE__*/_react.default.createElement("span", {
178
+ className: "search-tags-tag-wrap"
179
+ }, /*#__PURE__*/_react.default.createElement(ClosableTag, {
122
180
  className: "search-tags-tag",
123
- key: tagItem.dataIndex + tagItem.value,
124
181
  type: "normal",
125
182
  size: "medium",
126
183
  onClose: function onClose() {
@@ -129,8 +186,8 @@ var SearchTagList = function SearchTagList(props) {
129
186
  }
130
187
  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
131
188
  className: "search-tags-tag-label"
132
- }, tagItem.label), tagItem.valueLabel || tagItem.value));
133
- }), processDataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
189
+ }, tagItem.label), /*#__PURE__*/_react.default.createElement(_TagValue.default, null, value)))), key);
190
+ })), processDataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
134
191
  className: "remove-btn",
135
192
  onClick: onRemoveAllFilter
136
193
  }, _message.default.clearFilter));
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
- })(["", "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']::before{color:#808080;font-size:12px !important;}.remove-btn{line-height:24px;margin-top:4px;display:inline-block;vertical-align:middle;cursor:pointer;}"], 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,9 +1,22 @@
1
1
  {
2
2
  "name": "@alicloud/console-components-search",
3
- "version": "0.2.39",
3
+ "version": "0.2.40-beta.1",
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
+ },
7
20
  "devDependencies": {
8
21
  "@alicloud/console-toolkit-cli": "^1.2.0",
9
22
  "@alicloud/console-toolkit-preset-component": "^1.2.8",
@@ -34,17 +47,5 @@
34
47
  "@babel/runtime": "^7.27.6",
35
48
  "classnames": "^2.5.1",
36
49
  "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"
49
50
  }
50
- }
51
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2019 Alibaba Cloud
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.