@alicloud/console-components-search 0.2.37-alpha.6 → 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 -202
- package/dist/index.js +1641 -1662
- package/es/ComplexSearch/InputPrefix.js +3 -18
- package/es/ComplexSearch/index.js +19 -73
- package/es/message.js +1 -1
- package/es/search.js +2 -0
- package/lib/ComplexSearch/InputPrefix.js +2 -17
- package/lib/ComplexSearch/index.js +20 -73
- 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
|
};
|
|
@@ -86,7 +62,7 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
|
|
|
86
62
|
};
|
|
87
63
|
var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
|
|
88
64
|
var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
|
|
89
|
-
return
|
|
65
|
+
return o.dataIndex === dataIndex;
|
|
90
66
|
});
|
|
91
67
|
var valueLabel = value;
|
|
92
68
|
if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
|
|
@@ -121,9 +97,6 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
|
|
|
121
97
|
}
|
|
122
98
|
}, highlightValue), endValue);
|
|
123
99
|
};
|
|
124
|
-
var getDataIndex = function getDataIndex(option) {
|
|
125
|
-
return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
|
|
126
|
-
};
|
|
127
100
|
var ComplexSearch = function ComplexSearch(props) {
|
|
128
101
|
var _props$options = props.options,
|
|
129
102
|
options = _props$options === void 0 ? [] : _props$options,
|
|
@@ -136,12 +109,9 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
136
109
|
_props$suggestions = props.suggestions,
|
|
137
110
|
suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
|
|
138
111
|
_props$prefix = props.prefix,
|
|
139
|
-
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix
|
|
140
|
-
_props$prefixSelectMo = props.prefixSelectMode,
|
|
141
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
142
|
-
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
112
|
+
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
|
|
143
113
|
var _useState = useState(options.find(function (o) {
|
|
144
|
-
return
|
|
114
|
+
return o.dataIndex === defaultSelectedDataIndex;
|
|
145
115
|
})),
|
|
146
116
|
_useState2 = _slicedToArray(_useState, 2),
|
|
147
117
|
selectedFilterType = _useState2[0],
|
|
@@ -167,7 +137,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
167
137
|
// 计算视图,根据内部状态和输入的 props 决定一些值
|
|
168
138
|
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(SEARCH_FILTER_FIELD);
|
|
169
139
|
var defaultFilter = options.find(function (t) {
|
|
170
|
-
return
|
|
140
|
+
return t.dataIndex === defaultDataIndex;
|
|
171
141
|
});
|
|
172
142
|
var highlightItem = function highlightItem(item, searchKey) {
|
|
173
143
|
var label = item.label;
|
|
@@ -184,19 +154,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
184
154
|
*/
|
|
185
155
|
var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
|
|
186
156
|
var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
opts.forEach(function (item) {
|
|
190
|
-
if (item.children) {
|
|
191
|
-
flattened.push.apply(flattened, _toConsumableArray(_flatOption(item.children)));
|
|
192
|
-
} else {
|
|
193
|
-
flattened.push(item);
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
|
-
return flattened;
|
|
197
|
-
};
|
|
198
|
-
setSelectedFilterType(_flatOption(options).find(function (o) {
|
|
199
|
-
return getDataIndex(o) === type;
|
|
157
|
+
setSelectedFilterType(options.find(function (o) {
|
|
158
|
+
return o.dataIndex === type;
|
|
200
159
|
}));
|
|
201
160
|
resetValue && reset();
|
|
202
161
|
};
|
|
@@ -204,13 +163,13 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
204
163
|
/**
|
|
205
164
|
* 处理当筛选类型没选中,用户输入筛选类型,或者是做默认搜索的情况
|
|
206
165
|
*/
|
|
207
|
-
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType,
|
|
208
|
-
var isFuzzySearch =
|
|
166
|
+
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
|
|
167
|
+
var isFuzzySearch = isFuzzy && getValue(SEARCH_FILTER_FIELD);
|
|
209
168
|
|
|
210
169
|
// 如果是模糊搜索,则直接处理
|
|
211
170
|
if (isFuzzySearch) {
|
|
212
171
|
if (actionType !== 'change') {
|
|
213
|
-
handleSearch(
|
|
172
|
+
handleSearch(option.dataIndex);
|
|
214
173
|
} else {
|
|
215
174
|
onSuggest && onSuggest(value, defaultDataIndex || '');
|
|
216
175
|
}
|
|
@@ -236,7 +195,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
236
195
|
onSearch(getValue(SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(SEARCH_FILTER_FIELD), options));
|
|
237
196
|
}
|
|
238
197
|
if (selectedFilterType) {
|
|
239
|
-
onSearch(value,
|
|
198
|
+
onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
|
|
240
199
|
}
|
|
241
200
|
}
|
|
242
201
|
reset();
|
|
@@ -366,28 +325,15 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
366
325
|
}, /*#__PURE__*/React.createElement("div", {
|
|
367
326
|
className: classNames('condition')
|
|
368
327
|
}, selectedFilterType ? /*#__PURE__*/React.createElement(SearchConditionSelectPrefix, {
|
|
369
|
-
|
|
370
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
328
|
+
dataSource: normalizeOptions(options),
|
|
371
329
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
372
|
-
defaultValue:
|
|
330
|
+
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
373
331
|
onChange: function onChange(value) {
|
|
374
332
|
handlerFilterTypeChange(value);
|
|
375
|
-
}
|
|
376
|
-
itemRender: prefixSelectItemRender
|
|
333
|
+
}
|
|
377
334
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
378
335
|
className: classNames('forms')
|
|
379
|
-
}, !selectedFilterType
|
|
380
|
-
className: classNames('main-input', 'multi'),
|
|
381
|
-
hasBorder: false,
|
|
382
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
383
|
-
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
384
|
-
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
385
|
-
}) : ''),
|
|
386
|
-
onChange: function onChange(value) {
|
|
387
|
-
handlerFilterTypeChange(value);
|
|
388
|
-
},
|
|
389
|
-
itemRender: prefixSelectItemRender
|
|
390
|
-
}) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
336
|
+
}, !selectedFilterType ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
391
337
|
props: {
|
|
392
338
|
// @ts-ignore
|
|
393
339
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -398,7 +344,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
398
344
|
autoHighlightFirstItem: false
|
|
399
345
|
// @ts-ignore
|
|
400
346
|
,
|
|
401
|
-
itemRender:
|
|
347
|
+
itemRender: highlightItem,
|
|
402
348
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
403
349
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
404
350
|
}) : ''),
|
|
@@ -408,7 +354,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
408
354
|
dataSource:
|
|
409
355
|
// 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ,并且用户在这个输入框里面已经输入了值
|
|
410
356
|
// 则表示需要模糊搜索,调用 handleSuggest
|
|
411
|
-
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options
|
|
357
|
+
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
|
|
412
358
|
popupStyle: {
|
|
413
359
|
width: 'auto'
|
|
414
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
|
};
|
|
@@ -95,7 +72,7 @@ var normalizeSelectDataSource = function normalizeSelectDataSource(title, list)
|
|
|
95
72
|
};
|
|
96
73
|
var normalizeSearchOptions = function normalizeSearchOptions(dataIndex, value, options) {
|
|
97
74
|
var opt = options === null || options === void 0 ? void 0 : options.find(function (o) {
|
|
98
|
-
return
|
|
75
|
+
return o.dataIndex === dataIndex;
|
|
99
76
|
});
|
|
100
77
|
var valueLabel = value;
|
|
101
78
|
if ((opt === null || opt === void 0 ? void 0 : opt.template) === 'select') {
|
|
@@ -130,9 +107,6 @@ var highlightKeyword = function highlightKeyword(value, keywords) {
|
|
|
130
107
|
}
|
|
131
108
|
}, highlightValue), endValue);
|
|
132
109
|
};
|
|
133
|
-
var getDataIndex = function getDataIndex(option) {
|
|
134
|
-
return (option === null || option === void 0 ? void 0 : option.dataIndex) || (option === null || option === void 0 ? void 0 : option.value);
|
|
135
|
-
};
|
|
136
110
|
var ComplexSearch = function ComplexSearch(props) {
|
|
137
111
|
var _props$options = props.options,
|
|
138
112
|
options = _props$options === void 0 ? [] : _props$options,
|
|
@@ -145,12 +119,9 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
145
119
|
_props$suggestions = props.suggestions,
|
|
146
120
|
suggestions = _props$suggestions === void 0 ? [] : _props$suggestions,
|
|
147
121
|
_props$prefix = props.prefix,
|
|
148
|
-
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix
|
|
149
|
-
_props$prefixSelectMo = props.prefixSelectMode,
|
|
150
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
151
|
-
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
122
|
+
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix;
|
|
152
123
|
var _useState = (0, _react.useState)(options.find(function (o) {
|
|
153
|
-
return
|
|
124
|
+
return o.dataIndex === defaultSelectedDataIndex;
|
|
154
125
|
})),
|
|
155
126
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
156
127
|
selectedFilterType = _useState2[0],
|
|
@@ -176,7 +147,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
176
147
|
// 计算视图,根据内部状态和输入的 props 决定一些值
|
|
177
148
|
var isFuzzy = (!!defaultDataIndex || fuzzy) && !!getValue(_constants.SEARCH_FILTER_FIELD);
|
|
178
149
|
var defaultFilter = options.find(function (t) {
|
|
179
|
-
return
|
|
150
|
+
return t.dataIndex === defaultDataIndex;
|
|
180
151
|
});
|
|
181
152
|
var highlightItem = function highlightItem(item, searchKey) {
|
|
182
153
|
var label = item.label;
|
|
@@ -193,19 +164,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
193
164
|
*/
|
|
194
165
|
var handlerFilterTypeChange = function handlerFilterTypeChange(type) {
|
|
195
166
|
var resetValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
opts.forEach(function (item) {
|
|
199
|
-
if (item.children) {
|
|
200
|
-
flattened.push.apply(flattened, (0, _toConsumableArray2.default)(_flatOption(item.children)));
|
|
201
|
-
} else {
|
|
202
|
-
flattened.push(item);
|
|
203
|
-
}
|
|
204
|
-
});
|
|
205
|
-
return flattened;
|
|
206
|
-
};
|
|
207
|
-
setSelectedFilterType(_flatOption(options).find(function (o) {
|
|
208
|
-
return getDataIndex(o) === type;
|
|
167
|
+
setSelectedFilterType(options.find(function (o) {
|
|
168
|
+
return o.dataIndex === type;
|
|
209
169
|
}));
|
|
210
170
|
resetValue && reset();
|
|
211
171
|
};
|
|
@@ -213,13 +173,13 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
213
173
|
/**
|
|
214
174
|
* 处理当筛选类型没选中,用户输入筛选类型,或者是做默认搜索的情况
|
|
215
175
|
*/
|
|
216
|
-
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType,
|
|
217
|
-
var isFuzzySearch =
|
|
176
|
+
var handlerFilterTypeInput = function handlerFilterTypeInput(value, actionType, isFuzzy, option) {
|
|
177
|
+
var isFuzzySearch = isFuzzy && getValue(_constants.SEARCH_FILTER_FIELD);
|
|
218
178
|
|
|
219
179
|
// 如果是模糊搜索,则直接处理
|
|
220
180
|
if (isFuzzySearch) {
|
|
221
181
|
if (actionType !== 'change') {
|
|
222
|
-
handleSearch(
|
|
182
|
+
handleSearch(option.dataIndex);
|
|
223
183
|
} else {
|
|
224
184
|
onSuggest && onSuggest(value, defaultDataIndex || '');
|
|
225
185
|
}
|
|
@@ -245,7 +205,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
245
205
|
onSearch(getValue(_constants.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(_constants.SEARCH_FILTER_FIELD), options));
|
|
246
206
|
}
|
|
247
207
|
if (selectedFilterType) {
|
|
248
|
-
onSearch(value,
|
|
208
|
+
onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
|
|
249
209
|
}
|
|
250
210
|
}
|
|
251
211
|
reset();
|
|
@@ -375,28 +335,15 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
375
335
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
376
336
|
className: (0, _classnames.default)('condition')
|
|
377
337
|
}, selectedFilterType ? /*#__PURE__*/_react.default.createElement(_InputPrefix.default, {
|
|
378
|
-
|
|
379
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
338
|
+
dataSource: normalizeOptions(options),
|
|
380
339
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
381
|
-
defaultValue:
|
|
340
|
+
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
382
341
|
onChange: function onChange(value) {
|
|
383
342
|
handlerFilterTypeChange(value);
|
|
384
|
-
}
|
|
385
|
-
itemRender: prefixSelectItemRender
|
|
343
|
+
}
|
|
386
344
|
}) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
387
345
|
className: (0, _classnames.default)('forms')
|
|
388
|
-
}, !selectedFilterType
|
|
389
|
-
className: (0, _classnames.default)('main-input', 'multi'),
|
|
390
|
-
hasBorder: false,
|
|
391
|
-
dataSource: normalizeOptions(options, prefixSelectMode),
|
|
392
|
-
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
393
|
-
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
394
|
-
}) : ''),
|
|
395
|
-
onChange: function onChange(value) {
|
|
396
|
-
handlerFilterTypeChange(value);
|
|
397
|
-
},
|
|
398
|
-
itemRender: prefixSelectItemRender
|
|
399
|
-
}) : 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, {
|
|
400
347
|
props: {
|
|
401
348
|
// @ts-ignore
|
|
402
349
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -407,7 +354,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
407
354
|
autoHighlightFirstItem: false
|
|
408
355
|
// @ts-ignore
|
|
409
356
|
,
|
|
410
|
-
itemRender:
|
|
357
|
+
itemRender: highlightItem,
|
|
411
358
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
412
359
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
413
360
|
}) : ''),
|
|
@@ -417,7 +364,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
417
364
|
dataSource:
|
|
418
365
|
// 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ,并且用户在这个输入框里面已经输入了值
|
|
419
366
|
// 则表示需要模糊搜索,调用 handleSuggest
|
|
420
|
-
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options
|
|
367
|
+
isFuzzy ? normalizeSuggestion(suggestions) : normalizeOptions(options),
|
|
421
368
|
popupStyle: {
|
|
422
369
|
width: 'auto'
|
|
423
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"
|