@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
|
@@ -1 +1 @@
|
|
|
1
|
-
html body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}html body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}html body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}html body .xconsole-rc-search-popup{margin-top:4px}
|
|
1
|
+
html body .xconsole-rcsearch-multi-pop.xconsole-rcsearch-multi-pop>ul{padding:8px}html body .xconsole-rcsearch-multi-pop .next-select-menu-item{padding-left:0!important}html body .xconsole-rcsearch-multi-pop .next-select-menu-item .next-menu-icon-selected{display:none}html body .xconsole-rcsearch-multi-pop .next-menu-group-label{padding-left:0}html body .xconsole-rc-search-popup{margin-top:4px}html .console-tags-tag.console-tags-tag{font-weight:600;color:var(--color-text1-9,#333)!important}html .console-tags-tag.console-tags-tag .console-tags-tag-label{color:var(--color-text1-6,grey);margin-right:8px}html .console-tags-tag.console-tags-tag[class*=tag-closable]>[class*=tag-close-btn]{margin-left:12px}html .console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag:hover [class*=-icon-close]{color:#181818}html .console-tags-tag.console-tags-tag.console-tags-tag.console-tags-tag [class*=-icon-close]:before{content:var(--icon-content-delete-filling)}html .console-tags-tag:not(:last-child){margin-right:8px}html .console-tags-tag_empty{color:var(--color-text1-6,grey)}html .console-tags-tag-dot.console-tags-tag-dot [class*=-badge-dot]{right:4px;top:0}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
开始构建微应用external依赖...
|
|
2
2
|
BreezrPluginStyledComponentsIsolation The plugin will trying to use the package's name as isolation id of styled-components. This behavior usually occurred on dev mode. And if you were received this warning on publish mode then you should to set `options.styledComponentStyleSheetId` implicitly.
|
|
3
3
|
ℹ Compiling Webpack
|
|
4
|
-
✔ Webpack: Compiled successfully in
|
|
4
|
+
✔ Webpack: Compiled successfully in 11.92s
|
|
5
5
|
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
|
|
6
6
|
This can impact web performance.
|
|
7
7
|
Assets:
|
|
8
|
-
main.js (2.
|
|
8
|
+
main.js (2.49 MiB),entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
|
|
9
9
|
Entrypoints:
|
|
10
|
-
main (2.
|
|
10
|
+
main (2.49 MiB)
|
|
11
11
|
main.css
|
|
12
12
|
main.js
|
|
13
13
|
,webpack performance recommendations:
|
package/es/constants.js
CHANGED
|
@@ -3,4 +3,7 @@ export var baseTagListClassName = "".concat(baseClassName, "-taglist"); // expor
|
|
|
3
3
|
// export const titleContainerClassName = `${titleClassName}-container`
|
|
4
4
|
// export const titleExtraClassName = `${titleClassName}-extra`
|
|
5
5
|
// export const titleChildrenClassName = `${titleClassName}-children`
|
|
6
|
-
// export const contentClassName = `${baseClassName}-content`
|
|
6
|
+
// export const contentClassName = `${baseClassName}-content`
|
|
7
|
+
|
|
8
|
+
export var SEARCH_FILTER_FIELD = 'filterInputValue';
|
|
9
|
+
export var SEARCH_FILTER_VALUE_FIELD = 'searchValue';
|
|
@@ -15,6 +15,7 @@ import React, { useState, useRef } from "react";
|
|
|
15
15
|
import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
|
|
16
16
|
import { SearchWarp, MultiBtnWarp } from "../style";
|
|
17
17
|
import SearchConditionSelectPrefix from "./InputPrefix";
|
|
18
|
+
import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from "../constants";
|
|
18
19
|
var AutoComplete = Select.AutoComplete;
|
|
19
20
|
/**
|
|
20
21
|
*
|
|
@@ -68,12 +69,9 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
|
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'multiple') {
|
|
71
|
-
var _opt$templateProps2
|
|
72
|
+
var _opt$templateProps2;
|
|
72
73
|
|
|
73
|
-
|
|
74
|
-
return value.indexOf(d.value) !== -1;
|
|
75
|
-
}));
|
|
76
|
-
valueLabel = (_opt$templateProps3 = opt.templateProps) === null || _opt$templateProps3 === void 0 ? void 0 : _opt$templateProps3.dataSource.filter(function (d) {
|
|
74
|
+
valueLabel = (_opt$templateProps2 = opt.templateProps) === null || _opt$templateProps2 === void 0 ? void 0 : _opt$templateProps2.dataSource.filter(function (d) {
|
|
77
75
|
return value.indexOf(d.value) !== -1;
|
|
78
76
|
}).map(function (d) {
|
|
79
77
|
return d.label;
|
|
@@ -82,10 +80,24 @@ var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, o
|
|
|
82
80
|
|
|
83
81
|
return {
|
|
84
82
|
label: opt === null || opt === void 0 ? void 0 : opt.label,
|
|
85
|
-
valueLabel: valueLabel
|
|
83
|
+
valueLabel: valueLabel,
|
|
84
|
+
value: value,
|
|
85
|
+
dataIndex: dataIndex
|
|
86
86
|
};
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
+
var highlightKeyword = function highlightKeyword(value, keywords) {
|
|
90
|
+
var idx = value.toLowerCase().indexOf(keywords.toLowerCase());
|
|
91
|
+
var startValue = value.slice(0, idx);
|
|
92
|
+
var highlightValue = value.slice(idx, idx + keywords.length);
|
|
93
|
+
var endValue = value.slice(idx + keywords.length);
|
|
94
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, startValue, /*#__PURE__*/React.createElement("span", {
|
|
95
|
+
style: {
|
|
96
|
+
color: 'var(--color-brand1-6)'
|
|
97
|
+
}
|
|
98
|
+
}, highlightValue), endValue);
|
|
99
|
+
};
|
|
100
|
+
|
|
89
101
|
var ComplexSearch = function ComplexSearch(props) {
|
|
90
102
|
var options = props.options,
|
|
91
103
|
fuzzy = props.fuzzy,
|
|
@@ -112,8 +124,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
112
124
|
var field = Field.useField();
|
|
113
125
|
var init = field.init,
|
|
114
126
|
getValue = field.getValue,
|
|
115
|
-
reset = field.reset
|
|
116
|
-
getError = field.getError;
|
|
127
|
+
reset = field.reset;
|
|
117
128
|
var focusProps = {
|
|
118
129
|
onFocus: function onFocus() {
|
|
119
130
|
setFocused(true);
|
|
@@ -123,14 +134,25 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
123
134
|
}
|
|
124
135
|
}; //计算视图,根据内部状态和输入的 props 决定一些值
|
|
125
136
|
|
|
126
|
-
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(
|
|
137
|
+
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(SEARCH_FILTER_FIELD);
|
|
127
138
|
var defaultFilter = options.find(function (t) {
|
|
128
139
|
return t.dataIndex === defaultDataIndex;
|
|
129
140
|
});
|
|
141
|
+
|
|
142
|
+
var highlightItem = function highlightItem(item, searchKey) {
|
|
143
|
+
var label = item.label;
|
|
144
|
+
|
|
145
|
+
if (searchKey && searchKey.length) {
|
|
146
|
+
label = highlightKeyword(item.label, searchKey);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
return label;
|
|
150
|
+
};
|
|
130
151
|
/**
|
|
131
152
|
* 处理筛选类型选中的情况
|
|
132
153
|
*/
|
|
133
154
|
|
|
155
|
+
|
|
134
156
|
var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
|
|
135
157
|
var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
136
158
|
setSelectedFilterType(options.find(function (o) {
|
|
@@ -144,7 +166,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
144
166
|
|
|
145
167
|
|
|
146
168
|
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy) {
|
|
147
|
-
var isFuzzySearch = isFuzzy && getValue(
|
|
169
|
+
var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD); // 如果是模糊搜索,则直接处理
|
|
148
170
|
|
|
149
171
|
if (isFuzzySearch) {
|
|
150
172
|
if (actionType !== 'change') {
|
|
@@ -167,10 +189,10 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
167
189
|
|
|
168
190
|
var handleSearch = function handleSearch() {
|
|
169
191
|
if (onSearch) {
|
|
170
|
-
var value = getValue(
|
|
192
|
+
var value = getValue(SEARCH_FILTER_VALUE_FIELD);
|
|
171
193
|
|
|
172
194
|
if (defaultDataIndex && !selectedFilterType) {
|
|
173
|
-
onSearch(getValue(
|
|
195
|
+
onSearch(getValue(SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(SEARCH_FILTER_FIELD), options));
|
|
174
196
|
}
|
|
175
197
|
|
|
176
198
|
if (selectedFilterType) {
|
|
@@ -179,6 +201,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
179
201
|
}
|
|
180
202
|
|
|
181
203
|
reset();
|
|
204
|
+
document.body.click();
|
|
182
205
|
setFocused(false);
|
|
183
206
|
};
|
|
184
207
|
|
|
@@ -190,7 +213,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
190
213
|
};
|
|
191
214
|
|
|
192
215
|
var renderMultipleSelectorItem = function renderMultipleSelectorItem(item) {
|
|
193
|
-
var searchValue = getValue(
|
|
216
|
+
var searchValue = getValue(SEARCH_FILTER_VALUE_FIELD);
|
|
194
217
|
var checked = isArray(searchValue) && searchValue.some(function (v) {
|
|
195
218
|
return v === item.value;
|
|
196
219
|
});
|
|
@@ -203,7 +226,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
203
226
|
var _selectedFilterType$t, _selectedFilterType$t2;
|
|
204
227
|
|
|
205
228
|
var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
|
|
206
|
-
var searchValue = getValue(
|
|
229
|
+
var searchValue = getValue(SEARCH_FILTER_VALUE_FIELD);
|
|
207
230
|
|
|
208
231
|
var props = _objectSpread({
|
|
209
232
|
hasBorder: false,
|
|
@@ -223,7 +246,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
223
246
|
|
|
224
247
|
switch (type) {
|
|
225
248
|
case 'input':
|
|
226
|
-
return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(
|
|
249
|
+
return /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_VALUE_FIELD, {}), {
|
|
227
250
|
className: classNames('main-input', 'multi')
|
|
228
251
|
}, props, {
|
|
229
252
|
onKeyUp: handleKeyUp
|
|
@@ -232,7 +255,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
232
255
|
case 'select':
|
|
233
256
|
return /*#__PURE__*/React.createElement(Select, _extends({
|
|
234
257
|
className: classNames('main-input', 'select')
|
|
235
|
-
}, init(
|
|
258
|
+
}, init(SEARCH_FILTER_VALUE_FIELD, {
|
|
236
259
|
props: {
|
|
237
260
|
onChange: handleSearch
|
|
238
261
|
}
|
|
@@ -241,7 +264,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
241
264
|
case 'multiple':
|
|
242
265
|
return /*#__PURE__*/React.createElement(Select, _extends({
|
|
243
266
|
className: classNames('main-input', 'multi')
|
|
244
|
-
}, init(
|
|
267
|
+
}, init(SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, {
|
|
245
268
|
itemRender: renderMultipleSelectorItem,
|
|
246
269
|
popupClassName: "xconsole-rcsearch-multi-pop",
|
|
247
270
|
mode: "multiple",
|
|
@@ -263,6 +286,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
263
286
|
type: "normal",
|
|
264
287
|
onClick: function onClick() {
|
|
265
288
|
reset();
|
|
289
|
+
document.body.click();
|
|
266
290
|
}
|
|
267
291
|
}, "\u53D6\u6D88"))
|
|
268
292
|
}
|
|
@@ -274,7 +298,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
274
298
|
};
|
|
275
299
|
|
|
276
300
|
var renderSelectFilterCloseIcon = function renderSelectFilterCloseIcon() {
|
|
277
|
-
var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(
|
|
301
|
+
var hasFilterTypeClearBtn = !!selectedFilterType && !((selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template) === 'input' && !!getValue(SEARCH_FILTER_VALUE_FIELD));
|
|
278
302
|
return hasFilterTypeClearBtn && /*#__PURE__*/React.createElement("div", {
|
|
279
303
|
className: "clear-level1"
|
|
280
304
|
}, /*#__PURE__*/React.createElement("span", {
|
|
@@ -308,7 +332,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
308
332
|
}
|
|
309
333
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
310
334
|
className: classNames('forms')
|
|
311
|
-
}, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(
|
|
335
|
+
}, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
312
336
|
props: {
|
|
313
337
|
// @ts-ignore
|
|
314
338
|
onChange: function onChange(value, actionType) {
|
|
@@ -316,7 +340,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
316
340
|
}
|
|
317
341
|
}
|
|
318
342
|
}), {
|
|
319
|
-
|
|
343
|
+
// @ts-ignore
|
|
344
|
+
itemRender: highlightItem,
|
|
320
345
|
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") : '请搜索',
|
|
321
346
|
className: classNames('main-input', 'multi'),
|
|
322
347
|
hasBorder: false,
|
|
@@ -328,7 +353,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
328
353
|
width: 'auto'
|
|
329
354
|
}
|
|
330
355
|
}, focusProps)) : null, renderSelectedFilter(), renderSelectFilterCloseIcon())), /*#__PURE__*/React.createElement("div", {
|
|
331
|
-
className: classNames('right-wrap')
|
|
356
|
+
className: classNames('right-wrap'),
|
|
357
|
+
ref: autoRef
|
|
332
358
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
333
359
|
className: classNames('search-btn', {
|
|
334
360
|
'focus': focused
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["intl", "tagKey", "disableTruncate", "showDot", "tagValue", "showLabel", "closable"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { Tag, Badge } from '@alicloud/console-components';
|
|
6
|
+
import Truncate from '@alicloud/console-components-truncate';
|
|
7
|
+
|
|
8
|
+
var Empty = function Empty(_ref) {
|
|
9
|
+
var children = _ref.children;
|
|
10
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
var PureTag = function PureTag(props) {
|
|
14
|
+
var intl = props.intl,
|
|
15
|
+
tagKey = props.tagKey,
|
|
16
|
+
disableTruncate = props.disableTruncate,
|
|
17
|
+
showDot = props.showDot,
|
|
18
|
+
tagValue = props.tagValue,
|
|
19
|
+
showLabel = props.showLabel,
|
|
20
|
+
_props$closable = props.closable,
|
|
21
|
+
closable = _props$closable === void 0 ? true : _props$closable,
|
|
22
|
+
resetProps = _objectWithoutProperties(props, _excluded);
|
|
23
|
+
|
|
24
|
+
var defaultTruncateProps = {
|
|
25
|
+
threshold: 20,
|
|
26
|
+
showTooltip: false
|
|
27
|
+
};
|
|
28
|
+
var TruncateWrapper = disableTruncate ? Empty : Truncate;
|
|
29
|
+
var DotWrapper = showDot ? Badge : Empty;
|
|
30
|
+
var TagWrapper = closable ? Tag.Closeable : Tag;
|
|
31
|
+
var transformedTagValue = tagValue;
|
|
32
|
+
|
|
33
|
+
if (tagValue === '') {
|
|
34
|
+
transformedTagValue = '空值';
|
|
35
|
+
} else if (tagValue === undefined || tagValue === null) {
|
|
36
|
+
transformedTagValue = '全部值';
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
/*#__PURE__*/
|
|
41
|
+
//@ts-ignore
|
|
42
|
+
React.createElement(DotWrapper, {
|
|
43
|
+
title: "\u5373\u5C06\u65B0\u5EFA",
|
|
44
|
+
className: "console-tags-tag-dot",
|
|
45
|
+
dot: true
|
|
46
|
+
}, /*#__PURE__*/React.createElement(TagWrapper, _extends({
|
|
47
|
+
title: "".concat(tagKey, ":").concat(tagValue),
|
|
48
|
+
className: "console-tags-tag"
|
|
49
|
+
}, resetProps), showLabel && /*#__PURE__*/React.createElement("label", {
|
|
50
|
+
className: "console-tags-tag-label"
|
|
51
|
+
}, "\u6807\u7B7E"), /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagKey), ":", tagValue ? /*#__PURE__*/React.createElement(TruncateWrapper, defaultTruncateProps, tagValue) : /*#__PURE__*/React.createElement("span", {
|
|
52
|
+
className: "console-tags-tag_empty"
|
|
53
|
+
}, transformedTagValue)))
|
|
54
|
+
);
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export default PureTag;
|
|
@@ -1,55 +1,129 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
1
2
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
3
|
+
|
|
4
|
+
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; }
|
|
5
|
+
|
|
6
|
+
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) { _defineProperty(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; }
|
|
7
|
+
|
|
2
8
|
import React from "react";
|
|
3
9
|
import classNames from 'classnames';
|
|
4
10
|
import { ConfigProvider, Tag } from '@alicloud/console-components';
|
|
5
11
|
import { TagListWrap } from '../style';
|
|
6
12
|
import { baseTagListClassName } from '../constants';
|
|
13
|
+
import isArray from 'lodash/isArray';
|
|
14
|
+
import PureTag from "./PureTag";
|
|
7
15
|
var TagGroup = Tag.Group,
|
|
8
16
|
ClosableTag = Tag.Closeable;
|
|
17
|
+
/**
|
|
18
|
+
* 判断是否是 标签 的数据结构
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
var isTagLikeDataStructure = function isTagLikeDataStructure(value) {
|
|
22
|
+
var isTag = !!value.tagKey;
|
|
23
|
+
|
|
24
|
+
if (isArray(value)) {
|
|
25
|
+
return value[0] && !!value[0].tagKey;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return isTag;
|
|
29
|
+
};
|
|
9
30
|
|
|
10
31
|
var SearchTagList = function SearchTagList(props) {
|
|
11
32
|
var dataSource = props.dataSource,
|
|
12
33
|
className = props.className,
|
|
13
34
|
style = props.style,
|
|
14
35
|
onChange = props.onChange,
|
|
36
|
+
onClear = props.onClear,
|
|
15
37
|
_props$prefix = props.prefix,
|
|
16
38
|
prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
|
|
17
39
|
|
|
18
|
-
function
|
|
40
|
+
var onRemoveFilter = function onRemoveFilter(item) {
|
|
19
41
|
var newTagList = _toConsumableArray(dataSource);
|
|
20
42
|
|
|
21
43
|
if (onChange) {
|
|
22
44
|
var resFindIndex = newTagList.findIndex(function (x) {
|
|
23
45
|
return x.dataIndex === item.dataIndex;
|
|
24
46
|
});
|
|
25
|
-
newTagList.splice(resFindIndex, 1);
|
|
26
|
-
onChange(newTagList);
|
|
47
|
+
var deletedTags = newTagList.splice(resFindIndex, 1);
|
|
48
|
+
onChange(deletedTags[0], newTagList);
|
|
27
49
|
}
|
|
28
|
-
}
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
var onRemoveAllFilter = function onRemoveAllFilter() {
|
|
53
|
+
if (onClear) {
|
|
54
|
+
onClear();
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
var onRemoveTag = function onRemoveTag(item, tag) {
|
|
59
|
+
var newDataSource = _toConsumableArray(dataSource);
|
|
29
60
|
|
|
30
|
-
function onRemoveAllTag() {
|
|
31
61
|
if (onChange) {
|
|
32
|
-
|
|
62
|
+
var resFindIndex = item.value.findIndex(function (x) {
|
|
63
|
+
return x.tagKey === tag.tagKey && x.tagValue === tag.tagValue;
|
|
64
|
+
});
|
|
65
|
+
var deletedTags = item.value.splice(resFindIndex, 1);
|
|
66
|
+
onChange(_objectSpread(_objectSpread({}, item), {}, {
|
|
67
|
+
value: deletedTags
|
|
68
|
+
}), newDataSource);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
var renderTags = function renderTags(tagItem) {
|
|
73
|
+
var value = tagItem.value;
|
|
74
|
+
|
|
75
|
+
if (isArray(value)) {
|
|
76
|
+
return value.map(function (t) {
|
|
77
|
+
return /*#__PURE__*/React.createElement(PureTag, {
|
|
78
|
+
showLabel: true,
|
|
79
|
+
key: "".concat(t.tagKey, "-").concat(t.tagValue),
|
|
80
|
+
tagKey: t.tagKey,
|
|
81
|
+
tagValue: t.tagValue,
|
|
82
|
+
closable: true,
|
|
83
|
+
onClose: function onClose() {
|
|
84
|
+
onRemoveTag(tagItem, t);
|
|
85
|
+
return true;
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
});
|
|
33
89
|
}
|
|
34
|
-
|
|
90
|
+
|
|
91
|
+
return /*#__PURE__*/React.createElement(PureTag, {
|
|
92
|
+
showLabel: true,
|
|
93
|
+
tagKey: value.tagKey,
|
|
94
|
+
tagValue: value.tagValue,
|
|
95
|
+
closable: true,
|
|
96
|
+
onClose: function onClose() {
|
|
97
|
+
onRemoveFilter(tagItem);
|
|
98
|
+
return true;
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
};
|
|
35
102
|
|
|
36
103
|
return /*#__PURE__*/React.createElement(TagListWrap, {
|
|
37
104
|
prefix: prefix,
|
|
38
105
|
className: classNames(baseTagListClassName, className),
|
|
39
106
|
style: style
|
|
40
107
|
}, /*#__PURE__*/React.createElement(TagGroup, null, dataSource && dataSource.length > 0 && dataSource.map(function (tagItem) {
|
|
108
|
+
if (isTagLikeDataStructure(tagItem.value)) {
|
|
109
|
+
return renderTags(tagItem);
|
|
110
|
+
}
|
|
111
|
+
|
|
41
112
|
return /*#__PURE__*/React.createElement(ClosableTag, {
|
|
113
|
+
className: "console-tags-tag",
|
|
42
114
|
key: tagItem.dataIndex + tagItem.value,
|
|
43
115
|
type: "normal",
|
|
44
116
|
size: "medium",
|
|
45
117
|
onClose: function onClose() {
|
|
46
|
-
|
|
118
|
+
onRemoveFilter(tagItem);
|
|
47
119
|
return true;
|
|
48
120
|
}
|
|
49
|
-
},
|
|
121
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
|
|
122
|
+
className: "console-tags-tag-label"
|
|
123
|
+
}, tagItem.label), tagItem.value || tagItem.valueLabel));
|
|
50
124
|
}), dataSource && dataSource.length > 0 && /*#__PURE__*/React.createElement("a", {
|
|
51
125
|
className: "remove-btn",
|
|
52
|
-
onClick:
|
|
126
|
+
onClick: onRemoveAllFilter
|
|
53
127
|
}, "\u6E05\u9664\u7B5B\u9009\u6761\u4EF6")));
|
|
54
128
|
};
|
|
55
129
|
|
package/es/style.js
CHANGED
|
@@ -15,5 +15,5 @@ var MultiBtnWarp = styled.div.withConfig({
|
|
|
15
15
|
})(["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);
|
|
16
16
|
var TagListWrap = styled.div.withConfig({
|
|
17
17
|
componentId: "sc-1afc1cn-3"
|
|
18
|
-
})(["", "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;
|
|
18
|
+
})(["", "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);
|
|
19
19
|
export { SearchWarp, MultiBtnWarp, TagListWrap, MenuContentWrap };
|
package/lib/constants.d.ts
CHANGED
package/lib/constants.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.baseTagListClassName = exports.baseClassName = void 0;
|
|
6
|
+
exports.baseTagListClassName = exports.baseClassName = exports.SEARCH_FILTER_VALUE_FIELD = exports.SEARCH_FILTER_FIELD = void 0;
|
|
7
7
|
var baseClassName = 'rc-search';
|
|
8
8
|
exports.baseClassName = baseClassName;
|
|
9
9
|
var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const titleClassName = `${baseClassName}-title`
|
|
@@ -12,4 +12,8 @@ var baseTagListClassName = "".concat(baseClassName, "-taglist"); // export const
|
|
|
12
12
|
// export const titleChildrenClassName = `${titleClassName}-children`
|
|
13
13
|
// export const contentClassName = `${baseClassName}-content`
|
|
14
14
|
|
|
15
|
-
exports.baseTagListClassName = baseTagListClassName;
|
|
15
|
+
exports.baseTagListClassName = baseTagListClassName;
|
|
16
|
+
var SEARCH_FILTER_FIELD = 'filterInputValue';
|
|
17
|
+
exports.SEARCH_FILTER_FIELD = SEARCH_FILTER_FIELD;
|
|
18
|
+
var SEARCH_FILTER_VALUE_FIELD = 'searchValue';
|
|
19
|
+
exports.SEARCH_FILTER_VALUE_FIELD = SEARCH_FILTER_VALUE_FIELD;
|
package/lib/index.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ import { IRcSearchProps } from "./types/IRcSearchProps.type";
|
|
|
4
4
|
import { IRcSearchTagListProps } from "./types/IRcSearchTagListProps.type";
|
|
5
5
|
import { IRcSearchTagItemProps } from './types/IRcSearchTagItemProps.type';
|
|
6
6
|
import { IRcSearchOptionsProps } from './types/IRcSearchOptions.type';
|
|
7
|
+
import './index.less';
|
|
7
8
|
export { Search, SearchTagList as SearchFilter, IRcSearchProps, IRcSearchTagListProps, IRcSearchOptionsProps, IRcSearchTagItemProps };
|