@alicloud/console-components-search 0.2.0 → 0.2.3

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.
@@ -33,6 +33,8 @@ var _style = require("../style");
33
33
 
34
34
  var _InputPrefix = _interopRequireDefault(require("./InputPrefix"));
35
35
 
36
+ var _constants = require("../constants");
37
+
36
38
  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); }
37
39
 
38
40
  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
94
96
  }
95
97
 
96
98
  if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
97
- var _opt$templateProps2, _opt$templateProps3;
99
+ var _opt$templateProps2;
98
100
 
99
- console.log((_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
100
- return value.indexOf(d.value) !== -1;
101
- }));
102
- valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
101
+ valueLabel = (_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
103
102
  return value.indexOf(d.value) !== -1;
104
103
  }).map(function (d) {
105
104
  return d.label;
@@ -108,10 +107,24 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
108
107
 
109
108
  return {
110
109
  label: opt === null || opt === void 0 ? void 0 : opt.label,
111
- valueLabel: valueLabel
110
+ valueLabel: valueLabel,
111
+ value: value,
112
+ dataIndex: dataIndex
112
113
  };
113
114
  };
114
115
 
116
+ var highlightKeyword = function highlightKeyword(value, keywords) {
117
+ var idx = value.toLowerCase().indexOf(keywords.toLowerCase());
118
+ var startValue = value.slice(0, idx);
119
+ var highlightValue = value.slice(idx, idx + keywords.length);
120
+ var endValue = value.slice(idx + keywords.length);
121
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, startValue, /*#__PURE__*/_react.default.createElement("span", {
122
+ style: {
123
+ color: 'var(--color-brand1-6)'
124
+ }
125
+ }, highlightValue), endValue);
126
+ };
127
+
115
128
  var ComplexSearch = function ComplexSearch(props) {
116
129
  var options = props.options,
117
130
  fuzzy = props.fuzzy,
@@ -140,8 +153,7 @@ var ComplexSearch = function ComplexSearch(props) {
140
153
 
141
154
  var init = field.init,
142
155
  getValue = field.getValue,
143
- reset = field.reset,
144
- getError = field.getError;
156
+ reset = field.reset;
145
157
  var focusProps = {
146
158
  onFocus: function onFocus() {
147
159
  setFocused(true);
@@ -151,14 +163,25 @@ var ComplexSearch = function ComplexSearch(props) {
151
163
  }
152
164
  }; //计算视图,根据内部状态和输入的 props 决定一些值
153
165
 
154
- var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue('filterInputValue');
166
+ var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(_constants.SEARCH_FILTER_FIELD);
155
167
  var defaultFilter = options.find(function (t) {
156
168
  return t.dataIndex === defaultDataIndex;
157
169
  });
170
+
171
+ var highlightItem = function highlightItem(item, searchKey) {
172
+ var label = item.label;
173
+
174
+ if (searchKey && searchKey.length) {
175
+ label = highlightKeyword(item.label, searchKey);
176
+ }
177
+
178
+ return label;
179
+ };
158
180
  /**
159
181
  * 处理筛选类型选中的情况
160
182
  */
161
183
 
184
+
162
185
  var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
163
186
  var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
164
187
  setSelectedFilterType(options.find(function (o) {
@@ -172,7 +195,7 @@ var ComplexSearch = function ComplexSearch(props) {
172
195
 
173
196
 
174
197
  var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
175
- var isFuzzySearch = isFuzzy && getValue('filterInputValue'); // 如果是模糊搜索,则直接处理
198
+ var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD); // 如果是模糊搜索,则直接处理
176
199
 
177
200
  if (isFuzzySearch) {
178
201
  if (actionType !== 'change') {
@@ -195,10 +218,10 @@ var ComplexSearch = function ComplexSearch(props) {
195
218
 
196
219
  var handleSearch = function handleSearch() {
197
220
  if (onSearch) {
198
- var value = getValue('searchValue');
221
+ var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
199
222
 
200
223
  if (defaultDataIndex && !selectedFilterType) {
201
- onSearch(getValue('filterInputValue'), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue('filterInputValue'), options));
224
+ onSearch(getValue(_constants.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(_constants.SEARCH_FILTER_FIELD), options));
202
225
  }
203
226
 
204
227
  if (selectedFilterType) {
@@ -207,6 +230,7 @@ var ComplexSearch = function ComplexSearch(props) {
207
230
  }
208
231
 
209
232
  reset();
233
+ document.body.click();
210
234
  setFocused(false);
211
235
  };
212
236
 
@@ -218,7 +242,7 @@ var ComplexSearch = function ComplexSearch(props) {
218
242
  };
219
243
 
220
244
  var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
221
- var searchValue = getValue('searchValue');
245
+ var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
222
246
  var checked = (0, _isArray.default)(searchValue) && searchValue.some(function (v) {
223
247
  return v === item.value;
224
248
  });
@@ -231,7 +255,7 @@ var ComplexSearch = function ComplexSearch(props) {
231
255
  var _selectedFilterType$t, _selectedFilterType$t2;
232
256
 
233
257
  var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
234
- var searchValue = getValue('searchValue');
258
+ var searchValue = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
235
259
 
236
260
  var props = _objectSpread({
237
261
  hasBorder: false,
@@ -251,7 +275,7 @@ var ComplexSearch = function ComplexSearch(props) {
251
275
 
252
276
  switch (type) {
253
277
  case 'input':
254
- return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('searchValue', {}), {
278
+ return /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), {
255
279
  className: (0, _classnames.default)('main-input', 'multi')
256
280
  }, props, {
257
281
  onKeyUp: handleKeyUp
@@ -260,7 +284,7 @@ var ComplexSearch = function ComplexSearch(props) {
260
284
  case 'select':
261
285
  return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
262
286
  className: (0, _classnames.default)('main-input', 'select')
263
- }, init('searchValue', {
287
+ }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {
264
288
  props: {
265
289
  onChange: handleSearch
266
290
  }
@@ -269,7 +293,7 @@ var ComplexSearch = function ComplexSearch(props) {
269
293
  case 'multiple':
270
294
  return /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
271
295
  className: (0, _classnames.default)('main-input', 'multi')
272
- }, init('searchValue', {}), props, selectProps, {
296
+ }, init(_constants.SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
273
297
  itemRender: renderMultipleSelectorItem,
274
298
  popupClassName: "xconsole-rcsearch-multi-pop",
275
299
  mode: "multiple",
@@ -291,6 +315,7 @@ var ComplexSearch = function ComplexSearch(props) {
291
315
  type: "normal",
292
316
  onClick: function onClick() {
293
317
  reset();
318
+ document.body.click();
294
319
  }
295
320
  }, "\u53D6\u6D88"))
296
321
  }
@@ -302,7 +327,7 @@ var ComplexSearch = function ComplexSearch(props) {
302
327
  };
303
328
 
304
329
  var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
305
- var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue('searchValue'));
330
+ var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(_constants.SEARCH_FILTER_VALUE_FIELD));
306
331
  return hasFilterTypeClearBtn && /*#__PURE__*/_react.default.createElement("div", {
307
332
  className: "clear-level1"
308
333
  }, /*#__PURE__*/_react.default.createElement("span", {
@@ -336,7 +361,7 @@ var ComplexSearch = function ComplexSearch(props) {
336
361
  }
337
362
  }) : null), /*#__PURE__*/_react.default.createElement("div", {
338
363
  className: (0, _classnames.default)('forms')
339
- }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init('filterInputValue', {
364
+ }, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
340
365
  props: {
341
366
  // @ts-ignore
342
367
  onChange: function onChange(value, actionType) {
@@ -344,7 +369,8 @@ var ComplexSearch = function ComplexSearch(props) {
344
369
  }
345
370
  }
346
371
  }), {
347
- ref: autoRef,
372
+ // @ts-ignore
373
+ itemRender: highlightItem,
348
374
  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") : '请搜索',
349
375
  className: (0, _classnames.default)('main-input', 'multi'),
350
376
  hasBorder: false,
@@ -356,7 +382,8 @@ var ComplexSearch = function ComplexSearch(props) {
356
382
  width: 'auto'
357
383
  }
358
384
  }, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/_react.default.createElement("div", {
359
- className: (0, _classnames.default)('right-wrap')
385
+ className: (0, _classnames.default)('right-wrap'),
386
+ ref: autoRef
360
387
  }, /*#__PURE__*/_react.default.createElement(_consoleComponents.Button, {
361
388
  className: (0, _classnames.default)('search-btn', {
362
389
  'focus': focused
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { CloseableProps } from '@alifd/next/lib/tag';
3
+ import './index.less';
4
+ export interface PureTagProps extends CloseableProps {
5
+ tagKey: string;
6
+ tagValue: string;
7
+ disableTruncate?: boolean;
8
+ closable?: boolean;
9
+ showDot?: boolean;
10
+ showLabel?: boolean | string;
11
+ intl?: any;
12
+ }
13
+ declare const PureTag: React.FC<PureTagProps>;
14
+ export default PureTag;
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
12
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
13
+
14
+ var _react = _interopRequireDefault(require("react"));
15
+
16
+ var _consoleComponents = require("@alicloud/console-components");
17
+
18
+ var _consoleComponentsTruncate = _interopRequireDefault(require("@alicloud/console-components-truncate"));
19
+
20
+ var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
21
+
22
+ var Empty = function Empty(_ref) {
23
+ var children = _ref.children;
24
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
25
+ };
26
+
27
+ var PureTag = function PureTag(props) {
28
+ var intl = props.intl,
29
+ tagKey = props.tagKey,
30
+ disableTruncate = props.disableTruncate,
31
+ showDot = props.showDot,
32
+ tagValue = props.tagValue,
33
+ showLabel = props.showLabel,
34
+ _props$closable = props.closable,
35
+ closable = _props$closable === void 0 ? true : _props$closable,
36
+ resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
37
+ var defaultTruncateProps = {
38
+ threshold: 20,
39
+ showTooltip: false
40
+ };
41
+ var TruncateWrapper = disableTruncate ? Empty : _consoleComponentsTruncate.default;
42
+ var DotWrapper = showDot ? _consoleComponents.Badge : Empty;
43
+ var TagWrapper = closable ? _consoleComponents.Tag.Closeable : _consoleComponents.Tag;
44
+ var transformedTagValue = tagValue;
45
+
46
+ if (tagValue === '') {
47
+ transformedTagValue = '空值';
48
+ } else if (tagValue === undefined || tagValue === null) {
49
+ transformedTagValue = '全部值';
50
+ }
51
+
52
+ return (
53
+ /*#__PURE__*/
54
+ //@ts-ignore
55
+ _react.default.createElement(DotWrapper, {
56
+ title: "\u5373\u5C06\u65B0\u5EFA",
57
+ className: "console-tags-tag-dot",
58
+ dot: true
59
+ }, /*#__PURE__*/_react.default.createElement(TagWrapper, (0, _extends2.default)({
60
+ title: "".concat(tagKey, ":").concat(tagValue),
61
+ className: "console-tags-tag"
62
+ }, resetProps), showLabel && /*#__PURE__*/_react.default.createElement("label", {
63
+ className: "console-tags-tag-label"
64
+ }, "\u6807\u7B7E"), /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/_react.default.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/_react.default.createElement("span", {
65
+ className: "console-tags-tag_empty"
66
+ }, transformedTagValue)))
67
+ );
68
+ };
69
+
70
+ var _default = PureTag;
71
+ exports.default = _default;
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = void 0;
9
9
 
10
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+
10
12
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
13
 
12
14
  var _react = _interopRequireDefault(require("react"));
@@ -19,52 +21,126 @@ var _style = require("../style");
19
21
 
20
22
  var _constants = require("../constants");
21
23
 
24
+ var _isArray = _interopRequireDefault(require("lodash/isArray"));
25
+
26
+ var _PureTag = _interopRequireDefault(require("./PureTag"));
27
+
28
+ 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; }
29
+
30
+ 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; }
31
+
22
32
  var TagGroup = _consoleComponents.Tag.Group,
23
33
  ClosableTag = _consoleComponents.Tag.Closeable;
34
+ /**
35
+ * 判断是否是 标签 的数据结构
36
+ */
37
+
38
+ var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
39
+ var isTag = !!value.tagKey;
40
+
41
+ if ((0, _isArray.default)(value)) {
42
+ return value[0] && !!value[0].tagKey;
43
+ }
44
+
45
+ return isTag;
46
+ };
24
47
 
25
48
  var SearchTagList = function SearchTagList(props) {
26
49
  var dataSource = props.dataSource,
27
50
  className = props.className,
28
51
  style = props.style,
29
52
  onChange = props.onChange,
53
+ onClear = props.onClear,
30
54
  _props$prefix = props.prefix,
31
55
  prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
32
56
 
33
- function onRemoveTag(item) {
57
+ var onRemoveFilter = function onRemoveFilter(item) {
34
58
  var newTagList = (0, _toConsumableArray2.default)(dataSource);
35
59
 
36
60
  if (onChange) {
37
61
  var resFindIndex = newTagList.findIndex(function (x) {
38
62
  return x.dataIndex === item.dataIndex;
39
63
  });
40
- newTagList.splice(resFindIndex, 1);
41
- onChange(newTagList);
64
+ var deletedTags = newTagList.splice(resFindIndex, 1);
65
+ onChange(deletedTags[0], newTagList);
42
66
  }
43
- }
67
+ };
68
+
69
+ var onRemoveAllFilter = function onRemoveAllFilter() {
70
+ if (onClear) {
71
+ onClear();
72
+ }
73
+ };
74
+
75
+ var onRemoveTag = function onRemoveTag(item, tag) {
76
+ var newDataSource = (0, _toConsumableArray2.default)(dataSource);
44
77
 
45
- function onRemoveAllTag() {
46
78
  if (onChange) {
47
- onChange([]);
79
+ var resFindIndex = item.value.findIndex(function (x) {
80
+ return x.tagKey === tag.tagKey && x.tagValue === tag.tagValue;
81
+ });
82
+ var deletedTags = item.value.splice(resFindIndex, 1);
83
+ onChange(_objectSpread(_objectSpread({}, item), {}, {
84
+ value: deletedTags
85
+ }), newDataSource);
86
+ }
87
+ };
88
+
89
+ var renderTags = function renderTags(tagItem) {
90
+ var value = tagItem.value;
91
+
92
+ if ((0, _isArray.default)(value)) {
93
+ return value.map(function (t) {
94
+ return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
95
+ showLabel: true,
96
+ key: "".concat(t.tagKey, "-").concat(t.tagValue),
97
+ tagKey: t.tagKey,
98
+ tagValue: t.tagValue,
99
+ closable: true,
100
+ onClose: function onClose() {
101
+ onRemoveTag(tagItem, t);
102
+ return true;
103
+ }
104
+ });
105
+ });
48
106
  }
49
- }
107
+
108
+ return /*#__PURE__*/_react.default.createElement(_PureTag.default, {
109
+ showLabel: true,
110
+ tagKey: value.tagKey,
111
+ tagValue: value.tagValue,
112
+ closable: true,
113
+ onClose: function onClose() {
114
+ onRemoveFilter(tagItem);
115
+ return true;
116
+ }
117
+ });
118
+ };
50
119
 
51
120
  return /*#__PURE__*/_react.default.createElement(_style.TagListWrap, {
52
121
  prefix: prefix,
53
122
  className: (0, _classnames.default)(_constants.baseTagListClassName, className),
54
123
  style: style
55
124
  }, /*#__PURE__*/_react.default.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
125
+ if (isTagLikeDataStructure(tagItem.value)) {
126
+ return renderTags(tagItem);
127
+ }
128
+
56
129
  return /*#__PURE__*/_react.default.createElement(ClosableTag, {
130
+ className: "console-tags-tag",
57
131
  key: tagItem.dataIndex + tagItem.value,
58
132
  type: "normal",
59
133
  size: "medium",
60
134
  onClose: function onClose() {
61
- onRemoveTag(tagItem);
135
+ onRemoveFilter(tagItem);
62
136
  return true;
63
137
  }
64
- }, tagItem.label, ":", tagItem.valueLabel);
138
+ }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("label", {
139
+ className: "console-tags-tag-label"
140
+ }, tagItem.label), tagItem.value || tagItem.valueLabel));
65
141
  }), dataSource && dataSource.length > 0 && /*#__PURE__*/_react.default.createElement("a", {
66
142
  className: "remove-btn",
67
- onClick: onRemoveAllTag
143
+ onClick: onRemoveAllFilter
68
144
  }, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));
69
145
  };
70
146
 
package/lib/style.js CHANGED
@@ -33,6 +33,6 @@ exports.MultiBtnWarp = MultiBtnWarp;
33
33
 
34
34
  var TagListWrap = _styledComponents.default.div.withConfig({
35
35
  componentId: "sc-1afc1cn-3"
36
- })(["", "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);
36
+ })(["", "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);
37
37
 
38
38
  exports.TagListWrap = TagListWrap;
@@ -7,11 +7,11 @@ export interface IRcSearchTagItemProps {
7
7
  /**
8
8
  * tag的类别展示名称
9
9
  */
10
- label: string;
10
+ label?: string;
11
11
  /**
12
12
  * tag的类别的key
13
13
  */
14
- dataIndex: string;
14
+ dataIndex?: string;
15
15
  /**
16
16
  * tag的类别的值
17
17
  */
@@ -19,5 +19,5 @@ export interface IRcSearchTagItemProps {
19
19
  /**
20
20
  * tag的类别的展示值
21
21
  */
22
- valueLabel: string;
22
+ valueLabel?: string;
23
23
  }
@@ -26,7 +26,11 @@ export interface IRcSearchTagListProps {
26
26
  */
27
27
  resourceType?: string;
28
28
  /**
29
- * 当删减tag时, 返回新的taglist, 可直接赋值给rc-search组件
29
+ * 当删减 tag 时, 返回新的筛选项
30
30
  */
31
- onChange?: (newTags: any) => void;
31
+ onChange?: (deletedFilter: IRcSearchTagItemProps, remainFilters: IRcSearchTagItemProps[]) => void;
32
+ /**
33
+ * 清除山选项
34
+ */
35
+ onClear?: () => void;
32
36
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alicloud/console-components-search",
3
- "version": "0.2.0",
3
+ "version": "0.2.3",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "license": "MIT",
@@ -35,6 +35,7 @@
35
35
  "access": "public"
36
36
  },
37
37
  "dependencies": {
38
+ "@alicloud/console-components-truncate": "^1.0.16",
38
39
  "@alicloud/console-logger-sls": "^1.2.31"
39
40
  }
40
41
  }