@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.
- package/config/components-with-style.tsx +1 -1
- package/demos/demo1.demo.tsx +15 -3
- package/doc-dist/10.js +1 -1
- package/doc-dist/14.js +1 -1
- package/doc-dist/deps/main.css +1 -1
- package/doc-dist/deps/main.js +8 -8
- package/doc-dist/deps/main.os.css +1 -1
- package/doc-dist/log-deps-build.log +3 -3
- package/es/constants.js +4 -1
- package/es/modeSingleSingle/index2.js +47 -21
- package/es/searchTagList/PureTag.js +57 -0
- package/es/searchTagList/index.js +84 -10
- package/es/style.js +1 -1
- package/lib/constants.d.ts +2 -0
- package/lib/constants.js +6 -2
- package/lib/index.d.ts +1 -0
- package/lib/modeSingleSingle/index2.js +48 -21
- package/lib/searchTagList/PureTag.d.ts +14 -0
- package/lib/searchTagList/PureTag.js +71 -0
- package/lib/searchTagList/index.js +86 -10
- package/lib/style.js +1 -1
- package/lib/types/IRcSearchTagItemProps.type.d.ts +3 -3
- package/lib/types/IRcSearchTagListProps.type.d.ts +6 -2
- package/package.json +2 -1
|
@@ -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
|
|
99
|
+
var _opt$templateProps2;
|
|
98
100
|
|
|
99
|
-
|
|
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(
|
|
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(
|
|
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(
|
|
221
|
+
var value = getValue(_constants.SEARCH_FILTER_VALUE_FIELD);
|
|
199
222
|
|
|
200
223
|
if (defaultDataIndex && !selectedFilterType) {
|
|
201
|
-
onSearch(getValue(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
135
|
+
onRemoveFilter(tagItem);
|
|
62
136
|
return true;
|
|
63
137
|
}
|
|
64
|
-
},
|
|
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:
|
|
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;
|
|
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
|
|
10
|
+
label?: string;
|
|
11
11
|
/**
|
|
12
12
|
* tag的类别的key
|
|
13
13
|
*/
|
|
14
|
-
dataIndex
|
|
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
|
|
22
|
+
valueLabel?: string;
|
|
23
23
|
}
|
|
@@ -26,7 +26,11 @@ export interface IRcSearchTagListProps {
|
|
|
26
26
|
*/
|
|
27
27
|
resourceType?: string;
|
|
28
28
|
/**
|
|
29
|
-
* 当删减tag时,
|
|
29
|
+
* 当删减 tag 时, 返回新的筛选项
|
|
30
30
|
*/
|
|
31
|
-
onChange?: (
|
|
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.
|
|
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
|
}
|