@alicloud/console-components-search 0.1.3 → 0.2.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/README.md +104 -131
- package/demos/demo1.demo.tsx +100 -90
- package/doc-dist/0.js +1917 -16
- package/doc-dist/1.js +16 -1917
- 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/3.js +5 -5
- package/doc-dist/4.js +1 -1
- package/doc-dist/5.js +2 -2
- package/doc-dist/6.js +1 -1
- package/doc-dist/7.js +1 -1
- package/doc-dist/8.js +1 -1
- package/doc-dist/9.js +1 -1
- package/doc-dist/deps/main.css +1 -1
- package/doc-dist/deps/main.js +8 -8
- package/doc-dist/deps/main.os.css +1 -1
- package/doc-dist/index.js +3 -3
- package/doc-dist/log-deps-build.log +3 -3
- package/es/constants.js +4 -1
- package/es/index.js +1 -1
- package/es/modeSingleSingle/InputPrefix.js +29 -0
- package/es/modeSingleSingle/index2.js +369 -0
- package/es/search.js +2 -3
- package/es/searchTagList/PureTag.js +57 -0
- package/es/searchTagList/index.js +30 -14
- package/es/style.js +2 -2
- package/lib/constants.d.ts +2 -0
- package/lib/constants.js +6 -2
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -1
- package/lib/modeSingleSingle/InputPrefix.d.ts +2 -0
- package/lib/modeSingleSingle/InputPrefix.js +43 -0
- package/lib/modeSingleSingle/index2.d.ts +4 -0
- package/lib/modeSingleSingle/index2.js +400 -0
- package/lib/search.js +2 -4
- package/lib/searchTagList/PureTag.d.ts +14 -0
- package/lib/searchTagList/PureTag.js +71 -0
- package/lib/searchTagList/index.d.ts +3 -1
- package/lib/searchTagList/index.js +31 -15
- package/lib/style.js +2 -2
- package/lib/types/IRcSearchProps.type.d.ts +22 -21
- package/lib/types/IRcSearchTagItemProps.type.d.ts +2 -2
- package/lib/types/IRcSearchTagListProps.type.d.ts +9 -5
- package/package.json +2 -1
- package/demos/demo2.demo.tsx +0 -81
- package/demos/demo3.demo.tsx +0 -90
- package/demos/demo4.demo.tsx +0 -137
- package/dist/index.css +0 -1
- package/dist/index.js +0 -60
- package/doc-dist/16.js +0 -6
- package/doc-dist/17.js +0 -6
- package/doc-dist/18.js +0 -6
- package/doc-dist/19.js +0 -6
- package/doc-dist/20.js +0 -6
- package/docs/markdown-render.doc.md +0 -21
- package/docs/test.doc.md +0 -8
- package/es/modeSingleMulti/index.js +0 -868
- package/es/modeSingleSingle/index.js +0 -201
- package/lib/modeSingleMulti/index.d.ts +0 -2
- package/lib/modeSingleMulti/index.js +0 -894
- package/lib/modeSingleSingle/index.d.ts +0 -2
- package/lib/modeSingleSingle/index.js +0 -226
|
@@ -1,201 +0,0 @@
|
|
|
1
|
-
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
|
|
2
|
-
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
|
-
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
|
-
import React, { useState } from "react";
|
|
5
|
-
import classNames from 'classnames'; // import styled from "styled-components";
|
|
6
|
-
|
|
7
|
-
import { Button, ConfigProvider, Icon, Select } from '@alicloud/console-components';
|
|
8
|
-
import { SearchWarp } from "../style";
|
|
9
|
-
import { getSelectOptionAdatp } from '../utils';
|
|
10
|
-
var AutoComplete = Select.AutoComplete;
|
|
11
|
-
|
|
12
|
-
var ModeSingleSingle = function ModeSingleSingle(props) {
|
|
13
|
-
var options = props.options,
|
|
14
|
-
onSuggest = props.onSuggest,
|
|
15
|
-
onSearch = props.onSearch,
|
|
16
|
-
_props$prefix = props.prefix,
|
|
17
|
-
prefix = _props$prefix === void 0 ? "next-" : _props$prefix;
|
|
18
|
-
var optionItem = options[0];
|
|
19
|
-
|
|
20
|
-
if (!optionItem.templateProps) {
|
|
21
|
-
optionItem.templateProps = {};
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var _useState = useState([]),
|
|
25
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
26
|
-
inputDataSource = _useState2[0],
|
|
27
|
-
setInputDataSource = _useState2[1];
|
|
28
|
-
|
|
29
|
-
var _useState3 = useState(false),
|
|
30
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
31
|
-
visible = _useState4[0],
|
|
32
|
-
setVisible = _useState4[1];
|
|
33
|
-
|
|
34
|
-
var _useState5 = useState({}),
|
|
35
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
36
|
-
allFileds = _useState6[0],
|
|
37
|
-
setAllFileds = _useState6[1];
|
|
38
|
-
|
|
39
|
-
var _useState7 = useState(''),
|
|
40
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
41
|
-
inputValue = _useState8[0],
|
|
42
|
-
setInputValue = _useState8[1];
|
|
43
|
-
|
|
44
|
-
var itemRender = function itemRender(item, searchKey) {
|
|
45
|
-
var label = item.label;
|
|
46
|
-
|
|
47
|
-
if (searchKey && searchKey.length) {
|
|
48
|
-
var key = searchKey.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
49
|
-
var reg = new RegExp("(".concat(key, ")"), 'ig');
|
|
50
|
-
label = label.replace(reg, function (x) {
|
|
51
|
-
return "<span class=\"".concat(prefix, "-select-highlight\" style=\"background-color: #EFF3F8;font-weight: 500;\">").concat(x, "</span>");
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
56
|
-
dangerouslySetInnerHTML: {
|
|
57
|
-
__html: label
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
function inputChange(_x, _x2, _x3) {
|
|
63
|
-
return _inputChange.apply(this, arguments);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
function _inputChange() {
|
|
67
|
-
_inputChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value, actionType, dataIndex) {
|
|
68
|
-
var changeFileds, _changeFileds, list, newDataSource;
|
|
69
|
-
|
|
70
|
-
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
71
|
-
while (1) {
|
|
72
|
-
switch (_context.prev = _context.next) {
|
|
73
|
-
case 0:
|
|
74
|
-
if (!(actionType === 'itemClick')) {
|
|
75
|
-
_context.next = 7;
|
|
76
|
-
break;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
changeFileds = Object.create({});
|
|
80
|
-
changeFileds[dataIndex] = value;
|
|
81
|
-
setAllFileds(changeFileds);
|
|
82
|
-
setVisible(false);
|
|
83
|
-
_context.next = 17;
|
|
84
|
-
break;
|
|
85
|
-
|
|
86
|
-
case 7:
|
|
87
|
-
setInputValue(value); // fuzzyDisable
|
|
88
|
-
|
|
89
|
-
if (!optionItem.templateProps || !optionItem.templateProps.fuzzyDisable) {
|
|
90
|
-
_changeFileds = Object.create({});
|
|
91
|
-
_changeFileds[dataIndex] = value;
|
|
92
|
-
setAllFileds(_changeFileds);
|
|
93
|
-
} //
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
if (value === '') {
|
|
97
|
-
setInputDataSource([]);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
if (!onSuggest) {
|
|
101
|
-
_context.next = 17;
|
|
102
|
-
break;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
_context.next = 13;
|
|
106
|
-
return onSuggest(value, dataIndex);
|
|
107
|
-
|
|
108
|
-
case 13:
|
|
109
|
-
list = _context.sent;
|
|
110
|
-
// console.log('res suggest', res);
|
|
111
|
-
newDataSource = [{
|
|
112
|
-
label: optionItem.label,
|
|
113
|
-
children: list
|
|
114
|
-
}];
|
|
115
|
-
setInputDataSource(newDataSource);
|
|
116
|
-
setVisible(true);
|
|
117
|
-
|
|
118
|
-
case 17:
|
|
119
|
-
case "end":
|
|
120
|
-
return _context.stop();
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}, _callee);
|
|
124
|
-
}));
|
|
125
|
-
return _inputChange.apply(this, arguments);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
function selectChange(_x4, _x5) {
|
|
129
|
-
return _selectChange.apply(this, arguments);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
function _selectChange() {
|
|
133
|
-
_selectChange = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(value, dataIndex) {
|
|
134
|
-
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
135
|
-
while (1) {
|
|
136
|
-
switch (_context2.prev = _context2.next) {
|
|
137
|
-
case 0:
|
|
138
|
-
case "end":
|
|
139
|
-
return _context2.stop();
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}, _callee2);
|
|
143
|
-
}));
|
|
144
|
-
return _selectChange.apply(this, arguments);
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
function onCommonSearch() {
|
|
148
|
-
if (onSearch) {
|
|
149
|
-
onSearch(allFileds);
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return /*#__PURE__*/React.createElement(SearchWarp, {
|
|
154
|
-
prefix: prefix
|
|
155
|
-
}, optionItem.template === 'input' && /*#__PURE__*/React.createElement("div", {
|
|
156
|
-
className: classNames('left-wrap', "".concat(prefix, "input"))
|
|
157
|
-
}, /*#__PURE__*/React.createElement(AutoComplete, {
|
|
158
|
-
className: classNames('main-input', 'single'),
|
|
159
|
-
placeholder: optionItem.templateProps.placeholder || "\u9ED8\u8BA4\u6309".concat(optionItem.label, "\u641C\u7D22"),
|
|
160
|
-
hasClear: true,
|
|
161
|
-
hasBorder: false,
|
|
162
|
-
dataSource: inputDataSource,
|
|
163
|
-
visible: visible,
|
|
164
|
-
value: inputValue,
|
|
165
|
-
onBlur: function onBlur() {
|
|
166
|
-
setVisible(false);
|
|
167
|
-
} // @ts-ignore
|
|
168
|
-
,
|
|
169
|
-
itemRender: itemRender,
|
|
170
|
-
onChange: function onChange(value, actionType) {
|
|
171
|
-
inputChange(value, actionType, optionItem.dataIndex);
|
|
172
|
-
}
|
|
173
|
-
})), optionItem.template === 'select' && /*#__PURE__*/React.createElement("div", {
|
|
174
|
-
className: classNames('left-wrap', "".concat(prefix, "input"))
|
|
175
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
176
|
-
className: classNames('condition')
|
|
177
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
178
|
-
className: classNames('condition-item')
|
|
179
|
-
}, optionItem.label)), /*#__PURE__*/React.createElement(Select, {
|
|
180
|
-
className: classNames('main-input', 'single'),
|
|
181
|
-
placeholder: optionItem.templateProps.placeholder || "\u8BF7\u9009\u62E9".concat(optionItem.label),
|
|
182
|
-
hasClear: true,
|
|
183
|
-
hasBorder: false,
|
|
184
|
-
dataSource: getSelectOptionAdatp(optionItem.label, optionItem.templateProps.dataSource),
|
|
185
|
-
onChange: function onChange(value) {
|
|
186
|
-
selectChange(value, optionItem.dataIndex);
|
|
187
|
-
},
|
|
188
|
-
popupStyle: {
|
|
189
|
-
minWidth: 'auto'
|
|
190
|
-
}
|
|
191
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
192
|
-
className: classNames('right-wrap')
|
|
193
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
194
|
-
className: classNames('search-btn'),
|
|
195
|
-
onClick: onCommonSearch
|
|
196
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
197
|
-
type: "search"
|
|
198
|
-
}))));
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
export default ConfigProvider.config(ModeSingleSingle);
|