@alfalab/core-components-select 10.6.4 → 10.6.5
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/dist/Component-9404bb50.d.ts +33 -0
- package/dist/Component-9404bb50.js +359 -0
- package/dist/Component-b963ee30.d.ts +5 -0
- package/dist/Component-b963ee30.js +247 -0
- package/dist/Component.d.ts +1 -1
- package/dist/Component.js +2 -2
- package/dist/components/arrow/Component.js +1 -1
- package/dist/components/arrow/index.css +3 -3
- package/dist/components/base-select/Component.d.ts +0 -5
- package/dist/components/base-select/Component.js +11 -241
- package/dist/components/base-select/index.css +7 -7
- package/dist/components/base-select/index.d.ts +1 -1
- package/dist/components/base-select/index.js +2 -2
- package/dist/components/checkmark/Component.js +1 -1
- package/dist/components/checkmark/index.css +7 -7
- package/dist/components/field/Component.js +2 -2
- package/dist/components/field/index.css +9 -9
- package/dist/components/field/index.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +12 -2
- package/dist/components/native-select/Component.js +1 -1
- package/dist/components/native-select/index.js +1 -1
- package/dist/components/optgroup/Component.d.ts +1 -1
- package/dist/components/optgroup/Component.js +3 -3
- package/dist/components/optgroup/index.css +6 -6
- package/dist/components/option/Component.js +2 -2
- package/dist/components/option/index.css +20 -20
- package/dist/components/option/index.js +1 -1
- package/dist/components/options-list/Component.js +4 -4
- package/dist/components/options-list/index.css +6 -6
- package/dist/components/options-list/index.js +1 -1
- package/dist/components/select-mobile/Component.d.ts +0 -0
- package/dist/components/select-mobile/Component.js +38 -0
- package/dist/components/select-mobile/checkmark/Component.d.ts +4 -0
- package/dist/components/select-mobile/checkmark/Component.js +24 -0
- package/dist/components/select-mobile/checkmark/index.css +37 -0
- package/dist/components/select-mobile/checkmark/index.d.ts +1 -0
- package/dist/components/select-mobile/checkmark/index.js +11 -0
- package/dist/components/select-mobile/index.css +68 -0
- package/dist/components/select-mobile/index.d.ts +1 -0
- package/dist/components/select-mobile/index.js +38 -0
- package/dist/components/select-mobile/options-list/Component.d.ts +4 -0
- package/dist/components/select-mobile/options-list/Component.js +51 -0
- package/dist/components/select-mobile/options-list/index.css +65 -0
- package/dist/components/select-mobile/options-list/index.d.ts +1 -0
- package/dist/components/select-mobile/options-list/index.js +16 -0
- package/dist/components/virtual-options-list/Component.js +2 -2
- package/dist/components/virtual-options-list/index.css +12 -12
- package/dist/components/virtual-options-list/index.js +1 -1
- package/dist/cssm/Component-9bc41b6c.d.ts +5 -0
- package/dist/cssm/Component-9bc41b6c.js +246 -0
- package/dist/cssm/Component-d45c0e41.d.ts +33 -0
- package/dist/cssm/Component-d45c0e41.js +365 -0
- package/dist/cssm/Component.d.ts +1 -1
- package/dist/cssm/Component.js +1 -1
- package/dist/cssm/components/base-select/Component.d.ts +0 -5
- package/dist/cssm/components/base-select/Component.js +12 -240
- package/dist/cssm/components/base-select/index.d.ts +1 -1
- package/dist/cssm/components/base-select/index.js +1 -1
- package/dist/cssm/components/index.d.ts +1 -0
- package/dist/cssm/components/index.js +17 -1
- package/dist/cssm/components/optgroup/Component.d.ts +1 -1
- package/dist/cssm/components/optgroup/Component.js +2 -2
- package/dist/cssm/components/options-list/Component.js +2 -2
- package/dist/cssm/components/select-mobile/Component.d.ts +0 -0
- package/dist/cssm/components/select-mobile/Component.js +52 -0
- package/dist/cssm/components/select-mobile/checkmark/Component.d.ts +4 -0
- package/dist/cssm/components/select-mobile/checkmark/Component.js +23 -0
- package/dist/cssm/components/select-mobile/checkmark/index.d.ts +1 -0
- package/dist/cssm/components/select-mobile/checkmark/index.js +12 -0
- package/dist/cssm/components/select-mobile/checkmark/index.module.css +36 -0
- package/dist/cssm/components/select-mobile/index.d.ts +1 -0
- package/dist/cssm/components/select-mobile/index.js +52 -0
- package/dist/cssm/components/select-mobile/index.module.css +67 -0
- package/dist/cssm/components/select-mobile/options-list/Component.d.ts +4 -0
- package/dist/cssm/components/select-mobile/options-list/Component.js +51 -0
- package/dist/cssm/components/select-mobile/options-list/index.d.ts +1 -0
- package/dist/cssm/components/select-mobile/options-list/index.js +18 -0
- package/dist/cssm/components/select-mobile/options-list/index.module.css +64 -0
- package/dist/cssm/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/dist/cssm/hook-f5b8fe4f.d.ts +3 -3
- package/dist/cssm/index.js +14 -6
- package/dist/cssm/presets/index.js +13 -6
- package/dist/cssm/presets/useSelectWithApply/hook.js +13 -6
- package/dist/cssm/presets/useSelectWithApply/options-list-with-apply/Component.js +12 -5
- package/dist/cssm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/dist/cssm/presets/useSelectWithApply/options-list-with-apply/index.js +12 -5
- package/dist/cssm/typings.d.ts +29 -0
- package/dist/esm/Component-25510e34.d.ts +33 -0
- package/dist/esm/Component-25510e34.js +348 -0
- package/dist/esm/Component-385efde8.d.ts +5 -0
- package/dist/esm/Component-385efde8.js +238 -0
- package/dist/esm/Component.d.ts +1 -1
- package/dist/esm/Component.js +2 -2
- package/dist/esm/components/arrow/Component.js +1 -1
- package/dist/esm/components/arrow/index.css +3 -3
- package/dist/esm/components/base-select/Component.d.ts +0 -5
- package/dist/esm/components/base-select/Component.js +10 -238
- package/dist/esm/components/base-select/index.css +7 -7
- package/dist/esm/components/base-select/index.d.ts +1 -1
- package/dist/esm/components/base-select/index.js +2 -2
- package/dist/esm/components/checkmark/Component.js +1 -1
- package/dist/esm/components/checkmark/index.css +7 -7
- package/dist/esm/components/field/Component.js +2 -2
- package/dist/esm/components/field/index.css +9 -9
- package/dist/esm/components/field/index.js +1 -1
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +11 -2
- package/dist/esm/components/native-select/Component.js +1 -1
- package/dist/esm/components/native-select/index.js +1 -1
- package/dist/esm/components/optgroup/Component.d.ts +1 -1
- package/dist/esm/components/optgroup/Component.js +3 -3
- package/dist/esm/components/optgroup/index.css +6 -6
- package/dist/esm/components/option/Component.js +2 -2
- package/dist/esm/components/option/index.css +20 -20
- package/dist/esm/components/option/index.js +1 -1
- package/dist/esm/components/options-list/Component.js +4 -4
- package/dist/esm/components/options-list/index.css +6 -6
- package/dist/esm/components/options-list/index.js +1 -1
- package/dist/esm/components/select-mobile/Component.d.ts +0 -0
- package/dist/esm/components/select-mobile/Component.js +30 -0
- package/dist/esm/components/select-mobile/checkmark/Component.d.ts +4 -0
- package/dist/esm/components/select-mobile/checkmark/Component.js +15 -0
- package/dist/esm/components/select-mobile/checkmark/index.css +37 -0
- package/dist/esm/components/select-mobile/checkmark/index.d.ts +1 -0
- package/dist/esm/components/select-mobile/checkmark/index.js +3 -0
- package/dist/esm/components/select-mobile/index.css +68 -0
- package/dist/esm/components/select-mobile/index.d.ts +1 -0
- package/dist/esm/components/select-mobile/index.js +30 -0
- package/dist/esm/components/select-mobile/options-list/Component.d.ts +4 -0
- package/dist/esm/components/select-mobile/options-list/Component.js +42 -0
- package/dist/esm/components/select-mobile/options-list/index.css +65 -0
- package/dist/esm/components/select-mobile/options-list/index.d.ts +1 -0
- package/dist/esm/components/select-mobile/options-list/index.js +8 -0
- package/dist/esm/components/virtual-options-list/Component.js +2 -2
- package/dist/esm/components/virtual-options-list/index.css +12 -12
- package/dist/esm/components/virtual-options-list/index.js +1 -1
- package/dist/esm/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/dist/esm/hook-f5b8fe4f.d.ts +3 -3
- package/dist/esm/index.js +9 -5
- package/dist/esm/{intersection-observer-812c9e4f.d.ts → intersection-observer-0bdc3704.d.ts} +0 -0
- package/dist/esm/{intersection-observer-812c9e4f.js → intersection-observer-0bdc3704.js} +0 -0
- package/dist/esm/presets/index.js +9 -5
- package/dist/esm/presets/useLazyLoading/hook.js +3 -3
- package/dist/esm/presets/useLazyLoading/index.css +2 -2
- package/dist/esm/presets/useSelectWithApply/hook.js +9 -5
- package/dist/esm/presets/useSelectWithApply/options-list-with-apply/Component.js +9 -5
- package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/dist/esm/presets/useSelectWithApply/options-list-with-apply/index.js +9 -5
- package/dist/esm/presets/useSelectWithLoading/hook.js +2 -2
- package/dist/esm/presets/useSelectWithLoading/index.css +2 -2
- package/dist/esm/{tslib.es6-de132685.d.ts → tslib.es6-a9457d88.d.ts} +0 -0
- package/dist/esm/{tslib.es6-de132685.js → tslib.es6-a9457d88.js} +0 -0
- package/dist/esm/typings.d.ts +29 -0
- package/dist/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/dist/hook-f5b8fe4f.d.ts +3 -3
- package/dist/index.js +12 -7
- package/dist/{intersection-observer-25b5554f.d.ts → intersection-observer-0fef5c01.d.ts} +0 -0
- package/dist/{intersection-observer-25b5554f.js → intersection-observer-0fef5c01.js} +0 -0
- package/dist/modern/Component-17dae8dc.d.ts +33 -0
- package/dist/modern/Component-17dae8dc.js +363 -0
- package/dist/modern/Component-e21aa51b.d.ts +5 -0
- package/dist/modern/Component-e21aa51b.js +247 -0
- package/dist/modern/Component.d.ts +1 -1
- package/dist/modern/Component.js +1 -1
- package/dist/modern/components/arrow/Component.js +1 -1
- package/dist/modern/components/arrow/index.css +3 -3
- package/dist/modern/components/base-select/Component.d.ts +0 -5
- package/dist/modern/components/base-select/Component.js +9 -247
- package/dist/modern/components/base-select/index.css +7 -7
- package/dist/modern/components/base-select/index.d.ts +1 -1
- package/dist/modern/components/base-select/index.js +1 -1
- package/dist/modern/components/checkmark/Component.js +1 -1
- package/dist/modern/components/checkmark/index.css +7 -7
- package/dist/modern/components/field/Component.js +1 -1
- package/dist/modern/components/field/index.css +9 -9
- package/dist/modern/components/index.d.ts +1 -0
- package/dist/modern/components/index.js +10 -1
- package/dist/modern/components/optgroup/Component.d.ts +1 -1
- package/dist/modern/components/optgroup/Component.js +3 -3
- package/dist/modern/components/optgroup/index.css +6 -6
- package/dist/modern/components/option/Component.js +1 -1
- package/dist/modern/components/option/index.css +20 -20
- package/dist/modern/components/options-list/Component.js +3 -3
- package/dist/modern/components/options-list/index.css +6 -6
- package/dist/modern/components/select-mobile/Component.d.ts +0 -0
- package/dist/modern/components/select-mobile/Component.js +29 -0
- package/dist/modern/components/select-mobile/checkmark/Component.d.ts +4 -0
- package/dist/modern/components/select-mobile/checkmark/Component.js +11 -0
- package/dist/modern/components/select-mobile/checkmark/index.css +37 -0
- package/dist/modern/components/select-mobile/checkmark/index.d.ts +1 -0
- package/dist/modern/components/select-mobile/checkmark/index.js +3 -0
- package/dist/modern/components/select-mobile/index.css +68 -0
- package/dist/modern/components/select-mobile/index.d.ts +1 -0
- package/dist/modern/components/select-mobile/index.js +29 -0
- package/dist/modern/components/select-mobile/options-list/Component.d.ts +4 -0
- package/dist/modern/components/select-mobile/options-list/Component.js +37 -0
- package/dist/modern/components/select-mobile/options-list/index.css +65 -0
- package/dist/modern/components/select-mobile/options-list/index.d.ts +1 -0
- package/dist/modern/components/select-mobile/options-list/index.js +7 -0
- package/dist/modern/components/virtual-options-list/Component.js +1 -1
- package/dist/modern/components/virtual-options-list/index.css +12 -12
- package/dist/modern/getDataTestId-3fe0d3e6.d.ts +2 -0
- package/dist/modern/hook-f5b8fe4f.d.ts +3 -3
- package/dist/modern/index.js +8 -4
- package/dist/modern/{intersection-observer-812c9e4f.d.ts → intersection-observer-0bdc3704.d.ts} +0 -0
- package/dist/modern/{intersection-observer-812c9e4f.js → intersection-observer-0bdc3704.js} +0 -0
- package/dist/modern/presets/index.js +8 -4
- package/dist/modern/presets/useLazyLoading/hook.js +2 -2
- package/dist/modern/presets/useLazyLoading/index.css +2 -2
- package/dist/modern/presets/useSelectWithApply/hook.js +8 -4
- package/dist/modern/presets/useSelectWithApply/options-list-with-apply/Component.js +8 -4
- package/dist/modern/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/dist/modern/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/dist/modern/presets/useSelectWithApply/options-list-with-apply/index.js +8 -4
- package/dist/modern/presets/useSelectWithLoading/hook.js +1 -1
- package/dist/modern/presets/useSelectWithLoading/index.css +2 -2
- package/dist/modern/typings.d.ts +29 -0
- package/dist/presets/index.js +11 -7
- package/dist/presets/useLazyLoading/hook.js +3 -3
- package/dist/presets/useLazyLoading/index.css +2 -2
- package/dist/presets/useSelectWithApply/hook.js +11 -7
- package/dist/presets/useSelectWithApply/options-list-with-apply/Component.js +10 -6
- package/dist/presets/useSelectWithApply/options-list-with-apply/index.css +4 -4
- package/dist/presets/useSelectWithApply/options-list-with-apply/index.d.ts +1 -1
- package/dist/presets/useSelectWithApply/options-list-with-apply/index.js +10 -6
- package/dist/presets/useSelectWithLoading/hook.js +2 -2
- package/dist/presets/useSelectWithLoading/index.css +2 -2
- package/dist/{tslib.es6-2027080d.d.ts → tslib.es6-b9d0d522.d.ts} +0 -0
- package/dist/{tslib.es6-2027080d.js → tslib.es6-b9d0d522.js} +0 -0
- package/dist/typings.d.ts +29 -0
- package/package.json +14 -12
- package/dist/cssm/hook-3b9bd559.d.ts +0 -12
- package/dist/cssm/hook-3b9bd559.js +0 -147
- package/dist/esm/hook-73d6fe0f.d.ts +0 -12
- package/dist/esm/hook-73d6fe0f.js +0 -131
- package/dist/hook-81a989b0.d.ts +0 -12
- package/dist/hook-81a989b0.js +0 -140
- package/dist/modern/hook-42b89ed1.d.ts +0 -12
- package/dist/modern/hook-42b89ed1.js +0 -132
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-f8106a15.js');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var cn = require('classnames');
|
|
6
|
-
require('@alfalab/hooks');
|
|
7
|
-
require('@alfalab/core-components-form-control/dist/cssm');
|
|
8
|
-
var utils = require('./utils.js');
|
|
9
|
-
require('./components/field/index.module.css');
|
|
10
|
-
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
11
|
-
require('./components/arrow/index.module.css');
|
|
12
|
-
require('./components/optgroup/index.module.css');
|
|
13
|
-
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
14
|
-
require('@alfalab/core-components-checkbox/dist/cssm');
|
|
15
|
-
require('./components/checkmark/index.module.css');
|
|
16
|
-
require('./components/option/index.module.css');
|
|
17
|
-
require('./components/base-select/Component.js');
|
|
18
|
-
require('./Component.js');
|
|
19
|
-
require('react-virtual');
|
|
20
|
-
require('./components/virtual-options-list/index.module.css');
|
|
21
|
-
require('@alfalab/core-components-skeleton/dist/cssm');
|
|
22
|
-
require('./presets/useSelectWithLoading/index.module.css');
|
|
23
|
-
require('./intersection-observer-8c55e13a.js');
|
|
24
|
-
require('./presets/useLazyLoading/index.module.css');
|
|
25
|
-
var coreComponentsButton = require('@alfalab/core-components-button/dist/cssm');
|
|
26
|
-
var styles = require('./presets/useSelectWithApply/options-list-with-apply/index.module.css');
|
|
27
|
-
|
|
28
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
|
-
|
|
30
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
31
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
32
|
-
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
33
|
-
|
|
34
|
-
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
35
|
-
var _b;
|
|
36
|
-
var toggleMenu = _a.toggleMenu, _c = _a.OptionsList, OptionsList = _c === void 0 ? components_optionsList_Component.OptionsList : _c, defaultGetOptionProps = _a.getOptionProps, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.selectedDraft, selectedDraft = _e === void 0 ? [] : _e, _f = _a.flatOptions, flatOptions = _f === void 0 ? [] : _f, _g = _a.onApply, onApply = _g === void 0 ? function () { return null; } : _g, _h = _a.onClear, onClear = _h === void 0 ? function () { return null; } : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return null; } : _j, _k = _a.visibleOptions, visibleOptions = _k === void 0 ? 5 : _k, restProps = tslib_es6.__rest(_a, ["toggleMenu", "OptionsList", "getOptionProps", "showClear", "selectedDraft", "flatOptions", "onApply", "onClear", "onClose", "visibleOptions"]);
|
|
37
|
-
var footerRef = React.useRef(null);
|
|
38
|
-
var getOptionProps = React.useCallback(function (option, index) {
|
|
39
|
-
var optionProps = defaultGetOptionProps(option, index);
|
|
40
|
-
var selected = option.key === SELECT_ALL_KEY
|
|
41
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
42
|
-
: selectedDraft.includes(option);
|
|
43
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
44
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
45
|
-
var handleApply = React.useCallback(function () {
|
|
46
|
-
onApply();
|
|
47
|
-
toggleMenu();
|
|
48
|
-
}, [onApply, toggleMenu]);
|
|
49
|
-
var handleClear = React.useCallback(function () {
|
|
50
|
-
onClear();
|
|
51
|
-
toggleMenu();
|
|
52
|
-
}, [onClear, toggleMenu]);
|
|
53
|
-
React.useEffect(function () {
|
|
54
|
-
var activeElement = document.activeElement;
|
|
55
|
-
setTimeout(function () {
|
|
56
|
-
if (footerRef.current) {
|
|
57
|
-
footerRef.current.focus();
|
|
58
|
-
}
|
|
59
|
-
}, 0);
|
|
60
|
-
return function () {
|
|
61
|
-
onClose();
|
|
62
|
-
if (activeElement) {
|
|
63
|
-
activeElement.focus();
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
67
|
-
}, []);
|
|
68
|
-
return (React__default['default'].createElement(OptionsList, tslib_es6.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, footer: React__default['default'].createElement("div", {
|
|
69
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
70
|
-
tabIndex: 0, className: cn__default['default'](styles__default['default'].footer, (_b = {},
|
|
71
|
-
_b[styles__default['default'].withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
72
|
-
_b)), ref: footerRef },
|
|
73
|
-
React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
74
|
-
showClear && (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
75
|
-
});
|
|
76
|
-
|
|
77
|
-
var SELECT_ALL_KEY = 'select_all';
|
|
78
|
-
var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
79
|
-
function useSelectWithApply(_a) {
|
|
80
|
-
var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.showClear, showClear = _c === void 0 ? true : _c, _d = _a.showSelectAll, showSelectAll = _d === void 0 ? false : _d;
|
|
81
|
-
var _e = React.useMemo(function () { return utils.processOptions(options, selected); }, [
|
|
82
|
-
options,
|
|
83
|
-
selected,
|
|
84
|
-
]), flatOptions = _e.flatOptions, selectedOptions = _e.selectedOptions;
|
|
85
|
-
var _f = React.useState(selectedOptions), selectedDraft = _f[0], setSelectedDraft = _f[1];
|
|
86
|
-
var selectedOptionsRef = React.useRef(selectedOptions);
|
|
87
|
-
var handleApply = React.useCallback(function () {
|
|
88
|
-
onChange({
|
|
89
|
-
selected: selectedDraft[0],
|
|
90
|
-
selectedMultiple: selectedDraft,
|
|
91
|
-
initiator: null,
|
|
92
|
-
});
|
|
93
|
-
}, [onChange, selectedDraft]);
|
|
94
|
-
var handleClear = React.useCallback(function () {
|
|
95
|
-
setSelectedDraft([]);
|
|
96
|
-
onChange({
|
|
97
|
-
selected: null,
|
|
98
|
-
selectedMultiple: [],
|
|
99
|
-
initiator: null,
|
|
100
|
-
});
|
|
101
|
-
}, [onChange]);
|
|
102
|
-
var handleChange = React.useCallback(function (_a) {
|
|
103
|
-
var initiator = _a.initiator, restArgs = tslib_es6.__rest(_a, ["initiator"]);
|
|
104
|
-
if (!initiator) {
|
|
105
|
-
onChange(tslib_es6.__assign({ initiator: null }, restArgs));
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
var initiatorSelected = selectedDraft.includes(initiator) ||
|
|
109
|
-
(initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
|
|
110
|
-
if (initiator.key === SELECT_ALL_KEY) {
|
|
111
|
-
setSelectedDraft(initiatorSelected ? [] : flatOptions);
|
|
112
|
-
}
|
|
113
|
-
else {
|
|
114
|
-
setSelectedDraft(initiatorSelected
|
|
115
|
-
? selectedDraft.filter(function (o) { return o !== initiator; })
|
|
116
|
-
: selectedDraft.concat(initiator));
|
|
117
|
-
}
|
|
118
|
-
}, [flatOptions, onChange, selectedDraft]);
|
|
119
|
-
var handleClose = React.useCallback(function () {
|
|
120
|
-
setSelectedDraft(selectedOptionsRef.current);
|
|
121
|
-
}, []);
|
|
122
|
-
React.useEffect(function () {
|
|
123
|
-
setSelectedDraft(selectedOptions);
|
|
124
|
-
selectedOptionsRef.current = selectedOptions;
|
|
125
|
-
}, [selectedOptions]);
|
|
126
|
-
var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib_es6.__spreadArrays([selectAllOption], options) : options); }, [options, showSelectAll]);
|
|
127
|
-
return {
|
|
128
|
-
OptionsList: OptionsListWithApply,
|
|
129
|
-
optionsListProps: {
|
|
130
|
-
OptionsList: OptionsList,
|
|
131
|
-
showClear: showClear && (selectedDraft.length > 0 || selectedOptions.length > 0),
|
|
132
|
-
onClear: handleClear,
|
|
133
|
-
onApply: handleApply,
|
|
134
|
-
onClose: handleClose,
|
|
135
|
-
selectedDraft: selectedDraft,
|
|
136
|
-
},
|
|
137
|
-
allowUnselect: true,
|
|
138
|
-
multiple: true,
|
|
139
|
-
options: memoizedOptions,
|
|
140
|
-
onChange: handleChange,
|
|
141
|
-
selected: selected,
|
|
142
|
-
};
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
exports.OptionsListWithApply = OptionsListWithApply;
|
|
146
|
-
exports.SELECT_ALL_KEY = SELECT_ALL_KEY;
|
|
147
|
-
exports.useSelectWithApply = useSelectWithApply;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { OptionShape, OptionsListProps } from "./typings";
|
|
4
|
-
declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
|
|
5
|
-
showClear?: boolean | undefined;
|
|
6
|
-
onApply?: (() => void) | undefined;
|
|
7
|
-
onClear?: (() => void) | undefined;
|
|
8
|
-
onClose?: (() => void) | undefined;
|
|
9
|
-
selectedDraft?: OptionShape[] | undefined;
|
|
10
|
-
OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
|
|
11
|
-
} & React.RefAttributes<unknown>>;
|
|
12
|
-
export { OptionsListWithApply };
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign, b as __spreadArrays } from './tslib.es6-de132685.js';
|
|
2
|
-
import React, { forwardRef, useRef, useCallback, useEffect, useMemo, useState } from 'react';
|
|
3
|
-
import cn from 'classnames';
|
|
4
|
-
import '@alfalab/hooks';
|
|
5
|
-
import '@alfalab/core-components-form-control/dist/esm';
|
|
6
|
-
import { processOptions } from './utils.js';
|
|
7
|
-
import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
8
|
-
import { OptionsList } from './components/options-list/Component.js';
|
|
9
|
-
import '@alfalab/core-components-checkbox/dist/esm';
|
|
10
|
-
import './components/base-select/Component.js';
|
|
11
|
-
import './Component.js';
|
|
12
|
-
import 'react-virtual';
|
|
13
|
-
import '@alfalab/core-components-skeleton/dist/esm';
|
|
14
|
-
import './intersection-observer-812c9e4f.js';
|
|
15
|
-
import { Button } from '@alfalab/core-components-button/dist/esm';
|
|
16
|
-
|
|
17
|
-
var styles = {"footer":"select__footer_1ev80","withBorder":"select__withBorder_1ev80"};
|
|
18
|
-
require('./presets/useSelectWithApply/options-list-with-apply/index.css')
|
|
19
|
-
|
|
20
|
-
var OptionsListWithApply = forwardRef(function (_a, ref) {
|
|
21
|
-
var _b;
|
|
22
|
-
var toggleMenu = _a.toggleMenu, _c = _a.OptionsList, OptionsList$1 = _c === void 0 ? OptionsList : _c, defaultGetOptionProps = _a.getOptionProps, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.selectedDraft, selectedDraft = _e === void 0 ? [] : _e, _f = _a.flatOptions, flatOptions = _f === void 0 ? [] : _f, _g = _a.onApply, onApply = _g === void 0 ? function () { return null; } : _g, _h = _a.onClear, onClear = _h === void 0 ? function () { return null; } : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return null; } : _j, _k = _a.visibleOptions, visibleOptions = _k === void 0 ? 5 : _k, restProps = __rest(_a, ["toggleMenu", "OptionsList", "getOptionProps", "showClear", "selectedDraft", "flatOptions", "onApply", "onClear", "onClose", "visibleOptions"]);
|
|
23
|
-
var footerRef = useRef(null);
|
|
24
|
-
var getOptionProps = useCallback(function (option, index) {
|
|
25
|
-
var optionProps = defaultGetOptionProps(option, index);
|
|
26
|
-
var selected = option.key === SELECT_ALL_KEY
|
|
27
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
28
|
-
: selectedDraft.includes(option);
|
|
29
|
-
return __assign(__assign({}, optionProps), { selected: selected });
|
|
30
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
31
|
-
var handleApply = useCallback(function () {
|
|
32
|
-
onApply();
|
|
33
|
-
toggleMenu();
|
|
34
|
-
}, [onApply, toggleMenu]);
|
|
35
|
-
var handleClear = useCallback(function () {
|
|
36
|
-
onClear();
|
|
37
|
-
toggleMenu();
|
|
38
|
-
}, [onClear, toggleMenu]);
|
|
39
|
-
useEffect(function () {
|
|
40
|
-
var activeElement = document.activeElement;
|
|
41
|
-
setTimeout(function () {
|
|
42
|
-
if (footerRef.current) {
|
|
43
|
-
footerRef.current.focus();
|
|
44
|
-
}
|
|
45
|
-
}, 0);
|
|
46
|
-
return function () {
|
|
47
|
-
onClose();
|
|
48
|
-
if (activeElement) {
|
|
49
|
-
activeElement.focus();
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
53
|
-
}, []);
|
|
54
|
-
return (React.createElement(OptionsList$1, __assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, footer: React.createElement("div", {
|
|
55
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
56
|
-
tabIndex: 0, className: cn(styles.footer, (_b = {},
|
|
57
|
-
_b[styles.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
58
|
-
_b)), ref: footerRef },
|
|
59
|
-
React.createElement(Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
60
|
-
showClear && (React.createElement(Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
var SELECT_ALL_KEY = 'select_all';
|
|
64
|
-
var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
65
|
-
function useSelectWithApply(_a) {
|
|
66
|
-
var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.showClear, showClear = _c === void 0 ? true : _c, _d = _a.showSelectAll, showSelectAll = _d === void 0 ? false : _d;
|
|
67
|
-
var _e = useMemo(function () { return processOptions(options, selected); }, [
|
|
68
|
-
options,
|
|
69
|
-
selected,
|
|
70
|
-
]), flatOptions = _e.flatOptions, selectedOptions = _e.selectedOptions;
|
|
71
|
-
var _f = useState(selectedOptions), selectedDraft = _f[0], setSelectedDraft = _f[1];
|
|
72
|
-
var selectedOptionsRef = useRef(selectedOptions);
|
|
73
|
-
var handleApply = useCallback(function () {
|
|
74
|
-
onChange({
|
|
75
|
-
selected: selectedDraft[0],
|
|
76
|
-
selectedMultiple: selectedDraft,
|
|
77
|
-
initiator: null,
|
|
78
|
-
});
|
|
79
|
-
}, [onChange, selectedDraft]);
|
|
80
|
-
var handleClear = useCallback(function () {
|
|
81
|
-
setSelectedDraft([]);
|
|
82
|
-
onChange({
|
|
83
|
-
selected: null,
|
|
84
|
-
selectedMultiple: [],
|
|
85
|
-
initiator: null,
|
|
86
|
-
});
|
|
87
|
-
}, [onChange]);
|
|
88
|
-
var handleChange = useCallback(function (_a) {
|
|
89
|
-
var initiator = _a.initiator, restArgs = __rest(_a, ["initiator"]);
|
|
90
|
-
if (!initiator) {
|
|
91
|
-
onChange(__assign({ initiator: null }, restArgs));
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
var initiatorSelected = selectedDraft.includes(initiator) ||
|
|
95
|
-
(initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
|
|
96
|
-
if (initiator.key === SELECT_ALL_KEY) {
|
|
97
|
-
setSelectedDraft(initiatorSelected ? [] : flatOptions);
|
|
98
|
-
}
|
|
99
|
-
else {
|
|
100
|
-
setSelectedDraft(initiatorSelected
|
|
101
|
-
? selectedDraft.filter(function (o) { return o !== initiator; })
|
|
102
|
-
: selectedDraft.concat(initiator));
|
|
103
|
-
}
|
|
104
|
-
}, [flatOptions, onChange, selectedDraft]);
|
|
105
|
-
var handleClose = useCallback(function () {
|
|
106
|
-
setSelectedDraft(selectedOptionsRef.current);
|
|
107
|
-
}, []);
|
|
108
|
-
useEffect(function () {
|
|
109
|
-
setSelectedDraft(selectedOptions);
|
|
110
|
-
selectedOptionsRef.current = selectedOptions;
|
|
111
|
-
}, [selectedOptions]);
|
|
112
|
-
var memoizedOptions = useMemo(function () { return (showSelectAll ? __spreadArrays([selectAllOption], options) : options); }, [options, showSelectAll]);
|
|
113
|
-
return {
|
|
114
|
-
OptionsList: OptionsListWithApply,
|
|
115
|
-
optionsListProps: {
|
|
116
|
-
OptionsList: OptionsList,
|
|
117
|
-
showClear: showClear && (selectedDraft.length > 0 || selectedOptions.length > 0),
|
|
118
|
-
onClear: handleClear,
|
|
119
|
-
onApply: handleApply,
|
|
120
|
-
onClose: handleClose,
|
|
121
|
-
selectedDraft: selectedDraft,
|
|
122
|
-
},
|
|
123
|
-
allowUnselect: true,
|
|
124
|
-
multiple: true,
|
|
125
|
-
options: memoizedOptions,
|
|
126
|
-
onChange: handleChange,
|
|
127
|
-
selected: selected,
|
|
128
|
-
};
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };
|
package/dist/hook-81a989b0.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { OptionShape, OptionsListProps } from "./typings";
|
|
4
|
-
declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
|
|
5
|
-
showClear?: boolean | undefined;
|
|
6
|
-
onApply?: (() => void) | undefined;
|
|
7
|
-
onClear?: (() => void) | undefined;
|
|
8
|
-
onClose?: (() => void) | undefined;
|
|
9
|
-
selectedDraft?: OptionShape[] | undefined;
|
|
10
|
-
OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
|
|
11
|
-
} & React.RefAttributes<unknown>>;
|
|
12
|
-
export { OptionsListWithApply };
|
package/dist/hook-81a989b0.js
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-2027080d.js');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var cn = require('classnames');
|
|
6
|
-
require('@alfalab/hooks');
|
|
7
|
-
require('@alfalab/core-components-form-control');
|
|
8
|
-
var utils = require('./utils.js');
|
|
9
|
-
require('@alfalab/icons-glyph/ChevronDownMIcon');
|
|
10
|
-
var components_optionsList_Component = require('./components/options-list/Component.js');
|
|
11
|
-
require('@alfalab/core-components-checkbox');
|
|
12
|
-
require('./components/base-select/Component.js');
|
|
13
|
-
require('./Component.js');
|
|
14
|
-
require('react-virtual');
|
|
15
|
-
require('@alfalab/core-components-skeleton');
|
|
16
|
-
require('./intersection-observer-25b5554f.js');
|
|
17
|
-
var coreComponentsButton = require('@alfalab/core-components-button');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
|
-
|
|
24
|
-
var styles = {"footer":"select__footer_1ev80","withBorder":"select__withBorder_1ev80"};
|
|
25
|
-
require('./presets/useSelectWithApply/options-list-with-apply/index.css')
|
|
26
|
-
|
|
27
|
-
var OptionsListWithApply = React.forwardRef(function (_a, ref) {
|
|
28
|
-
var _b;
|
|
29
|
-
var toggleMenu = _a.toggleMenu, _c = _a.OptionsList, OptionsList = _c === void 0 ? components_optionsList_Component.OptionsList : _c, defaultGetOptionProps = _a.getOptionProps, _d = _a.showClear, showClear = _d === void 0 ? true : _d, _e = _a.selectedDraft, selectedDraft = _e === void 0 ? [] : _e, _f = _a.flatOptions, flatOptions = _f === void 0 ? [] : _f, _g = _a.onApply, onApply = _g === void 0 ? function () { return null; } : _g, _h = _a.onClear, onClear = _h === void 0 ? function () { return null; } : _h, _j = _a.onClose, onClose = _j === void 0 ? function () { return null; } : _j, _k = _a.visibleOptions, visibleOptions = _k === void 0 ? 5 : _k, restProps = tslib_es6.__rest(_a, ["toggleMenu", "OptionsList", "getOptionProps", "showClear", "selectedDraft", "flatOptions", "onApply", "onClear", "onClose", "visibleOptions"]);
|
|
30
|
-
var footerRef = React.useRef(null);
|
|
31
|
-
var getOptionProps = React.useCallback(function (option, index) {
|
|
32
|
-
var optionProps = defaultGetOptionProps(option, index);
|
|
33
|
-
var selected = option.key === SELECT_ALL_KEY
|
|
34
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
35
|
-
: selectedDraft.includes(option);
|
|
36
|
-
return tslib_es6.__assign(tslib_es6.__assign({}, optionProps), { selected: selected });
|
|
37
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
38
|
-
var handleApply = React.useCallback(function () {
|
|
39
|
-
onApply();
|
|
40
|
-
toggleMenu();
|
|
41
|
-
}, [onApply, toggleMenu]);
|
|
42
|
-
var handleClear = React.useCallback(function () {
|
|
43
|
-
onClear();
|
|
44
|
-
toggleMenu();
|
|
45
|
-
}, [onClear, toggleMenu]);
|
|
46
|
-
React.useEffect(function () {
|
|
47
|
-
var activeElement = document.activeElement;
|
|
48
|
-
setTimeout(function () {
|
|
49
|
-
if (footerRef.current) {
|
|
50
|
-
footerRef.current.focus();
|
|
51
|
-
}
|
|
52
|
-
}, 0);
|
|
53
|
-
return function () {
|
|
54
|
-
onClose();
|
|
55
|
-
if (activeElement) {
|
|
56
|
-
activeElement.focus();
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
|
-
}, []);
|
|
61
|
-
return (React__default['default'].createElement(OptionsList, tslib_es6.__assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, footer: React__default['default'].createElement("div", {
|
|
62
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
63
|
-
tabIndex: 0, className: cn__default['default'](styles.footer, (_b = {},
|
|
64
|
-
_b[styles.withBorder] = visibleOptions && flatOptions.length > visibleOptions,
|
|
65
|
-
_b)), ref: footerRef },
|
|
66
|
-
React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
67
|
-
showClear && (React__default['default'].createElement(coreComponentsButton.Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
var SELECT_ALL_KEY = 'select_all';
|
|
71
|
-
var selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
72
|
-
function useSelectWithApply(_a) {
|
|
73
|
-
var options = _a.options, selected = _a.selected, _b = _a.onChange, onChange = _b === void 0 ? function () { return null; } : _b, OptionsList = _a.OptionsList, _c = _a.showClear, showClear = _c === void 0 ? true : _c, _d = _a.showSelectAll, showSelectAll = _d === void 0 ? false : _d;
|
|
74
|
-
var _e = React.useMemo(function () { return utils.processOptions(options, selected); }, [
|
|
75
|
-
options,
|
|
76
|
-
selected,
|
|
77
|
-
]), flatOptions = _e.flatOptions, selectedOptions = _e.selectedOptions;
|
|
78
|
-
var _f = React.useState(selectedOptions), selectedDraft = _f[0], setSelectedDraft = _f[1];
|
|
79
|
-
var selectedOptionsRef = React.useRef(selectedOptions);
|
|
80
|
-
var handleApply = React.useCallback(function () {
|
|
81
|
-
onChange({
|
|
82
|
-
selected: selectedDraft[0],
|
|
83
|
-
selectedMultiple: selectedDraft,
|
|
84
|
-
initiator: null,
|
|
85
|
-
});
|
|
86
|
-
}, [onChange, selectedDraft]);
|
|
87
|
-
var handleClear = React.useCallback(function () {
|
|
88
|
-
setSelectedDraft([]);
|
|
89
|
-
onChange({
|
|
90
|
-
selected: null,
|
|
91
|
-
selectedMultiple: [],
|
|
92
|
-
initiator: null,
|
|
93
|
-
});
|
|
94
|
-
}, [onChange]);
|
|
95
|
-
var handleChange = React.useCallback(function (_a) {
|
|
96
|
-
var initiator = _a.initiator, restArgs = tslib_es6.__rest(_a, ["initiator"]);
|
|
97
|
-
if (!initiator) {
|
|
98
|
-
onChange(tslib_es6.__assign({ initiator: null }, restArgs));
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
var initiatorSelected = selectedDraft.includes(initiator) ||
|
|
102
|
-
(initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
|
|
103
|
-
if (initiator.key === SELECT_ALL_KEY) {
|
|
104
|
-
setSelectedDraft(initiatorSelected ? [] : flatOptions);
|
|
105
|
-
}
|
|
106
|
-
else {
|
|
107
|
-
setSelectedDraft(initiatorSelected
|
|
108
|
-
? selectedDraft.filter(function (o) { return o !== initiator; })
|
|
109
|
-
: selectedDraft.concat(initiator));
|
|
110
|
-
}
|
|
111
|
-
}, [flatOptions, onChange, selectedDraft]);
|
|
112
|
-
var handleClose = React.useCallback(function () {
|
|
113
|
-
setSelectedDraft(selectedOptionsRef.current);
|
|
114
|
-
}, []);
|
|
115
|
-
React.useEffect(function () {
|
|
116
|
-
setSelectedDraft(selectedOptions);
|
|
117
|
-
selectedOptionsRef.current = selectedOptions;
|
|
118
|
-
}, [selectedOptions]);
|
|
119
|
-
var memoizedOptions = React.useMemo(function () { return (showSelectAll ? tslib_es6.__spreadArrays([selectAllOption], options) : options); }, [options, showSelectAll]);
|
|
120
|
-
return {
|
|
121
|
-
OptionsList: OptionsListWithApply,
|
|
122
|
-
optionsListProps: {
|
|
123
|
-
OptionsList: OptionsList,
|
|
124
|
-
showClear: showClear && (selectedDraft.length > 0 || selectedOptions.length > 0),
|
|
125
|
-
onClear: handleClear,
|
|
126
|
-
onApply: handleApply,
|
|
127
|
-
onClose: handleClose,
|
|
128
|
-
selectedDraft: selectedDraft,
|
|
129
|
-
},
|
|
130
|
-
allowUnselect: true,
|
|
131
|
-
multiple: true,
|
|
132
|
-
options: memoizedOptions,
|
|
133
|
-
onChange: handleChange,
|
|
134
|
-
selected: selected,
|
|
135
|
-
};
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
exports.OptionsListWithApply = OptionsListWithApply;
|
|
139
|
-
exports.SELECT_ALL_KEY = SELECT_ALL_KEY;
|
|
140
|
-
exports.useSelectWithApply = useSelectWithApply;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import { OptionShape, OptionsListProps } from "./typings";
|
|
4
|
-
declare const OptionsListWithApply: React.ForwardRefExoticComponent<OptionsListProps & {
|
|
5
|
-
showClear?: boolean | undefined;
|
|
6
|
-
onApply?: (() => void) | undefined;
|
|
7
|
-
onClear?: (() => void) | undefined;
|
|
8
|
-
onClose?: (() => void) | undefined;
|
|
9
|
-
selectedDraft?: OptionShape[] | undefined;
|
|
10
|
-
OptionsList?: React.FC<OptionsListProps & React.RefAttributes<unknown>> | undefined;
|
|
11
|
-
} & React.RefAttributes<unknown>>;
|
|
12
|
-
export { OptionsListWithApply };
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useRef, useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
-
import cn from 'classnames';
|
|
3
|
-
import '@alfalab/hooks';
|
|
4
|
-
import '@alfalab/core-components-form-control/dist/modern';
|
|
5
|
-
import { processOptions } from './utils.js';
|
|
6
|
-
import '@alfalab/icons-glyph/ChevronDownMIcon';
|
|
7
|
-
import { OptionsList } from './components/options-list/Component.js';
|
|
8
|
-
import '@alfalab/core-components-checkbox/dist/modern';
|
|
9
|
-
import './components/base-select/Component.js';
|
|
10
|
-
import './Component.js';
|
|
11
|
-
import 'react-virtual';
|
|
12
|
-
import '@alfalab/core-components-skeleton/dist/modern';
|
|
13
|
-
import './intersection-observer-812c9e4f.js';
|
|
14
|
-
import { Button } from '@alfalab/core-components-button/dist/modern';
|
|
15
|
-
|
|
16
|
-
var styles = {"footer":"select__footer_1ev80","withBorder":"select__withBorder_1ev80"};
|
|
17
|
-
require('./presets/useSelectWithApply/options-list-with-apply/index.css')
|
|
18
|
-
|
|
19
|
-
const OptionsListWithApply = forwardRef(({ toggleMenu, OptionsList: OptionsList$1 = OptionsList, getOptionProps: defaultGetOptionProps, showClear = true, selectedDraft = [], flatOptions = [], onApply = () => null, onClear = () => null, onClose = () => null, visibleOptions = 5, ...restProps }, ref) => {
|
|
20
|
-
const footerRef = useRef(null);
|
|
21
|
-
const getOptionProps = useCallback((option, index) => {
|
|
22
|
-
const optionProps = defaultGetOptionProps(option, index);
|
|
23
|
-
const selected = option.key === SELECT_ALL_KEY
|
|
24
|
-
? selectedDraft.length === flatOptions.length - 1
|
|
25
|
-
: selectedDraft.includes(option);
|
|
26
|
-
return {
|
|
27
|
-
...optionProps,
|
|
28
|
-
selected,
|
|
29
|
-
};
|
|
30
|
-
}, [defaultGetOptionProps, flatOptions.length, selectedDraft]);
|
|
31
|
-
const handleApply = useCallback(() => {
|
|
32
|
-
onApply();
|
|
33
|
-
toggleMenu();
|
|
34
|
-
}, [onApply, toggleMenu]);
|
|
35
|
-
const handleClear = useCallback(() => {
|
|
36
|
-
onClear();
|
|
37
|
-
toggleMenu();
|
|
38
|
-
}, [onClear, toggleMenu]);
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
const activeElement = document.activeElement;
|
|
41
|
-
setTimeout(() => {
|
|
42
|
-
if (footerRef.current) {
|
|
43
|
-
footerRef.current.focus();
|
|
44
|
-
}
|
|
45
|
-
}, 0);
|
|
46
|
-
return () => {
|
|
47
|
-
onClose();
|
|
48
|
-
if (activeElement) {
|
|
49
|
-
activeElement.focus();
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
53
|
-
}, []);
|
|
54
|
-
return (React.createElement(OptionsList$1, Object.assign({}, restProps, { ref: ref, visibleOptions: visibleOptions, toggleMenu: toggleMenu, flatOptions: flatOptions, getOptionProps: getOptionProps, footer: React.createElement("div", {
|
|
55
|
-
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
56
|
-
tabIndex: 0, className: cn(styles.footer, {
|
|
57
|
-
[styles.withBorder]: visibleOptions && flatOptions.length > visibleOptions,
|
|
58
|
-
}), ref: footerRef },
|
|
59
|
-
React.createElement(Button, { size: 'xxs', view: 'primary', onClick: handleApply }, "\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C"),
|
|
60
|
-
showClear && (React.createElement(Button, { size: 'xxs', view: 'secondary', onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"))) })));
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
const SELECT_ALL_KEY = 'select_all';
|
|
64
|
-
const selectAllOption = { key: SELECT_ALL_KEY, content: 'Выбрать все' };
|
|
65
|
-
function useSelectWithApply({ options, selected, onChange = () => null, OptionsList, showClear = true, showSelectAll = false, }) {
|
|
66
|
-
const { flatOptions, selectedOptions } = useMemo(() => processOptions(options, selected), [
|
|
67
|
-
options,
|
|
68
|
-
selected,
|
|
69
|
-
]);
|
|
70
|
-
const [selectedDraft, setSelectedDraft] = useState(selectedOptions);
|
|
71
|
-
const selectedOptionsRef = useRef(selectedOptions);
|
|
72
|
-
const handleApply = useCallback(() => {
|
|
73
|
-
onChange({
|
|
74
|
-
selected: selectedDraft[0],
|
|
75
|
-
selectedMultiple: selectedDraft,
|
|
76
|
-
initiator: null,
|
|
77
|
-
});
|
|
78
|
-
}, [onChange, selectedDraft]);
|
|
79
|
-
const handleClear = useCallback(() => {
|
|
80
|
-
setSelectedDraft([]);
|
|
81
|
-
onChange({
|
|
82
|
-
selected: null,
|
|
83
|
-
selectedMultiple: [],
|
|
84
|
-
initiator: null,
|
|
85
|
-
});
|
|
86
|
-
}, [onChange]);
|
|
87
|
-
const handleChange = useCallback(({ initiator, ...restArgs }) => {
|
|
88
|
-
if (!initiator) {
|
|
89
|
-
onChange({
|
|
90
|
-
initiator: null,
|
|
91
|
-
...restArgs,
|
|
92
|
-
});
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
const initiatorSelected = selectedDraft.includes(initiator) ||
|
|
96
|
-
(initiator.key === SELECT_ALL_KEY && selectedDraft.length === flatOptions.length);
|
|
97
|
-
if (initiator.key === SELECT_ALL_KEY) {
|
|
98
|
-
setSelectedDraft(initiatorSelected ? [] : flatOptions);
|
|
99
|
-
}
|
|
100
|
-
else {
|
|
101
|
-
setSelectedDraft(initiatorSelected
|
|
102
|
-
? selectedDraft.filter(o => o !== initiator)
|
|
103
|
-
: selectedDraft.concat(initiator));
|
|
104
|
-
}
|
|
105
|
-
}, [flatOptions, onChange, selectedDraft]);
|
|
106
|
-
const handleClose = useCallback(() => {
|
|
107
|
-
setSelectedDraft(selectedOptionsRef.current);
|
|
108
|
-
}, []);
|
|
109
|
-
useEffect(() => {
|
|
110
|
-
setSelectedDraft(selectedOptions);
|
|
111
|
-
selectedOptionsRef.current = selectedOptions;
|
|
112
|
-
}, [selectedOptions]);
|
|
113
|
-
const memoizedOptions = useMemo(() => (showSelectAll ? [selectAllOption, ...options] : options), [options, showSelectAll]);
|
|
114
|
-
return {
|
|
115
|
-
OptionsList: OptionsListWithApply,
|
|
116
|
-
optionsListProps: {
|
|
117
|
-
OptionsList,
|
|
118
|
-
showClear: showClear && (selectedDraft.length > 0 || selectedOptions.length > 0),
|
|
119
|
-
onClear: handleClear,
|
|
120
|
-
onApply: handleApply,
|
|
121
|
-
onClose: handleClose,
|
|
122
|
-
selectedDraft,
|
|
123
|
-
},
|
|
124
|
-
allowUnselect: true,
|
|
125
|
-
multiple: true,
|
|
126
|
-
options: memoizedOptions,
|
|
127
|
-
onChange: handleChange,
|
|
128
|
-
selected,
|
|
129
|
-
};
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
export { OptionsListWithApply as O, SELECT_ALL_KEY as S, useSelectWithApply as u };
|