@alicloud/console-components-search 0.2.37-alpha.0 → 0.2.37-alpha.2
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/demos/demo1.demo.tsx
CHANGED
|
@@ -110,7 +110,7 @@ const Demo1: React.FC<{}> = (props) => {
|
|
|
110
110
|
/>
|
|
111
111
|
<Search
|
|
112
112
|
defaultDataIndex="name"
|
|
113
|
-
defaultSelectedDataIndex="name"
|
|
113
|
+
// defaultSelectedDataIndex="name"
|
|
114
114
|
options={options}
|
|
115
115
|
prefixSelectMode="cascader"
|
|
116
116
|
onSearch={(value, dataIndex, extra) => {
|
package/dist/index.js
CHANGED
|
@@ -90223,6 +90223,7 @@ var normalizeOptions = function (options) {
|
|
|
90223
90223
|
var groupName = _a[0], children = _a[1];
|
|
90224
90224
|
return {
|
|
90225
90225
|
label: groupName,
|
|
90226
|
+
value: groupName,
|
|
90226
90227
|
children: children.map(function (l) {
|
|
90227
90228
|
return {
|
|
90228
90229
|
label: l.label,
|
|
@@ -90281,7 +90282,7 @@ var highlightKeyword = function (value, keywords) {
|
|
|
90281
90282
|
endValue));
|
|
90282
90283
|
};
|
|
90283
90284
|
var ComplexSearch = function (props) {
|
|
90284
|
-
var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c, _d = props.prefixSelectMode, prefixSelectMode = _d === void 0 ? 'select' : _d;
|
|
90285
|
+
var _a = props.options, options = _a === void 0 ? [] : _a, fuzzy = props.fuzzy, defaultDataIndex = props.defaultDataIndex, defaultSelectedDataIndex = props.defaultSelectedDataIndex, placeholder = props.placeholder, onSearch = props.onSearch, onSuggest = props.onSuggest, _b = props.suggestions, suggestions = _b === void 0 ? [] : _b, _c = props.prefix, prefix = _c === void 0 ? 'next-' : _c, _d = props.prefixSelectMode, prefixSelectMode = _d === void 0 ? 'select' : _d, prefixSelectItemRender = props.prefixSelectItemRender;
|
|
90285
90286
|
var _e = (0, react_1.useState)(options.find(function (o) { return o.dataIndex === defaultSelectedDataIndex; })), selectedFilterType = _e[0], setSelectedFilterType = _e[1];
|
|
90286
90287
|
var _f = (0, react_1.useState)(false), focused = _f[0], setFocused = _f[1];
|
|
90287
90288
|
var autoRef = (0, react_1.useRef)(null);
|
|
@@ -90427,11 +90428,18 @@ var ComplexSearch = function (props) {
|
|
|
90427
90428
|
focus: focused,
|
|
90428
90429
|
}) },
|
|
90429
90430
|
react_1.default.createElement("div", { className: (0, classnames_1.default)('condition') }, selectedFilterType ? (react_1.default.createElement(InputPrefix_1.default, { type: prefixSelectMode, dataSource: normalizeOptions(options), label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label, defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex, onChange: function (value) {
|
|
90430
|
-
console.log(value);
|
|
90431
90431
|
handlerFilterTypeChange(value);
|
|
90432
|
-
} })) : null),
|
|
90432
|
+
}, itemRender: prefixSelectItemRender })) : null),
|
|
90433
90433
|
react_1.default.createElement("div", { className: (0, classnames_1.default)('forms') },
|
|
90434
|
-
!selectedFilterType ?
|
|
90434
|
+
!selectedFilterType && prefixSelectMode === 'cascader' ? react_1.default.createElement(console_components_1.CascaderSelect, { className: (0, classnames_1.default)('main-input', 'multi'), hasBorder: false, dataSource: normalizeOptions(options), placeholder: placeholder ||
|
|
90435
|
+
((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
|
|
90436
|
+
? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
|
|
90437
|
+
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,
|
|
90438
|
+
})
|
|
90439
|
+
: ''), onChange: function (value) {
|
|
90440
|
+
handlerFilterTypeChange(value);
|
|
90441
|
+
}, itemRender: prefixSelectItemRender }) : null,
|
|
90442
|
+
!selectedFilterType && prefixSelectMode === 'select' ? (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
|
|
90435
90443
|
props: {
|
|
90436
90444
|
// @ts-ignore
|
|
90437
90445
|
onChange: function (value, actionType, option) {
|
|
@@ -90440,7 +90448,7 @@ var ComplexSearch = function (props) {
|
|
|
90440
90448
|
},
|
|
90441
90449
|
}), { autoHighlightFirstItem: false,
|
|
90442
90450
|
// @ts-ignore
|
|
90443
|
-
itemRender: highlightItem, placeholder: placeholder ||
|
|
90451
|
+
itemRender: prefixSelectItemRender || highlightItem, placeholder: placeholder ||
|
|
90444
90452
|
((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label)
|
|
90445
90453
|
? (0, lodash_1.template)(message_1.default.defaultPlaceHolder)({
|
|
90446
90454
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label,
|
|
@@ -9,7 +9,7 @@ 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 } from '@alicloud/console-components';
|
|
12
|
+
import { Button, Icon, Select, ConfigProvider, Field, Checkbox, CascaderSelect } from '@alicloud/console-components';
|
|
13
13
|
import { isPlainObject, template } from 'lodash';
|
|
14
14
|
import { SearchWarp, MultiBtnWarp } from '../style';
|
|
15
15
|
import SearchConditionSelectPrefix from './InputPrefix';
|
|
@@ -32,6 +32,7 @@ var normalizeOptions = function normalizeOptions(options) {
|
|
|
32
32
|
children = _ref2[1];
|
|
33
33
|
return {
|
|
34
34
|
label: groupName,
|
|
35
|
+
value: groupName,
|
|
35
36
|
children: children.map(function (l) {
|
|
36
37
|
return {
|
|
37
38
|
label: l.label,
|
|
@@ -111,7 +112,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
111
112
|
_props$prefix = props.prefix,
|
|
112
113
|
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
|
|
113
114
|
_props$prefixSelectMo = props.prefixSelectMode,
|
|
114
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo
|
|
115
|
+
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
116
|
+
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
115
117
|
var _useState = useState(options.find(function (o) {
|
|
116
118
|
return o.dataIndex === defaultSelectedDataIndex;
|
|
117
119
|
})),
|
|
@@ -332,12 +334,23 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
332
334
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
333
335
|
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
334
336
|
onChange: function onChange(value) {
|
|
335
|
-
console.log(value);
|
|
336
337
|
handlerFilterTypeChange(value);
|
|
337
|
-
}
|
|
338
|
+
},
|
|
339
|
+
itemRender: prefixSelectItemRender
|
|
338
340
|
}) : null), /*#__PURE__*/React.createElement("div", {
|
|
339
341
|
className: classNames('forms')
|
|
340
|
-
}, !selectedFilterType ? /*#__PURE__*/React.createElement(
|
|
342
|
+
}, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/React.createElement(CascaderSelect, {
|
|
343
|
+
className: classNames('main-input', 'multi'),
|
|
344
|
+
hasBorder: false,
|
|
345
|
+
dataSource: normalizeOptions(options),
|
|
346
|
+
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
347
|
+
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
348
|
+
}) : ''),
|
|
349
|
+
onChange: function onChange(value) {
|
|
350
|
+
handlerFilterTypeChange(value);
|
|
351
|
+
},
|
|
352
|
+
itemRender: prefixSelectItemRender
|
|
353
|
+
}) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/React.createElement(AutoComplete, _extends({}, init(SEARCH_FILTER_FIELD, {
|
|
341
354
|
props: {
|
|
342
355
|
// @ts-ignore
|
|
343
356
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -348,7 +361,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
348
361
|
autoHighlightFirstItem: false
|
|
349
362
|
// @ts-ignore
|
|
350
363
|
,
|
|
351
|
-
itemRender: highlightItem,
|
|
364
|
+
itemRender: prefixSelectItemRender || highlightItem,
|
|
352
365
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? template(message.defaultPlaceHolder)({
|
|
353
366
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
354
367
|
}) : ''),
|
|
@@ -41,6 +41,7 @@ var normalizeOptions = function normalizeOptions(options) {
|
|
|
41
41
|
children = _ref2[1];
|
|
42
42
|
return {
|
|
43
43
|
label: groupName,
|
|
44
|
+
value: groupName,
|
|
44
45
|
children: children.map(function (l) {
|
|
45
46
|
return {
|
|
46
47
|
label: l.label,
|
|
@@ -120,7 +121,8 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
120
121
|
_props$prefix = props.prefix,
|
|
121
122
|
prefix = _props$prefix === void 0 ? 'next-' : _props$prefix,
|
|
122
123
|
_props$prefixSelectMo = props.prefixSelectMode,
|
|
123
|
-
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo
|
|
124
|
+
prefixSelectMode = _props$prefixSelectMo === void 0 ? 'select' : _props$prefixSelectMo,
|
|
125
|
+
prefixSelectItemRender = props.prefixSelectItemRender;
|
|
124
126
|
var _useState = (0, _react.useState)(options.find(function (o) {
|
|
125
127
|
return o.dataIndex === defaultSelectedDataIndex;
|
|
126
128
|
})),
|
|
@@ -341,12 +343,23 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
341
343
|
label: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label,
|
|
342
344
|
defaultValue: selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.dataIndex,
|
|
343
345
|
onChange: function onChange(value) {
|
|
344
|
-
console.log(value);
|
|
345
346
|
handlerFilterTypeChange(value);
|
|
346
|
-
}
|
|
347
|
+
},
|
|
348
|
+
itemRender: prefixSelectItemRender
|
|
347
349
|
}) : null), /*#__PURE__*/_react.default.createElement("div", {
|
|
348
350
|
className: (0, _classnames.default)('forms')
|
|
349
|
-
}, !selectedFilterType ? /*#__PURE__*/_react.default.createElement(
|
|
351
|
+
}, !selectedFilterType && prefixSelectMode === 'cascader' ? /*#__PURE__*/_react.default.createElement(_consoleComponents.CascaderSelect, {
|
|
352
|
+
className: (0, _classnames.default)('main-input', 'multi'),
|
|
353
|
+
hasBorder: false,
|
|
354
|
+
dataSource: normalizeOptions(options),
|
|
355
|
+
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
356
|
+
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
357
|
+
}) : ''),
|
|
358
|
+
onChange: function onChange(value) {
|
|
359
|
+
handlerFilterTypeChange(value);
|
|
360
|
+
},
|
|
361
|
+
itemRender: prefixSelectItemRender
|
|
362
|
+
}) : null, !selectedFilterType && prefixSelectMode === 'select' ? /*#__PURE__*/_react.default.createElement(AutoComplete, (0, _extends2.default)({}, init(_constants.SEARCH_FILTER_FIELD, {
|
|
350
363
|
props: {
|
|
351
364
|
// @ts-ignore
|
|
352
365
|
onChange: function onChange(value, actionType, option) {
|
|
@@ -357,7 +370,7 @@ var ComplexSearch = function ComplexSearch(props) {
|
|
|
357
370
|
autoHighlightFirstItem: false
|
|
358
371
|
// @ts-ignore
|
|
359
372
|
,
|
|
360
|
-
itemRender: highlightItem,
|
|
373
|
+
itemRender: prefixSelectItemRender || highlightItem,
|
|
361
374
|
placeholder: placeholder || (defaultFilter !== null && defaultFilter !== void 0 && defaultFilter.label ? (0, _lodash.template)(_message.default.defaultPlaceHolder)({
|
|
362
375
|
value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label
|
|
363
376
|
}) : ''),
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
/**
|
|
2
3
|
* 这是IRcSearchProps的说明。breezr-docs支持从源码中提取接口信息并文档化,因此你可以使用接口来定义Props,从而能便捷地将Props的信息通过文档透出。
|
|
3
4
|
*
|
|
@@ -67,4 +68,10 @@ export interface IRcSearchProps {
|
|
|
67
68
|
* 前缀选择器类型
|
|
68
69
|
*/
|
|
69
70
|
prefixSelectMode?: 'select' | 'cascader';
|
|
71
|
+
/**
|
|
72
|
+
* 前缀选择器 item 渲染
|
|
73
|
+
* @param item
|
|
74
|
+
* @returns
|
|
75
|
+
*/
|
|
76
|
+
prefixSelectItemRender?: (item: any) => React.ReactNode;
|
|
70
77
|
}
|