intelicoreact 1.3.19 → 1.3.21
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/Atomic/FormElements/ActionAlert/ActionAlert.js +23 -15
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js +23 -15
- package/dist/Atomic/FormElements/Calendar/Calendar.js +124 -69
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +36 -27
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js +39 -23
- package/dist/Atomic/FormElements/Datepicker/Datepicker.js +246 -110
- package/dist/Atomic/FormElements/Datepicker/components/Calendar.js +85 -44
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +414 -246
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +9 -5
- package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js +165 -93
- package/dist/Atomic/FormElements/FileLoader/FileLoader.js +64 -39
- package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js +132 -51
- package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js +73 -34
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js +75 -54
- package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js +110 -67
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.js +83 -33
- package/dist/Atomic/FormElements/Input/Input.js +253 -161
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +102 -48
- package/dist/Atomic/FormElements/InputColor/InputColor.js +40 -27
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.js +58 -28
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +176 -108
- package/dist/Atomic/FormElements/InputDateRange/components/DateInput.js +57 -32
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +302 -184
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +157 -85
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +16 -11
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +193 -76
- package/dist/Atomic/FormElements/InputLink/InputLink.js +58 -34
- package/dist/Atomic/FormElements/InputMask/InputCarretPosition.js +12 -8
- package/dist/Atomic/FormElements/InputMask/InputMask.js +964 -554
- package/dist/Atomic/FormElements/InputMask/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask/functions.js +43 -17
- package/dist/Atomic/FormElements/InputMask2/InputMask2.js +404 -268
- package/dist/Atomic/FormElements/InputMask2/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask2/functions.js +43 -17
- package/dist/Atomic/FormElements/InputMask3/InputMask3.js +459 -299
- package/dist/Atomic/FormElements/InputMask3/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask3/functions.js +43 -17
- package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js +113 -53
- package/dist/Atomic/FormElements/InputsRow/InputsRow.js +118 -64
- package/dist/Atomic/FormElements/Label/Label.js +23 -13
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +349 -217
- package/dist/Atomic/FormElements/MultiSelect/MultiSelect.js +47 -25
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +207 -133
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.js +61 -29
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js +42 -20
- package/dist/Atomic/FormElements/RadioInput/RadioInput.js +33 -22
- package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.js +43 -20
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +101 -54
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +102 -59
- package/dist/Atomic/FormElements/RangeList/RangeList.js +150 -89
- package/dist/Atomic/FormElements/RangeList/partial/RangeListRow.js +29 -23
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js +300 -135
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.js +571 -381
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.js +24 -14
- package/dist/Atomic/FormElements/Switcher/Switcher.js +29 -24
- package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.js +47 -25
- package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.js +32 -20
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js +55 -32
- package/dist/Atomic/FormElements/SwitcherRange/SwitcherRange.js +42 -22
- package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.js +33 -23
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.js +120 -51
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/partial/States.js +3 -2
- package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.js +46 -23
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +417 -253
- package/dist/Atomic/FormElements/Text/Text.js +53 -47
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js +31 -21
- package/dist/Atomic/FormElements/Textarea/Textarea.js +27 -16
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +128 -68
- package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js +36 -25
- package/dist/Atomic/FormElements/TimeRange/TimeRange.js +70 -33
- package/dist/Atomic/FormElements/UserContacts/UserContacts.js +124 -58
- package/dist/Atomic/FormElements/UserContacts/partial/defaultIcons.js +91 -0
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js +80 -48
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js +42 -32
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +60 -40
- package/dist/Atomic/FormElements/WidgetPseudoTable/partial/constructor.js +3 -2
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.js +69 -50
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/constructor.js +3 -3
- package/dist/Atomic/Layout/Header/Header.js +48 -21
- package/dist/Atomic/Layout/MainMenu/MainMenu.js +79 -36
- package/dist/Atomic/Layout/Spinner/Spinner.js +14 -8
- package/dist/Atomic/UI/Accordion/Accordion.js +48 -18
- package/dist/Atomic/UI/Accordion/AccordionItem.js +60 -35
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +106 -49
- package/dist/Atomic/UI/AccordionText/AccordionText.js +37 -13
- package/dist/Atomic/UI/AdvancedTag/AdvTag.js +94 -48
- package/dist/Atomic/UI/AdvancedTag/AdvancedTags.js +50 -22
- package/dist/Atomic/UI/Alert/Alert.js +44 -20
- package/dist/Atomic/UI/Arrow/Arrow.js +35 -15
- package/dist/Atomic/UI/Box/Box.js +21 -14
- package/dist/Atomic/UI/Button/Button.js +35 -26
- package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js +31 -22
- package/dist/Atomic/UI/Chart/Chart.js +86 -45
- package/dist/Atomic/UI/Chart/partial/Chart.constants.js +24 -14
- package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.js +22 -13
- package/dist/Atomic/UI/Chart/partial/datasetSetters.js +113 -68
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.js +140 -158
- package/dist/Atomic/UI/Chart/partial/optionsSetters.js +42 -26
- package/dist/Atomic/UI/Chart/partial/utils.js +48 -20
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js +42 -22
- package/dist/Atomic/UI/DateTime/DateTime.js +38 -23
- package/dist/Atomic/UI/DebugContainer/DebugContainer.js +36 -12
- package/dist/Atomic/UI/DebugContainer/useDebugContainer.js +21 -5
- package/dist/Atomic/UI/DoubleString/DoubleString.js +50 -27
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.js +63 -15
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +157 -62
- package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js +110 -47
- package/dist/Atomic/UI/Hint/Hint.js +94 -49
- package/dist/Atomic/UI/Modal/Modal.js +179 -149
- package/dist/Atomic/UI/Modal/ModalHOC.js +21 -12
- package/dist/Atomic/UI/Modal/partials/ModalFooter.js +12 -7
- package/dist/Atomic/UI/Modal/partials/ModalTitle.js +21 -17
- package/dist/Atomic/UI/Modal/partials/useMobileModal.js +167 -94
- package/dist/Atomic/UI/ModalBackup/Modal.js +90 -65
- package/dist/Atomic/UI/ModalBackup/ModalHOC.js +21 -12
- package/dist/Atomic/UI/ModalBackup/partials/ModalFooter.js +11 -6
- package/dist/Atomic/UI/ModalBackup/partials/ModalTitle.js +19 -15
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js +62 -32
- package/dist/Atomic/UI/NavLine/NavLine.js +211 -120
- package/dist/Atomic/UI/NavLine/Tabs.js +3 -2
- package/dist/Atomic/UI/PageTitle/PageTitle.js +17 -13
- package/dist/Atomic/UI/PieChart/PieChart.js +21 -11
- package/dist/Atomic/UI/Price/Price.js +13 -10
- package/dist/Atomic/UI/PriceRange/PriceRange.js +11 -7
- package/dist/Atomic/UI/ProgressLine/ProgressLine.js +56 -27
- package/dist/Atomic/UI/Status/Status.js +30 -19
- package/dist/Atomic/UI/Table/Partials/TdCell.js +71 -28
- package/dist/Atomic/UI/Table/Partials/TdHeader.js +16 -7
- package/dist/Atomic/UI/Table/Partials/TdRow.js +65 -29
- package/dist/Atomic/UI/Table/Partials/TdTitle.js +40 -16
- package/dist/Atomic/UI/Table/Table.js +47 -27
- package/dist/Atomic/UI/Table/TdTypes/TdActions.js +48 -18
- package/dist/Atomic/UI/Table/TdTypes/TdPriority.js +19 -9
- package/dist/Atomic/UI/Table/TdTypes/TdRange.js +8 -5
- package/dist/Atomic/UI/Table/TdTypes/TdWeight.js +47 -25
- package/dist/Atomic/UI/Tag/Tag.js +48 -20
- package/dist/Atomic/UI/TagList/TagList.js +150 -80
- package/dist/Atomic/UI/UserBox/UserBox.js +26 -14
- package/dist/Classes/AbortableFetch.js +422 -283
- package/dist/Classes/AnimatedHandler.js +56 -44
- package/dist/Classes/RESTAPI/index.js +433 -154
- package/dist/Classes/RESTAPI/partials/AbortableFetch.js +428 -290
- package/dist/Classes/RESTAPI/partials/ApiBase.js +67 -24
- package/dist/Classes/RESTAPI/partials/ApiRequestCreators.js +275 -57
- package/dist/Classes/RESTAPI/partials/ApiUtils.js +377 -146
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.js +403 -155
- package/dist/Classes/RESTAPI/partials/Utils.js +135 -81
- package/dist/Classes/RESTAPI/partials/_outerDependencies.js +6 -2
- package/dist/Classes/RESTAPI/partials/_utils.js +395 -101
- package/dist/Constants/index.constants.js +15 -8
- package/dist/Functions/Portal.js +33 -14
- package/dist/Functions/customEventListener.js +20 -5
- package/dist/Functions/fieldValueFormatters.js +211 -148
- package/dist/Functions/hooks/useFormFieldsChangesManager.js +137 -75
- package/dist/Functions/locale/createTranslator.js +27 -13
- package/dist/Functions/operations.js +49 -35
- package/dist/Functions/presets/inputMaskPresets.js +27 -25
- package/dist/Functions/presets/inputPresets.js +22 -19
- package/dist/Functions/presets/mobileKeyboardTypesPresets.js +9 -7
- package/dist/Functions/schemas.js +15 -6
- package/dist/Functions/useClickOutside.js +7 -3
- package/dist/Functions/useDebounce.js +25 -11
- package/dist/Functions/useFieldFocus.js +67 -42
- package/dist/Functions/useFormTools/form-drivers/ArrayWithObjects.js +54 -35
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +95 -74
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +91 -55
- package/dist/Functions/useFormTools/functions/General.js +99 -80
- package/dist/Functions/useFormTools/functions/RenderFields.js +72 -45
- package/dist/Functions/useFormTools/functions/usePrevious.js +7 -3
- package/dist/Functions/useFormTools/index.js +598 -382
- package/dist/Functions/useInputHighlightError.js +52 -27
- package/dist/Functions/useIsMobile.js +36 -13
- package/dist/Functions/useLocalStorage.js +22 -7
- package/dist/Functions/useLocationParams.js +27 -16
- package/dist/Functions/useMetaInfo.js +50 -19
- package/dist/Functions/useMouseUpOutside.js +5 -2
- package/dist/Functions/useOnlineStatus.js +26 -7
- package/dist/Functions/usePasswordChecker.js +77 -42
- package/dist/Functions/usePrevious.js +7 -3
- package/dist/Functions/useResize.js +32 -12
- package/dist/Functions/useScrollTo.js +20 -6
- package/dist/Functions/useToggle.js +30 -10
- package/dist/Functions/utils.js +366 -186
- package/dist/Molecular/CustomIcons/components/AffiliateNetworks.js +32 -21
- package/dist/Molecular/CustomIcons/components/AlertCircle.js +32 -21
- package/dist/Molecular/CustomIcons/components/AppStore.js +36 -25
- package/dist/Molecular/CustomIcons/components/Arrow.js +42 -31
- package/dist/Molecular/CustomIcons/components/ArrowDown.js +24 -13
- package/dist/Molecular/CustomIcons/components/ArrowLeft.js +27 -16
- package/dist/Molecular/CustomIcons/components/ArrowRight.js +27 -16
- package/dist/Molecular/CustomIcons/components/ArrowUp.js +24 -13
- package/dist/Molecular/CustomIcons/components/Bell.js +22 -11
- package/dist/Molecular/CustomIcons/components/Button.js +22 -11
- package/dist/Molecular/CustomIcons/components/Campaigns.js +23 -12
- package/dist/Molecular/CustomIcons/components/Check.js +23 -12
- package/dist/Molecular/CustomIcons/components/Check2.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronDown.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronDownDisabled.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronLeft.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronRight.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronUp.js +22 -11
- package/dist/Molecular/CustomIcons/components/ChevronUpDown.js +37 -26
- package/dist/Molecular/CustomIcons/components/Close.js +24 -13
- package/dist/Molecular/CustomIcons/components/ColumnsOrder.js +49 -38
- package/dist/Molecular/CustomIcons/components/Delete.js +23 -12
- package/dist/Molecular/CustomIcons/components/Edit.js +22 -11
- package/dist/Molecular/CustomIcons/components/Email.js +40 -29
- package/dist/Molecular/CustomIcons/components/FinturfLogo.js +30 -19
- package/dist/Molecular/CustomIcons/components/FinturfLogo2.js +38 -27
- package/dist/Molecular/CustomIcons/components/Flows.js +22 -11
- package/dist/Molecular/CustomIcons/components/Gift.js +27 -16
- package/dist/Molecular/CustomIcons/components/GoogleAuth.js +36 -25
- package/dist/Molecular/CustomIcons/components/GooglePlay.js +36 -25
- package/dist/Molecular/CustomIcons/components/HelpCircle.js +25 -14
- package/dist/Molecular/CustomIcons/components/HelpCircle2.js +26 -15
- package/dist/Molecular/CustomIcons/components/HelpCircleFilled.js +25 -14
- package/dist/Molecular/CustomIcons/components/Home.js +25 -14
- package/dist/Molecular/CustomIcons/components/Home2.js +28 -17
- package/dist/Molecular/CustomIcons/components/Key.js +30 -19
- package/dist/Molecular/CustomIcons/components/Landers.js +26 -15
- package/dist/Molecular/CustomIcons/components/Lock.js +22 -11
- package/dist/Molecular/CustomIcons/components/Mail.js +30 -19
- package/dist/Molecular/CustomIcons/components/Mastercard.js +72 -61
- package/dist/Molecular/CustomIcons/components/Minus.js +35 -24
- package/dist/Molecular/CustomIcons/components/Offers.js +23 -12
- package/dist/Molecular/CustomIcons/components/Pause.js +35 -24
- package/dist/Molecular/CustomIcons/components/PayPal.js +49 -38
- package/dist/Molecular/CustomIcons/components/PayPalLightLarge.js +36 -25
- package/dist/Molecular/CustomIcons/components/Phone.js +37 -26
- package/dist/Molecular/CustomIcons/components/Play.js +35 -24
- package/dist/Molecular/CustomIcons/components/Plus.js +35 -24
- package/dist/Molecular/CustomIcons/components/Profile.js +27 -16
- package/dist/Molecular/CustomIcons/components/QRCode.js +37 -26
- package/dist/Molecular/CustomIcons/components/Rectangle.js +22 -11
- package/dist/Molecular/CustomIcons/components/Revert.js +25 -14
- package/dist/Molecular/CustomIcons/components/Star.js +21 -10
- package/dist/Molecular/CustomIcons/components/Star2.js +23 -12
- package/dist/Molecular/CustomIcons/components/TrafficSources.js +25 -14
- package/dist/Molecular/CustomIcons/components/Trash.js +22 -11
- package/dist/Molecular/CustomIcons/components/TrashRed.js +22 -11
- package/dist/Molecular/CustomIcons/components/Triggers.js +22 -11
- package/dist/Molecular/CustomIcons/components/User.js +27 -16
- package/dist/Molecular/CustomIcons/components/Visa.js +38 -27
- package/dist/Molecular/CustomIcons/components/X.js +22 -11
- package/dist/Molecular/CustomIcons/index.js +183 -61
- package/dist/Molecular/FormElement/FormElement.js +27 -18
- package/dist/Molecular/FormWithDependOn/FormWithDependOn.js +108 -86
- package/dist/Molecular/FormWithDependOn/partials/_utils.js +34 -29
- package/dist/Molecular/InputAddress/InputAddress.js +312 -176
- package/dist/Molecular/InputPassword/InputPassword.js +39 -15
- package/dist/index.js +3 -1
- package/package.json +1 -1
|
@@ -1,180 +1,284 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof3 = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
4
7
|
Object.defineProperty(exports, "__esModule", {
|
|
5
8
|
value: true
|
|
6
9
|
});
|
|
7
10
|
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
13
|
+
|
|
8
14
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
15
|
+
|
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
+
|
|
18
|
+
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
19
|
+
|
|
20
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
21
|
+
|
|
9
22
|
var _react = _interopRequireWildcard(require("react"));
|
|
23
|
+
|
|
10
24
|
var _reactDom = require("react-dom");
|
|
25
|
+
|
|
11
26
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
27
|
+
|
|
12
28
|
var _reactFeather = require("react-feather");
|
|
29
|
+
|
|
13
30
|
var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
31
|
+
|
|
14
32
|
var _utils = require("../../../Functions/utils");
|
|
15
|
-
|
|
33
|
+
|
|
34
|
+
var _useIsMobile2 = _interopRequireDefault(require("../../../Functions/useIsMobile"));
|
|
35
|
+
|
|
16
36
|
var _Input = _interopRequireDefault(require("../../../Atomic/FormElements/Input/Input"));
|
|
37
|
+
|
|
17
38
|
var _RadioInput = _interopRequireDefault(require("../../../Atomic/FormElements/RadioInput/RadioInput"));
|
|
39
|
+
|
|
18
40
|
var _DropdownLoader = _interopRequireDefault(require("./components/DropdownLoader"));
|
|
41
|
+
|
|
19
42
|
require("./Dropdown.scss");
|
|
20
|
-
|
|
21
|
-
function
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
43
|
+
|
|
44
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
45
|
+
|
|
46
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
47
|
+
|
|
48
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
49
|
+
|
|
50
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
51
|
+
|
|
52
|
+
var RC = 'dropdown';
|
|
53
|
+
var MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
|
|
54
|
+
|
|
55
|
+
var Dropdown = function Dropdown(_ref) {
|
|
56
|
+
var _options$find, _dropdownListWrapperR4, _dropdownListWrapperR5, _dropdownListRef$curr5, _dropdownListRef$curr6, _filteredOptions$find, _tabIndex$toString;
|
|
57
|
+
|
|
58
|
+
var label = _ref.label,
|
|
59
|
+
_ref$options = _ref.options,
|
|
60
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
61
|
+
value = _ref.value,
|
|
62
|
+
error = _ref.error,
|
|
63
|
+
disabled = _ref.disabled,
|
|
64
|
+
onChange = _ref.onChange,
|
|
65
|
+
placeholder = _ref.placeholder,
|
|
66
|
+
className = _ref.className,
|
|
67
|
+
isSearchable = _ref.isSearchable,
|
|
68
|
+
entity = _ref.entity,
|
|
69
|
+
scrollReactionObj = _ref.scrollReactionObj,
|
|
70
|
+
isListTop = _ref.isListTop,
|
|
71
|
+
_ref$isNotValidateASC = _ref.isNotValidateASCII,
|
|
72
|
+
isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
|
|
73
|
+
testId = _ref.testId,
|
|
74
|
+
_ref$sortAlphabetical = _ref.sortAlphabetical,
|
|
75
|
+
sortAlphabetical = _ref$sortAlphabetical === void 0 ? true : _ref$sortAlphabetical,
|
|
76
|
+
fieldKey = _ref.fieldKey,
|
|
77
|
+
id = _ref.id,
|
|
78
|
+
_ref$noOptionsText = _ref.noOptionsText,
|
|
79
|
+
noOptionsText = _ref$noOptionsText === void 0 ? 'No options available' : _ref$noOptionsText,
|
|
80
|
+
_ref$attributesOfNati = _ref.attributesOfNativeInput,
|
|
81
|
+
attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
|
|
82
|
+
isDoNotPullOutListOfMainContainer = _ref.isDoNotPullOutListOfMainContainer,
|
|
83
|
+
withMobileLogic = _ref.withMobileLogic,
|
|
84
|
+
_ref$minItemsForShowM = _ref.minItemsForShowMobileSearch,
|
|
85
|
+
minItemsForShowMobileSearch = _ref$minItemsForShowM === void 0 ? MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH : _ref$minItemsForShowM,
|
|
86
|
+
customTrigger = _ref.customTrigger,
|
|
87
|
+
tabIndex = _ref.tabIndex;
|
|
88
|
+
|
|
89
|
+
var _useIsMobile = (0, _useIsMobile2.default)(),
|
|
90
|
+
isMobileProp = _useIsMobile.isMobile;
|
|
91
|
+
|
|
92
|
+
var isMobile = isMobileProp && withMobileLogic;
|
|
93
|
+
|
|
94
|
+
var _useState = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2)),
|
|
95
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
96
|
+
dropdownId = _useState2[0],
|
|
97
|
+
setDropdownId = _useState2[1];
|
|
98
|
+
|
|
99
|
+
var _useState3 = (0, _react.useState)(false),
|
|
100
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
101
|
+
isOpen = _useState4[0],
|
|
102
|
+
setIsOpen = _useState4[1];
|
|
103
|
+
|
|
104
|
+
var _useState5 = (0, _react.useState)(),
|
|
105
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
106
|
+
searchValue = _useState6[0],
|
|
107
|
+
setSearchValue = _useState6[1];
|
|
108
|
+
|
|
109
|
+
var dropdownRef = (0, _react.useRef)(null);
|
|
110
|
+
var dropdownListRef = (0, _react.useRef)(null);
|
|
111
|
+
var dropdownListWrapperRef = (0, _react.useRef)(null);
|
|
112
|
+
var searchInputRef = (0, _react.useRef)(null);
|
|
113
|
+
var wrapperRef = (0, _react.useRef)(null);
|
|
114
|
+
|
|
115
|
+
var _useState7 = (0, _react.useState)(null),
|
|
116
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
117
|
+
initListHeight = _useState8[0],
|
|
118
|
+
setInitListHeight = _useState8[1];
|
|
119
|
+
|
|
120
|
+
var _useState9 = (0, _react.useState)(false),
|
|
121
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
122
|
+
isSearchChanged = _useState10[0],
|
|
123
|
+
setIsSearchChanged = _useState10[1];
|
|
124
|
+
|
|
125
|
+
var _useState11 = (0, _react.useState)(false),
|
|
126
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
127
|
+
isSearchInputFocused = _useState12[0],
|
|
128
|
+
setIsSearchInputFocused = _useState12[1];
|
|
129
|
+
|
|
130
|
+
var _useState13 = (0, _react.useState)(null),
|
|
131
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
132
|
+
isScrollableList = _useState14[0],
|
|
133
|
+
setIsScrollableList = _useState14[1];
|
|
134
|
+
|
|
135
|
+
var _useState15 = (0, _react.useState)(false),
|
|
136
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
137
|
+
isFixedMaxHeight = _useState16[0],
|
|
138
|
+
setIsFixedMaxHeight = _useState16[1];
|
|
139
|
+
|
|
140
|
+
var _useState17 = (0, _react.useState)(0),
|
|
141
|
+
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
142
|
+
scrollTop = _useState18[0],
|
|
143
|
+
setScrollTop = _useState18[1];
|
|
144
|
+
|
|
145
|
+
var _useState19 = (0, _react.useState)(1),
|
|
146
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
147
|
+
scrollHeight = _useState20[0],
|
|
148
|
+
setScrollHeight = _useState20[1];
|
|
149
|
+
|
|
71
150
|
if (!options) return null;
|
|
72
|
-
|
|
73
|
-
return options === null || options === void 0 ? void 0 : options.reduce((result, item)
|
|
151
|
+
var getTotalOptions = (0, _react.useCallback)(function () {
|
|
152
|
+
return options === null || options === void 0 ? void 0 : options.reduce(function (result, item) {
|
|
74
153
|
if (item !== null && item !== void 0 && item.list || item !== null && item !== void 0 && item.items) {
|
|
75
154
|
var _item$list, _item$items;
|
|
76
|
-
|
|
155
|
+
|
|
156
|
+
result += (item === null || item === void 0 ? void 0 : (_item$list = item.list) === null || _item$list === void 0 ? void 0 : _item$list.length) || (item === null || item === void 0 ? void 0 : (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) || 0;
|
|
77
157
|
} else {
|
|
78
158
|
++result;
|
|
79
159
|
}
|
|
160
|
+
|
|
80
161
|
return result;
|
|
81
162
|
}, 0);
|
|
82
163
|
}, [options]);
|
|
83
164
|
if (isMobile) isSearchable = getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH);
|
|
84
|
-
|
|
85
|
-
|
|
165
|
+
|
|
166
|
+
var moveOtherToEnd = function moveOtherToEnd(options) {
|
|
167
|
+
var otherIndex = options === null || options === void 0 ? void 0 : options.findIndex(function (option) {
|
|
168
|
+
return (option === null || option === void 0 ? void 0 : option.value) === 'other';
|
|
169
|
+
});
|
|
170
|
+
|
|
86
171
|
if (otherIndex > -1) {
|
|
87
|
-
|
|
88
|
-
options.push(
|
|
172
|
+
var other = options === null || options === void 0 ? void 0 : options.splice(otherIndex, 1);
|
|
173
|
+
options.push.apply(options, (0, _toConsumableArray2.default)(other));
|
|
89
174
|
}
|
|
175
|
+
|
|
90
176
|
return options;
|
|
91
177
|
};
|
|
92
|
-
|
|
93
|
-
|
|
178
|
+
|
|
179
|
+
var optionsWithOtherAtTheEnd = moveOtherToEnd(options);
|
|
180
|
+
options.map(function (option) {
|
|
94
181
|
if (option.items) {
|
|
95
182
|
return option.items = moveOtherToEnd(option.items);
|
|
96
183
|
} else return option;
|
|
97
184
|
});
|
|
98
|
-
|
|
185
|
+
var filteredGroups = optionsWithOtherAtTheEnd.map(function (item) {
|
|
99
186
|
var _item$items2;
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
items: !isSearchable || !isSearchChanged ? item === null || item === void 0 ? void 0 : item.items : (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.slice().filter(el
|
|
187
|
+
|
|
188
|
+
return _objectSpread(_objectSpread({}, item), {}, {
|
|
189
|
+
items: !isSearchable || !isSearchChanged ? item === null || item === void 0 ? void 0 : item.items : (_item$items2 = item.items) === null || _item$items2 === void 0 ? void 0 : _item$items2.slice().filter(function (el) {
|
|
103
190
|
var _el$label;
|
|
104
|
-
|
|
191
|
+
|
|
192
|
+
return (el === null || el === void 0 ? void 0 : (_el$label = el.label) === null || _el$label === void 0 ? void 0 : _el$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '')) || !(el !== null && el !== void 0 && el.value) || (el === null || el === void 0 ? void 0 : el.value) === '';
|
|
105
193
|
})
|
|
106
|
-
};
|
|
107
|
-
}).filter(item
|
|
194
|
+
});
|
|
195
|
+
}).filter(function (item) {
|
|
108
196
|
var _item$items3;
|
|
197
|
+
|
|
109
198
|
return ((_item$items3 = item.items) === null || _item$items3 === void 0 ? void 0 : _item$items3.length) > 0;
|
|
110
199
|
});
|
|
111
|
-
|
|
200
|
+
var filteredItems = optionsWithOtherAtTheEnd.filter(function (item) {
|
|
112
201
|
var _item$items4;
|
|
202
|
+
|
|
113
203
|
return !((_item$items4 = item.items) !== null && _item$items4 !== void 0 && _item$items4.length);
|
|
114
|
-
}).filter(item
|
|
204
|
+
}).filter(function (item) {
|
|
115
205
|
var _item$label;
|
|
206
|
+
|
|
116
207
|
if (!isSearchable || !isSearchChanged) return true;
|
|
117
|
-
return (item === null || item === void 0
|
|
208
|
+
return (item === null || item === void 0 ? void 0 : (_item$label = item.label) === null || _item$label === void 0 ? void 0 : _item$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '')) || !(item !== null && item !== void 0 && item.value) || (item === null || item === void 0 ? void 0 : item.value) === '';
|
|
118
209
|
});
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
210
|
+
var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
|
|
211
|
+
var modalBtnTrigger = entity && entity !== '' && typeof entity === 'string';
|
|
212
|
+
|
|
213
|
+
var onChangeHandler = function onChangeHandler(item) {
|
|
122
214
|
setIsOpen(false);
|
|
123
215
|
onChange(item.value);
|
|
124
216
|
};
|
|
125
|
-
|
|
217
|
+
|
|
218
|
+
var onKeyDown = function onKeyDown(e) {
|
|
126
219
|
if (![9, 13].includes(e.keyCode)) return false;
|
|
127
220
|
setIsOpen(false);
|
|
128
221
|
};
|
|
129
|
-
|
|
222
|
+
|
|
223
|
+
var onKeyUp = function onKeyUp(e) {
|
|
130
224
|
if (![9, 13].includes(e.keyCode)) return false;
|
|
131
225
|
setIsOpen(true);
|
|
132
|
-
};
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
226
|
+
}; // decorator
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
var getDepends = function getDepends(getDependsTrigger) {
|
|
230
|
+
var newOnChange = function newOnChange(e) {
|
|
136
231
|
if (e.value === 'open_modal') {
|
|
137
232
|
onChange('open_modal');
|
|
138
233
|
} else {
|
|
139
234
|
onChangeHandler(e);
|
|
140
235
|
}
|
|
141
|
-
};
|
|
236
|
+
}; // add pseudo option
|
|
237
|
+
|
|
142
238
|
|
|
143
|
-
|
|
144
|
-
const newOptions = [{
|
|
239
|
+
var newOptions = [{
|
|
145
240
|
label: "New ".concat(entity),
|
|
146
241
|
value: 'open_modal',
|
|
147
242
|
className: 'dropdown__list-item--modal'
|
|
148
|
-
},
|
|
243
|
+
}].concat((0, _toConsumableArray2.default)(filteredOptions));
|
|
149
244
|
return {
|
|
150
|
-
onChange: changeItem
|
|
245
|
+
onChange: function onChange(changeItem) {
|
|
151
246
|
return getDependsTrigger ? newOnChange(changeItem) : onChangeHandler(changeItem);
|
|
152
247
|
},
|
|
153
248
|
options: getDependsTrigger ? newOptions : options
|
|
154
249
|
};
|
|
155
250
|
};
|
|
156
|
-
|
|
251
|
+
|
|
252
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
157
253
|
var _getListContainer;
|
|
254
|
+
|
|
158
255
|
if (!((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event === null || event === void 0 ? void 0 : event.target))) {
|
|
159
256
|
setIsOpen(false);
|
|
160
257
|
}
|
|
161
258
|
};
|
|
162
|
-
|
|
163
|
-
|
|
259
|
+
|
|
260
|
+
var onSearchHandler = function onSearchHandler(name) {
|
|
261
|
+
var inputValue = name;
|
|
164
262
|
if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
|
|
165
263
|
setIsSearchChanged(true);
|
|
166
264
|
setSearchValue(inputValue);
|
|
167
265
|
};
|
|
168
|
-
|
|
266
|
+
|
|
267
|
+
var onWrapperClick = function onWrapperClick(e) {
|
|
169
268
|
if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
|
|
170
269
|
e.stopPropagation();
|
|
171
270
|
e.preventDefault();
|
|
172
271
|
setIsOpen(false);
|
|
173
272
|
}
|
|
174
273
|
};
|
|
175
|
-
|
|
274
|
+
|
|
275
|
+
var hightlightedText = function hightlightedText(text, postfix, description) {
|
|
176
276
|
var _text;
|
|
177
|
-
|
|
277
|
+
|
|
278
|
+
var prepare = function prepare(text) {
|
|
279
|
+
return text === null || text === void 0 ? void 0 : text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
|
|
280
|
+
};
|
|
281
|
+
|
|
178
282
|
text = text.replace(/["&<>]/g, function (a) {
|
|
179
283
|
return {
|
|
180
284
|
'"': '"',
|
|
@@ -183,26 +287,28 @@ const Dropdown = _ref => {
|
|
|
183
287
|
'>': '>'
|
|
184
288
|
}[a];
|
|
185
289
|
});
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
290
|
+
var main = isSearchable && searchValue ? (_text = text) === null || _text === void 0 ? void 0 : _text.replace(new RegExp(prepare(searchValue), 'i'), function (match) {
|
|
291
|
+
return "<span class=\"bg--yellow\">".concat(match, "</span>");
|
|
292
|
+
}) : text;
|
|
293
|
+
var postfixPart = postfix ? "<span class=\"dropdown__list-item-postfix\">".concat(postfix, "</span>") : '';
|
|
294
|
+
var descriptionPart = description ? "<span class=\"dropdown__list-item-description\">".concat(description, "</span>") : '';
|
|
189
295
|
return main + postfixPart + descriptionPart;
|
|
190
296
|
};
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
297
|
+
|
|
298
|
+
var depend = getDepends(modalBtnTrigger);
|
|
299
|
+
|
|
300
|
+
var getMarkupForElement = function getMarkupForElement(item, index, optTestId) {
|
|
301
|
+
var _item$value, _item$value$toString, _item$value2, _item$value2$toString, _cn, _item$customMobileIco;
|
|
302
|
+
|
|
194
303
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
195
|
-
"data-testid": "dropdown--button--key-".concat(optTestId || (item === null || item === void 0
|
|
196
|
-
key: (_item$value2 = item.value) === null || _item$value2 === void 0
|
|
197
|
-
onMouseDown: ()
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
}, item.className)
|
|
304
|
+
"data-testid": "dropdown--button--key-".concat(optTestId || (item === null || item === void 0 ? void 0 : (_item$value = item.value) === null || _item$value === void 0 ? void 0 : (_item$value$toString = _item$value.toString()) === null || _item$value$toString === void 0 ? void 0 : _item$value$toString.replace(/\s/, '-')) || (item === null || item === void 0 ? void 0 : item.key) || 'item', "--option"),
|
|
305
|
+
key: (_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : (_item$value2$toString = _item$value2.toString()) === null || _item$value2$toString === void 0 ? void 0 : _item$value2$toString.replace(/ /g, '_'),
|
|
306
|
+
onMouseDown: function onMouseDown() {
|
|
307
|
+
return depend.onChange(item);
|
|
308
|
+
},
|
|
309
|
+
className: (0, _classnames.default)("".concat(RC, "__list-item"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_disabled"), item.disabled), _cn), item.className)
|
|
202
310
|
}, !isMobile && /*#__PURE__*/_react.default.createElement("span", {
|
|
203
|
-
className: (0, _classnames.default)("".concat(RC, "__active-icon"), {
|
|
204
|
-
["".concat(RC, "__active-icon_active")]: item.value === value
|
|
205
|
-
})
|
|
311
|
+
className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), item.value === value))
|
|
206
312
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
|
|
207
313
|
className: (0, _classnames.default)("".concat(RC, "__list-item-label"), item.labelClassName || ''),
|
|
208
314
|
dangerouslySetInnerHTML: {
|
|
@@ -213,54 +319,73 @@ const Dropdown = _ref => {
|
|
|
213
319
|
checked: value
|
|
214
320
|
}) : '');
|
|
215
321
|
};
|
|
216
|
-
|
|
217
|
-
|
|
322
|
+
|
|
323
|
+
var filteredOptionList = function filteredOptionList(filteredOption) {
|
|
324
|
+
var _filteredOption$items, _filteredOption$label, _filteredOption$label2;
|
|
325
|
+
|
|
218
326
|
return ((_filteredOption$items = filteredOption.items) === null || _filteredOption$items === void 0 ? void 0 : _filteredOption$items.length) > 0 ? /*#__PURE__*/_react.default.createElement("div", {
|
|
219
|
-
key: (_filteredOption$label = filteredOption.label) === null || _filteredOption$label === void 0
|
|
327
|
+
key: (_filteredOption$label = filteredOption.label) === null || _filteredOption$label === void 0 ? void 0 : (_filteredOption$label2 = _filteredOption$label.toString()) === null || _filteredOption$label2 === void 0 ? void 0 : _filteredOption$label2.replace(/ /g, '_').concat(Date.now()),
|
|
220
328
|
className: (0, _classnames.default)("".concat(RC, "-group"), filteredOption.className)
|
|
221
329
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
222
330
|
className: "".concat(RC, "-group__name")
|
|
223
|
-
}, filteredOption.label), filteredOption.items.map(
|
|
331
|
+
}, filteredOption.label), filteredOption.items.map(function (el, index) {
|
|
332
|
+
return getMarkupForElement(el, index, el === null || el === void 0 ? void 0 : el.testId);
|
|
333
|
+
})) : null;
|
|
224
334
|
};
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
return
|
|
335
|
+
|
|
336
|
+
var selectedLabel = ((_options$find = options.find(function (el) {
|
|
337
|
+
return el.value === value;
|
|
338
|
+
})) === null || _options$find === void 0 ? void 0 : _options$find.label) || options.reduce(function (acc, item) {
|
|
339
|
+
var _item$items5, _item$items5$find;
|
|
340
|
+
|
|
341
|
+
return acc || ((_item$items5 = item.items) === null || _item$items5 === void 0 ? void 0 : (_item$items5$find = _item$items5.find(function (el) {
|
|
342
|
+
return el.value === value;
|
|
343
|
+
})) === null || _item$items5$find === void 0 ? void 0 : _item$items5$find.label);
|
|
228
344
|
}, null);
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
345
|
+
var doScrollCallback = (0, _react.useCallback)(function (e) {
|
|
346
|
+
var _ref2 = scrollReactionObj || {},
|
|
347
|
+
callback = _ref2.callback,
|
|
348
|
+
isWithAnyScrolling = _ref2.isWithAnyScrolling,
|
|
349
|
+
_ref2$scrollingInaccu = _ref2.scrollingInaccuracy,
|
|
350
|
+
scrollingInaccuracy = _ref2$scrollingInaccu === void 0 ? 0 : _ref2$scrollingInaccu;
|
|
351
|
+
|
|
235
352
|
if (callback && typeof callback === 'function') {
|
|
236
353
|
if (isWithAnyScrolling) callback(e);else if (Math.round(e.target.clientHeight + e.target.scrollTop + scrollingInaccuracy) >= e.target.scrollHeight) callback(e);
|
|
237
354
|
}
|
|
238
355
|
}, [filteredOptions]);
|
|
239
|
-
|
|
356
|
+
|
|
357
|
+
var getParentNode = function getParentNode() {
|
|
240
358
|
var _document$querySelect;
|
|
359
|
+
|
|
241
360
|
if (isDoNotPullOutListOfMainContainer) return dropdownRef.current;
|
|
242
361
|
return (_document$querySelect = document.querySelector('div#root')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('div#app');
|
|
243
362
|
};
|
|
244
|
-
|
|
245
|
-
|
|
363
|
+
|
|
364
|
+
var initListContainer = function initListContainer() {
|
|
365
|
+
var dropdownList = document.createElement('div');
|
|
246
366
|
dropdownList.setAttribute('id', dropdownId);
|
|
247
367
|
dropdownList.classList.add('dropdown__container');
|
|
368
|
+
|
|
248
369
|
if (isMobile) {
|
|
249
|
-
dropdownList.addEventListener('click', e
|
|
370
|
+
dropdownList.addEventListener('click', function (e) {
|
|
250
371
|
if (e.target.id === dropdownId) setIsOpen(false);
|
|
251
372
|
});
|
|
252
373
|
}
|
|
374
|
+
|
|
253
375
|
try {
|
|
254
376
|
var _getListContainer2;
|
|
255
|
-
|
|
377
|
+
|
|
378
|
+
(_getListContainer2 = getListContainer()) === null || _getListContainer2 === void 0 ? void 0 : _getListContainer2.remove();
|
|
256
379
|
} finally {
|
|
257
380
|
if (isMobile) {
|
|
258
381
|
try {
|
|
259
382
|
var _document$getElementB;
|
|
260
|
-
|
|
383
|
+
|
|
384
|
+
(_document$getElementB = document.getElementById("mlw-".concat(dropdownId))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
|
|
261
385
|
} catch (e) {}
|
|
386
|
+
|
|
262
387
|
;
|
|
263
|
-
|
|
388
|
+
var dropdownMobileListWrapper = document.createElement('div');
|
|
264
389
|
dropdownMobileListWrapper.classList.add('dropdown-mobile');
|
|
265
390
|
dropdownMobileListWrapper.setAttribute('id', "mlw-".concat(dropdownId));
|
|
266
391
|
dropdownMobileListWrapper.append(dropdownList);
|
|
@@ -270,141 +395,151 @@ const Dropdown = _ref => {
|
|
|
270
395
|
}
|
|
271
396
|
}
|
|
272
397
|
};
|
|
273
|
-
|
|
398
|
+
|
|
399
|
+
var getListContainer = function getListContainer() {
|
|
274
400
|
return document.getElementById(dropdownId);
|
|
275
401
|
};
|
|
276
|
-
|
|
402
|
+
|
|
403
|
+
var getListContainerWrapper = function getListContainerWrapper() {
|
|
277
404
|
return document.getElementById("mlw-".concat(dropdownId));
|
|
278
405
|
};
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
406
|
+
|
|
407
|
+
var setListContainerStyles = function setListContainerStyles() {
|
|
408
|
+
var _dropdownRef$current$, _dropdownListWrapperR, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient, _dropdownListWrapperR2, _dropdownListWrapperR3, _lh$getBoundingClient;
|
|
409
|
+
|
|
410
|
+
var lc = getListContainer();
|
|
282
411
|
if (!lc || !isOpen) return false;
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
412
|
+
var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
|
|
413
|
+
|
|
414
|
+
var _ref3 = (_dropdownRef$current$ = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current.getBoundingClientRect()) !== null && _dropdownRef$current$ !== void 0 ? _dropdownRef$current$ : {},
|
|
415
|
+
width = _ref3.width,
|
|
416
|
+
height = _ref3.height,
|
|
417
|
+
left = _ref3.left,
|
|
418
|
+
top = _ref3.top;
|
|
419
|
+
|
|
420
|
+
var sw = lc.getElementsByClassName('dropdown__list')[0];
|
|
421
|
+
var lh = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR = dropdownListWrapperRef.current) === null || _dropdownListWrapperR === void 0 ? void 0 : _dropdownListWrapperR.getElementsByClassName('dropdown__list-header')[0];
|
|
422
|
+
var margin = parseInt((_getComputedStyle$mar = (_getComputedStyle = getComputedStyle(sw)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle$mar2 = _getComputedStyle.marginTop) === null || _getComputedStyle$mar2 === void 0 ? void 0 : _getComputedStyle$mar2.replace('px', '')) !== null && _getComputedStyle$mar !== void 0 ? _getComputedStyle$mar : 0);
|
|
423
|
+
var maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_getComputedStyle$max = (_getComputedStyle2 = getComputedStyle(sw)) === null || _getComputedStyle2 === void 0 ? void 0 : (_getComputedStyle2$ma = _getComputedStyle2.maxHeight) === null || _getComputedStyle2$ma === void 0 ? void 0 : _getComputedStyle2$ma.replace('px', '')) !== null && _getComputedStyle$max !== void 0 ? _getComputedStyle$max : 0);
|
|
294
424
|
if (initListHeight === null) setInitListHeight(maxHeight);
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
425
|
+
var toTop = top - margin;
|
|
426
|
+
var toBottom = windowHeight - top - height - margin * 2;
|
|
427
|
+
var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
|
|
428
|
+
var maxSwHeight = isMobile ? (dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR2 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR2 === void 0 ? void 0 : (_dropdownListWrapperR3 = _dropdownListWrapperR2.getBoundingClientRect()) === null || _dropdownListWrapperR3 === void 0 ? void 0 : _dropdownListWrapperR3.height) - (lh === null || lh === void 0 ? void 0 : (_lh$getBoundingClient = lh.getBoundingClientRect()) === null || _lh$getBoundingClient === void 0 ? void 0 : _lh$getBoundingClient.height) : toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
|
|
429
|
+
var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
|
|
300
430
|
lc.style.minWidth = "".concat(width, "px");
|
|
301
431
|
lc.style.left = "".concat(left, "px");
|
|
302
432
|
lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 3 * margin, "px");
|
|
303
433
|
sw.style.maxHeight = "".concat(maxSwHeight, "px");
|
|
304
434
|
};
|
|
305
|
-
|
|
306
|
-
|
|
435
|
+
|
|
436
|
+
var renderListContainer = function renderListContainer() {
|
|
437
|
+
var lc = getListContainer();
|
|
307
438
|
if (!lc) return null;
|
|
308
439
|
return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
|
|
309
440
|
};
|
|
310
|
-
|
|
311
|
-
|
|
441
|
+
|
|
442
|
+
var getSortedOptions = function getSortedOptions(data) {
|
|
443
|
+
var newData = (0, _toConsumableArray2.default)(data);
|
|
444
|
+
|
|
312
445
|
if (sortAlphabetical) {
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
value
|
|
316
|
-
} = _ref2;
|
|
446
|
+
var openModalOption = newData.filter(function (_ref4) {
|
|
447
|
+
var value = _ref4.value;
|
|
317
448
|
return value === 'open_modal';
|
|
318
449
|
});
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
value
|
|
322
|
-
} = _ref3;
|
|
450
|
+
var emptyOption = newData.filter(function (_ref5) {
|
|
451
|
+
var value = _ref5.value;
|
|
323
452
|
return value === '';
|
|
324
453
|
});
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
value
|
|
328
|
-
} = _ref4;
|
|
454
|
+
var restOfOptions = newData.filter(function (_ref6) {
|
|
455
|
+
var value = _ref6.value;
|
|
329
456
|
return value !== 'open_modal' && value !== '';
|
|
330
457
|
}).sort(_utils.compareAlphabetical);
|
|
331
|
-
newData = [
|
|
458
|
+
newData = [].concat((0, _toConsumableArray2.default)(openModalOption), (0, _toConsumableArray2.default)(emptyOption), (0, _toConsumableArray2.default)(restOfOptions)).map(function (item) {
|
|
332
459
|
if (item !== null && item !== void 0 && item.items) {
|
|
333
|
-
item.items =
|
|
460
|
+
item.items = (0, _toConsumableArray2.default)(item.items).sort(_utils.compareAlphabetical);
|
|
334
461
|
}
|
|
462
|
+
|
|
335
463
|
return item;
|
|
336
464
|
});
|
|
337
465
|
}
|
|
466
|
+
|
|
338
467
|
return newData;
|
|
339
468
|
};
|
|
340
|
-
|
|
341
|
-
|
|
469
|
+
|
|
470
|
+
var getListMarkUp = function getListMarkUp() {
|
|
471
|
+
var _cn3, _cn4, _getSortedOptions;
|
|
472
|
+
|
|
342
473
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
343
474
|
className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
|
|
344
475
|
ref: wrapperRef,
|
|
345
|
-
onClick: isMobile ? onWrapperClick : ()
|
|
476
|
+
onClick: isMobile ? onWrapperClick : function () {}
|
|
346
477
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
347
|
-
className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), {
|
|
348
|
-
["".concat(RC, "__list-wrapper--fixed-height")]: isFixedMaxHeight,
|
|
349
|
-
["".concat(RC, "__list-wrapper--with-bottom-shadow")]: isScrollableList && isMobile,
|
|
350
|
-
["".concat(RC, "__list-wrapper--with-bottom-shadow-hidden")]: scrollTop === scrollHeight
|
|
351
|
-
}),
|
|
478
|
+
className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), (_cn3 = {}, (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--fixed-height"), isFixedMaxHeight), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn3, "".concat(RC, "__list-wrapper--with-bottom-shadow-hidden"), scrollTop === scrollHeight), _cn3)),
|
|
352
479
|
ref: dropdownListWrapperRef
|
|
353
480
|
}, isMobile && /*#__PURE__*/_react.default.createElement("div", {
|
|
354
|
-
className: (0, _classnames.default)("".concat(RC, "__list-header"), {
|
|
355
|
-
["".concat(RC, "__list-header-with-shadow")]: isScrollableList && isMobile,
|
|
356
|
-
["".concat(RC, "__list-header-with-shadow-hidden")]: scrollTop === 0
|
|
357
|
-
})
|
|
481
|
+
className: (0, _classnames.default)("".concat(RC, "__list-header"), (_cn4 = {}, (0, _defineProperty2.default)(_cn4, "".concat(RC, "__list-header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn4, "".concat(RC, "__list-header-with-shadow-hidden"), scrollTop === 0), _cn4))
|
|
358
482
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
359
483
|
className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
|
|
360
484
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
361
485
|
className: (0, _classnames.default)("".concat(RC, "__list-label"))
|
|
362
486
|
}, label), /*#__PURE__*/_react.default.createElement("div", {
|
|
363
487
|
className: (0, _classnames.default)("".concat(RC, "__list-close-icon")),
|
|
364
|
-
onClick: ()
|
|
488
|
+
onClick: function onClick() {
|
|
489
|
+
return setIsOpen(false);
|
|
490
|
+
}
|
|
365
491
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
|
|
366
|
-
onClick: ()
|
|
492
|
+
onClick: function onClick() {
|
|
493
|
+
return setIsOpen(false);
|
|
494
|
+
}
|
|
367
495
|
}))), isSearchable && /*#__PURE__*/_react.default.createElement("div", {
|
|
368
496
|
className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
|
|
369
497
|
}, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
|
|
370
498
|
ref: searchInputRef,
|
|
371
499
|
className: "".concat(RC, "__input"),
|
|
372
500
|
value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
|
|
373
|
-
onChange:
|
|
501
|
+
onChange: function onChange(v) {
|
|
502
|
+
return onSearchHandler(v);
|
|
503
|
+
},
|
|
374
504
|
placeholder: placeholder || 'Search',
|
|
375
505
|
withDelete: true,
|
|
376
|
-
onFocus: ()
|
|
377
|
-
|
|
378
|
-
|
|
506
|
+
onFocus: function onFocus() {
|
|
507
|
+
return setIsSearchInputFocused(true);
|
|
508
|
+
},
|
|
509
|
+
onBlur: function onBlur() {
|
|
510
|
+
return setIsSearchInputFocused(false);
|
|
511
|
+
},
|
|
512
|
+
onMouseDown: function onMouseDown() {
|
|
379
513
|
if (!isOpen) {
|
|
380
514
|
setIsSearchInputFocused(true);
|
|
381
515
|
setIsOpen(true);
|
|
382
516
|
}
|
|
383
517
|
}
|
|
384
518
|
}, attributesOfNativeInput)))), /*#__PURE__*/_react.default.createElement("div", {
|
|
385
|
-
className: (0, _classnames.default)("".concat(RC, "__list"), {
|
|
386
|
-
["".concat(RC, "__list-top")]: isListTop
|
|
387
|
-
}),
|
|
519
|
+
className: (0, _classnames.default)("".concat(RC, "__list"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
|
|
388
520
|
ref: dropdownListRef
|
|
389
|
-
}, (_getSortedOptions = getSortedOptions(depend.options)) === null || _getSortedOptions === void 0 ? void 0 : _getSortedOptions.map(option
|
|
521
|
+
}, (_getSortedOptions = getSortedOptions(depend.options)) === null || _getSortedOptions === void 0 ? void 0 : _getSortedOptions.map(function (option) {
|
|
390
522
|
var _option$items;
|
|
523
|
+
|
|
391
524
|
if (option !== null && option !== void 0 && (_option$items = option.items) !== null && _option$items !== void 0 && _option$items.length) {
|
|
392
525
|
if (!isSearchable || !isSearchChanged) {
|
|
393
526
|
return filteredOptionList(option);
|
|
394
527
|
} else {
|
|
395
528
|
var _option$items2;
|
|
396
|
-
|
|
529
|
+
|
|
530
|
+
var items = (_option$items2 = option.items) === null || _option$items2 === void 0 ? void 0 : _option$items2.slice().filter(function (el) {
|
|
397
531
|
var _el$label2;
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
if (items !== null && items !== void 0 && items.length) return filteredOptionList({
|
|
401
|
-
...option,
|
|
402
|
-
items
|
|
532
|
+
|
|
533
|
+
return (el === null || el === void 0 ? void 0 : (_el$label2 = el.label) === null || _el$label2 === void 0 ? void 0 : _el$label2.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '')) || !(el !== null && el !== void 0 && el.value) || (el === null || el === void 0 ? void 0 : el.value) === '';
|
|
403
534
|
});
|
|
535
|
+
if (items !== null && items !== void 0 && items.length) return filteredOptionList(_objectSpread(_objectSpread({}, option), {}, {
|
|
536
|
+
items: items
|
|
537
|
+
}));
|
|
404
538
|
return null;
|
|
405
539
|
}
|
|
406
540
|
} else {
|
|
407
541
|
var _option$label;
|
|
542
|
+
|
|
408
543
|
if (!isSearchable || !isSearchChanged || option !== null && option !== void 0 && (_option$label = option.label) !== null && _option$label !== void 0 && _option$label.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') || !(option !== null && option !== void 0 && option.value) || (option === null || option === void 0 ? void 0 : option.value) === '') {
|
|
409
544
|
return getMarkupForElement(option);
|
|
410
545
|
}
|
|
@@ -413,18 +548,23 @@ const Dropdown = _ref => {
|
|
|
413
548
|
className: "".concat(RC, "__list-item ").concat(RC, "__list-item--no-options")
|
|
414
549
|
}, noOptionsText), disabled && isOpen && /*#__PURE__*/_react.default.createElement(_DropdownLoader.default, null))));
|
|
415
550
|
};
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
551
|
+
|
|
552
|
+
var toggleList = function toggleList(e) {
|
|
553
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
554
|
+
setIsOpen(function (isOpen) {
|
|
555
|
+
return !isOpen;
|
|
556
|
+
});
|
|
419
557
|
};
|
|
420
|
-
|
|
421
|
-
|
|
558
|
+
|
|
559
|
+
var closeList = isOpen ? handleClickOutside : function () {};
|
|
560
|
+
(0, _react.useEffect)(function () {
|
|
422
561
|
if (!isDoNotPullOutListOfMainContainer || dropdownRef.current) {
|
|
423
562
|
initListContainer();
|
|
424
563
|
}
|
|
425
564
|
}, [isDoNotPullOutListOfMainContainer, dropdownRef.current]);
|
|
426
|
-
(0, _react.useLayoutEffect)(()
|
|
565
|
+
(0, _react.useLayoutEffect)(function () {
|
|
427
566
|
var _getListContainer3;
|
|
567
|
+
|
|
428
568
|
if (!isMobile) {
|
|
429
569
|
window.addEventListener('resize', setListContainerStyles);
|
|
430
570
|
window.addEventListener('mousewheel', closeList);
|
|
@@ -436,96 +576,118 @@ const Dropdown = _ref => {
|
|
|
436
576
|
window.removeEventListener('scroll', closeList);
|
|
437
577
|
window.removeEventListener('touchmove', closeList);
|
|
438
578
|
}
|
|
439
|
-
|
|
440
|
-
|
|
579
|
+
|
|
580
|
+
(_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.addEventListener('click', closeList);
|
|
581
|
+
return function () {
|
|
441
582
|
var _getListContainer4;
|
|
583
|
+
|
|
442
584
|
window.removeEventListener('resize', setListContainerStyles);
|
|
443
585
|
window.removeEventListener('mousewheel', closeList);
|
|
444
586
|
window.removeEventListener('scroll', closeList);
|
|
445
587
|
window.removeEventListener('touchmove', closeList);
|
|
446
|
-
(_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0
|
|
588
|
+
(_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.removeEventListener('click', closeList);
|
|
447
589
|
};
|
|
448
590
|
}, [getListContainer]);
|
|
449
|
-
(0, _react.useLayoutEffect)(()
|
|
591
|
+
(0, _react.useLayoutEffect)(function () {
|
|
450
592
|
setListContainerStyles();
|
|
451
|
-
}, [isOpen, searchValue, isMobile, options, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0
|
|
452
|
-
(0, _react.useEffect)(()
|
|
593
|
+
}, [isOpen, searchValue, isMobile, options, dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperR4 = dropdownListWrapperRef.current) === null || _dropdownListWrapperR4 === void 0 ? void 0 : (_dropdownListWrapperR5 = _dropdownListWrapperR4.getBoundingClientRect()) === null || _dropdownListWrapperR5 === void 0 ? void 0 : _dropdownListWrapperR5.height]);
|
|
594
|
+
(0, _react.useEffect)(function () {
|
|
453
595
|
document.addEventListener('click', handleClickOutside, true);
|
|
454
|
-
return ()
|
|
596
|
+
return function () {
|
|
597
|
+
return document.removeEventListener('click', handleClickOutside, true);
|
|
598
|
+
};
|
|
455
599
|
}, [value]);
|
|
456
|
-
(0, _react.useEffect)(()
|
|
600
|
+
(0, _react.useEffect)(function () {
|
|
457
601
|
if (!isOpen) {
|
|
458
602
|
setIsSearchChanged(false);
|
|
459
603
|
}
|
|
460
|
-
|
|
604
|
+
|
|
605
|
+
if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
|
|
461
606
|
dropdownListRef.current.addEventListener('scroll', doScrollCallback);
|
|
462
607
|
}
|
|
463
|
-
|
|
464
|
-
|
|
608
|
+
|
|
609
|
+
return function () {
|
|
610
|
+
if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
|
|
465
611
|
};
|
|
466
612
|
}, [isOpen, dropdownListRef]);
|
|
467
|
-
(0, _react.useEffect)(()
|
|
613
|
+
(0, _react.useEffect)(function () {
|
|
468
614
|
if (!searchValue && isSearchInputFocused) {
|
|
469
615
|
setSearchValue(selectedLabel);
|
|
470
|
-
setTimeout(
|
|
616
|
+
setTimeout(function () {
|
|
617
|
+
return searchInputRef.current.select();
|
|
618
|
+
}, 1);
|
|
471
619
|
}
|
|
620
|
+
|
|
472
621
|
if (!isSearchInputFocused && !isOpen) {
|
|
473
622
|
setSearchValue(null);
|
|
474
623
|
}
|
|
475
624
|
}, [isSearchInputFocused]);
|
|
476
|
-
(0, _react.useEffect)(()
|
|
625
|
+
(0, _react.useEffect)(function () {
|
|
477
626
|
var _searchInputRef$curre;
|
|
478
|
-
|
|
627
|
+
|
|
628
|
+
if (isOpen && !isSearchInputFocused && searchInputRef !== null && searchInputRef !== void 0 && searchInputRef.current && !isMobile) searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
|
|
629
|
+
|
|
479
630
|
if (isOpen) {
|
|
480
631
|
var _getListContainer5;
|
|
481
|
-
|
|
632
|
+
|
|
633
|
+
(_getListContainer5 = getListContainer()) === null || _getListContainer5 === void 0 ? void 0 : _getListContainer5.classList.add('dropdown__container--opened');
|
|
482
634
|
} else {
|
|
483
635
|
var _getListContainer6;
|
|
484
|
-
|
|
636
|
+
|
|
637
|
+
(_getListContainer6 = getListContainer()) === null || _getListContainer6 === void 0 ? void 0 : _getListContainer6.classList.remove('dropdown__container--opened');
|
|
485
638
|
}
|
|
639
|
+
|
|
486
640
|
if (!isOpen && isMobile) {
|
|
487
641
|
setSearchValue(null);
|
|
488
642
|
}
|
|
489
643
|
}, [isOpen]);
|
|
490
|
-
(0, _react.useEffect)(()
|
|
644
|
+
(0, _react.useEffect)(function () {
|
|
491
645
|
if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current && !searchValue) {
|
|
492
646
|
var _dropdownListRef$curr, _dropdownListRef$curr2, _dropdownListRef$curr3, _dropdownListRef$curr4;
|
|
493
|
-
|
|
494
|
-
|
|
647
|
+
|
|
648
|
+
setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr = dropdownListRef.current) === null || _dropdownListRef$curr === void 0 ? void 0 : _dropdownListRef$curr.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr2 = dropdownListRef.current) === null || _dropdownListRef$curr2 === void 0 ? void 0 : _dropdownListRef$curr2.clientHeight));
|
|
649
|
+
setIsFixedMaxHeight(isScrollableList || (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr3 = dropdownListRef.current) === null || _dropdownListRef$curr3 === void 0 ? void 0 : _dropdownListRef$curr3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr4 = dropdownListRef.current) === null || _dropdownListRef$curr4 === void 0 ? void 0 : _dropdownListRef$curr4.clientHeight));
|
|
495
650
|
}
|
|
496
|
-
}, [isOpen, isMobile, isScrollableList, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0
|
|
497
|
-
(0, _react.useEffect)(()
|
|
498
|
-
|
|
651
|
+
}, [isOpen, isMobile, isScrollableList, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr5 = dropdownListRef.current) === null || _dropdownListRef$curr5 === void 0 ? void 0 : _dropdownListRef$curr5.scrollHeight, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr6 = dropdownListRef.current) === null || _dropdownListRef$curr6 === void 0 ? void 0 : _dropdownListRef$curr6.clientHeight]);
|
|
652
|
+
(0, _react.useEffect)(function () {
|
|
653
|
+
var setScrollTopValue = function setScrollTopValue(e) {
|
|
499
654
|
setScrollTop(parseInt(e.target.scrollTop));
|
|
500
655
|
};
|
|
656
|
+
|
|
501
657
|
if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
|
|
502
658
|
var _dropdownListRef$curr7;
|
|
503
|
-
|
|
659
|
+
|
|
660
|
+
dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.addEventListener('scroll', setScrollTopValue);
|
|
504
661
|
}
|
|
505
|
-
|
|
662
|
+
|
|
663
|
+
return function () {
|
|
506
664
|
var _dropdownListRef$curr8;
|
|
507
|
-
|
|
665
|
+
|
|
666
|
+
dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.removeEventListener('scroll', setScrollTopValue);
|
|
508
667
|
};
|
|
509
668
|
}, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
|
|
510
|
-
(0, _react.useEffect)(()
|
|
669
|
+
(0, _react.useEffect)(function () {
|
|
511
670
|
if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
|
|
512
671
|
var _dropdownListRef$curr9, _dropdownListRef$curr10;
|
|
513
|
-
|
|
672
|
+
|
|
673
|
+
setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr9 = dropdownListRef.current) === null || _dropdownListRef$curr9 === void 0 ? void 0 : _dropdownListRef$curr9.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr10 = dropdownListRef.current) === null || _dropdownListRef$curr10 === void 0 ? void 0 : _dropdownListRef$curr10.clientHeight)));
|
|
514
674
|
}
|
|
515
675
|
}, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
|
|
516
|
-
(0, _react.useEffect)(()
|
|
517
|
-
return ()
|
|
676
|
+
(0, _react.useEffect)(function () {
|
|
677
|
+
return function () {
|
|
518
678
|
var _getListContainer7, _getListContainerWrap;
|
|
519
|
-
|
|
520
|
-
(
|
|
679
|
+
|
|
680
|
+
(_getListContainer7 = getListContainer()) === null || _getListContainer7 === void 0 ? void 0 : _getListContainer7.remove();
|
|
681
|
+
(_getListContainerWrap = getListContainerWrapper()) === null || _getListContainerWrap === void 0 ? void 0 : _getListContainerWrap.remove();
|
|
521
682
|
};
|
|
522
683
|
}, []);
|
|
523
|
-
|
|
684
|
+
var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
|
|
685
|
+
return option.value === value;
|
|
686
|
+
})) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
|
|
524
687
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
525
|
-
className: (0, _classnames.default)(RC, className, {
|
|
526
|
-
disabled
|
|
527
|
-
|
|
528
|
-
}),
|
|
688
|
+
className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({
|
|
689
|
+
disabled: disabled
|
|
690
|
+
}, "".concat(RC, "-mobile"), isMobile)),
|
|
529
691
|
ref: dropdownRef,
|
|
530
692
|
onKeyDown: onKeyDown,
|
|
531
693
|
onKeyUp: onKeyUp
|
|
@@ -535,16 +697,22 @@ const Dropdown = _ref => {
|
|
|
535
697
|
onClick: toggleList,
|
|
536
698
|
onKeyDown: onKeyDown,
|
|
537
699
|
onKeyUp: onKeyUp,
|
|
538
|
-
tabIndex: tabIndex === null || tabIndex === void 0
|
|
700
|
+
tabIndex: tabIndex === null || tabIndex === void 0 ? void 0 : (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex)
|
|
539
701
|
}, customTrigger || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSearchable && !isMobile ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
540
702
|
ref: searchInputRef,
|
|
541
703
|
className: "".concat(RC, "__input"),
|
|
542
704
|
value: isOpen ? searchValue !== null && searchValue !== void 0 ? searchValue : '' : selectedLabel || '',
|
|
543
|
-
onChange:
|
|
705
|
+
onChange: function onChange(e) {
|
|
706
|
+
return onSearchHandler(e.target.value);
|
|
707
|
+
},
|
|
544
708
|
placeholder: placeholder,
|
|
545
|
-
onFocus: ()
|
|
546
|
-
|
|
547
|
-
|
|
709
|
+
onFocus: function onFocus() {
|
|
710
|
+
return setIsSearchInputFocused(true);
|
|
711
|
+
},
|
|
712
|
+
onBlur: function onBlur() {
|
|
713
|
+
return setIsSearchInputFocused(false);
|
|
714
|
+
},
|
|
715
|
+
onMouseDown: function onMouseDown() {
|
|
548
716
|
if (!isOpen) {
|
|
549
717
|
setIsSearchInputFocused(true);
|
|
550
718
|
setIsOpen(true);
|
|
@@ -557,12 +725,12 @@ const Dropdown = _ref => {
|
|
|
557
725
|
}, selectedLabel || placeholder), postfixText && /*#__PURE__*/_react.default.createElement("span", {
|
|
558
726
|
className: "dropdown__list-item-postfix"
|
|
559
727
|
}, postfixText)), /*#__PURE__*/_react.default.createElement("span", {
|
|
560
|
-
className: (0, _classnames.default)("".concat(RC, "__arrow"), {
|
|
561
|
-
["".concat(RC, "__arrow_active")]: isOpen
|
|
562
|
-
}),
|
|
728
|
+
className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
|
|
563
729
|
onClick: toggleList
|
|
564
730
|
}, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
|
|
565
731
|
className: "mobile-icon"
|
|
566
732
|
}) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null)))), isOpen && renderListContainer());
|
|
567
733
|
};
|
|
568
|
-
|
|
734
|
+
|
|
735
|
+
var _default = Dropdown;
|
|
736
|
+
exports.default = _default;
|