intelicoreact 1.4.81 → 1.4.83
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 +13 -13
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js +12 -13
- package/dist/Atomic/FormElements/Calendar/Calendar.js +103 -68
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +26 -26
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js +27 -23
- package/dist/Atomic/FormElements/Datepicker/Datepicker.js +201 -114
- package/dist/Atomic/FormElements/Datepicker/components/Calendar.js +69 -46
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +301 -230
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +2 -4
- package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js +201 -145
- package/dist/Atomic/FormElements/FileLoader/FileLoader.js +54 -41
- package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js +112 -45
- package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js +63 -34
- package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js +153 -81
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js +59 -57
- package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js +98 -66
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.js +48 -27
- package/dist/Atomic/FormElements/Input/Input.js +209 -148
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +77 -50
- package/dist/Atomic/FormElements/InputColor/InputColor.js +28 -23
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.js +53 -38
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +139 -106
- package/dist/Atomic/FormElements/InputDateRange/components/DateInput.js +38 -31
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +230 -135
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +122 -85
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +8 -10
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +159 -72
- package/dist/Atomic/FormElements/InputLink/InputLink.js +39 -30
- package/dist/Atomic/FormElements/InputMask/InputCarretPosition.js +8 -8
- package/dist/Atomic/FormElements/InputMask/InputMask.js +800 -521
- package/dist/Atomic/FormElements/InputMask/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask/functions.js +15 -15
- package/dist/Atomic/FormElements/InputMask2/InputMask2.js +294 -234
- package/dist/Atomic/FormElements/InputMask2/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask2/functions.js +15 -15
- package/dist/Atomic/FormElements/InputMask3/InputMask3.js +332 -265
- package/dist/Atomic/FormElements/InputMask3/config.js +1 -1
- package/dist/Atomic/FormElements/InputMask3/functions.js +15 -15
- package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js +101 -53
- package/dist/Atomic/FormElements/InputsRow/InputsRow.js +99 -64
- package/dist/Atomic/FormElements/Label/Label.js +15 -13
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +284 -190
- package/dist/Atomic/FormElements/MultiSelect/MultiSelect.js +34 -24
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +170 -117
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.js +50 -28
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js +29 -18
- package/dist/Atomic/FormElements/RadioInput/RadioInput.js +24 -22
- package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.js +31 -19
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +83 -56
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +75 -49
- package/dist/Atomic/FormElements/RangeList/RangeList.js +129 -87
- package/dist/Atomic/FormElements/RangeList/partial/RangeListRow.js +18 -22
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js +250 -143
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.js +477 -367
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.js +15 -14
- package/dist/Atomic/FormElements/Switcher/Switcher.js +20 -24
- package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.js +30 -24
- package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.js +23 -20
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js +40 -32
- package/dist/Atomic/FormElements/SwitcherRange/SwitcherRange.js +31 -25
- package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.js +22 -22
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.js +98 -52
- package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.js +34 -22
- package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js +81 -47
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +525 -415
- package/dist/Atomic/FormElements/Text/Text.js +39 -39
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js +23 -21
- package/dist/Atomic/FormElements/Textarea/Textarea.js +33 -28
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +98 -67
- package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js +24 -22
- package/dist/Atomic/FormElements/TimeRange/TimeRange.js +57 -34
- package/dist/Atomic/FormElements/UserContacts/UserContacts.js +94 -56
- package/dist/Atomic/FormElements/UserContacts/partial/defaultIcons.js +102 -74
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js +69 -50
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js +33 -30
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +50 -38
- package/dist/Atomic/FormElements/WidgetPseudoTable/partial/constructor.js +1 -1
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.js +59 -47
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/constructor.js +1 -1
- package/dist/Atomic/Layout/Header/Header.js +37 -22
- package/dist/Atomic/Layout/MainMenu/MainMenu.js +59 -34
- package/dist/Atomic/Layout/Spinner/Spinner.js +6 -7
- package/dist/Atomic/UI/Accordion/Accordion.js +31 -17
- package/dist/Atomic/UI/Accordion/AccordionItem.js +41 -30
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +81 -50
- package/dist/Atomic/UI/AccordionText/AccordionText.js +39 -20
- package/dist/Atomic/UI/AdvancedTag/AdvTag.js +74 -46
- package/dist/Atomic/UI/AdvancedTag/AdvancedTags.js +37 -21
- package/dist/Atomic/UI/Alert/Alert.js +36 -23
- package/dist/Atomic/UI/Arrow/Arrow.js +21 -14
- package/dist/Atomic/UI/Box/Box.js +12 -11
- package/dist/Atomic/UI/Button/Button.js +26 -26
- package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js +21 -21
- package/dist/Atomic/UI/Chart/Chart.js +60 -44
- package/dist/Atomic/UI/Chart/partial/Chart.constants.js +13 -11
- package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.js +10 -12
- package/dist/Atomic/UI/Chart/partial/datasetSetters.js +82 -60
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.js +124 -116
- package/dist/Atomic/UI/Chart/partial/optionsSetters.js +30 -18
- package/dist/Atomic/UI/Chart/partial/utils.js +30 -16
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js +31 -21
- package/dist/Atomic/UI/DateTime/DateTime.js +29 -25
- package/dist/Atomic/UI/DebugContainer/DebugContainer.js +23 -11
- package/dist/Atomic/UI/DebugContainer/useDebugContainer.js +12 -4
- package/dist/Atomic/UI/DoubleString/DoubleString.js +53 -36
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.js +55 -14
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +114 -54
- package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js +88 -53
- package/dist/Atomic/UI/Hint/Hint.js +87 -58
- package/dist/Atomic/UI/Hint/partials/_utils.js +10 -10
- package/dist/Atomic/UI/Modal/Modal.js +159 -144
- package/dist/Atomic/UI/Modal/ModalHOC.js +17 -14
- package/dist/Atomic/UI/Modal/partials/ModalFooter.js +5 -6
- package/dist/Atomic/UI/Modal/partials/ModalTitle.js +13 -16
- package/dist/Atomic/UI/Modal/partials/useMobileModal.js +118 -73
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js +48 -33
- package/dist/Atomic/UI/NavLine/NavLine.js +166 -104
- package/dist/Atomic/UI/PageTitle/PageTitle.js +8 -12
- package/dist/Atomic/UI/PieChart/PieChart.js +11 -10
- package/dist/Atomic/UI/Price/Price.js +5 -7
- package/dist/Atomic/UI/PriceRange/PriceRange.js +4 -6
- package/dist/Atomic/UI/ProgressLine/ProgressLine.js +42 -27
- package/dist/Atomic/UI/Status/Status.js +22 -18
- package/dist/Atomic/UI/Table/Partials/TdCell.js +47 -28
- package/dist/Atomic/UI/Table/Partials/TdHeader.js +5 -6
- package/dist/Atomic/UI/Table/Partials/TdRow.js +53 -29
- package/dist/Atomic/UI/Table/Partials/TdTitle.js +28 -15
- package/dist/Atomic/UI/Table/Table.js +36 -27
- package/dist/Atomic/UI/Table/TdTypes/TdActions.js +32 -18
- package/dist/Atomic/UI/Table/TdTypes/TdPriority.js +10 -8
- package/dist/Atomic/UI/Table/TdTypes/TdRange.js +2 -4
- package/dist/Atomic/UI/Table/TdTypes/TdWeight.js +26 -21
- package/dist/Atomic/UI/Tag/Tag.js +72 -52
- package/dist/Atomic/UI/TagList/TagList.js +102 -65
- package/dist/Atomic/UI/UserBox/UserBox.js +13 -13
- package/dist/Atomic/UI/WizardStepper/constructor.js +6 -6
- package/dist/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js +16 -20
- package/dist/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js +25 -27
- package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.js +27 -22
- package/dist/Atomic/UI/WizardStepper/ui/icons.js +41 -39
- package/dist/Classes/AbortableFetch.js +393 -311
- package/dist/Classes/AnimatedHandler.js +53 -45
- package/dist/Classes/RESTAPI/index.js +431 -152
- package/dist/Classes/RESTAPI/partials/AbortableFetch.js +400 -320
- package/dist/Classes/RESTAPI/partials/ApiBase.js +59 -24
- package/dist/Classes/RESTAPI/partials/ApiRequestCreators.js +338 -76
- package/dist/Classes/RESTAPI/partials/ApiUtils.js +378 -143
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.js +375 -159
- package/dist/Classes/RESTAPI/partials/Utils.js +128 -87
- package/dist/Classes/RESTAPI/partials/_utils.js +388 -116
- package/dist/Constants/index.constants.js +7 -7
- package/dist/Functions/Portal.js +19 -11
- package/dist/Functions/customEventListener.js +7 -5
- package/dist/Functions/fieldValueFormatters.js +131 -109
- package/dist/Functions/hooks/useFormFieldsChangesManager.js +128 -69
- package/dist/Functions/locale/createTranslator.js +21 -11
- package/dist/Functions/operations.js +27 -23
- package/dist/Functions/presets/inputMaskPreset.js +176 -0
- package/dist/Functions/presets/inputMaskPresets.js +17 -17
- package/dist/Functions/presets/inputPresets.js +15 -15
- package/dist/Functions/presets/mobileKeyboardTypesPresets.js +3 -3
- package/dist/Functions/schemas.js +7 -5
- package/dist/Functions/useBodyScrollLock.js +3 -3
- package/dist/Functions/useClickOutside.js +3 -3
- package/dist/Functions/useDebounce.js +20 -11
- package/dist/Functions/useFieldFocus.js +51 -38
- package/dist/Functions/useFormTools/form-drivers/ArrayWithObjects.js +46 -36
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +78 -68
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +81 -54
- package/dist/Functions/useFormTools/functions/General.js +80 -71
- package/dist/Functions/useFormTools/functions/RenderFields.js +63 -45
- package/dist/Functions/useFormTools/functions/usePrevious.js +2 -2
- package/dist/Functions/useFormTools/index.js +467 -314
- package/dist/Functions/useInputHighlightError.js +42 -26
- package/dist/Functions/useIsMobile.js +29 -11
- package/dist/Functions/useKeyPress/useHandleKeyPress.js +8 -9
- package/dist/Functions/useKeyPress/useKeyPress.js +26 -17
- package/dist/Functions/useLocalStorage.js +13 -6
- package/dist/Functions/useLocationParams.js +24 -14
- package/dist/Functions/useMediaQuery.js +18 -7
- package/dist/Functions/useMetaInfo.js +40 -16
- package/dist/Functions/useMouseUpOutside.js +2 -2
- package/dist/Functions/useOnlineStatus.js +17 -6
- package/dist/Functions/usePasswordChecker.js +61 -42
- package/dist/Functions/usePrevious.js +2 -2
- package/dist/Functions/useResize.js +24 -12
- package/dist/Functions/useScrollTo.js +13 -4
- package/dist/Functions/useToggle.js +25 -9
- package/dist/Functions/utils.js +272 -147
- package/dist/Molecular/CustomIcons/components/AffiliateNetworks.js +27 -23
- package/dist/Molecular/CustomIcons/components/AlertCircle.js +27 -23
- package/dist/Molecular/CustomIcons/components/AppStore.js +31 -27
- package/dist/Molecular/CustomIcons/components/Arrow.js +37 -33
- package/dist/Molecular/CustomIcons/components/ArrowDown.js +19 -15
- package/dist/Molecular/CustomIcons/components/ArrowLeft.js +22 -18
- package/dist/Molecular/CustomIcons/components/ArrowRight.js +22 -18
- package/dist/Molecular/CustomIcons/components/ArrowUp.js +19 -15
- package/dist/Molecular/CustomIcons/components/Bell.js +17 -13
- package/dist/Molecular/CustomIcons/components/Button.js +17 -13
- package/dist/Molecular/CustomIcons/components/Campaigns.js +18 -14
- package/dist/Molecular/CustomIcons/components/Check.js +18 -14
- package/dist/Molecular/CustomIcons/components/Check2.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronDown.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronDownDisabled.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronLeft.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronRight.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronUp.js +17 -13
- package/dist/Molecular/CustomIcons/components/ChevronUpDown.js +32 -28
- package/dist/Molecular/CustomIcons/components/Close.js +19 -15
- package/dist/Molecular/CustomIcons/components/ColumnsOrder.js +44 -40
- package/dist/Molecular/CustomIcons/components/Delete.js +18 -14
- package/dist/Molecular/CustomIcons/components/Edit.js +17 -13
- package/dist/Molecular/CustomIcons/components/Email.js +35 -31
- package/dist/Molecular/CustomIcons/components/FinturfLogo.js +25 -21
- package/dist/Molecular/CustomIcons/components/FinturfLogo2.js +33 -29
- package/dist/Molecular/CustomIcons/components/Flows.js +17 -13
- package/dist/Molecular/CustomIcons/components/Gift.js +22 -18
- package/dist/Molecular/CustomIcons/components/GoogleAuth.js +31 -27
- package/dist/Molecular/CustomIcons/components/GooglePlay.js +31 -27
- package/dist/Molecular/CustomIcons/components/HelpCircle.js +20 -16
- package/dist/Molecular/CustomIcons/components/HelpCircle2.js +21 -17
- package/dist/Molecular/CustomIcons/components/HelpCircleFilled.js +20 -16
- package/dist/Molecular/CustomIcons/components/Home.js +20 -16
- package/dist/Molecular/CustomIcons/components/Home2.js +23 -19
- package/dist/Molecular/CustomIcons/components/Key.js +25 -21
- package/dist/Molecular/CustomIcons/components/Landers.js +21 -17
- package/dist/Molecular/CustomIcons/components/Lock.js +17 -13
- package/dist/Molecular/CustomIcons/components/Mail.js +25 -21
- package/dist/Molecular/CustomIcons/components/Mastercard.js +65 -61
- package/dist/Molecular/CustomIcons/components/Minus.js +30 -26
- package/dist/Molecular/CustomIcons/components/Offers.js +18 -14
- package/dist/Molecular/CustomIcons/components/Pause.js +30 -26
- package/dist/Molecular/CustomIcons/components/PayPal.js +44 -40
- package/dist/Molecular/CustomIcons/components/PayPalLightLarge.js +31 -27
- package/dist/Molecular/CustomIcons/components/Phone.js +32 -28
- package/dist/Molecular/CustomIcons/components/Play.js +30 -26
- package/dist/Molecular/CustomIcons/components/Plus.js +30 -26
- package/dist/Molecular/CustomIcons/components/Profile.js +22 -18
- package/dist/Molecular/CustomIcons/components/QRCode.js +32 -28
- package/dist/Molecular/CustomIcons/components/Rectangle.js +17 -13
- package/dist/Molecular/CustomIcons/components/Revert.js +20 -16
- package/dist/Molecular/CustomIcons/components/Star.js +14 -10
- package/dist/Molecular/CustomIcons/components/Star2.js +18 -14
- package/dist/Molecular/CustomIcons/components/TrafficSources.js +20 -16
- package/dist/Molecular/CustomIcons/components/Trash.js +17 -13
- package/dist/Molecular/CustomIcons/components/TrashRed.js +17 -13
- package/dist/Molecular/CustomIcons/components/Triggers.js +17 -13
- package/dist/Molecular/CustomIcons/components/User.js +22 -18
- package/dist/Molecular/CustomIcons/components/Visa.js +33 -29
- package/dist/Molecular/CustomIcons/components/X.js +17 -13
- package/dist/Molecular/CustomIcons/index.js +61 -61
- package/dist/Molecular/FormElement/FormElement.js +17 -19
- package/dist/Molecular/FormWithDependOn/FormWithDependOn.js +93 -73
- package/dist/Molecular/FormWithDependOn/partials/_utils.js +27 -28
- package/dist/Molecular/InputAddress/InputAddress.js +213 -126
- package/dist/Molecular/InputPassword/InputPassword.js +23 -13
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -11,10 +11,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
11
11
|
|
|
12
12
|
require("./DropdownLoader.scss");
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
variant
|
|
17
|
-
} = _ref;
|
|
14
|
+
var DropdownLoader = function DropdownLoader(_ref) {
|
|
15
|
+
var variant = _ref.variant;
|
|
18
16
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
19
17
|
className: "dropdown-loader-box j5"
|
|
20
18
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
@@ -9,6 +11,10 @@ exports.default = void 0;
|
|
|
9
11
|
|
|
10
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
13
|
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
|
+
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
17
|
+
|
|
12
18
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
19
|
|
|
14
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
@@ -21,7 +27,7 @@ var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
|
|
|
21
27
|
|
|
22
28
|
var _useDebounce = require("../../../Functions/useDebounce");
|
|
23
29
|
|
|
24
|
-
var
|
|
30
|
+
var _useIsMobile2 = _interopRequireDefault(require("../../../Functions/useIsMobile"));
|
|
25
31
|
|
|
26
32
|
var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
|
|
27
33
|
|
|
@@ -29,69 +35,115 @@ var _RadioInput = _interopRequireDefault(require("../RadioInput/RadioInput"));
|
|
|
29
35
|
|
|
30
36
|
require("./DropdownLiveSearch.scss");
|
|
31
37
|
|
|
32
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null ||
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var _dropdownListRef$curr5, _dropdownListRef$curr6, _tabIndex$toString;
|
|
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
|
-
|
|
38
|
+
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); }
|
|
39
|
+
|
|
40
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(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; }
|
|
41
|
+
|
|
42
|
+
var RC = "dropdown-live-search";
|
|
43
|
+
|
|
44
|
+
var DropdownLiveSearch = function DropdownLiveSearch(_ref) {
|
|
45
|
+
var _dropdownListRef$curr5, _dropdownListRef$curr6, _cn6, _tabIndex$toString;
|
|
46
|
+
|
|
47
|
+
var label = _ref.label,
|
|
48
|
+
value = _ref.value,
|
|
49
|
+
error = _ref.error,
|
|
50
|
+
disabled = _ref.disabled,
|
|
51
|
+
onChange = _ref.onChange,
|
|
52
|
+
placeholder = _ref.placeholder,
|
|
53
|
+
className = _ref.className,
|
|
54
|
+
isSearchable = _ref.isSearchable,
|
|
55
|
+
testId = _ref.testId,
|
|
56
|
+
doRequest = _ref.doRequest,
|
|
57
|
+
isLoading = _ref.isLoading,
|
|
58
|
+
_ref$options = _ref.options,
|
|
59
|
+
options = _ref$options === void 0 ? [] : _ref$options,
|
|
60
|
+
fieldKey = _ref.fieldKey,
|
|
61
|
+
id = _ref.id,
|
|
62
|
+
isListTop = _ref.isListTop,
|
|
63
|
+
_ref$isNotValidateASC = _ref.isNotValidateASCII,
|
|
64
|
+
isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
|
|
65
|
+
_ref$noOptionsText = _ref.noOptionsText,
|
|
66
|
+
noOptionsText = _ref$noOptionsText === void 0 ? "No options available" : _ref$noOptionsText,
|
|
67
|
+
_ref$attributesOfNati = _ref.attributesOfNativeInput,
|
|
68
|
+
attributesOfNativeInput = _ref$attributesOfNati === void 0 ? {} : _ref$attributesOfNati,
|
|
69
|
+
withMobileLogic = _ref.withMobileLogic,
|
|
70
|
+
tabIndex = _ref.tabIndex;
|
|
71
|
+
|
|
72
|
+
var _useState = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2)),
|
|
73
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 1),
|
|
74
|
+
dropdownId = _useState2[0];
|
|
75
|
+
|
|
76
|
+
var _useState3 = (0, _react.useState)(false),
|
|
77
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
78
|
+
isOpen = _useState4[0],
|
|
79
|
+
setIsOpenState = _useState4[1];
|
|
80
|
+
|
|
81
|
+
var _useState5 = (0, _react.useState)(false),
|
|
82
|
+
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
83
|
+
isValueDeleted = _useState6[0],
|
|
84
|
+
setIsValueDeleted = _useState6[1];
|
|
85
|
+
|
|
86
|
+
var _useIsMobile = (0, _useIsMobile2.default)(),
|
|
87
|
+
isMobileProp = _useIsMobile.isMobile;
|
|
88
|
+
|
|
89
|
+
var isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
|
|
90
|
+
var labelByValue = (0, _react.useMemo)(function () {
|
|
71
91
|
var _options$find$label, _options$find;
|
|
72
92
|
|
|
73
|
-
return (_options$find$label = options === null || options === void 0 ? void 0 : (_options$find = options.find(
|
|
93
|
+
return (_options$find$label = options === null || options === void 0 ? void 0 : (_options$find = options.find(function (item) {
|
|
94
|
+
return item.value === value;
|
|
95
|
+
})) === null || _options$find === void 0 ? void 0 : _options$find.label) !== null && _options$find$label !== void 0 ? _options$find$label : "";
|
|
74
96
|
}, [value]);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
97
|
+
|
|
98
|
+
var _useState7 = (0, _react.useState)(""),
|
|
99
|
+
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
100
|
+
searchValue = _useState8[0],
|
|
101
|
+
setSV = _useState8[1];
|
|
102
|
+
|
|
103
|
+
var _useState9 = (0, _react.useState)(false),
|
|
104
|
+
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
|
|
105
|
+
isSearchValueChangedAfterOpen = _useState10[0],
|
|
106
|
+
setIsSearchValueChangedAfterOpen = _useState10[1];
|
|
107
|
+
|
|
108
|
+
var dropdownLiveSearchRef = (0, _react.useRef)(null);
|
|
109
|
+
var dropdownListBoxRef = (0, _react.useRef)(null);
|
|
110
|
+
var dropdownListRef = (0, _react.useRef)(null);
|
|
111
|
+
var dropdownListHeaderRef = (0, _react.useRef)(null);
|
|
112
|
+
var searchInputRef = (0, _react.useRef)(null);
|
|
113
|
+
var searchInputModalRef = (0, _react.useRef)(null);
|
|
114
|
+
var searchValueRef = (0, _react.useRef)(null);
|
|
115
|
+
var wrapperRef = (0, _react.useRef)(null);
|
|
116
|
+
|
|
117
|
+
var _useState11 = (0, _react.useState)(false),
|
|
118
|
+
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
|
119
|
+
isFocusedByClick = _useState12[0],
|
|
120
|
+
setIsFocusedByClick = _useState12[1];
|
|
121
|
+
|
|
122
|
+
var _useState13 = (0, _react.useState)(null),
|
|
123
|
+
_useState14 = (0, _slicedToArray2.default)(_useState13, 2),
|
|
124
|
+
isScrollableList = _useState14[0],
|
|
125
|
+
setIsScrollableList = _useState14[1];
|
|
126
|
+
|
|
127
|
+
var _useState15 = (0, _react.useState)(false),
|
|
128
|
+
_useState16 = (0, _slicedToArray2.default)(_useState15, 2),
|
|
129
|
+
isFixedMaxHeight = _useState16[0],
|
|
130
|
+
setIsFixedMaxHeight = _useState16[1];
|
|
131
|
+
|
|
132
|
+
var _useState17 = (0, _react.useState)(0),
|
|
133
|
+
_useState18 = (0, _slicedToArray2.default)(_useState17, 2),
|
|
134
|
+
scrollTop = _useState18[0],
|
|
135
|
+
setScrollTop = _useState18[1];
|
|
136
|
+
|
|
137
|
+
var _useState19 = (0, _react.useState)(1),
|
|
138
|
+
_useState20 = (0, _slicedToArray2.default)(_useState19, 2),
|
|
139
|
+
scrollHeight = _useState20[0],
|
|
140
|
+
setScrollHeight = _useState20[1];
|
|
141
|
+
|
|
142
|
+
var debouncedSearchTerm = (0, _useDebounce.useDebounce)({
|
|
143
|
+
searchValue: searchValue,
|
|
92
144
|
delay: 600
|
|
93
145
|
});
|
|
94
|
-
|
|
146
|
+
var doScrollCallback = (0, _react.useCallback)(function (e) {
|
|
95
147
|
if (doRequest && typeof doRequest === "function") {
|
|
96
148
|
if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
|
|
97
149
|
doRequest(searchValueRef.current, true);
|
|
@@ -99,30 +151,30 @@ const DropdownLiveSearch = _ref => {
|
|
|
99
151
|
}
|
|
100
152
|
}, [options]);
|
|
101
153
|
|
|
102
|
-
|
|
103
|
-
|
|
154
|
+
var setSearchValue = function setSearchValue(val) {
|
|
155
|
+
var isChanged = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
104
156
|
if (isChanged) setIsSearchValueChangedAfterOpen(true);
|
|
105
157
|
setSV(val);
|
|
106
158
|
searchValueRef.current = val;
|
|
107
159
|
};
|
|
108
160
|
|
|
109
|
-
|
|
161
|
+
var setIsOpen = function setIsOpen(v) {
|
|
110
162
|
setIsOpenState(v);
|
|
111
163
|
setSearchValue("", false);
|
|
112
164
|
if (!v) setIsSearchValueChangedAfterOpen(false);
|
|
113
165
|
};
|
|
114
166
|
|
|
115
|
-
|
|
167
|
+
var getParentNode = function getParentNode() {
|
|
116
168
|
var _ref2, _document$querySelect;
|
|
117
169
|
|
|
118
170
|
return (_ref2 = (_document$querySelect = document.querySelector("div#root")) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector("div#app")) !== null && _ref2 !== void 0 ? _ref2 : document.querySelector("div#storybook-root");
|
|
119
171
|
};
|
|
120
172
|
|
|
121
|
-
|
|
173
|
+
var getListContainer = function getListContainer() {
|
|
122
174
|
return document.getElementById(dropdownId);
|
|
123
175
|
};
|
|
124
176
|
|
|
125
|
-
|
|
177
|
+
var onWrapperClick = function onWrapperClick(e) {
|
|
126
178
|
if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
|
|
127
179
|
e.stopPropagation();
|
|
128
180
|
e.preventDefault();
|
|
@@ -130,26 +182,26 @@ const DropdownLiveSearch = _ref => {
|
|
|
130
182
|
}
|
|
131
183
|
};
|
|
132
184
|
|
|
133
|
-
|
|
185
|
+
var onSearchableInputFocus = function onSearchableInputFocus(e) {
|
|
134
186
|
if (!isOpen) {
|
|
135
187
|
e.preventDefault();
|
|
136
188
|
e.stopPropagation();
|
|
137
189
|
}
|
|
138
190
|
};
|
|
139
191
|
|
|
140
|
-
|
|
192
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
141
193
|
var _getListContainer;
|
|
142
194
|
|
|
143
195
|
if (!dropdownLiveSearchRef.current.contains(event.target) && (!getListContainer() || !((_getListContainer = getListContainer()) !== null && _getListContainer !== void 0 && _getListContainer.contains(event.target)))) setIsOpen(false);
|
|
144
196
|
};
|
|
145
197
|
|
|
146
|
-
|
|
198
|
+
var closeListViaEsc = function closeListViaEsc(e) {
|
|
147
199
|
if ([27].includes(e.keyCode)) setIsOpen(false);
|
|
148
200
|
};
|
|
149
201
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
onInputClick: e
|
|
202
|
+
var closeList = isOpen ? handleClickOutside : function () {};
|
|
203
|
+
var handle = {
|
|
204
|
+
onInputClick: function onInputClick(e) {
|
|
153
205
|
if (!isOpen) setIsOpen(true);
|
|
154
206
|
|
|
155
207
|
if (isMobile && withMobileLogic) {
|
|
@@ -160,8 +212,8 @@ const DropdownLiveSearch = _ref => {
|
|
|
160
212
|
e.target.select();
|
|
161
213
|
}
|
|
162
214
|
},
|
|
163
|
-
onInputChange: e
|
|
164
|
-
|
|
215
|
+
onInputChange: function onInputChange(e) {
|
|
216
|
+
var inputValue = e.target.value;
|
|
165
217
|
if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
|
|
166
218
|
setSearchValue(inputValue);
|
|
167
219
|
|
|
@@ -173,15 +225,17 @@ const DropdownLiveSearch = _ref => {
|
|
|
173
225
|
}
|
|
174
226
|
};
|
|
175
227
|
|
|
176
|
-
|
|
228
|
+
var highlightedText = function highlightedText(text, postfix) {
|
|
177
229
|
if (!isSearchable) return text;else {
|
|
178
230
|
var _text;
|
|
179
231
|
|
|
180
|
-
|
|
232
|
+
var preparedSearchValue = isSearchValueChangedAfterOpen || isMobile && withMobileLogic ? searchValue : labelByValue;
|
|
181
233
|
|
|
182
|
-
|
|
234
|
+
var prepare = function prepare(text) {
|
|
235
|
+
return text === null || text === void 0 ? void 0 : text.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
|
|
236
|
+
};
|
|
183
237
|
|
|
184
|
-
text = text.replace(/["&<>]/g, a
|
|
238
|
+
text = text.replace(/["&<>]/g, function (a) {
|
|
185
239
|
return {
|
|
186
240
|
'"': """,
|
|
187
241
|
"&": "&",
|
|
@@ -189,32 +243,29 @@ const DropdownLiveSearch = _ref => {
|
|
|
189
243
|
">": ">"
|
|
190
244
|
}[a];
|
|
191
245
|
});
|
|
192
|
-
|
|
193
|
-
|
|
246
|
+
var main = preparedSearchValue ? (_text = text) === null || _text === void 0 ? void 0 : _text.replace(new RegExp(prepare(preparedSearchValue), "i"), function (match) {
|
|
247
|
+
return "<span class=\"bg--yellow\">".concat(match, "</span>");
|
|
248
|
+
}) : text;
|
|
249
|
+
var postfixPart = postfix ? "<span class=\"dropdown__list-item-postfix\">".concat(postfix, "</span>") : "";
|
|
194
250
|
return main + postfixPart;
|
|
195
251
|
}
|
|
196
252
|
};
|
|
197
253
|
|
|
198
|
-
|
|
199
|
-
var _item$value, _item$value$toString, _item$value2, _item$value2$toString, _item$customMobileIco;
|
|
254
|
+
var getMarkupForElement = function getMarkupForElement(item, index, optTestId) {
|
|
255
|
+
var _item$value, _item$value$toString, _item$value2, _item$value2$toString, _cn, _item$customMobileIco;
|
|
200
256
|
|
|
201
|
-
|
|
202
|
-
|
|
257
|
+
var lowerLabel = item.label.toLowerCase();
|
|
258
|
+
var lowerSearchValue = searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase();
|
|
203
259
|
return /*#__PURE__*/_react.default.createElement("button", {
|
|
204
260
|
"data-testid": "dropdown-live-search--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"),
|
|
205
261
|
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, "_"),
|
|
206
|
-
onClick: ()
|
|
262
|
+
onClick: function onClick() {
|
|
207
263
|
onChange(item.value);
|
|
208
264
|
setIsOpen(false);
|
|
209
265
|
},
|
|
210
|
-
className: (0, _classnames.default)("".concat(RC, "__list-item"), {
|
|
211
|
-
["".concat(RC, "__list-item_active")]: item.value === value,
|
|
212
|
-
["".concat(RC, "__list-item_disabled")]: item.disabled
|
|
213
|
-
}, item.className)
|
|
266
|
+
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)
|
|
214
267
|
}, !isMobile || isMobile && !withMobileLogic && /*#__PURE__*/_react.default.createElement("span", {
|
|
215
|
-
className: (0, _classnames.default)("".concat(RC, "__active-icon"), {
|
|
216
|
-
["".concat(RC, "__active-icon_active")]: lowerLabel === lowerSearchValue
|
|
217
|
-
})
|
|
268
|
+
className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), lowerLabel === lowerSearchValue))
|
|
218
269
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("p", {
|
|
219
270
|
title: item.label,
|
|
220
271
|
className: item.labelClassName || "",
|
|
@@ -227,38 +278,35 @@ const DropdownLiveSearch = _ref => {
|
|
|
227
278
|
}) : "");
|
|
228
279
|
};
|
|
229
280
|
|
|
230
|
-
|
|
281
|
+
var getListMarkUp = function getListMarkUp() {
|
|
282
|
+
var _cn3, _cn5;
|
|
283
|
+
|
|
231
284
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
232
285
|
className: (0, _classnames.default)("".concat(RC, "__container-wrapper")),
|
|
233
286
|
ref: wrapperRef,
|
|
234
|
-
onClick: isMobile ? onWrapperClick : ()
|
|
287
|
+
onClick: isMobile ? onWrapperClick : function () {}
|
|
235
288
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
236
|
-
className: (0, _classnames.default)("".concat(RC, "__list-wrapper"), {
|
|
237
|
-
["".concat(RC, "__list-wrapper--fixed-height")]: isFixedMaxHeight,
|
|
238
|
-
["".concat(RC, "__list-wrapper--with-bottom-shadow")]: isScrollableList && isMobile,
|
|
239
|
-
["".concat(RC, "__list-wrapper--with-bottom-shadow-hidden")]: scrollTop === scrollHeight
|
|
240
|
-
})
|
|
289
|
+
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))
|
|
241
290
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
242
291
|
id: "dropdown-live-search-list",
|
|
243
|
-
className: (0, _classnames.default)("".concat(RC, "__container"), {
|
|
244
|
-
["".concat(RC, "__list-top")]: isListTop
|
|
245
|
-
}),
|
|
292
|
+
className: (0, _classnames.default)("".concat(RC, "__container"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-top"), isListTop)),
|
|
246
293
|
ref: dropdownListBoxRef
|
|
247
294
|
}, isMobile && /*#__PURE__*/_react.default.createElement("div", {
|
|
248
295
|
ref: dropdownListHeaderRef,
|
|
249
|
-
className: (0, _classnames.default)("".concat(RC, "__list-header"), {
|
|
250
|
-
["".concat(RC, "__list-header-with-shadow")]: isScrollableList && isMobile,
|
|
251
|
-
["".concat(RC, "__list-header-with-shadow-hidden")]: scrollTop === 0
|
|
252
|
-
})
|
|
296
|
+
className: (0, _classnames.default)("".concat(RC, "__list-header"), (_cn5 = {}, (0, _defineProperty2.default)(_cn5, "".concat(RC, "__list-header-with-shadow"), isScrollableList && isMobile), (0, _defineProperty2.default)(_cn5, "".concat(RC, "__list-header-with-shadow-hidden"), scrollTop === 0), _cn5))
|
|
253
297
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
254
298
|
className: (0, _classnames.default)("".concat(RC, "__list-header-row"))
|
|
255
299
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
256
300
|
className: (0, _classnames.default)("".concat(RC, "__list-label"))
|
|
257
301
|
}, label), /*#__PURE__*/_react.default.createElement("div", {
|
|
258
302
|
className: (0, _classnames.default)("".concat(RC, "__list-close-icon")),
|
|
259
|
-
onClick: ()
|
|
303
|
+
onClick: function onClick() {
|
|
304
|
+
return setIsOpen(false);
|
|
305
|
+
}
|
|
260
306
|
}, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
|
|
261
|
-
onClick: ()
|
|
307
|
+
onClick: function onClick() {
|
|
308
|
+
return setIsOpen(false);
|
|
309
|
+
}
|
|
262
310
|
}))), isSearchable && /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
263
311
|
ref: searchInputModalRef,
|
|
264
312
|
className: "".concat(RC, "__input"),
|
|
@@ -272,20 +320,22 @@ const DropdownLiveSearch = _ref => {
|
|
|
272
320
|
disabled: isLoading
|
|
273
321
|
}),
|
|
274
322
|
ref: dropdownListRef
|
|
275
|
-
}, options.map(
|
|
323
|
+
}, options.map(function (option) {
|
|
324
|
+
return getMarkupForElement(option);
|
|
325
|
+
}), !options.length && /*#__PURE__*/_react.default.createElement("div", {
|
|
276
326
|
className: "".concat(RC, "__list-item ").concat(RC, "__list-item--no-options")
|
|
277
327
|
}, noOptionsText)), isLoading && isOpen && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
|
|
278
328
|
size: options.length <= 3 ? "small" : null
|
|
279
329
|
}))));
|
|
280
330
|
};
|
|
281
331
|
|
|
282
|
-
|
|
283
|
-
|
|
332
|
+
var initListContainer = function initListContainer() {
|
|
333
|
+
var dropdownList = document.createElement("div");
|
|
284
334
|
dropdownList.setAttribute("id", dropdownId);
|
|
285
335
|
dropdownList.classList.add("dropdown__container");
|
|
286
336
|
|
|
287
337
|
if (isMobile) {
|
|
288
|
-
dropdownList.addEventListener("click", e
|
|
338
|
+
dropdownList.addEventListener("click", function (e) {
|
|
289
339
|
if (e.target.id === dropdownId) setIsOpen(false);
|
|
290
340
|
});
|
|
291
341
|
}
|
|
@@ -304,7 +354,7 @@ const DropdownLiveSearch = _ref => {
|
|
|
304
354
|
(_document$getElementB = document.getElementById("mlw-".concat(dropdownId))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
|
|
305
355
|
} catch (e) {}
|
|
306
356
|
|
|
307
|
-
|
|
357
|
+
var dropdownMobileListWrapper = document.createElement("div");
|
|
308
358
|
dropdownMobileListWrapper.classList.add("dropdown-live-search-mobile");
|
|
309
359
|
dropdownMobileListWrapper.setAttribute("id", "mlw-".concat(dropdownId));
|
|
310
360
|
dropdownMobileListWrapper === null || dropdownMobileListWrapper === void 0 ? void 0 : dropdownMobileListWrapper.append(dropdownList);
|
|
@@ -317,34 +367,36 @@ const DropdownLiveSearch = _ref => {
|
|
|
317
367
|
}
|
|
318
368
|
};
|
|
319
369
|
|
|
320
|
-
|
|
321
|
-
|
|
370
|
+
var renderListContainer = function renderListContainer() {
|
|
371
|
+
var lc = getListContainer();
|
|
322
372
|
if (!lc) return null;
|
|
323
373
|
return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
|
|
324
374
|
};
|
|
325
375
|
|
|
326
|
-
(0, _react.useEffect)(()
|
|
376
|
+
(0, _react.useEffect)(function () {
|
|
327
377
|
document.addEventListener("click", handleClickOutside, true);
|
|
328
|
-
return ()
|
|
378
|
+
return function () {
|
|
379
|
+
return document.removeEventListener("click", handleClickOutside, true);
|
|
380
|
+
};
|
|
329
381
|
}, []);
|
|
330
|
-
(0, _react.useEffect)(()
|
|
382
|
+
(0, _react.useEffect)(function () {
|
|
331
383
|
if (options.length === 1 && searchValue === options[0].label) {
|
|
332
384
|
setSearchValue(options[0].label);
|
|
333
385
|
onChange(options[0].value);
|
|
334
386
|
}
|
|
335
387
|
}, [options]);
|
|
336
|
-
(0, _react.useEffect)(()
|
|
388
|
+
(0, _react.useEffect)(function () {
|
|
337
389
|
if (isSearchable && (debouncedSearchTerm || isValueDeleted)) {
|
|
338
390
|
doRequest(debouncedSearchTerm);
|
|
339
391
|
if (isValueDeleted) setIsValueDeleted(false);
|
|
340
392
|
}
|
|
341
393
|
}, [debouncedSearchTerm, isValueDeleted]);
|
|
342
|
-
(0, _react.useEffect)(()
|
|
394
|
+
(0, _react.useEffect)(function () {
|
|
343
395
|
if (isMobile && withMobileLogic) {
|
|
344
396
|
initListContainer();
|
|
345
397
|
}
|
|
346
398
|
}, [isMobile, withMobileLogic]);
|
|
347
|
-
(0, _react.useEffect)(()
|
|
399
|
+
(0, _react.useEffect)(function () {
|
|
348
400
|
if (isOpen && isMobile && dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current && !searchValue) {
|
|
349
401
|
var _dropdownListRef$curr, _dropdownListRef$curr2, _dropdownListRef$curr3, _dropdownListRef$curr4;
|
|
350
402
|
|
|
@@ -352,17 +404,17 @@ const DropdownLiveSearch = _ref => {
|
|
|
352
404
|
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));
|
|
353
405
|
}
|
|
354
406
|
}, [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]);
|
|
355
|
-
(0, _react.useLayoutEffect)(()
|
|
356
|
-
|
|
407
|
+
(0, _react.useLayoutEffect)(function () {
|
|
408
|
+
var list = document.getElementById("dropdown-live-search-list");
|
|
357
409
|
|
|
358
410
|
if ((list || isOpen) && (!withMobileLogic || !isMobile)) {
|
|
359
411
|
var _dropdownLiveSearchRe;
|
|
360
412
|
|
|
361
|
-
|
|
413
|
+
var dropdownWidth = dropdownLiveSearchRef === null || dropdownLiveSearchRef === void 0 ? void 0 : (_dropdownLiveSearchRe = dropdownLiveSearchRef.current) === null || _dropdownLiveSearchRe === void 0 ? void 0 : _dropdownLiveSearchRe.clientWidth;
|
|
362
414
|
list.style.minWidth = "".concat(dropdownWidth, "px");
|
|
363
415
|
}
|
|
364
416
|
}, [dropdownLiveSearchRef, isOpen, withMobileLogic]);
|
|
365
|
-
(0, _react.useEffect)(()
|
|
417
|
+
(0, _react.useEffect)(function () {
|
|
366
418
|
if (!isOpen) {
|
|
367
419
|
setIsFocusedByClick(false);
|
|
368
420
|
if (withMobileLogic && isMobile) setSearchValue("");
|
|
@@ -372,8 +424,8 @@ const DropdownLiveSearch = _ref => {
|
|
|
372
424
|
if (isMobile && withMobileLogic) {
|
|
373
425
|
var _searchInputModalRef$;
|
|
374
426
|
|
|
375
|
-
doRequest("").then(()
|
|
376
|
-
setTimeout(()
|
|
427
|
+
doRequest("").then(function () {
|
|
428
|
+
setTimeout(function () {
|
|
377
429
|
var _dropdownListBoxRef$c, _dropdownListBoxRef$c2, _dropdownListHeaderRe, _dropdownListHeaderRe2;
|
|
378
430
|
|
|
379
431
|
dropdownListRef.current.style.maxHeight = "".concat((dropdownListBoxRef === null || dropdownListBoxRef === void 0 ? void 0 : (_dropdownListBoxRef$c = dropdownListBoxRef.current) === null || _dropdownListBoxRef$c === void 0 ? void 0 : (_dropdownListBoxRef$c2 = _dropdownListBoxRef$c.getBoundingClientRect()) === null || _dropdownListBoxRef$c2 === void 0 ? void 0 : _dropdownListBoxRef$c2.height) - (dropdownListHeaderRef === null || dropdownListHeaderRef === void 0 ? void 0 : (_dropdownListHeaderRe = dropdownListHeaderRef.current) === null || _dropdownListHeaderRe === void 0 ? void 0 : (_dropdownListHeaderRe2 = _dropdownListHeaderRe.getBoundingClientRect()) === null || _dropdownListHeaderRe2 === void 0 ? void 0 : _dropdownListHeaderRe2.height), "px");
|
|
@@ -385,11 +437,11 @@ const DropdownLiveSearch = _ref => {
|
|
|
385
437
|
dropdownListRef.current.addEventListener("scroll", doScrollCallback);
|
|
386
438
|
}
|
|
387
439
|
|
|
388
|
-
return ()
|
|
440
|
+
return function () {
|
|
389
441
|
removeEventListener("scroll", doScrollCallback);
|
|
390
442
|
};
|
|
391
443
|
}, [isOpen, dropdownListRef]);
|
|
392
|
-
(0, _react.useLayoutEffect)(()
|
|
444
|
+
(0, _react.useLayoutEffect)(function () {
|
|
393
445
|
var _getListContainer3;
|
|
394
446
|
|
|
395
447
|
if (!isMobile) {
|
|
@@ -404,7 +456,7 @@ const DropdownLiveSearch = _ref => {
|
|
|
404
456
|
|
|
405
457
|
(_getListContainer3 = getListContainer()) === null || _getListContainer3 === void 0 ? void 0 : _getListContainer3.addEventListener("click", closeList);
|
|
406
458
|
window.addEventListener("keyup", closeListViaEsc);
|
|
407
|
-
return ()
|
|
459
|
+
return function () {
|
|
408
460
|
var _getListContainer4;
|
|
409
461
|
|
|
410
462
|
window.removeEventListener("mousewheel", closeList);
|
|
@@ -414,8 +466,8 @@ const DropdownLiveSearch = _ref => {
|
|
|
414
466
|
(_getListContainer4 = getListContainer()) === null || _getListContainer4 === void 0 ? void 0 : _getListContainer4.removeEventListener("click", closeList);
|
|
415
467
|
};
|
|
416
468
|
}, [getListContainer]);
|
|
417
|
-
(0, _react.useEffect)(()
|
|
418
|
-
|
|
469
|
+
(0, _react.useEffect)(function () {
|
|
470
|
+
var setScrollTopValue = function setScrollTopValue(e) {
|
|
419
471
|
setScrollTop(parseInt(e.target.scrollTop, 10));
|
|
420
472
|
};
|
|
421
473
|
|
|
@@ -425,13 +477,13 @@ const DropdownLiveSearch = _ref => {
|
|
|
425
477
|
dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr7 = dropdownListRef.current) === null || _dropdownListRef$curr7 === void 0 ? void 0 : _dropdownListRef$curr7.addEventListener("scroll", setScrollTopValue);
|
|
426
478
|
}
|
|
427
479
|
|
|
428
|
-
return ()
|
|
480
|
+
return function () {
|
|
429
481
|
var _dropdownListRef$curr8;
|
|
430
482
|
|
|
431
483
|
dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef$curr8 = dropdownListRef.current) === null || _dropdownListRef$curr8 === void 0 ? void 0 : _dropdownListRef$curr8.removeEventListener("scroll", setScrollTopValue);
|
|
432
484
|
};
|
|
433
485
|
}, [isOpen, isMobile, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
|
|
434
|
-
(0, _react.useEffect)(()
|
|
486
|
+
(0, _react.useEffect)(function () {
|
|
435
487
|
if (dropdownListRef !== null && dropdownListRef !== void 0 && dropdownListRef.current) {
|
|
436
488
|
var _dropdownListRef$curr9, _dropdownListRef$curr10;
|
|
437
489
|
|
|
@@ -440,18 +492,22 @@ const DropdownLiveSearch = _ref => {
|
|
|
440
492
|
}, [scrollTop, dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current]);
|
|
441
493
|
if (!options) return null;
|
|
442
494
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
443
|
-
className: (0, _classnames.default)(RC, className, {
|
|
444
|
-
disabled
|
|
445
|
-
|
|
446
|
-
["".concat(RC, "--focused")]: isOpen
|
|
447
|
-
}),
|
|
495
|
+
className: (0, _classnames.default)(RC, className, (_cn6 = {
|
|
496
|
+
disabled: disabled
|
|
497
|
+
}, (0, _defineProperty2.default)(_cn6, "".concat(RC, "-mobile"), isMobile), (0, _defineProperty2.default)(_cn6, "".concat(RC, "--focused"), isOpen), _cn6)),
|
|
448
498
|
ref: dropdownLiveSearchRef
|
|
449
499
|
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
450
500
|
"data-testid": "dropdown-live-search--".concat(testId || "", "--container"),
|
|
451
501
|
className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? "input__wrap--focus" : "", " ").concat(!value ? "placeholder" : "", " ").concat(error ? "error" : ""),
|
|
452
|
-
onClick:
|
|
453
|
-
|
|
454
|
-
|
|
502
|
+
onClick: function onClick() {
|
|
503
|
+
return !isSearchable ? setIsOpen(!isOpen) : null;
|
|
504
|
+
},
|
|
505
|
+
onMouseDown: function onMouseDown() {
|
|
506
|
+
return setIsFocusedByClick(true);
|
|
507
|
+
},
|
|
508
|
+
onFocus: function onFocus() {
|
|
509
|
+
return !isFocusedByClick ? setIsOpen(true) : null;
|
|
510
|
+
},
|
|
455
511
|
tabIndex: tabIndex === null || tabIndex === void 0 ? void 0 : (_tabIndex$toString = tabIndex.toString) === null || _tabIndex$toString === void 0 ? void 0 : _tabIndex$toString.call(tabIndex)
|
|
456
512
|
}, isSearchable ? /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
|
|
457
513
|
ref: searchInputRef,
|
|
@@ -465,10 +521,10 @@ const DropdownLiveSearch = _ref => {
|
|
|
465
521
|
}, attributesOfNativeInput)) : /*#__PURE__*/_react.default.createElement("span", {
|
|
466
522
|
className: "text"
|
|
467
523
|
}, labelByValue || placeholder), /*#__PURE__*/_react.default.createElement("span", {
|
|
468
|
-
className: (0, _classnames.default)("".concat(RC, "__arrow"), {
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
524
|
+
className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
|
|
525
|
+
onClick: function onClick() {
|
|
526
|
+
return setIsOpen(!isOpen);
|
|
527
|
+
}
|
|
472
528
|
}, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
|
|
473
529
|
className: "mobile-icon"
|
|
474
530
|
}) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && (isMobile && withMobileLogic ? renderListContainer() : getListMarkUp()));
|