@alicloud/console-components-search 0.2.19 → 0.2.22
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 +3 -1
- package/demos/demo1.demo.tsx +18 -29
- package/demos/fuzzy.demo.tsx +97 -0
- package/dist/index.css +18 -8
- package/dist/index.js +59 -37
- package/doc-dist/10.js +1 -1
- package/doc-dist/11.js +1 -1
- package/doc-dist/12.js +1 -1
- package/doc-dist/13.js +1 -1
- package/doc-dist/14.js +1 -1
- package/doc-dist/15.js +1 -1
- package/doc-dist/16.js +6 -0
- package/doc-dist/9.js +1 -1
- package/doc-dist/deps/main.css +1 -1
- package/doc-dist/deps/main.js +7 -7
- package/doc-dist/deps/main.os.css +1 -1
- package/doc-dist/index.js +1 -1
- package/doc-dist/log-deps-build.log +3 -3
- package/es/ComplexSearch/InputPrefix.js +16 -7
- package/es/ComplexSearch/index.js +56 -17
- package/es/searchTagList/PureTag.js +3 -3
- package/es/searchTagList/index.js +4 -4
- package/es/style.js +3 -3
- package/lib/ComplexSearch/InputPrefix.js +16 -7
- package/lib/ComplexSearch/index.js +55 -16
- package/lib/searchTagList/PureTag.js +3 -3
- package/lib/searchTagList/index.js +4 -4
- package/lib/style.js +3 -3
- package/lib/types/IRcSearchProps.type.d.ts +5 -1
- package/package.json +1 -1
package/demos/demo1.demo.tsx
CHANGED
|
@@ -59,34 +59,6 @@ let options2 = [
|
|
|
59
59
|
placeholder: '按实例名称搜索',
|
|
60
60
|
dataSource: []
|
|
61
61
|
},
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
label: '网络类型',
|
|
65
|
-
dataIndex: 'type',
|
|
66
|
-
template: 'select',
|
|
67
|
-
templateProps: {
|
|
68
|
-
placeholder: '请选择网络类型',
|
|
69
|
-
dataSource: [
|
|
70
|
-
{label: 'A', value: 'a'},
|
|
71
|
-
{label: 'B', value: 'b'},
|
|
72
|
-
{label: 'C', value: 'c'},
|
|
73
|
-
{label: 'D', value: 'd'},
|
|
74
|
-
]
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
{
|
|
78
|
-
label: '付费类型',
|
|
79
|
-
dataIndex: 'pay',
|
|
80
|
-
template: 'multiple',
|
|
81
|
-
templateProps: {
|
|
82
|
-
placeholder: '请选择付费类型',
|
|
83
|
-
dataSource: [
|
|
84
|
-
{label: 'A', value: 'a'},
|
|
85
|
-
{label: 'B', value: 'b'},
|
|
86
|
-
{label: 'C', value: 'c'},
|
|
87
|
-
{label: 'D', value: 'd'},
|
|
88
|
-
]
|
|
89
|
-
},
|
|
90
62
|
}
|
|
91
63
|
]
|
|
92
64
|
|
|
@@ -96,10 +68,26 @@ let options2 = [
|
|
|
96
68
|
{label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},
|
|
97
69
|
{value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}
|
|
98
70
|
]);
|
|
99
|
-
console.log(filters)
|
|
100
71
|
return (
|
|
101
72
|
<ConfigProvider>
|
|
102
73
|
<div>
|
|
74
|
+
<div>默认固定搜索条件</div>
|
|
75
|
+
<Search
|
|
76
|
+
defaultDataIndex="name"
|
|
77
|
+
defaultSelectedDataIndex="name"
|
|
78
|
+
options={[{
|
|
79
|
+
label: '实例名称',
|
|
80
|
+
dataIndex: 'name',
|
|
81
|
+
template: 'input',
|
|
82
|
+
templateProps: {
|
|
83
|
+
placeholder: '按实例名称搜索',
|
|
84
|
+
},
|
|
85
|
+
}]}
|
|
86
|
+
onSearch={(value, dataIndex) => {
|
|
87
|
+
console.log(value, dataIndex)
|
|
88
|
+
}}
|
|
89
|
+
/>
|
|
90
|
+
<br/><br/>
|
|
103
91
|
<Search
|
|
104
92
|
defaultDataIndex="name"
|
|
105
93
|
options={options2}
|
|
@@ -113,6 +101,7 @@ let options2 = [
|
|
|
113
101
|
<div>搜索条件成组</div>
|
|
114
102
|
<Search
|
|
115
103
|
defaultDataIndex="name"
|
|
104
|
+
defaultSelectedDataIndex="name"
|
|
116
105
|
options={options}
|
|
117
106
|
onSearch={(value, dataIndex, extra) => {
|
|
118
107
|
//@ts-ignore
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @title 模糊搜索
|
|
3
|
+
* @description 在你设置 `fuzzy=true` 或者 `defaultDataIndex` 被设置的时候，可以通过 suggestion 来做自动提示
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { Search, SearchFilter } from "@alicloud/console-components-search";
|
|
8
|
+
import { useState } from "react";
|
|
9
|
+
|
|
10
|
+
let options = [
|
|
11
|
+
{
|
|
12
|
+
label: '实例名称',
|
|
13
|
+
dataIndex: 'name',
|
|
14
|
+
template: 'input',
|
|
15
|
+
templateProps: {
|
|
16
|
+
placeholder: '按实例名称搜索',
|
|
17
|
+
dataSource: [{
|
|
18
|
+
'label': "slb-xxxxx",
|
|
19
|
+
'value': "slb-xxxxx"
|
|
20
|
+
}]
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
label: '网络类型',
|
|
25
|
+
dataIndex: 'type',
|
|
26
|
+
template: 'select',
|
|
27
|
+
templateProps: {
|
|
28
|
+
placeholder: '请选择网络类型',
|
|
29
|
+
dataSource: [
|
|
30
|
+
{label: 'A', value: 'a'},
|
|
31
|
+
{label: 'B', value: 'b'},
|
|
32
|
+
{label: 'C', value: 'c'},
|
|
33
|
+
{label: 'D', value: 'd'},
|
|
34
|
+
]
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
label: '付费类型',
|
|
39
|
+
dataIndex: 'pay',
|
|
40
|
+
template: 'multiple',
|
|
41
|
+
templateProps: {
|
|
42
|
+
placeholder: '请选择付费类型',
|
|
43
|
+
dataSource: [
|
|
44
|
+
{label: 'A', value: 'a'},
|
|
45
|
+
{label: 'B', value: 'b'},
|
|
46
|
+
{label: 'C', value: 'c'},
|
|
47
|
+
{label: 'D', value: 'd'},
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
const Demo1: React.FC<{}> = (props) => {
|
|
55
|
+
const [filters, setFilters] = useState<any>([
|
|
56
|
+
{label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},
|
|
57
|
+
{value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}
|
|
58
|
+
]);
|
|
59
|
+
return (
|
|
60
|
+
<div>
|
|
61
|
+
<Search
|
|
62
|
+
fuzzy
|
|
63
|
+
options={options}
|
|
64
|
+
onSearch={(value, dataIndex, extra) => {
|
|
65
|
+
// 如果没有 dataIndex 表示用户直接按了回车
|
|
66
|
+
if (dataIndex) {
|
|
67
|
+
setFilters([...filters, extra])
|
|
68
|
+
} else {
|
|
69
|
+
// 如果
|
|
70
|
+
setFilters([...filters, {label: '没有任何条件', value }])
|
|
71
|
+
}
|
|
72
|
+
}}
|
|
73
|
+
suggestions={[
|
|
74
|
+
{
|
|
75
|
+
label: '实例名称',
|
|
76
|
+
value: 'name',
|
|
77
|
+
children: [{
|
|
78
|
+
label: 'slb-xxxxx',
|
|
79
|
+
value: 'slb-xxxxx',
|
|
80
|
+
}]
|
|
81
|
+
}]}
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<div style={{marginTop: 8}}>
|
|
85
|
+
<SearchFilter
|
|
86
|
+
dataSource={filters}
|
|
87
|
+
onChange={(deletedFilter, remainFilters)=> {
|
|
88
|
+
setFilters(remainFilters)
|
|
89
|
+
}}
|
|
90
|
+
/>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
);
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
export default Demo1;
|
|
97
|
+
|
package/dist/index.css
CHANGED
|
@@ -13,6 +13,9 @@ body .xconsole-rcsearch-multi-pop .next-menu-group-label {
|
|
|
13
13
|
body .xconsole-rc-search-popup {
|
|
14
14
|
margin-top: 4px;
|
|
15
15
|
}
|
|
16
|
+
body .rc-search-prefix {
|
|
17
|
+
--menu-padding-horizontal: 24px;
|
|
18
|
+
}
|
|
16
19
|
body .rc-search.isWind {
|
|
17
20
|
--console-rc-search-label-color: #f7f7f7;
|
|
18
21
|
--console-rc-search-label-hover-color: #ebebeb;
|
|
@@ -22,32 +25,39 @@ body .rc-search.isWidget {
|
|
|
22
25
|
--console-rc-search-close-btn-left: -3px;
|
|
23
26
|
--icon-content-delete-filling: "\\E6A2";
|
|
24
27
|
}
|
|
28
|
+
body .rc-search-auto-complete [class*='select-menu-empty'] {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
25
31
|
|
|
32
|
+
.rc-search-taglist:not(.isWind) {
|
|
33
|
+
margin-top: -8px;
|
|
34
|
+
}
|
|
26
35
|
.rc-search-taglist:not(.isWind).rc-search-taglist:not(.isWind) [class*='-icon-close']::before {
|
|
27
36
|
content: var(--icon-content-close) !important;
|
|
28
37
|
}
|
|
29
|
-
.rc-search-taglist .
|
|
38
|
+
.rc-search-taglist .search-tags-tag.search-tags-tag {
|
|
39
|
+
margin-top: 8px;
|
|
30
40
|
font-weight: 400;
|
|
31
41
|
color: var(--color-text1-9, #333333) !important;
|
|
32
42
|
}
|
|
33
|
-
.rc-search-taglist .
|
|
43
|
+
.rc-search-taglist .search-tags-tag.search-tags-tag .search-tags-tag-label {
|
|
34
44
|
font-weight: 500;
|
|
35
45
|
color: var(--color-text1-6, #808080);
|
|
36
46
|
margin-right: 8px;
|
|
37
47
|
}
|
|
38
|
-
.rc-search-taglist .
|
|
48
|
+
.rc-search-taglist .search-tags-tag.search-tags-tag[class*='tag-closable'] > [class*='tag-close-btn'] {
|
|
39
49
|
margin-left: 12px;
|
|
40
50
|
}
|
|
41
|
-
.rc-search-taglist .
|
|
42
|
-
color: #
|
|
51
|
+
.rc-search-taglist .search-tags-tag.search-tags-tag [class*='icon-close']:hover {
|
|
52
|
+
color: #808080 !important;
|
|
43
53
|
}
|
|
44
|
-
.rc-search-taglist .
|
|
54
|
+
.rc-search-taglist .search-tags-tag:not(:last-child) {
|
|
45
55
|
margin-right: 8px;
|
|
46
56
|
}
|
|
47
|
-
.rc-search-taglist .
|
|
57
|
+
.rc-search-taglist .search-tags-tag_empty {
|
|
48
58
|
color: var(--color-text1-6, #808080);
|
|
49
59
|
}
|
|
50
|
-
.rc-search-taglist .
|
|
60
|
+
.rc-search-taglist .search-tags-tag-dot.rc-search-taglist .search-tags-tag-dot [class*='-badge-dot'] {
|
|
51
61
|
right: 4px;
|
|
52
62
|
top: 0px;
|
|
53
63
|
}
|
package/dist/index.js
CHANGED
|
@@ -85079,13 +85079,13 @@ var styled_components_1 = __importDefault(__webpack_require__(49));
|
|
|
85079
85079
|
var prefix = function (props) {
|
|
85080
85080
|
return props.prefix ? "." + props.prefix : '.next-';
|
|
85081
85081
|
};
|
|
85082
|
-
var SearchWarp = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n
|
|
85082
|
+
var SearchWarp = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n .left-wrap {\n flex: 1;\n border: 1px solid var(--btn-pure-normal-border-color, #d1d5d9);\n display: flex;\n border-bottom-left-radius: var(--corner-1, 2px);\n border-top-left-radius: var(--corner-1, 2px);\n &.focus {\n border: 1px solid #0064c8;\n border: 1px solid var(--input-focus-border-color,#0064c8);;\n border-right: 1px solid rgba(192, 198,204, 1);\n }\n .condition{\n height: 26px;\n display: inline-block;\n margin-top: 2px;\n }\n .condition-item{\n height: 26px;\n display: inline-block;\n line-height: 26px;\n background-color: var(--console-rc-search-label-color, #F7F9FA);\n :hover {\n background-color: var(--console-rc-search-label-hover-color, #EFF3F8);\n }\n border-radius: var(--corner-1, 2px);\n padding: 0 8px;\n margin: 0 2px;\n font-size: 12px;\n color: #333;\n position: relative;\n &-txt{\n padding-right: 4px;\n }\n &:hover{\n background-color: #E0E4E8;\n }\n }\n .condition-select{\n width: 100%;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n min-width: auto;\n &.rc-search-prefix-no-select {\n ", "input", "disabled {\n cursor: auto;\n }\n }\n ", "select-inner{\n min-width: auto;\n }\n }\n .forms{\n flex: 1;\n position: relative;\n .clear-level1{\n position: absolute;\n top: var(--console-rc-search-close-btn-top, 1px);\n right: var(--console-rc-search-close-btn-left, 1px);\n height: 28px;\n width: 30px;\n background-color: transparent;\n z-index: 99;\n color: #333;\n text-align: center;\n line-height: 28px;\n font-size: 12px;\n cursor: pointer;\n padding: 6px 0 0 6px;\n }\n }\n .main-input{\n ", "select-arrow {\n display: none !important;\n }\n height: auto;\n border: none;\n box-shadow: none;\n &.single{\n flex: 1;\n }\n &.select{\n width: 100%;\n }\n &.multi{\n width: 100%;\n /* .next-select-values .next-tag{\n display: none;\n } */\n }\n \n ", "input, ", "input{\n height: auto;\n box-shadow: none;\n }\n }\n ", "input", "medium{\n height: auto;\n }\n }\n\n .right-wrap {\n width: 32px;\n .search-btn {\n width: 32px;\n padding: 0 !important;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n &.focus {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n border-left: none;\n }\n }\n\n & ", "input-control ", "input-clear-icon::before {\n content: var(--icon-content-close, \"ea22\") !important;\n }\n\n .isWidget & ", "input-control ", "input-clear-icon::before {\n content: \"\\E697\" !important;\n }\n"], ["\n height: 100%;\n width: 100%;\n display: flex;\n --input-clear-icon-transform: 1;\n --input-hint-icon-color: #808080;\n .left-wrap {\n flex: 1;\n border: 1px solid var(--btn-pure-normal-border-color, #d1d5d9);\n display: flex;\n border-bottom-left-radius: var(--corner-1, 2px);\n border-top-left-radius: var(--corner-1, 2px);\n &.focus {\n border: 1px solid #0064c8;\n border: 1px solid var(--input-focus-border-color,#0064c8);;\n border-right: 1px solid rgba(192, 198,204, 1);\n }\n .condition{\n height: 26px;\n display: inline-block;\n margin-top: 2px;\n }\n .condition-item{\n height: 26px;\n display: inline-block;\n line-height: 26px;\n background-color: var(--console-rc-search-label-color, #F7F9FA);\n :hover {\n background-color: var(--console-rc-search-label-hover-color, #EFF3F8);\n }\n border-radius: var(--corner-1, 2px);\n padding: 0 8px;\n margin: 0 2px;\n font-size: 12px;\n color: #333;\n position: relative;\n &-txt{\n padding-right: 4px;\n }\n &:hover{\n background-color: #E0E4E8;\n }\n }\n .condition-select{\n width: 100%;\n height: 100%;\n opacity: 0;\n position: absolute;\n top: 0;\n left: 0;\n min-width: auto;\n &.rc-search-prefix-no-select {\n ", "input", "disabled {\n cursor: auto;\n }\n }\n ", "select-inner{\n min-width: auto;\n }\n }\n .forms{\n flex: 1;\n position: relative;\n .clear-level1{\n position: absolute;\n top: var(--console-rc-search-close-btn-top, 1px);\n right: var(--console-rc-search-close-btn-left, 1px);\n height: 28px;\n width: 30px;\n background-color: transparent;\n z-index: 99;\n color: #333;\n text-align: center;\n line-height: 28px;\n font-size: 12px;\n cursor: pointer;\n padding: 6px 0 0 6px;\n }\n }\n .main-input{\n ", "select-arrow {\n display: none !important;\n }\n height: auto;\n border: none;\n box-shadow: none;\n &.single{\n flex: 1;\n }\n &.select{\n width: 100%;\n }\n &.multi{\n width: 100%;\n /* .next-select-values .next-tag{\n display: none;\n } */\n }\n \n ", "input, ", "input{\n height: auto;\n box-shadow: none;\n }\n }\n ", "input", "medium{\n height: auto;\n }\n }\n\n .right-wrap {\n width: 32px;\n .search-btn {\n width: 32px;\n padding: 0 !important;\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n &.focus {\n border-color: #0064c8;\n border-color: var(--input-focus-border-color,#0064c8);\n }\n border-left: none;\n }\n }\n\n & ", "input-control ", "input-clear-icon::before {\n content: var(--icon-content-close, \"\\ea22\") !important;\n }\n\n .isWidget & ", "input-control ", "input-clear-icon::before {\n content: \"\\\\E697\" !important;\n }\n"])), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
|
|
85083
85083
|
exports.SearchWarp = SearchWarp;
|
|
85084
|
-
var MenuContentWrap = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "tag-small", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 4px;\n padding-top: 1px;\n }\n ", "tag-small", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote {\n font-size: 13px;\n }\n
|
|
85084
|
+
var MenuContentWrap = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "tag-small", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 4px;\n padding-top: 1px;\n }\n ", "tag-small", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote {\n font-size: 13px;\n }\n"], ["\n ", "tag-small", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 4px;\n padding-top: 1px;\n }\n ", "tag-small", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-small", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote {\n font-size: 13px;\n }\n"])), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
|
|
85085
85085
|
exports.MenuContentWrap = MenuContentWrap;
|
|
85086
85086
|
var MultiBtnWarp = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: \"0 4px\";\n text-align: \"center\";\n /* display: \"flex\"; */\n /* justify-content: \"start\"; */\n .pri-btn{\n margin-right: 8px;\n width: auto;\n min-width: auto;\n padding: 3px 12px;\n }\n .cancel-btn{\n padding: 3px 12px;\n width: auto;\n min-width: auto;\n }\n ", "btn", "small:not(.isOnlyIcon):not(", "btn-text) {\n min-width: auto;\n }\n"], ["\n padding: \"0 4px\";\n text-align: \"center\";\n /* display: \"flex\"; */\n /* justify-content: \"start\"; */\n .pri-btn{\n margin-right: 8px;\n width: auto;\n min-width: auto;\n padding: 3px 12px;\n }\n .cancel-btn{\n padding: 3px 12px;\n width: auto;\n min-width: auto;\n }\n ", "btn", "small:not(.isOnlyIcon):not(", "btn-text) {\n min-width: auto;\n }\n"])), prefix, prefix, prefix);
|
|
85087
85087
|
exports.MultiBtnWarp = MultiBtnWarp;
|
|
85088
|
-
var TagListWrap = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "tag-medium", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 6px;\n }\n ", "tag-medium", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{\n font-size: 16px;\n }\n && [class*='-icon-close']
|
|
85088
|
+
var TagListWrap = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "tag-medium", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 6px;\n }\n ", "tag-medium", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{\n font-size: 16px;\n }\n && [class*='-icon-close']::before{\n color: #808080;\n font-size: 12px !important;\n }\n .remove-btn{\n line-height: 24px;\n margin-top: 8px;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n }\n"], ["\n ", "tag-medium", "tag-closable > ", "tag-close-btn {\n margin-left: 8px;\n padding-right: 6px;\n }\n ", "tag-medium", "tag-closable > ", "tag-body {\n max-width: calc(100% - 8px - 8px - var(--tag-size-m-padding-lr, 8px));\n }\n ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon:before, ", "tag-medium", "tag-closable > ", "tag-close-btn ", "icon ", "icon-remote{\n font-size: 16px;\n }\n && [class*='-icon-close']::before{\n color: #808080;\n font-size: 12px !important;\n }\n .remove-btn{\n line-height: 24px;\n margin-top: 8px;\n display: inline-block;\n vertical-align: middle;\n cursor: pointer;\n }\n"])), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
|
|
85089
85089
|
exports.TagListWrap = TagListWrap;
|
|
85090
85090
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
85091
85091
|
|
|
@@ -107490,6 +107490,19 @@ var normalizeOptions = function (options) {
|
|
|
107490
107490
|
};
|
|
107491
107491
|
});
|
|
107492
107492
|
};
|
|
107493
|
+
var normalizeSuggestion = function (suggestion) {
|
|
107494
|
+
var suggestionCopy = cloneDeep_1.default(suggestion);
|
|
107495
|
+
suggestionCopy.forEach(function (s) {
|
|
107496
|
+
if (s.children) {
|
|
107497
|
+
s.children.forEach(function (child) {
|
|
107498
|
+
if (lodash_1.isPlainObject(child)) {
|
|
107499
|
+
child.dataIndex = s.value;
|
|
107500
|
+
}
|
|
107501
|
+
});
|
|
107502
|
+
}
|
|
107503
|
+
});
|
|
107504
|
+
return suggestionCopy;
|
|
107505
|
+
};
|
|
107493
107506
|
var normalizeSelectDataSource = function (title, list) {
|
|
107494
107507
|
return [
|
|
107495
107508
|
{
|
|
@@ -107526,10 +107539,11 @@ var highlightKeyword = function (value, keywords) {
|
|
|
107526
107539
|
endValue);
|
|
107527
107540
|
};
|
|
107528
107541
|
var ComplexSearch = function (props) {
|
|
107529
|
-
var
|
|
107530
|
-
var
|
|
107531
|
-
var
|
|
107542
|
+
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;
|
|
107543
|
+
var _d = react_1.useState(options.find(function (o) { return o.dataIndex === defaultSelectedDataIndex; })), selectedFilterType = _d[0], setSelectedFilterType = _d[1];
|
|
107544
|
+
var _e = react_1.useState(false), focused = _e[0], setFocused = _e[1];
|
|
107532
107545
|
var autoRef = react_1.useRef(null);
|
|
107546
|
+
var fuzzyAutoRef = react_1.useRef(null);
|
|
107533
107547
|
var field = console_components_1.Field.useField();
|
|
107534
107548
|
var init = field.init, getValue = field.getValue, reset = field.reset;
|
|
107535
107549
|
var focusProps = {
|
|
@@ -107557,12 +107571,12 @@ var ComplexSearch = function (props) {
|
|
|
107557
107571
|
/**
|
|
107558
107572
|
* 处理当筛选类型没选中，用户输入筛选类型，或者是做默认搜索的情况
|
|
107559
107573
|
*/
|
|
107560
|
-
var handlerFilterTypeInput = function (value, actionType, isFuzzy) {
|
|
107574
|
+
var handlerFilterTypeInput = function (value, actionType, isFuzzy, option) {
|
|
107561
107575
|
var isFuzzySearch = isFuzzy && getValue(constants_1.SEARCH_FILTER_FIELD);
|
|
107562
107576
|
// 如果是模糊搜索，则直接处理
|
|
107563
107577
|
if (isFuzzySearch) {
|
|
107564
107578
|
if (actionType !== 'change') {
|
|
107565
|
-
handleSearch();
|
|
107579
|
+
handleSearch(option.dataIndex);
|
|
107566
107580
|
}
|
|
107567
107581
|
else {
|
|
107568
107582
|
onSuggest && onSuggest(value, defaultDataIndex || '');
|
|
@@ -107576,12 +107590,17 @@ var ComplexSearch = function (props) {
|
|
|
107576
107590
|
setSelectedFilterType(null);
|
|
107577
107591
|
reset();
|
|
107578
107592
|
};
|
|
107579
|
-
var handleSearch = function () {
|
|
107593
|
+
var handleSearch = function (dataIndex) {
|
|
107580
107594
|
if (onSearch) {
|
|
107581
107595
|
var value = getValue(constants_1.SEARCH_FILTER_VALUE_FIELD);
|
|
107596
|
+
// 如果是没有选择下拉
|
|
107582
107597
|
if (defaultDataIndex && !selectedFilterType) {
|
|
107583
107598
|
onSearch(getValue(constants_1.SEARCH_FILTER_FIELD), defaultDataIndex, normalizeSearchOptions(defaultDataIndex, getValue(constants_1.SEARCH_FILTER_FIELD), options));
|
|
107584
107599
|
}
|
|
107600
|
+
// 如果是用户没有指定 defaultDataIndex 但是设置了 fuzzy
|
|
107601
|
+
if (fuzzy && !selectedFilterType) {
|
|
107602
|
+
onSearch(getValue(constants_1.SEARCH_FILTER_FIELD), dataIndex || '', normalizeSearchOptions(dataIndex || '', getValue(constants_1.SEARCH_FILTER_FIELD), options));
|
|
107603
|
+
}
|
|
107585
107604
|
if (selectedFilterType) {
|
|
107586
107605
|
onSearch(value, selectedFilterType.dataIndex, normalizeSearchOptions(selectedFilterType.dataIndex, value, options));
|
|
107587
107606
|
}
|
|
@@ -107595,6 +107614,9 @@ var ComplexSearch = function (props) {
|
|
|
107595
107614
|
handleSearch();
|
|
107596
107615
|
document.body.click();
|
|
107597
107616
|
}
|
|
107617
|
+
if (e.keyCode === 8 && !e.currentTarget.value) {
|
|
107618
|
+
handlerFilterClear();
|
|
107619
|
+
}
|
|
107598
107620
|
};
|
|
107599
107621
|
var renderMultipleSelectorItem = function (item) {
|
|
107600
107622
|
var searchValue = getValue(constants_1.SEARCH_FILTER_VALUE_FIELD);
|
|
@@ -107602,7 +107624,7 @@ var ComplexSearch = function (props) {
|
|
|
107602
107624
|
return (react_1.default.createElement(console_components_1.Checkbox, { checked: checked }, item.label));
|
|
107603
107625
|
};
|
|
107604
107626
|
var renderSelectedFilter = function () {
|
|
107605
|
-
var _a, _b;
|
|
107627
|
+
var _a, _b, _c;
|
|
107606
107628
|
var type = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.template;
|
|
107607
107629
|
var searchValue = getValue(constants_1.SEARCH_FILTER_VALUE_FIELD);
|
|
107608
107630
|
var props = __assign({ hasBorder: false, autoFocus: true, hasClear: true, key: type, placeholder: ((_a = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.templateProps) === null || _a === void 0 ? void 0 : _a.placeholder) || "\u9ED8\u8BA4\u6309" + (selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.label) + "\u641C\u7D22" }, focusProps);
|
|
@@ -107613,15 +107635,15 @@ var ComplexSearch = function (props) {
|
|
|
107613
107635
|
};
|
|
107614
107636
|
switch (type) {
|
|
107615
107637
|
case 'input':
|
|
107616
|
-
return (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_VALUE_FIELD, {}), { className: classnames_1.default('main-input', 'multi') }, props, { onKeyUp: handleKeyUp })));
|
|
107638
|
+
return (react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_VALUE_FIELD, {}), { className: classnames_1.default('main-input', 'multi'), autoHighlightFirstItem: false }, props, { autoWidth: true, onKeyUp: handleKeyUp, dataSource: (_c = selectedFilterType === null || selectedFilterType === void 0 ? void 0 : selectedFilterType.templateProps) === null || _c === void 0 ? void 0 : _c.dataSource })));
|
|
107617
107639
|
case 'select':
|
|
107618
107640
|
return (react_1.default.createElement(console_components_1.Select, __assign({ className: classnames_1.default('main-input', 'select') }, init(constants_1.SEARCH_FILTER_VALUE_FIELD, {
|
|
107619
107641
|
props: {
|
|
107620
107642
|
onChange: handleSearch
|
|
107621
107643
|
}
|
|
107622
|
-
}), props, selectProps)));
|
|
107644
|
+
}), { autoHighlightFirstItem: false }, props, selectProps)));
|
|
107623
107645
|
case 'multiple':
|
|
107624
|
-
return (react_1.default.createElement(console_components_1.Select, __assign({ className: classnames_1.default('main-input', 'multi') }, init(constants_1.SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, { itemRender: renderMultipleSelectorItem, popupClassName: "xconsole-rcsearch-multi-pop", mode: "multiple", maxTagCount: 0, menuProps: {
|
|
107646
|
+
return (react_1.default.createElement(console_components_1.Select, __assign({ className: classnames_1.default('main-input', 'multi') }, init(constants_1.SEARCH_FILTER_VALUE_FIELD, {}), props, selectProps, { itemRender: renderMultipleSelectorItem, popupClassName: "xconsole-rcsearch-multi-pop", mode: "multiple", autoHighlightFirstItem: false, maxTagCount: 0, menuProps: {
|
|
107625
107647
|
footer: (react_1.default.createElement(style_1.MultiBtnWarp, { prefix: prefix },
|
|
107626
107648
|
react_1.default.createElement(console_components_1.Button, { size: "small", className: classnames_1.default("pri-btn"), type: "primary", disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: function () {
|
|
107627
107649
|
handleSearch();
|
|
@@ -107654,23 +107676,23 @@ var ComplexSearch = function (props) {
|
|
|
107654
107676
|
react_1.default.createElement(AutoComplete, __assign({}, init(constants_1.SEARCH_FILTER_FIELD, {
|
|
107655
107677
|
props: {
|
|
107656
107678
|
// @ts-ignore
|
|
107657
|
-
onChange: function (value, actionType) {
|
|
107658
|
-
handlerFilterTypeInput(value, actionType, isFuzzy);
|
|
107679
|
+
onChange: function (value, actionType, option) {
|
|
107680
|
+
handlerFilterTypeInput(value, actionType, !!isFuzzy, option);
|
|
107659
107681
|
}
|
|
107660
107682
|
}
|
|
107661
|
-
}), {
|
|
107683
|
+
}), { autoFocus: true, autoHighlightFirstItem: false,
|
|
107662
107684
|
// @ts-ignore
|
|
107663
107685
|
itemRender: highlightItem, placeholder: placeholder ? placeholder : ((defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label) ? (lodash_1.template(message_1.default.defaultPlaceHolder)({ value: defaultFilter === null || defaultFilter === void 0 ? void 0 : defaultFilter.label })) : ''), className: classnames_1.default('main-input', 'multi'), hasBorder: false, onKeyUp: handleKeyUp, dataSource:
|
|
107664
107686
|
// 如果是指定了默认的筛选类型或者是直接指定模糊搜索模式 ，并且用户在这个输入框里面已经输入了值
|
|
107665
107687
|
// 则表示需要模糊搜索，调用 handleSuggest
|
|
107666
107688
|
isFuzzy ?
|
|
107667
|
-
suggestions :
|
|
107668
|
-
normalizeOptions(options), popupStyle: { width: 'auto' } }, focusProps))
|
|
107689
|
+
normalizeSuggestion(suggestions) :
|
|
107690
|
+
normalizeOptions(options), popupStyle: { width: 'auto' }, popupClassName: 'rc-search-auto-complete' }, focusProps))
|
|
107669
107691
|
: null,
|
|
107670
107692
|
renderSelectedFilter(),
|
|
107671
107693
|
renderSelectFilterCloseIcon())),
|
|
107672
107694
|
react_1.default.createElement("div", { className: classnames_1.default('right-wrap'), ref: autoRef },
|
|
107673
|
-
react_1.default.createElement(console_components_1.Button, { className: classnames_1.default('search-btn', { 'focus': focused }), onClick: handleSearch },
|
|
107695
|
+
react_1.default.createElement(console_components_1.Button, { className: classnames_1.default('search-btn', { 'focus': focused }), onClick: function () { return handleSearch(); } },
|
|
107674
107696
|
react_1.default.createElement(console_components_1.Icon, { type: "search" })))));
|
|
107675
107697
|
};
|
|
107676
107698
|
exports.default = console_components_1.ConfigProvider.config(ComplexSearch);
|
|
@@ -114789,14 +114811,15 @@ var react_1 = __importDefault(__webpack_require__(1));
|
|
|
114789
114811
|
var classnames_1 = __importDefault(__webpack_require__(16));
|
|
114790
114812
|
var console_components_1 = __webpack_require__(30);
|
|
114791
114813
|
var SearchConditionSelectPrefix = function (props) {
|
|
114792
|
-
var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, label = props.label, reset = __rest(props, ["dataSource", "label"]);
|
|
114814
|
+
var defaultValue = props.defaultValue, _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, label = props.label, reset = __rest(props, ["defaultValue", "dataSource", "label"]);
|
|
114815
|
+
var noSelect = dataSource.length < 2;
|
|
114793
114816
|
return (react_1.default.createElement("div", { className: classnames_1.default('condition-item') },
|
|
114794
114817
|
react_1.default.createElement("span", { className: classnames_1.default('condition-item-txt') }, label),
|
|
114795
|
-
react_1.default.createElement(console_components_1.Icon, { type: "caret-down", size: "xxs" }),
|
|
114796
|
-
react_1.default.createElement(console_components_1.Select, __assign({ className: classnames_1.default('condition-select'), hasBorder: false, dataSource: dataSource, itemRender: function (_a) {
|
|
114818
|
+
noSelect ? null : react_1.default.createElement(console_components_1.Icon, { type: "caret-down", size: "xxs" }),
|
|
114819
|
+
react_1.default.createElement(console_components_1.Select, __assign({ className: classnames_1.default('condition-select', { 'rc-search-prefix-no-select': noSelect }), defaultValue: defaultValue, hasBorder: false, disabled: noSelect, autoHighlightFirstItem: false, dataSource: dataSource, itemRender: function (_a) {
|
|
114797
114820
|
var label = _a.label, value = _a.value;
|
|
114798
114821
|
return (react_1.default.createElement("span", { "data-value": value }, label));
|
|
114799
|
-
}, autoWidth:
|
|
114822
|
+
} }, reset, { autoWidth: false, popupClassName: "rc-search-prefix" }))));
|
|
114800
114823
|
};
|
|
114801
114824
|
exports.default = SearchConditionSelectPrefix;
|
|
114802
114825
|
|
|
@@ -115252,17 +115275,16 @@ var SearchTagList = function (props) {
|
|
|
115252
115275
|
var processDataSource = dataSource && dataSource.filter(function (t) { var _a; return !isArray_1.default(t === null || t === void 0 ? void 0 : t.value) || ((_a = t === null || t === void 0 ? void 0 : t.value) === null || _a === void 0 ? void 0 : _a.length); }) || [];
|
|
115253
115276
|
var isWindClass = useCssVar_1.useWindTheme();
|
|
115254
115277
|
return (react_1.default.createElement(style_1.TagListWrap, { prefix: prefix, className: classnames_1.default(constants_1.baseTagListClassName, className, isWindClass), style: style },
|
|
115255
|
-
|
|
115256
|
-
|
|
115257
|
-
|
|
115258
|
-
|
|
115259
|
-
|
|
115260
|
-
|
|
115261
|
-
react_1.default.createElement(
|
|
115262
|
-
|
|
115263
|
-
|
|
115264
|
-
|
|
115265
|
-
processDataSource.length > 0 && (react_1.default.createElement("a", { className: "remove-btn", onClick: onRemoveAllFilter }, message_1.default.clearFilter)))));
|
|
115278
|
+
processDataSource.map(function (tagItem) {
|
|
115279
|
+
if (isTagLikeDataStructure(tagItem.value)) {
|
|
115280
|
+
return renderTags(tagItem);
|
|
115281
|
+
}
|
|
115282
|
+
return (react_1.default.createElement(ClosableTag, { className: "search-tags-tag", key: tagItem.dataIndex + tagItem.value, type: "normal", size: "medium", onClose: function () { onRemoveFilter(tagItem); return true; } },
|
|
115283
|
+
react_1.default.createElement(react_1.default.Fragment, null,
|
|
115284
|
+
react_1.default.createElement("label", { className: "search-tags-tag-label" }, tagItem.label),
|
|
115285
|
+
tagItem.valueLabel || tagItem.value)));
|
|
115286
|
+
}),
|
|
115287
|
+
processDataSource.length > 0 && (react_1.default.createElement("a", { className: "remove-btn", onClick: onRemoveAllFilter }, message_1.default.clearFilter))));
|
|
115266
115288
|
};
|
|
115267
115289
|
exports.default = console_components_1.ConfigProvider.config(SearchTagList);
|
|
115268
115290
|
|
|
@@ -115326,9 +115348,9 @@ var PureTag = function (props) {
|
|
|
115326
115348
|
}
|
|
115327
115349
|
return (
|
|
115328
115350
|
//@ts-ignore
|
|
115329
|
-
react_1.default.createElement(DotWrapper, { className: "
|
|
115330
|
-
react_1.default.createElement(TagWrapper, __assign({ title: tagKey + ":" + tagValue, className: "
|
|
115331
|
-
showLabel && react_1.default.createElement("label", { className: "
|
|
115351
|
+
react_1.default.createElement(DotWrapper, { className: "search-tags-tag-dot", dot: true },
|
|
115352
|
+
react_1.default.createElement(TagWrapper, __assign({ title: tagKey + ":" + tagValue, className: "search-tags-tag" }, resetProps),
|
|
115353
|
+
showLabel && react_1.default.createElement("label", { className: "search-tags-tag-label" }, message_1.default.tag),
|
|
115332
115354
|
react_1.default.createElement(TruncateWrapper, __assign({}, defaultTruncateProps), tagKey),
|
|
115333
115355
|
":",
|
|
115334
115356
|
tagValue ? react_1.default.createElement(TruncateWrapper, __assign({}, defaultTruncateProps), tagValue) : react_1.default.createElement("span", { className: "console-tags-tag_empty" }, transformedTagValue))));
|
package/doc-dist/10.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{681:function(e,a
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[10],{681:function(e,n,a){"use strict";a.r(n),a.d(n,"demo",(function(){return x})),a.d(n,"meta",(function(){return f})),a.d(n,"code",(function(){return b})),a.d(n,"imports",(function(){return m})),a.d(n,"deps",(function(){return v}));var t={};a.r(t),a.d(t,"default",(function(){return p}));var l=a(5),o=a(1),r=a(0),d=a.n(r),c=a(63),u=a(64),s=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[]},groupName:"test"},{label:"网络类型",dataIndex:"type",template:"select",templateProps:{placeholder:"请选择网络类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]},groupName:"test"},{label:"付费类型",dataIndex:"pay",template:"multiple",templateProps:{placeholder:"请选择付费类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]},groupName:"test2"}],i=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[]}}],p=function(e){var n=Object(r.useState)([{label:"实例名称",value:"xxxxxx",dataIndex:"name"},{value:[{tagKey:"test",tagValue:""}],dataIndex:"tag"}]),a=Object(o.a)(n,2),t=a[0],p=a[1];return d.a.createElement(u.ConfigProvider,null,d.a.createElement("div",null,d.a.createElement("div",null,"默认固定搜索条件"),d.a.createElement(c.Search,{defaultDataIndex:"name",defaultSelectedDataIndex:"name",options:[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索"}}],onSearch:function(e,n){console.log(e,n)}}),d.a.createElement("br",null),d.a.createElement("br",null),d.a.createElement(c.Search,{defaultDataIndex:"name",options:i,onSearch:function(e,n){console.log(e,n)},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),d.a.createElement("br",null),d.a.createElement("br",null),d.a.createElement("div",null,"搜索条件成组"),d.a.createElement(c.Search,{defaultDataIndex:"name",defaultSelectedDataIndex:"name",options:s,onSearch:function(e,n,a){p([].concat(Object(l.a)(t),[a]))},suggestions:[{label:"实例名称",children:["222222"]},"33333333"]}),d.a.createElement("div",{style:{marginTop:8}},d.a.createElement(c.SearchFilter,{dataSource:t,onChange:function(e,n){p(n)}}))))};const m=["react","@alicloud/console-components-search","@alicloud/console-components","react"],b="/**\n * @title 场景1\n */\n\nimport React from \"react\";\nimport { Search, SearchFilter } from \"@alicloud/console-components-search\";\nimport { ConfigProvider } from \"@alicloud/console-components\";\nimport { useState } from \"react\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n groupName:\"test\"\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test\"\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n groupName:\"test2\"\n }\n]\n\nlet options2 = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: []\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n const [filters, setFilters] = useState<any>([\n {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},\n {value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}\n ]);\n return (\n <ConfigProvider>\n <div>\n <div>默认固定搜索条件</div>\n <Search\n defaultDataIndex=\"name\"\n defaultSelectedDataIndex=\"name\"\n options={[{\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n },\n }]}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n />\n <br/><br/>\n <Search\n defaultDataIndex=\"name\"\n options={options2}\n onSearch={(value, dataIndex) => {\n console.log(value, dataIndex)\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n <br/><br/>\n\n <div>搜索条件成组</div>\n <Search\n defaultDataIndex=\"name\"\n defaultSelectedDataIndex=\"name\"\n options={options}\n onSearch={(value, dataIndex, extra) => {\n //@ts-ignore\n setFilters([...filters, extra])\n }}\n suggestions={[{label: '实例名称', children: ['222222']}, '33333333']}\n />\n\n <div style={{marginTop: 8}}>\n <SearchFilter\n dataSource={filters}\n onChange={(deletedFilter, remainFilters)=> {\n setFilters(remainFilters)\n }}\n />\n </div>\n </div>\n </ConfigProvider>\n );\n };\n \n export default Demo1;\n ",v={react:r,"@alicloud/console-components-search":c,"@alicloud/console-components":u,react:r},{default:x,meta:f={}}=t}}]);
|
|
6
6
|
}})
|
package/doc-dist/11.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[11],{
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[11],{682:function(e,a,n){"use strict";n.r(a),n.d(a,"demo",(function(){return b})),n.d(a,"meta",(function(){return m})),n.d(a,"code",(function(){return i})),n.d(a,"imports",(function(){return x})),n.d(a,"deps",(function(){return p}));var l={};n.r(l),n.d(l,"default",(function(){return d}));var t=n(5),r=n(1),o=n(0),c=n.n(o),u=n(63),s=[{label:"实例名称",dataIndex:"name",template:"input",templateProps:{placeholder:"按实例名称搜索",dataSource:[{label:"slb-xxxxx",value:"slb-xxxxx"}]}},{label:"网络类型",dataIndex:"type",template:"select",templateProps:{placeholder:"请选择网络类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]}},{label:"付费类型",dataIndex:"pay",template:"multiple",templateProps:{placeholder:"请选择付费类型",dataSource:[{label:"A",value:"a"},{label:"B",value:"b"},{label:"C",value:"c"},{label:"D",value:"d"}]}}],d=function(e){var a=Object(o.useState)([{label:"实例名称",value:"xxxxxx",dataIndex:"name"},{value:[{tagKey:"test",tagValue:""}],dataIndex:"tag"}]),n=Object(r.a)(a,2),l=n[0],d=n[1];return c.a.createElement("div",null,c.a.createElement(u.Search,{fuzzy:!0,options:s,onSearch:function(e,a,n){d([].concat(Object(t.a)(l),a?[n]:[{label:"没有任何条件",value:e}]))},suggestions:[{label:"实例名称",value:"name",children:[{label:"slb-xxxxx",value:"slb-xxxxx"}]}]}),c.a.createElement("div",{style:{marginTop:8}},c.a.createElement(u.SearchFilter,{dataSource:l,onChange:function(e,a){d(a)}})))};const x=["react","@alicloud/console-components-search","react"],i="/**\n * @title 模糊搜索\n * @description 在你设置 `fuzzy=true` 或者 `defaultDataIndex` 被设置的时候，可以通过 suggestion 来做自动提示\n */\n\nimport React from \"react\";\nimport { Search, SearchFilter } from \"@alicloud/console-components-search\";\nimport { useState } from \"react\";\n \n let options = [\n {\n label: '实例名称',\n dataIndex: 'name',\n template: 'input',\n templateProps: {\n placeholder: '按实例名称搜索',\n dataSource: [{\n 'label': \"slb-xxxxx\",\n 'value': \"slb-xxxxx\"\n }]\n },\n },\n {\n label: '网络类型',\n dataIndex: 'type',\n template: 'select',\n templateProps: {\n placeholder: '请选择网络类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n },\n {\n label: '付费类型',\n dataIndex: 'pay',\n template: 'multiple',\n templateProps: {\n placeholder: '请选择付费类型',\n dataSource: [\n {label: 'A', value: 'a'},\n {label: 'B', value: 'b'},\n {label: 'C', value: 'c'},\n {label: 'D', value: 'd'},\n ]\n },\n }\n]\n\n\n const Demo1: React.FC<{}> = (props) => {\n const [filters, setFilters] = useState<any>([\n {label: '实例名称', value: 'xxxxxx', dataIndex: 'name'},\n {value: [{tagKey: 'test', tagValue: ''}], dataIndex: 'tag'}\n ]);\n return (\n <div>\n <Search\n fuzzy\n options={options}\n onSearch={(value, dataIndex, extra) => {\n // 如果没有 dataIndex 表示用户直接按了回车\n if (dataIndex) {\n setFilters([...filters, extra])\n } else {\n // 如果 \n setFilters([...filters, {label: '没有任何条件', value }])\n }\n }}\n suggestions={[\n {\n label: '实例名称',\n value: 'name',\n children: [{\n label: 'slb-xxxxx',\n value: 'slb-xxxxx',\n }]\n }]}\n />\n\n <div style={{marginTop: 8}}>\n <SearchFilter\n dataSource={filters}\n onChange={(deletedFilter, remainFilters)=> {\n setFilters(remainFilters)\n }}\n />\n </div>\n </div>\n );\n };\n \n export default Demo1;\n ",p={react:o,"@alicloud/console-components-search":u,react:o},{default:b,meta:m={}}=l}}]);
|
|
6
6
|
}})
|
package/doc-dist/12.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[12],{684:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[12],{684:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"IRcSearchOptionsProps",documentation:"",properties:[{name:"label",typeText:" string",documentation:"字段展示名称"},{name:"dataIndex",typeText:" string",documentation:"字段表单key"},{name:"template",typeText:" string",documentation:"字段，交互组件类型（input/select/multiple）<br />\n - input：搜索框<br />\n - select：单选<br />\n - multiple：多选<br />"},{name:"templateProps",typeText:" any",documentation:"定义传给表单项的属性\ntemplateProps.placeholder\ntemplateProps.dataSource"},{name:"groupName",typeText:" string",documentation:""}]}}}]);
|
|
6
6
|
}})
|
package/doc-dist/13.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[13],{685:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[13],{685:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return a}));var a={name:"IRcSearchProps",documentation:"",properties:[{name:"simple",typeText:" boolean",documentation:"是否是简单搜索， 不支持多 filter, 但是支持模糊",defaultValue:"false"},{name:"className",typeText:" string",documentation:"类名"},{name:"style",typeText:" any",documentation:"样式"},{name:"options",typeText:" IRcSearchOptionsProps[]",documentation:"对应不同场景值的类型数组，后面要详细展开列一下",defaultValue:"[]"},{name:"placeholder",typeText:" string",documentation:"默认placeholder"},{name:"defaultDataIndex",typeText:" string",documentation:"默认搜索类别"},{name:"defaultSelectedDataIndex",typeText:" string",documentation:"默认选中的类别"},{name:"onSearch",typeText:" (value: string, dataIndex: string, extra?: any) => void",documentation:"搜索触发"},{name:"onSuggest",typeText:" (value: string, dataIndex: string) => void",documentation:"模糊搜索的回调函数(仅输入框返回)，用于构建模糊搜索的联想列表"},{name:"suggestions",typeText:" any[]",documentation:"模糊搜索的 suggestions"},{name:"fuzzy",typeText:" boolean",documentation:"是否是模糊搜索"},{name:"regionId",typeText:" string",documentation:"regionId, 数据上报用"},{name:"resourceType",typeText:" string",documentation:"resourceType， 数据上报用, 格式 ACS::ECS::INSTANCE"},{name:"prefix",typeText:" string",documentation:"样式 class 前缀"}]}}}]);
|
|
6
6
|
}})
|
package/doc-dist/14.js
CHANGED
|
@@ -2,5 +2,5 @@
|
|
|
2
2
|
if (!window.__CONSOLE_OS_GLOBAL_HOOK__){window.__CONSOLE_OS_GLOBAL_VARS_={};window.__CONSOLE_OS_GLOBAL_HOOK__ = function(id, resolver) {resolver(undefined, undefined, undefined, {window: window,location: location,history: history,document: document})};window.__CONSOLE_OS_GLOBAL_HOOK__.standalone = true}
|
|
3
3
|
window.__CONSOLE_OS_GLOBAL_HOOK__("console-fe-test-rc-search-doc", function(require, module, exports, context){ var window = context.window;var location = context.location;var history = context.history;var document = context.document;with(window.__CONSOLE_OS_GLOBAL_VARS_) {
|
|
4
4
|
|
|
5
|
-
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[14],{686:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"
|
|
5
|
+
(window["webpackJsonpconsole-fe-test-rc-search-doc"]=window["webpackJsonpconsole-fe-test-rc-search-doc"]||[]).push([[14],{686:function(e,t,n){"use strict";n.r(t),n.d(t,"typeInfo",(function(){return o}));var o={name:"IRcSearchTagItemProps",documentation:"这是IRcSearchTagItemProps的说明。breezr-docs支持从源码中提取接口信息并文档化，因此你可以使用接口来定义Props，从而能便捷地将Props的信息通过文档透出。\n\n下面列举的props其实是随便写的，仅仅用来说明breezr-docs的接口提取功能。",properties:[{name:"label",typeText:" string",documentation:"tag的类别展示名称"},{name:"dataIndex",typeText:" string",documentation:"tag的类别的key"},{name:"value",typeText:" any",documentation:"tag的类别的值"},{name:"valueLabel",typeText:" string",documentation:"tag的类别的展示值"}]}}}]);
|
|
6
6
|
}})
|