1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.default = void 0;
|
11 |
|
12 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13 |
|
14 | require("core-js/modules/es7.array.includes");
|
15 |
|
16 | require("core-js/modules/es6.string.includes");
|
17 |
|
18 | require("core-js/modules/es6.regexp.split");
|
19 |
|
20 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
21 |
|
22 | var _react = _interopRequireWildcard(require("react"));
|
23 |
|
24 | var _unmodeledLayer = _interopRequireDefault(require("@beisen-phoenix/unmodeled-layer"));
|
25 |
|
26 | var _select = _interopRequireDefault(require("@beisen-phoenix/select/"));
|
27 |
|
28 | var _singleSelectList = _interopRequireDefault(require("@beisen-phoenix/single-select-list"));
|
29 |
|
30 | var _groupSingleSelect = _interopRequireDefault(require("@beisen-phoenix/group-single-select"));
|
31 |
|
32 | var _multiSelectList = _interopRequireDefault(require("@beisen-phoenix/multi-select-list"));
|
33 |
|
34 | var _formControlPreview = _interopRequireDefault(require("@beisen-phoenix/form-control-preview"));
|
35 |
|
36 | var _utils = require("./utils");
|
37 |
|
38 | require("./index.css");
|
39 |
|
40 | var _commonUtils = _interopRequireDefault(require("@beisen-phoenix/common-utils"));
|
41 |
|
42 | var classes = _commonUtils.default.BEMClass('fieldDropdown');
|
43 |
|
44 | var onChange = function onChange(data) {};
|
45 |
|
46 | var FieldDropdown = function FieldDropdown(props) {
|
47 | var _props$optionSearch = props.optionSearch,
|
48 | optionSearch = _props$optionSearch === void 0 ? false : _props$optionSearch,
|
49 | _props$showCheckAll = props.showCheckAll,
|
50 | showCheckAll = _props$showCheckAll === void 0 ? true : _props$showCheckAll,
|
51 | _props$hasError = props.hasError,
|
52 | hasError = _props$hasError === void 0 ? false : _props$hasError,
|
53 | _props$isPreview = props.isPreview,
|
54 | isPreview = _props$isPreview === void 0 ? false : _props$isPreview,
|
55 | _props$selectType = props.selectType,
|
56 | selectType = _props$selectType === void 0 ? 'single' : _props$selectType,
|
57 | _props$disabled = props.disabled,
|
58 | disabled = _props$disabled === void 0 ? false : _props$disabled,
|
59 | layerWidth = props.layerWidth,
|
60 | onBlur = props.onBlur,
|
61 | _props$selectIsActive = props.selectIsActive,
|
62 | selectIsActive = _props$selectIsActive === void 0 ? false : _props$selectIsActive,
|
63 | _props$autoFocus = props.autoFocus,
|
64 | autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
|
65 | _props$hostSubmit = props.hostSubmit,
|
66 | hostSubmit = _props$hostSubmit === void 0 ? false : _props$hostSubmit,
|
67 | caseSensitive = props.caseSensitive,
|
68 | optionSearchAutoFocus = props.optionSearchAutoFocus,
|
69 | _props$splitKey = props.splitKey,
|
70 | splitKey = _props$splitKey === void 0 ? ',' : _props$splitKey;
|
71 | var isSearch = disabled ? false : 'isSearch' in props ? props.isSearch : true;
|
72 |
|
73 | var _useState = (0, _react.useState)(autoFocus),
|
74 | _useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
75 | visible = _useState2[0],
|
76 | setVisible = _useState2[1];
|
77 |
|
78 | var _useState3 = (0, _react.useState)(autoFocus),
|
79 | _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
80 | selectFocus = _useState4[0],
|
81 | setSelectFocus = _useState4[1];
|
82 |
|
83 | var layerWrapperRef = (0, _react.useRef)();
|
84 | var isWrapperInRef = (0, _react.useRef)(false);
|
85 |
|
86 | var inputRef = (0, _react.useRef)();
|
87 | var isBlurRef = (0, _react.useRef)(false);
|
88 | var isSelectClickRef = (0, _react.useRef)(false);
|
89 |
|
90 |
|
91 |
|
92 | var _useState5 = (0, _react.useState)(props.value || ''),
|
93 | _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
94 | selectedValue = _useState6[0],
|
95 | setSelectedValue = _useState6[1];
|
96 |
|
97 |
|
98 | var _useState7 = (0, _react.useState)(props.value || ''),
|
99 | _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
100 | selectedValueForMultiSelect = _useState8[0],
|
101 | setSelectedValueForMultiSelect = _useState8[1];
|
102 |
|
103 |
|
104 | var _useState9 = (0, _react.useState)(),
|
105 | _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
106 | searchWord = _useState10[0],
|
107 | setSearchWord = _useState10[1];
|
108 |
|
109 | (0, _react.useEffect)(function () {
|
110 | setSelectedValue(props.value || '');
|
111 | }, [props.value]);
|
112 | (0, _react.useEffect)(function () {
|
113 | setSelectedValueForMultiSelect(props.value || '');
|
114 | }, [props.value]);
|
115 |
|
116 | var toggleLayer = (0, _react.useCallback)(function (visible) {
|
117 | if (disabled) return;
|
118 |
|
119 | if (visible) setSearchWord('');
|
120 |
|
121 | visible && setSelectedValue(selectedValue);
|
122 |
|
123 | if (visible && selectType === 'multiple') {
|
124 |
|
125 | var selectLength = selectedValue && selectedValue.split(splitKey).length;
|
126 | var tmpLength = selectedValueForMultiSelect && selectedValueForMultiSelect.split(splitKey).length;
|
127 |
|
128 | if (tmpLength !== selectLength) {
|
129 | setSelectedValueForMultiSelect(selectedValue);
|
130 | }
|
131 | }
|
132 |
|
133 | if (isSelectClickRef.current) {
|
134 | setVisible(true);
|
135 | isSelectClickRef.current = false;
|
136 | } else {
|
137 | setVisible(visible);
|
138 | }
|
139 |
|
140 | if (visible) setSelectFocus(true);
|
141 | }, [selectedValue, selectedValueForMultiSelect, disabled]);
|
142 |
|
143 | var onDelete = (0, _react.useCallback)(function (data) {
|
144 | if (data) {
|
145 | var val = data.map(function (item) {
|
146 | return item.value;
|
147 | }).join(splitKey);
|
148 | setSelectedValue(val);
|
149 | setSelectedValueForMultiSelect(val);
|
150 | props.onChange && props.onChange(val);
|
151 | } else {
|
152 |
|
153 | setSearchWord('');
|
154 |
|
155 | if (selectType !== 'multiple') {
|
156 | setSelectedValue('');
|
157 | setSelectedValueForMultiSelect('');
|
158 | props.onChange && props.onChange('');
|
159 | }
|
160 | }
|
161 |
|
162 | setVisible(false);
|
163 | }, [props.onChange]);
|
164 |
|
165 | var onSearch = (0, _react.useCallback)(function (data) {
|
166 | setSearchWord(data);
|
167 | }, []);
|
168 |
|
169 | var onSelect = (0, _react.useCallback)(function (data) {
|
170 | if (selectType !== 'multiple') {
|
171 | setSelectedValue(data.value);
|
172 | setVisible(false);
|
173 | props.onChange && props.onChange(data.value);
|
174 |
|
175 | if (layerWrapperRef.current) {
|
176 | layerWrapperRef.current.focus();
|
177 | }
|
178 | } else {
|
179 |
|
180 | var newData = data.map(function (item) {
|
181 | return item.value;
|
182 | });
|
183 |
|
184 | if (searchWord) {
|
185 |
|
186 | var selectedArr = selectedValue && selectedValue.split(splitKey) || [];
|
187 |
|
188 | var searchdValue = (0, _utils.getFilterdOptions)(selectType, props.options, searchWord, caseSensitive).map(function (item) {
|
189 | return item.value;
|
190 | });
|
191 |
|
192 | var mayLost = selectedArr.filter(function (v) {
|
193 | return searchdValue.indexOf(v) > -1;
|
194 | });
|
195 |
|
196 | var realLost = mayLost.filter(function (item) {
|
197 | return !newData.includes(item);
|
198 | });
|
199 |
|
200 | realLost.forEach(function (item) {
|
201 | var index = selectedArr.indexOf(item);
|
202 | if (index !== -1) selectedArr.splice(index, 1);
|
203 | });
|
204 |
|
205 | for (var ind in newData) {
|
206 | if (!selectedArr.includes(newData[ind])) {
|
207 | selectedArr.push(newData[ind]);
|
208 | }
|
209 | }
|
210 |
|
211 | setSelectedValueForMultiSelect(selectedArr.join(splitKey));
|
212 | } else {
|
213 | setSelectedValueForMultiSelect(newData.join(splitKey));
|
214 | }
|
215 |
|
216 | if (layerWrapperRef.current) {
|
217 | layerWrapperRef.current.focus();
|
218 | }
|
219 | }
|
220 |
|
221 | setSelectFocus(true);
|
222 | }, [selectType, selectedValue, searchWord]);
|
223 |
|
224 | var afterOnClick = function afterOnClick(values) {
|
225 | setSelectedValue(values);
|
226 | setSearchWord('');
|
227 | setVisible(false);
|
228 | };
|
229 |
|
230 |
|
231 | var footer = (0, _react.useMemo)(function () {
|
232 | var values = selectedValueForMultiSelect;
|
233 | return selectType == 'multiple' ? [{
|
234 | text: '确定',
|
235 | onClick: function onClick() {
|
236 | if (hostSubmit) {
|
237 | props.onChange && props.onChange(values, function () {
|
238 | afterOnClick(values);
|
239 | });
|
240 | afterOnClick(values);
|
241 | } else {
|
242 | props.onChange && props.onChange(values);
|
243 | afterOnClick(values);
|
244 | }
|
245 |
|
246 | if (layerWrapperRef.current) {
|
247 | layerWrapperRef.current.focus();
|
248 | }
|
249 | }
|
250 | }] : null;
|
251 | }, [selectType, selectedValueForMultiSelect, selectedValue, props.onChange]);
|
252 |
|
253 | var getSelectList = function getSelectList() {
|
254 |
|
255 |
|
256 |
|
257 | var canSearch = isSearch ? false : optionSearch ? true : false;
|
258 | var options = searchWord ? (0, _utils.getFilterdOptions)(selectType, props.options, searchWord, caseSensitive) : props.options;
|
259 | var selectContent;
|
260 |
|
261 | if (selectType == 'group') {
|
262 | selectContent = _react.default.createElement(_groupSingleSelect.default, {
|
263 | searchWord: searchWord,
|
264 | value: selectedValue,
|
265 | options: options,
|
266 | onChange: onSelect,
|
267 | caseSensitive: caseSensitive,
|
268 | autoFocus: optionSearchAutoFocus
|
269 | });
|
270 | }
|
271 |
|
272 | if (selectType == 'multiple') {
|
273 | var selectedData = selectedValueForMultiSelect ? options.filter(function (item) {
|
274 | return selectedValueForMultiSelect.split(splitKey).includes(item.value);
|
275 | }) : undefined;
|
276 | selectContent = _react.default.createElement(_multiSelectList.default, {
|
277 | searchWord: searchWord,
|
278 | showCheckAll: showCheckAll,
|
279 | defaultSelectedItems: selectedData,
|
280 | isSearch: canSearch
|
281 | ,
|
282 | items: options,
|
283 | extraCls: classes({
|
284 | element: 'multiSelect'
|
285 | }),
|
286 | onChange: onSelect,
|
287 | caseSensitive: caseSensitive,
|
288 | autoFocus: optionSearchAutoFocus
|
289 | });
|
290 | }
|
291 |
|
292 | if (!selectContent) {
|
293 | selectContent = _react.default.createElement(_singleSelectList.default, {
|
294 | searchWord: searchWord,
|
295 | selectedValue: selectedValue,
|
296 | items: options,
|
297 | isSearch: canSearch,
|
298 | onChange: onSelect,
|
299 | caseSensitive: caseSensitive,
|
300 | autoFocus: optionSearchAutoFocus
|
301 | });
|
302 | }
|
303 |
|
304 | return selectContent;
|
305 | };
|
306 |
|
307 | var getPopupContainer = (0, _react.useCallback)(function () {
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 | }, [props.getPopupContainer]);
|
314 | var handleWrapperBlur = (0, _react.useCallback)(function () {
|
315 | if (!visible && !isWrapperInRef.current && !isBlurRef.current) {
|
316 | onBlur && onBlur();
|
317 | isBlurRef.current = true;
|
318 | setTimeout(function () {
|
319 | isBlurRef.current = false;
|
320 | }, 10);
|
321 | setSelectFocus(false);
|
322 | }
|
323 | }, [visible, onBlur]);
|
324 |
|
325 | var handleWrapperMouseEnterLeave = (0, _react.useCallback)(function (flag) {
|
326 | return function (e) {
|
327 | isWrapperInRef.current = flag;
|
328 | };
|
329 | }, []);
|
330 | var getInputRef = (0, _react.useCallback)(function (node) {
|
331 | inputRef.current = node;
|
332 | }, []);
|
333 |
|
334 |
|
335 |
|
336 |
|
337 |
|
338 |
|
339 |
|
340 |
|
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 |
|
348 | (0, _react.useEffect)(function () {
|
349 | if (inputRef.current) {
|
350 | inputRef.current.onblur = function () {
|
351 | if (!visible && !isWrapperInRef.current && !isBlurRef.current) {
|
352 | onBlur && onBlur();
|
353 | setSelectFocus(false);
|
354 | isBlurRef.current = true;
|
355 | setTimeout(function () {
|
356 | isBlurRef.current = false;
|
357 | }, 10);
|
358 | }
|
359 | };
|
360 | }
|
361 | }, [onBlur, visible]);
|
362 | (0, _react.useEffect)(function () {
|
363 | if (autoFocus && inputRef.current) {
|
364 | inputRef.current.focus();
|
365 | }
|
366 | }, []);
|
367 |
|
368 | var handleSelectClick = (0, _react.useCallback)(function () {
|
369 | if (isSearch) {
|
370 | isSelectClickRef.current = true;
|
371 | }
|
372 | }, [isSearch]);
|
373 |
|
374 | if (isPreview) {
|
375 | return _react.default.createElement(_formControlPreview.default, {
|
376 | multiple: selectType === 'multiple',
|
377 | value: (0, _utils.getDisplayLabel)(props.options, selectType, selectedValue, props.displayLabel, splitKey)
|
378 | });
|
379 | }
|
380 |
|
381 | return _react.default.createElement(_unmodeledLayer.default, {
|
382 | blockContainer: true,
|
383 | trigger: ['click'],
|
384 | content: visible ? getSelectList() : null,
|
385 | visible: visible,
|
386 | zIndex: props.zIndex,
|
387 | onVisibleChange: toggleLayer,
|
388 | footer: props.options.length > 0 ? footer : null,
|
389 | width: layerWidth,
|
390 | getPopupContainer: props.getPopupContainer,
|
391 | destroyPopupOnHide: true,
|
392 | stretch: props.stretch
|
393 | }, _react.default.createElement("div", {
|
394 | tabIndex: 2,
|
395 | className: "select_dropdown_wrapper",
|
396 | onMouseEnter: handleWrapperMouseEnterLeave(true),
|
397 | onMouseLeave: handleWrapperMouseEnterLeave(false),
|
398 | ref: layerWrapperRef,
|
399 | onBlur: handleWrapperBlur
|
400 | }, _react.default.createElement(_select.default, (0, _extends2.default)({}, props, {
|
401 | extraCls: classes({
|
402 | element: '',
|
403 | extra: props.extraCls
|
404 | }),
|
405 | isSearch: isSearch,
|
406 | error: hasError,
|
407 | inputRef: getInputRef,
|
408 | onClick: handleSelectClick,
|
409 | value: (0, _utils.getDisplayLabel)(props.options, selectType, selectedValue, props.displayLabel, splitKey),
|
410 | isMultiSelect: selectType == 'multiple',
|
411 | onDelete: onDelete,
|
412 | isActive: selectIsActive ? selectFocus : visible,
|
413 | onSearch: onSearch,
|
414 | onChange: onChange,
|
415 | exitSearch: !visible
|
416 | }))));
|
417 | };
|
418 |
|
419 | FieldDropdown.defaultProps = {
|
420 | options: []
|
421 | };
|
422 | var _default = FieldDropdown;
|
423 | exports.default = _default; |
\ | No newline at end of file |