@alicloud/console-components-search 0.2.37-alpha.7 → 0.2.37-beta.0
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/CHANGELOG.md +7 -0
- package/demos/demo1.demo.tsx +81 -203
- package/dist/index.js +1644 -1666
- package/es/ComplexSearch/InputPrefix.js +3 -18
- package/es/ComplexSearch/index.js +20 -76
- package/es/message.js +1 -1
- package/es/search.js +2 -0
- package/lib/ComplexSearch/InputPrefix.js +2 -17
- package/lib/ComplexSearch/index.js +21 -76
- package/lib/message.js +1 -1
- package/lib/search.js +2 -0
- package/lib/types/IRcSearchOptions.type.d.ts +0 -2
- package/lib/types/IRcSearchProps.type.d.ts +0 -11
- package/package.json +1 -4
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["defaultValue", "dataSource", "label"
|
|
3
|
+
var _excluded = ["defaultValue", "dataSource", "label"];
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import classNames from 'classnames';
|
|
6
|
-
import { Icon, Select
|
|
6
|
+
import { Icon, Select } from '@alicloud/console-components';
|
|
7
7
|
var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
8
8
|
var _dataSource$, _dataSource$$children;
|
|
9
9
|
var defaultValue = props.defaultValue,
|
|
10
10
|
_props$dataSource = props.dataSource,
|
|
11
11
|
dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
|
|
12
12
|
label = props.label,
|
|
13
|
-
type = props.type,
|
|
14
13
|
reset = _objectWithoutProperties(props, _excluded);
|
|
15
14
|
var noSelect = dataSource.length < 2 && ((_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : (_dataSource$$children = _dataSource$.children) === null || _dataSource$$children === void 0 ? void 0 : _dataSource$$children.length) < 2;
|
|
16
15
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -20,7 +19,7 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
|
20
19
|
}, label), noSelect ? null : /*#__PURE__*/React.createElement(Icon, {
|
|
21
20
|
type: "caret-down",
|
|
22
21
|
size: "xxs"
|
|
23
|
-
}),
|
|
22
|
+
}), /*#__PURE__*/React.createElement(Select, _extends({
|
|
24
23
|
className: classNames('condition-select', {
|
|
25
24
|
'rc-search-prefix-no-select': noSelect
|
|
26
25
|
}),
|
|
@@ -39,20 +38,6 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
|
39
38
|
}, reset, {
|
|
40
39
|
autoWidth: false,
|
|
41
40
|
popupClassName: "rc-search-prefix"
|
|
42
|
-
})) : /*#__PURE__*/React.createElement(CascaderSelect, _extends({
|
|
43
|
-
className: classNames('condition-select', {
|
|
44
|
-
'rc-search-prefix-no-select': noSelect
|
|
45
|
-
}),
|
|
46
|
-
defaultValue: defaultValue,
|
|
47
|
-
hasBorder: false,
|
|
48
|
-
disabled: noSelect,
|
|
49
|
-
autoHighlightFirstItem: false,
|
|
50
|
-
dataSource: dataSource
|
|
51
|
-
// itemRender={({ label, value }) => (<span data-value={value}>{label}</span>)}
|
|
52
|
-
}, reset, {
|
|
53
|
-
autoWidth: false,
|
|
54
|
-
popupClassName: "rc-search-prefix",
|
|
55
|
-
canOnlyCheckLeaf: true
|
|
56
41
|
})));
|
|
57
42
|
};
|
|
58
43
|
export default SearchConditionSelectPrefix;
|
|
@@ -9,42 +9,19 @@ import cloneDeep from 'lodash/cloneDeep';
|
|
|
9
9
|
import groupBy from 'lodash/groupBy';
|
|
10
10
|
import isArray from 'lodash/isArray';
|
|
11
11
|
import React, { useState, useRef } from 'react';
|
|
12
|
-
import { Button, Icon, Select, ConfigProvider, Field, Checkbox
|
|
12
|
+
import { Button, Icon, Select, ConfigProvider, Field, Checkbox } from '@alicloud/console-components';
|
|
13
13
|
import { isPlainObject, template } from 'lodash';
|
|
14
14
|
import { SearchWarp, MultiBtnWarp } from '../style';
|
|
15
15
|
import SearchConditionSelectPrefix from './InputPrefix';
|
|
16
16
|
import { SEARCH_FILTER_FIELD, SEARCH_FILTER_VALUE_FIELD } from '../constants';
|
|
17
17
|
import message from '../message';
|
|
18
18
|
var AutoComplete = Select.AutoComplete;
|
|
19
|
-
function formatOptionsChildren(children) {
|
|
20
|
-
if (!children) return undefined;
|
|
21
|
-
return children.map(function (o) {
|
|
22
|
-
return {
|
|
23
|
-
label: o.label,
|
|
24
|
-
value: o.dataIndex || o.value || o.label,
|
|
25
|
-
disabled: o.disabled,
|
|
26
|
-
children: formatOptionsChildren(o.children)
|
|
27
|
-
};
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
|
|
31
19
|
/**
|
|
32
20
|
*
|
|
33
21
|
* @param IRcSearchOptionsProps options
|
|
34
22
|
* @returns
|
|
35
23
|
*/
|
|
36
|
-
var normalizeOptions = function normalizeOptions(options
|
|
37
|
-
if (prefixSelectMode === 'cascader') {
|
|
38
|
-
return options.map(function (o) {
|
|
39
|
-
return {
|
|
40
|
-
label: o.label,
|
|
41
|
-
value: o.dataIndex || o.value || o.label,
|
|
42
|
-
disabled: o.disabled,
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
children: formatOptionsChildren(o.children)
|
|
45
|
-
};
|
|
46
|
-
});
|
|
47
|
-
}
|
|
24
|
+
var normalizeOptions = function normalizeOptions(options) {
|
|
48
25
|
var optionsCopy = cloneDeep(options);
|
|
49
26
|
optionsCopy.forEach(function (o) {
|
|
50
27
|
!o.groupName && (o.groupName = message.defaultFilterGroupName);
|
|
@@ -58,8 +35,7 @@ var normalizeOptions = function normalizeOptions(options, prefixSelectMode) {
|
|
|
58
35
|
children: children.map(function (l) {
|
|
59
36
|
return {
|
|
60
37
|
label: l.label,
|
|
61
|
-
value: l.dataIndex
|
|
62
|
-
disabled: l.disabled
|
|
38
|
+
value: l.dataIndex
|
|
63
39
|
};
|
|
64
40
|
})
|
|
65
41
|
};
|
|
@@ -84,22 +60,9 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
|
|
|
84
60
|
children: _toConsumableArray(list)
|
|
85
61
|
}];
|
|
86
62
|
};
|
|
87
|
-
var _flatOption = function flatOption() {
|
|
88
|
-
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
89
|
-
var flattened = [];
|
|
90
|
-
opts.forEach(function (item) {
|
|
91
|
-
if (item.children) {
|
|
92
|
-
flattened.push.apply(flattened, _toConsumableArray(_flatOption(item.children)));
|
|
93
|
-
} else {
|
|
94
|
-
flattened.push(item);
|
|
95
|
-
}
|
|
96
|
-
});
|
|
97
|
-
return flattened;
|
|
98
|
-
};
|
|
99
63
|
var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
|
|
100
|
-
var
|
|
101
|
-
|
|
102
|
-
return getDataIndex(o) === dataIndex;
|
|
64
|
+
var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
|
|
65
|
+
return o.dataIndex === dataIndex;
|
|
103
66
|
});
|
|
104
67
|
var valueLabel = value;
|
|
105
68
|
if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
|
|
@@ -134,9 +97,6 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
|
|
|
134
97
|
}
|
|
135
98
|
}, highlightValue), endValue);
|
|
136
99
|
};
|
|
137
|
-
var getDataIndex = function getDataIndex(option) {
|
|
138
|
-
return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
|
|
139
|
-
};
|
|
140
100
|
var ComplexSearch = function ComplexSearch(props) {
|
|
141
101
|
var _props$options = props.options,
|
|
142
102
|
options = _props$options === void 0 ? [] : _props$options,
|
|
@@ -149,12 +109,9 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
149
109
|
_props$suggestions = props.suggestions,
|
|
150
110
|
suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
|
|
151
111
|
_props$prefix = props.prefix,
|
|
152
|
-
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix
|
|
153
|
-
_props$prefixSelectMo = props.prefixSelectMode,
|
|
154
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
155
|
-
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
112
|
+
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
|
|
156
113
|
var _useState = useState(options.find(function (o) {
|
|
157
|
-
return
|
|
114
|
+
return o.dataIndex === defaultSelectedDataIndex;
|
|
158
115
|
})),
|
|
159
116
|
_useState2 = _slicedToArray(_useState, 2),
|
|
160
117
|
selectedFilterType = _useState2[0],
|
|
@@ -180,7 +137,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
180
137
|
// 计算视图,根据内部状态和输入的 props 决定一些值
|
|
181
138
|
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(SEARCH_FILTER_FIELD);
|
|
182
139
|
var defaultFilter = options.find(function (t) {
|
|
183
|
-
return
|
|
140
|
+
return t.dataIndex === defaultDataIndex;
|
|
184
141
|
});
|
|
185
142
|
var highlightItem = function highlightItem(item, searchKey) {
|
|
186
143
|
var label = item.label;
|
|
@@ -197,8 +154,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
197
154
|
*/
|
|
198
155
|
var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
|
|
199
156
|
var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
200
|
-
setSelectedFilterType(
|
|
201
|
-
return
|
|
157
|
+
setSelectedFilterType(options.find(function (o) {
|
|
158
|
+
return o.dataIndex === type;
|
|
202
159
|
}));
|
|
203
160
|
resetValue && reset();
|
|
204
161
|
};
|
|
@@ -206,13 +163,13 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
206
163
|
/**
|
|
207
164
|
* 处理当筛选类型没选中,用户输入筛选类型,或者是做默认搜索的情况
|
|
208
165
|
*/
|
|
209
|
-
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType,
|
|
210
|
-
var isFuzzySearch =
|
|
166
|
+
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
|
|
167
|
+
var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD);
|
|
211
168
|
|
|
212
169
|
// 如果是模糊搜索,则直接处理
|
|
213
170
|
if (isFuzzySearch) {
|
|
214
171
|
if (actionType !== 'change') {
|
|
215
|
-
handleSearch(
|
|
172
|
+
handleSearch(option.dataIndex);
|
|
216
173
|
} else {
|
|
217
174
|
onSuggest && onSuggest(value, defaultDataIndex || '');
|
|
218
175
|
}
|
|
@@ -238,7 +195,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
238
195
|
onSearch(getValue(SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(SEARCH_FILTER_FIELD), options));
|
|
239
196
|
}
|
|
240
197
|
if (selectedFilterType) {
|
|
241
|
-
onSearch(value,
|
|
198
|
+
onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
|
|
242
199
|
}
|
|
243
200
|
}
|
|
244
201
|
reset();
|
|
@@ -368,28 +325,15 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
368
325
|
}, /*#__PURE__*/React.createElement("div", {
|
|
369
326
|
className: classNames('condition')
|
|
370
327
|
}, selectedFilterType ? /*#__PURE__*/React.createElement(SearchConditionSelectPrefix, {
|
|
371
|
-
|
|
372
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
328
|
+
dataSource: normalizeOptions(options),
|
|
373
329
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
374
|
-
defaultValue:
|
|
330
|
+
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
375
331
|
onChange: function onChange(value) {
|
|
376
332
|
handlerFilterTypeChange(value);
|
|
377
|
-
}
|
|
378
|
-
itemRender: prefixSelectItemRender
|
|
333
|
+
}
|
|
379
334
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
380
335
|
className: classNames('forms')
|
|
381
|
-
}, !selectedFilterType
|
|
382
|
-
className: classNames('main-input', 'multi'),
|
|
383
|
-
hasBorder: false,
|
|
384
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
385
|
-
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
386
|
-
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
387
|
-
}) : ''),
|
|
388
|
-
onChange: function onChange(value) {
|
|
389
|
-
handlerFilterTypeChange(value);
|
|
390
|
-
},
|
|
391
|
-
itemRender: prefixSelectItemRender
|
|
392
|
-
}) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
336
|
+
}, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
393
337
|
props: {
|
|
394
338
|
// @ts-ignore
|
|
395
339
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -400,7 +344,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
400
344
|
autoHighlightFirstItem: false
|
|
401
345
|
// @ts-ignore
|
|
402
346
|
,
|
|
403
|
-
itemRender:
|
|
347
|
+
itemRender: highlightItem,
|
|
404
348
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
405
349
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
406
350
|
}) : ''),
|
|
@@ -410,7 +354,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
410
354
|
dataSource:
|
|
411
355
|
// 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ,并且用户在这个输入框里面已经输入了值
|
|
412
356
|
// 则表示需要模糊搜索,调用 handleSuggest
|
|
413
|
-
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options
|
|
357
|
+
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
|
|
414
358
|
popupStyle: {
|
|
415
359
|
width: 'auto'
|
|
416
360
|
},
|
package/es/message.js
CHANGED
|
@@ -42,7 +42,7 @@ var messages = {
|
|
|
42
42
|
clearFilter: 'フィルタリング条件のクリア'
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
var lang = isSSR ? 'zh' : Cookie.get('aliyun_lang') || 'zh';
|
|
45
|
+
var lang = isSSR ? 'zh' : Cookie.get('aliyun_lang') || Cookie.get('aspara_lang') || 'zh';
|
|
46
46
|
if (!Object.keys(messages).includes(lang)) {
|
|
47
47
|
lang = 'zh';
|
|
48
48
|
}
|
package/es/search.js
CHANGED
|
@@ -9,6 +9,8 @@ var SearchWrap = styled.div.withConfig({
|
|
|
9
9
|
})(["height:32px;width:400px;display:inline-block;vertical-align:top;"]);
|
|
10
10
|
export var Search = function Search(props) {
|
|
11
11
|
var className = props.className,
|
|
12
|
+
_props$simple = props.simple,
|
|
13
|
+
simple = _props$simple === void 0 ? false : _props$simple,
|
|
12
14
|
style = props.style;
|
|
13
15
|
var windThemeClass = useWindTheme();
|
|
14
16
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchWrap, {
|
|
@@ -10,14 +10,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
12
|
var _consoleComponents = require("@alicloud/console-components");
|
|
13
|
-
var _excluded = ["defaultValue", "dataSource", "label"
|
|
13
|
+
var _excluded = ["defaultValue", "dataSource", "label"];
|
|
14
14
|
var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
15
15
|
var _dataSource$, _dataSource$$children;
|
|
16
16
|
var defaultValue = props.defaultValue,
|
|
17
17
|
_props$dataSource = props.dataSource,
|
|
18
18
|
dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
|
|
19
19
|
label = props.label,
|
|
20
|
-
type = props.type,
|
|
21
20
|
reset = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
22
21
|
var noSelect = dataSource.length < 2 && ((_dataSource$ = dataSource[0]) === null || _dataSource$ === void 0 ? void 0 : (_dataSource$$children = _dataSource$.children) === null || _dataSource$$children === void 0 ? void 0 : _dataSource$$children.length) < 2;
|
|
23
22
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -27,7 +26,7 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
|
27
26
|
}, label), noSelect ? null : /*#__PURE__*/_react.default.createElement(_consoleComponents.Icon, {
|
|
28
27
|
type: "caret-down",
|
|
29
28
|
size: "xxs"
|
|
30
|
-
}),
|
|
29
|
+
}), /*#__PURE__*/_react.default.createElement(_consoleComponents.Select, (0, _extends2.default)({
|
|
31
30
|
className: (0, _classnames.default)('condition-select', {
|
|
32
31
|
'rc-search-prefix-no-select': noSelect
|
|
33
32
|
}),
|
|
@@ -46,20 +45,6 @@ var SearchConditionSelectPrefix = function SearchConditionSelectPrefix(props) {
|
|
|
46
45
|
}, reset, {
|
|
47
46
|
autoWidth: false,
|
|
48
47
|
popupClassName: "rc-search-prefix"
|
|
49
|
-
})) : /*#__PURE__*/_react.default.createElement(_consoleComponents.CascaderSelect, (0, _extends2.default)({
|
|
50
|
-
className: (0, _classnames.default)('condition-select', {
|
|
51
|
-
'rc-search-prefix-no-select': noSelect
|
|
52
|
-
}),
|
|
53
|
-
defaultValue: defaultValue,
|
|
54
|
-
hasBorder: false,
|
|
55
|
-
disabled: noSelect,
|
|
56
|
-
autoHighlightFirstItem: false,
|
|
57
|
-
dataSource: dataSource
|
|
58
|
-
// itemRender={({ label, value }) => (<span data-value={value}>{label}</span>)}
|
|
59
|
-
}, reset, {
|
|
60
|
-
autoWidth: false,
|
|
61
|
-
popupClassName: "rc-search-prefix",
|
|
62
|
-
canOnlyCheckLeaf: true
|
|
63
48
|
})));
|
|
64
49
|
};
|
|
65
50
|
var _default = exports.default = SearchConditionSelectPrefix;
|
|
@@ -21,39 +21,17 @@ var _style = require("../style");
|
|
|
21
21
|
var _InputPrefix = _interopRequireDefault(require("./InputPrefix"));
|
|
22
22
|
var _constants = require("../constants");
|
|
23
23
|
var _message = _interopRequireDefault(require("../message"));
|
|
24
|
-
function
|
|
24
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
25
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
25
26
|
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; }
|
|
26
27
|
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) { (0, _defineProperty2.default)(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; }
|
|
27
28
|
var AutoComplete = _consoleComponents.Select.AutoComplete;
|
|
28
|
-
function formatOptionsChildren(children) {
|
|
29
|
-
if (!children) return undefined;
|
|
30
|
-
return children.map(function (o) {
|
|
31
|
-
return {
|
|
32
|
-
label: o.label,
|
|
33
|
-
value: o.dataIndex || o.value || o.label,
|
|
34
|
-
disabled: o.disabled,
|
|
35
|
-
children: formatOptionsChildren(o.children)
|
|
36
|
-
};
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
29
|
/**
|
|
41
30
|
*
|
|
42
31
|
* @param IRcSearchOptionsProps options
|
|
43
32
|
* @returns
|
|
44
33
|
*/
|
|
45
|
-
var normalizeOptions = function normalizeOptions(options
|
|
46
|
-
if (prefixSelectMode === 'cascader') {
|
|
47
|
-
return options.map(function (o) {
|
|
48
|
-
return {
|
|
49
|
-
label: o.label,
|
|
50
|
-
value: o.dataIndex || o.value || o.label,
|
|
51
|
-
disabled: o.disabled,
|
|
52
|
-
// @ts-ignore
|
|
53
|
-
children: formatOptionsChildren(o.children)
|
|
54
|
-
};
|
|
55
|
-
});
|
|
56
|
-
}
|
|
34
|
+
var normalizeOptions = function normalizeOptions(options) {
|
|
57
35
|
var optionsCopy = (0, _cloneDeep.default)(options);
|
|
58
36
|
optionsCopy.forEach(function (o) {
|
|
59
37
|
!o.groupName && (o.groupName = _message.default.defaultFilterGroupName);
|
|
@@ -67,8 +45,7 @@ var normalizeOptions = function normalizeOptions(options, prefixSelectMode) {
|
|
|
67
45
|
children: children.map(function (l) {
|
|
68
46
|
return {
|
|
69
47
|
label: l.label,
|
|
70
|
-
value: l.dataIndex
|
|
71
|
-
disabled: l.disabled
|
|
48
|
+
value: l.dataIndex
|
|
72
49
|
};
|
|
73
50
|
})
|
|
74
51
|
};
|
|
@@ -93,22 +70,9 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
|
|
|
93
70
|
children: (0, _toConsumableArray2.default)(list)
|
|
94
71
|
}];
|
|
95
72
|
};
|
|
96
|
-
var _flatOption = function flatOption() {
|
|
97
|
-
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
98
|
-
var flattened = [];
|
|
99
|
-
opts.forEach(function (item) {
|
|
100
|
-
if (item.children) {
|
|
101
|
-
flattened.push.apply(flattened, (0, _toConsumableArray2.default)(_flatOption(item.children)));
|
|
102
|
-
} else {
|
|
103
|
-
flattened.push(item);
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
return flattened;
|
|
107
|
-
};
|
|
108
73
|
var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
|
|
109
|
-
var
|
|
110
|
-
|
|
111
|
-
return getDataIndex(o) === dataIndex;
|
|
74
|
+
var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
|
|
75
|
+
return o.dataIndex === dataIndex;
|
|
112
76
|
});
|
|
113
77
|
var valueLabel = value;
|
|
114
78
|
if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
|
|
@@ -143,9 +107,6 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
|
|
|
143
107
|
}
|
|
144
108
|
}, highlightValue), endValue);
|
|
145
109
|
};
|
|
146
|
-
var getDataIndex = function getDataIndex(option) {
|
|
147
|
-
return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
|
|
148
|
-
};
|
|
149
110
|
var ComplexSearch = function ComplexSearch(props) {
|
|
150
111
|
var _props$options = props.options,
|
|
151
112
|
options = _props$options === void 0 ? [] : _props$options,
|
|
@@ -158,12 +119,9 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
158
119
|
_props$suggestions = props.suggestions,
|
|
159
120
|
suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
|
|
160
121
|
_props$prefix = props.prefix,
|
|
161
|
-
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix
|
|
162
|
-
_props$prefixSelectMo = props.prefixSelectMode,
|
|
163
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
164
|
-
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
122
|
+
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
|
|
165
123
|
var _useState = (0, _react.useState)(options.find(function (o) {
|
|
166
|
-
return
|
|
124
|
+
return o.dataIndex === defaultSelectedDataIndex;
|
|
167
125
|
})),
|
|
168
126
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
169
127
|
selectedFilterType = _useState2[0],
|
|
@@ -189,7 +147,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
189
147
|
// 计算视图,根据内部状态和输入的 props 决定一些值
|
|
190
148
|
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(_constants.SEARCH_FILTER_FIELD);
|
|
191
149
|
var defaultFilter = options.find(function (t) {
|
|
192
|
-
return
|
|
150
|
+
return t.dataIndex === defaultDataIndex;
|
|
193
151
|
});
|
|
194
152
|
var highlightItem = function highlightItem(item, searchKey) {
|
|
195
153
|
var label = item.label;
|
|
@@ -206,8 +164,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
206
164
|
*/
|
|
207
165
|
var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
|
|
208
166
|
var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
209
|
-
setSelectedFilterType(
|
|
210
|
-
return
|
|
167
|
+
setSelectedFilterType(options.find(function (o) {
|
|
168
|
+
return o.dataIndex === type;
|
|
211
169
|
}));
|
|
212
170
|
resetValue && reset();
|
|
213
171
|
};
|
|
@@ -215,13 +173,13 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
215
173
|
/**
|
|
216
174
|
* 处理当筛选类型没选中,用户输入筛选类型,或者是做默认搜索的情况
|
|
217
175
|
*/
|
|
218
|
-
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType,
|
|
219
|
-
var isFuzzySearch =
|
|
176
|
+
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
|
|
177
|
+
var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD);
|
|
220
178
|
|
|
221
179
|
// 如果是模糊搜索,则直接处理
|
|
222
180
|
if (isFuzzySearch) {
|
|
223
181
|
if (actionType !== 'change') {
|
|
224
|
-
handleSearch(
|
|
182
|
+
handleSearch(option.dataIndex);
|
|
225
183
|
} else {
|
|
226
184
|
onSuggest && onSuggest(value, defaultDataIndex || '');
|
|
227
185
|
}
|
|
@@ -247,7 +205,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
247
205
|
onSearch(getValue(_constants.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(_constants.SEARCH_FILTER_FIELD), options));
|
|
248
206
|
}
|
|
249
207
|
if (selectedFilterType) {
|
|
250
|
-
onSearch(value,
|
|
208
|
+
onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
|
|
251
209
|
}
|
|
252
210
|
}
|
|
253
211
|
reset();
|
|
@@ -377,28 +335,15 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
377
335
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
378
336
|
className: (0, _classnames.default)('condition')
|
|
379
337
|
}, selectedFilterType ? /*#__PURE__*/_react.default.createElement(_InputPrefix.default, {
|
|
380
|
-
|
|
381
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
338
|
+
dataSource: normalizeOptions(options),
|
|
382
339
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
383
|
-
defaultValue:
|
|
340
|
+
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
384
341
|
onChange: function onChange(value) {
|
|
385
342
|
handlerFilterTypeChange(value);
|
|
386
|
-
}
|
|
387
|
-
itemRender: prefixSelectItemRender
|
|
343
|
+
}
|
|
388
344
|
}) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
389
345
|
className: (0, _classnames.default)('forms')
|
|
390
|
-
}, !selectedFilterType
|
|
391
|
-
className: (0, _classnames.default)('main-input', 'multi'),
|
|
392
|
-
hasBorder: false,
|
|
393
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
394
|
-
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
395
|
-
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
396
|
-
}) : ''),
|
|
397
|
-
onChange: function onChange(value) {
|
|
398
|
-
handlerFilterTypeChange(value);
|
|
399
|
-
},
|
|
400
|
-
itemRender: prefixSelectItemRender
|
|
401
|
-
}) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
|
|
346
|
+
}, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
|
|
402
347
|
props: {
|
|
403
348
|
// @ts-ignore
|
|
404
349
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -409,7 +354,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
409
354
|
autoHighlightFirstItem: false
|
|
410
355
|
// @ts-ignore
|
|
411
356
|
,
|
|
412
|
-
itemRender:
|
|
357
|
+
itemRender: highlightItem,
|
|
413
358
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
414
359
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
415
360
|
}) : ''),
|
|
@@ -419,7 +364,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
419
364
|
dataSource:
|
|
420
365
|
// 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ,并且用户在这个输入框里面已经输入了值
|
|
421
366
|
// 则表示需要模糊搜索,调用 handleSuggest
|
|
422
|
-
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options
|
|
367
|
+
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
|
|
423
368
|
popupStyle: {
|
|
424
369
|
width: 'auto'
|
|
425
370
|
},
|
package/lib/message.js
CHANGED
|
@@ -49,7 +49,7 @@ var messages = {
|
|
|
49
49
|
clearFilter: 'フィルタリング条件のクリア'
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
|
-
var lang = isSSR ? 'zh' : _jsCookie.default.get('aliyun_lang') || 'zh';
|
|
52
|
+
var lang = isSSR ? 'zh' : _jsCookie.default.get('aliyun_lang') || _jsCookie.default.get('aspara_lang') || 'zh';
|
|
53
53
|
if (!Object.keys(messages).includes(lang)) {
|
|
54
54
|
lang = 'zh';
|
|
55
55
|
}
|
package/lib/search.js
CHANGED
|
@@ -16,6 +16,8 @@ var SearchWrap = _styledComponents.default.div.withConfig({
|
|
|
16
16
|
})(["height:32px;width:400px;display:inline-block;vertical-align:top;"]);
|
|
17
17
|
var Search = exports.Search = function Search(props) {
|
|
18
18
|
var className = props.className,
|
|
19
|
+
_props$simple = props.simple,
|
|
20
|
+
simple = _props$simple === void 0 ? false : _props$simple,
|
|
19
21
|
style = props.style;
|
|
20
22
|
var windThemeClass = (0, _useCssVar.useWindTheme)();
|
|
21
23
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(SearchWrap, {
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
/**
|
|
3
2
|
* 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化,因此你可以使用接口来定义Props,从而能便捷地将Props的信息通过文档透出。
|
|
4
3
|
*
|
|
@@ -64,14 +63,4 @@ export interface IRcSearchProps {
|
|
|
64
63
|
* 样式 class 前缀
|
|
65
64
|
*/
|
|
66
65
|
prefix?: string;
|
|
67
|
-
/**
|
|
68
|
-
* 前缀选择器类型
|
|
69
|
-
*/
|
|
70
|
-
prefixSelectMode?: 'select' | 'cascader';
|
|
71
|
-
/**
|
|
72
|
-
* 前缀选择器 item 渲染
|
|
73
|
-
* @param item
|
|
74
|
-
* @returns
|
|
75
|
-
*/
|
|
76
|
-
prefixSelectItemRender?: (item: any) => React.ReactNode;
|
|
77
66
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alicloud/console-components-search",
|
|
3
|
-
"version": "0.2.37-
|
|
3
|
+
"version": "0.2.37-beta.0",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"types": "lib/index.d.ts",
|
|
6
6
|
"license": "MIT",
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
"@alicloud/console-toolkit-preset-component": "^1.2.8",
|
|
10
10
|
"@alicloud/console-toolkit-preset-docs": "^1.0.34",
|
|
11
11
|
"@alifd/next": "^1.27.29",
|
|
12
|
-
"@babel/core": "^7.28.0",
|
|
13
12
|
"@types/classnames": "^2.3.4",
|
|
14
13
|
"@types/js-cookie": "^3.0.1",
|
|
15
14
|
"@types/react": "^17.0.0",
|
|
@@ -18,8 +17,6 @@
|
|
|
18
17
|
"prettier": "^2.2.1",
|
|
19
18
|
"react": "^17.0.1",
|
|
20
19
|
"react-dom": "^17.0.1",
|
|
21
|
-
"react-router": "^5.0.0",
|
|
22
|
-
"react-router-dom": "^5.0.0",
|
|
23
20
|
"serve": "^11.3.2",
|
|
24
21
|
"styled-components": "^5.2.1",
|
|
25
22
|
"typescript": "^4.1.3"
|