intelicoreact 1.6.20 → 1.6.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 +1 -102
- package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.js +1 -89
- package/dist/Atomic/FormElements/Calendar/Calendar.js +1 -232
- package/dist/Atomic/FormElements/Calendar/Calendar.props.js +1 -3
- package/dist/Atomic/FormElements/CheckboxInput/CheckboxInput.js +1 -101
- package/dist/Atomic/FormElements/CheckboxesLine/CheckboxesLine.js +1 -70
- package/dist/Atomic/FormElements/Datepicker/Datepicker.js +1 -350
- package/dist/Atomic/FormElements/Datepicker/Datepicker.props.js +1 -3
- package/dist/Atomic/FormElements/Datepicker/components/DatepickerCalendar.js +1 -177
- package/dist/Atomic/FormElements/Datepicker/components/DatepickerCalendar.props.js +1 -3
- package/dist/Atomic/FormElements/Dropdown/Dropdown.js +1 -561
- package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.js +1 -20
- package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js +1 -405
- package/dist/Atomic/FormElements/FileLoader/FileLoader.js +1 -94
- package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js +1 -105
- package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js +1 -67
- package/dist/Atomic/FormElements/FileLoaderDescription/FileLoaderDescription.js +1 -247
- package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js +1 -160
- package/dist/Atomic/FormElements/FileLoaderLocalGroup/FileLoaderLocalGroup.js +1 -193
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN.js +1 -135
- package/dist/Atomic/FormElements/FormattedRawSSN/FormattedRawSSN_old.js +1 -116
- package/dist/Atomic/FormElements/Input/Input.js +1 -467
- package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js +1 -161
- package/dist/Atomic/FormElements/InputColor/InputColor.js +1 -64
- package/dist/Atomic/FormElements/InputCurrency/InputCurrency.js +1 -166
- package/dist/Atomic/FormElements/InputDateRange/InputDateRange.js +1 -354
- package/dist/Atomic/FormElements/InputDateRange/components/DateInput.js +1 -71
- package/dist/Atomic/FormElements/InputDateRange/components/Datepicker.js +1 -693
- package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js +1 -254
- package/dist/Atomic/FormElements/InputDateRange/components/SelectItem.js +1 -32
- package/dist/Atomic/FormElements/InputDateRange/dependencies.js +1 -200
- package/dist/Atomic/FormElements/InputLink/InputLink.js +1 -99
- package/dist/Atomic/FormElements/InputMask/InputCarretPosition.js +1 -37
- package/dist/Atomic/FormElements/InputMask/InputMask.js +1 -1214
- package/dist/Atomic/FormElements/InputMask/config.js +1 -15
- package/dist/Atomic/FormElements/InputMask/functions.js +1 -58
- package/dist/Atomic/FormElements/InputMask2/InputMask2.js +1 -674
- package/dist/Atomic/FormElements/InputMask2/config.js +1 -15
- package/dist/Atomic/FormElements/InputMask2/functions.js +1 -58
- package/dist/Atomic/FormElements/InputMask3/InputMask3.js +1 -766
- package/dist/Atomic/FormElements/InputMask3/config.js +1 -15
- package/dist/Atomic/FormElements/InputMask3/functions.js +1 -58
- package/dist/Atomic/FormElements/InputWithAction/InputWithAction.js +1 -114
- package/dist/Atomic/FormElements/InputsRow/InputsRow.js +1 -140
- package/dist/Atomic/FormElements/Label/Label.js +1 -82
- package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js +1 -506
- package/dist/Atomic/FormElements/MultiSelect/MultiSelect.js +1 -45
- package/dist/Atomic/FormElements/NumericInput/NumericInput.js +1 -331
- package/dist/Atomic/FormElements/RadioGroup/RadioGroup.js +1 -66
- package/dist/Atomic/FormElements/RadioGroupWithInput/RadioGroupWithInput.js +1 -80
- package/dist/Atomic/FormElements/RadioInput/RadioInput.js +1 -64
- package/dist/Atomic/FormElements/RadioRowSwitcher/RadioRowSwitcher.js +1 -54
- package/dist/Atomic/FormElements/RangeCalendar/RangeCalendar.js +1 -183
- package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js +1 -209
- package/dist/Atomic/FormElements/RangeList/RangeList.js +1 -175
- package/dist/Atomic/FormElements/RangeList/partial/RangeListRow.js +1 -43
- package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js +1 -443
- package/dist/Atomic/FormElements/RangeSlider2/RangeSlider2.js +1 -858
- package/dist/Atomic/FormElements/SwitchableRow/SwitchableRow.js +1 -39
- package/dist/Atomic/FormElements/Switcher/Switcher.js +1 -59
- package/dist/Atomic/FormElements/SwitcherCheckbox/SwitcherCheckbox.js +1 -50
- package/dist/Atomic/FormElements/SwitcherHide/SwitcherHide.js +1 -47
- package/dist/Atomic/FormElements/SwitcherRadio/SwitcherRadio.js +1 -96
- package/dist/Atomic/FormElements/SwitcherRange/SwitcherRange.js +1 -40
- package/dist/Atomic/FormElements/SwitcherRangeList/SwitcherRangeList.js +1 -64
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/SwitcherTagsDropdown.js +1 -170
- package/dist/Atomic/FormElements/SwitcherTagsDropdown/partial/States.js +1 -202
- package/dist/Atomic/FormElements/SwitcherTextarea/SwitcherTextarea.js +1 -67
- package/dist/Atomic/FormElements/TagListToDropdown/TagListToDropdown.js +1 -115
- package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js +1 -826
- package/dist/Atomic/FormElements/Text/Text.js +1 -125
- package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js +1 -45
- package/dist/Atomic/FormElements/Textarea/Textarea.js +1 -80
- package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js +1 -176
- package/dist/Atomic/FormElements/TieredCheckboxes/partial/AccordionWithCheckbox.js +1 -62
- package/dist/Atomic/FormElements/TimeRange/TimeRange.js +1 -127
- package/dist/Atomic/FormElements/UserContacts/UserContacts.js +1 -220
- package/dist/Atomic/FormElements/VariantsListRadio/VariantsListRadio.js +1 -83
- package/dist/Atomic/FormElements/VariantsListRadio/partials/VariantsListRadioItem.js +1 -82
- package/dist/Atomic/FormElements/WidgetPseudoTable/WidgetPseudoTable.js +1 -101
- package/dist/Atomic/FormElements/WidgetPseudoTable/partial/constructor.js +1 -29
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/WidgetWithSwitchableRows.js +1 -113
- package/dist/Atomic/FormElements/WidgetWithSwitchableRows/partial/constructor.js +1 -30
- package/dist/Atomic/Layout/Header/Header.js +1 -85
- package/dist/Atomic/Layout/Spinner/Spinner.js +1 -39
- package/dist/Atomic/UI/Accordion/Accordion.js +1 -118
- package/dist/Atomic/UI/Accordion/AccordionItem.js +1 -181
- package/dist/Atomic/UI/AccordionTable/AccordionTable.js +1 -238
- package/dist/Atomic/UI/AccordionText/AccordionText.js +1 -69
- package/dist/Atomic/UI/AdvancedTag/AdvTag.js +1 -207
- package/dist/Atomic/UI/AdvancedTag/AdvancedTags.js +1 -56
- package/dist/Atomic/UI/Alert/Alert.js +1 -72
- package/dist/Atomic/UI/Arrow/Arrow.js +1 -132
- package/dist/Atomic/UI/Box/Box.js +1 -52
- package/dist/Atomic/UI/Button/Button.js +1 -89
- package/dist/Atomic/UI/ButtonsBar/ButtonsBar.js +1 -72
- package/dist/Atomic/UI/Chart/Chart.js +1 -172
- package/dist/Atomic/UI/Chart/partial/Chart.constants.js +1 -95
- package/dist/Atomic/UI/Chart/partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon.js +1 -80
- package/dist/Atomic/UI/Chart/partial/datasetSetters.js +1 -188
- package/dist/Atomic/UI/Chart/partial/optionsConstructor.js +1 -335
- package/dist/Atomic/UI/Chart/partial/optionsSetters.js +1 -43
- package/dist/Atomic/UI/Chart/partial/utils.js +1 -60
- package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js +1 -109
- package/dist/Atomic/UI/DateTime/DateTime.js +1 -57
- package/dist/Atomic/UI/DebugContainer/DebugContainer.js +1 -44
- package/dist/Atomic/UI/DebugContainer/useDebugContainer.js +1 -15
- package/dist/Atomic/UI/DoubleString/DoubleString.js +1 -102
- package/dist/Atomic/UI/DynamicIcon/DynamicIcon.js +1 -226
- package/dist/Atomic/UI/ExampleChartIntegration/ExampleChartIntegration.js +1 -221
- package/dist/Atomic/UI/ExampleChartIntegration/partial/utils.js +1 -106
- package/dist/Atomic/UI/Hint/Hint.js +1 -193
- package/dist/Atomic/UI/Hint/partials/_utils.js +1 -51
- package/dist/Atomic/UI/Modal/Modal.js +1 -188
- package/dist/Atomic/UI/Modal/ModalHOC.js +1 -72
- package/dist/Atomic/UI/Modal/partials/ModalFooter.js +1 -46
- package/dist/Atomic/UI/Modal/partials/ModalTitle.js +1 -83
- package/dist/Atomic/UI/Modal/partials/useMobileModal.js +1 -200
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion._test.js +1 -75
- package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js +1 -80
- package/dist/Atomic/UI/NavLine/NavLine.js +1 -293
- package/dist/Atomic/UI/PageTitle/PageTitle.js +1 -75
- package/dist/Atomic/UI/PieChart/PieChart.js +1 -42
- package/dist/Atomic/UI/Price/Price.js +1 -22
- package/dist/Atomic/UI/PriceRange/PriceRange.js +1 -36
- package/dist/Atomic/UI/ProgressLine/ProgressLine.js +1 -71
- package/dist/Atomic/UI/Status/Status.js +1 -59
- package/dist/Atomic/UI/Table/Partials/TdCell.js +1 -87
- package/dist/Atomic/UI/Table/Partials/TdHeader.js +1 -38
- package/dist/Atomic/UI/Table/Partials/TdRow.js +1 -99
- package/dist/Atomic/UI/Table/Partials/TdTitle.js +1 -52
- package/dist/Atomic/UI/Table/Table.js +1 -63
- package/dist/Atomic/UI/Table/TdTypes/TdActions.js +1 -80
- package/dist/Atomic/UI/Table/TdTypes/TdPriority.js +1 -28
- package/dist/Atomic/UI/Table/TdTypes/TdRange.js +1 -13
- package/dist/Atomic/UI/Table/TdTypes/TdWeight.js +1 -53
- package/dist/Atomic/UI/Tag/Tag.js +1 -160
- package/dist/Atomic/UI/TagList/TagList.js +1 -251
- package/dist/Atomic/UI/UserBox/UserBox.js +1 -73
- package/dist/Atomic/UI/WizardStepper/constructor.js +1 -84
- package/dist/Atomic/UI/WizardStepper/index.js +1 -3
- package/dist/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js +1 -37
- package/dist/Atomic/UI/WizardStepper/ui/StateIcon/index.js +1 -3
- package/dist/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js +1 -61
- package/dist/Atomic/UI/WizardStepper/ui/StepRow/index.js +1 -3
- package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.js +1 -39
- package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/index.js +1 -3
- package/dist/Atomic/UI/WizardStepper/ui/icons.js +1 -49
- package/dist/Atomic/UI/WizardStepper/ui/index.js +1 -3
- package/dist/Classes/AbortableFetch.js +1 -454
- package/dist/Classes/AnimatedHandler.js +1 -47
- package/dist/Classes/RESTAPI/index.js +1 -228
- package/dist/Classes/RESTAPI/partials/AbortableFetch.js +1 -457
- package/dist/Classes/RESTAPI/partials/ApiBase.js +1 -48
- package/dist/Classes/RESTAPI/partials/ApiRequestCreators.js +1 -112
- package/dist/Classes/RESTAPI/partials/ApiUtils.js +1 -189
- package/dist/Classes/RESTAPI/partials/CredentialsProcessing.js +1 -252
- package/dist/Classes/RESTAPI/partials/Utils.js +1 -92
- package/dist/Classes/RESTAPI/partials/_outerDependencies.js +1 -3
- package/dist/Classes/RESTAPI/partials/_utils.js +1 -197
- package/dist/Constants/index.constants.js +1 -78
- package/dist/Functions/Portal.js +1 -22
- package/dist/Functions/customEventListener.js +1 -96
- package/dist/Functions/dateTime.js +1 -149
- package/dist/Functions/fieldValueFormatters.js +1 -405
- package/dist/Functions/guards/assertions.js +1 -66
- package/dist/Functions/guards/safeValue.js +1 -30
- package/dist/Functions/guards/typeGuards.js +1 -116
- package/dist/Functions/hooks/useFormFieldsChangesManager.js +1 -95
- package/dist/Functions/locale/createTranslator.js +1 -32
- package/dist/Functions/operations.js +1 -130
- package/dist/Functions/presets/inputMaskPresets.js +1 -170
- package/dist/Functions/presets/inputPresets.js +1 -60
- package/dist/Functions/presets/mobileKeyboardTypesPresets.js +1 -45
- package/dist/Functions/schemas.js +1 -31
- package/dist/Functions/useBodyScrollLock.js +1 -17
- package/dist/Functions/useClickOutside.js +1 -15
- package/dist/Functions/useDebounce.js +1 -17
- package/dist/Functions/useFieldFocus.js +1 -84
- package/dist/Functions/useFormTools/form-drivers/ArrayWithObjects.js +1 -39
- package/dist/Functions/useFormTools/form-drivers/ObjectWithIterableObjects.js +1 -159
- package/dist/Functions/useFormTools/form-drivers/ObjectWithNamedKeyObjects.js +1 -78
- package/dist/Functions/useFormTools/functions/General.js +1 -134
- package/dist/Functions/useFormTools/functions/RenderFields.js +1 -111
- package/dist/Functions/useFormTools/functions/usePrevious.js +1 -12
- package/dist/Functions/useFormTools/index.js +1 -778
- package/dist/Functions/useInputHighlightError.js +1 -67
- package/dist/Functions/useIsMobile/useIsMobile.js +1 -53
- package/dist/Functions/useKeyPress/useHandleKeyPress.js +1 -21
- package/dist/Functions/useKeyPress/useKeyPress.js +1 -75
- package/dist/Functions/useLocalStorage.js +1 -34
- package/dist/Functions/useLocationParams.js +1 -27
- package/dist/Functions/useMediaQuery.js +1 -17
- package/dist/Functions/useMetaInfo.js +1 -43
- package/dist/Functions/useMouseUpOutside.js +1 -16
- package/dist/Functions/useOnlineStatus.js +1 -29
- package/dist/Functions/usePasswordChecker.js +1 -110
- package/dist/Functions/usePrevious.js +1 -12
- package/dist/Functions/useResize.js +1 -31
- package/dist/Functions/useScrollTo.js +1 -17
- package/dist/Functions/useToggle.js +1 -17
- package/dist/Functions/utils.js +1 -522
- package/dist/Langs.js +1 -168
- package/dist/Molecular/CustomIcons/components/AffiliateNetworks.js +1 -21
- package/dist/Molecular/CustomIcons/components/AlertCircle.js +1 -23
- package/dist/Molecular/CustomIcons/components/AppStore.js +1 -29
- package/dist/Molecular/CustomIcons/components/Arrow.js +1 -32
- package/dist/Molecular/CustomIcons/components/ArrowDown.js +1 -17
- package/dist/Molecular/CustomIcons/components/ArrowLeft.js +1 -22
- package/dist/Molecular/CustomIcons/components/ArrowRight.js +1 -22
- package/dist/Molecular/CustomIcons/components/ArrowUp.js +1 -17
- package/dist/Molecular/CustomIcons/components/Bell.js +1 -15
- package/dist/Molecular/CustomIcons/components/Button.js +1 -12
- package/dist/Molecular/CustomIcons/components/Campaigns.js +1 -16
- package/dist/Molecular/CustomIcons/components/Check.js +1 -14
- package/dist/Molecular/CustomIcons/components/Check2.js +1 -12
- package/dist/Molecular/CustomIcons/components/ChevronDown.js +1 -12
- package/dist/Molecular/CustomIcons/components/ChevronDownDisabled.js +1 -11
- package/dist/Molecular/CustomIcons/components/ChevronLeft.js +1 -11
- package/dist/Molecular/CustomIcons/components/ChevronRight.js +1 -11
- package/dist/Molecular/CustomIcons/components/ChevronUp.js +1 -11
- package/dist/Molecular/CustomIcons/components/ChevronUpDown.js +1 -27
- package/dist/Molecular/CustomIcons/components/Close.js +1 -14
- package/dist/Molecular/CustomIcons/components/ColumnsOrder.js +1 -17
- package/dist/Molecular/CustomIcons/components/Delete.js +1 -16
- package/dist/Molecular/CustomIcons/components/Edit.js +1 -15
- package/dist/Molecular/CustomIcons/components/Email.js +1 -31
- package/dist/Molecular/CustomIcons/components/FinturfLogo.js +1 -18
- package/dist/Molecular/CustomIcons/components/FinturfLogo2.js +1 -35
- package/dist/Molecular/CustomIcons/components/Flows.js +1 -15
- package/dist/Molecular/CustomIcons/components/Gift.js +1 -25
- package/dist/Molecular/CustomIcons/components/GoogleAuth.js +1 -29
- package/dist/Molecular/CustomIcons/components/GooglePlay.js +1 -29
- package/dist/Molecular/CustomIcons/components/HelpCircle.js +1 -19
- package/dist/Molecular/CustomIcons/components/HelpCircle2.js +1 -20
- package/dist/Molecular/CustomIcons/components/HelpCircleFilled.js +1 -19
- package/dist/Molecular/CustomIcons/components/Home.js +1 -16
- package/dist/Molecular/CustomIcons/components/Home2.js +1 -22
- package/dist/Molecular/CustomIcons/components/Key.js +1 -23
- package/dist/Molecular/CustomIcons/components/Landers.js +1 -20
- package/dist/Molecular/CustomIcons/components/Lock.js +1 -15
- package/dist/Molecular/CustomIcons/components/Mail.js +1 -26
- package/dist/Molecular/CustomIcons/components/Mastercard.js +1 -73
- package/dist/Molecular/CustomIcons/components/Minus.js +1 -25
- package/dist/Molecular/CustomIcons/components/Offers.js +1 -16
- package/dist/Molecular/CustomIcons/components/Pause.js +1 -28
- package/dist/Molecular/CustomIcons/components/PayPal.js +1 -41
- package/dist/Molecular/CustomIcons/components/PayPalLightLarge.js +1 -28
- package/dist/Molecular/CustomIcons/components/Phone.js +1 -30
- package/dist/Molecular/CustomIcons/components/Play.js +1 -25
- package/dist/Molecular/CustomIcons/components/Plus.js +1 -25
- package/dist/Molecular/CustomIcons/components/Profile.js +1 -16
- package/dist/Molecular/CustomIcons/components/QRCode.js +1 -29
- package/dist/Molecular/CustomIcons/components/Rectangle.js +1 -12
- package/dist/Molecular/CustomIcons/components/Revert.js +1 -13
- package/dist/Molecular/CustomIcons/components/Star.js +1 -14
- package/dist/Molecular/CustomIcons/components/Star2.js +1 -16
- package/dist/Molecular/CustomIcons/components/TrafficSources.js +1 -14
- package/dist/Molecular/CustomIcons/components/Trash.js +1 -15
- package/dist/Molecular/CustomIcons/components/TrashRed.js +1 -15
- package/dist/Molecular/CustomIcons/components/Triggers.js +1 -15
- package/dist/Molecular/CustomIcons/components/User.js +1 -25
- package/dist/Molecular/CustomIcons/components/Visa.js +1 -31
- package/dist/Molecular/CustomIcons/components/X.js +1 -12
- package/dist/Molecular/CustomIcons/index.js +1 -61
- package/dist/Molecular/FormElement/FormElement.js +1 -54
- package/dist/Molecular/FormWithDependOn/FormWithDependOn.js +1 -184
- package/dist/Molecular/FormWithDependOn/partials/_utils.js +1 -53
- package/dist/Molecular/InputAddress/InputAddress.js +1 -620
- package/dist/Molecular/InputPassword/InputPassword.js +1 -48
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,620 +1 @@
|
|
|
1
|
-
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
-
|
|
3
|
-
import cn from "classnames";
|
|
4
|
-
import { AlertTriangle, X } from "react-feather";
|
|
5
|
-
|
|
6
|
-
import Input from "../../Atomic/FormElements/Input/Input";
|
|
7
|
-
import Spinner from "../../Atomic/Layout/Spinner/Spinner";
|
|
8
|
-
import Hint from "../../Atomic/UI/Hint/Hint";
|
|
9
|
-
import useIsMobile from "../../Functions/useIsMobile/useIsMobile";
|
|
10
|
-
import { compare, getIsOnlyAnObject } from "../../Functions/utils";
|
|
11
|
-
|
|
12
|
-
import "./InputAddress.scss";
|
|
13
|
-
|
|
14
|
-
const DEFAULT_HINT_MESSAGE =
|
|
15
|
-
"Select the correct address from the list of suggestions (must contains house number and street name)";
|
|
16
|
-
|
|
17
|
-
const RC = "input-address";
|
|
18
|
-
|
|
19
|
-
// ? Если равны - true
|
|
20
|
-
const compareValues = (val1, val2) => {
|
|
21
|
-
return (
|
|
22
|
-
typeof val1 === typeof val2 &&
|
|
23
|
-
(getIsOnlyAnObject(val1) ? compare(val1, val2) : val1 === val2)
|
|
24
|
-
);
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const throttle = (fn, ms) => {
|
|
28
|
-
let id = null;
|
|
29
|
-
return (...args) => {
|
|
30
|
-
if (id) clearTimeout(id);
|
|
31
|
-
|
|
32
|
-
id = setTimeout(() => {
|
|
33
|
-
fn(...args);
|
|
34
|
-
}, ms);
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
// Отдает true если value валидное НЕ нулевое число
|
|
39
|
-
const getIsValidNumber = (value) =>
|
|
40
|
-
Boolean(value) && typeof value === "number" && !Number.isNaN(value);
|
|
41
|
-
|
|
42
|
-
const InputAddress = ({
|
|
43
|
-
label,
|
|
44
|
-
className = "",
|
|
45
|
-
isClearable = true,
|
|
46
|
-
isKeyboardControlled = true,
|
|
47
|
-
fieldKey = "",
|
|
48
|
-
testId = "",
|
|
49
|
-
throttle: throttleTime = 500, // ms
|
|
50
|
-
additionalThrottleTimeForListingRequest = 0, // ms
|
|
51
|
-
loader = "",
|
|
52
|
-
noItemsMessage = "",
|
|
53
|
-
error,
|
|
54
|
-
value = "",
|
|
55
|
-
onChange = () => {},
|
|
56
|
-
onChangeValueTransformer,
|
|
57
|
-
disabled,
|
|
58
|
-
|
|
59
|
-
getListItems = () => {},
|
|
60
|
-
clarifyAddressInfo, // ! Не делать дефолтного значения! Это и метод и флаг
|
|
61
|
-
|
|
62
|
-
noValidate = false,
|
|
63
|
-
|
|
64
|
-
renderSelectedItem,
|
|
65
|
-
renderListItem,
|
|
66
|
-
renderHintMessage,
|
|
67
|
-
|
|
68
|
-
attributesOfNativeInput,
|
|
69
|
-
}) => {
|
|
70
|
-
const { isMobile } = useIsMobile();
|
|
71
|
-
|
|
72
|
-
const inputRef = useRef(null);
|
|
73
|
-
const listRef = useRef(null);
|
|
74
|
-
const listOverlayRef = useRef(null);
|
|
75
|
-
const listWrapperRef = useRef(null);
|
|
76
|
-
const listHeaderRef = useRef(null);
|
|
77
|
-
const previousValueRef = useRef(value);
|
|
78
|
-
|
|
79
|
-
const [isValueInited, setIsValueInited] = useState(false);
|
|
80
|
-
|
|
81
|
-
const [isScrollableList, setIsScrollableList] = useState(null);
|
|
82
|
-
const [scrollTop, setScrollTop] = useState(0);
|
|
83
|
-
const [scrollHeight, setScrollHeight] = useState(1);
|
|
84
|
-
|
|
85
|
-
const [innerValue, setInnerValue] = useState(value);
|
|
86
|
-
|
|
87
|
-
const [tempInnerValue, setTempInnerValue] = useState(null);
|
|
88
|
-
const [tempValue, setTempValue] = useState(null);
|
|
89
|
-
|
|
90
|
-
const [listItems, setListItems] = useState([]);
|
|
91
|
-
const [isLoading, setIsLoading] = useState(false);
|
|
92
|
-
const [isListLoading, setIsListLoading] = useState(false);
|
|
93
|
-
|
|
94
|
-
const [hightlightedIndex, setHightlightedIndex] = useState(null);
|
|
95
|
-
|
|
96
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
97
|
-
const [isListVisible, setIsListVisible] = useState(false);
|
|
98
|
-
|
|
99
|
-
const isWrongAddress = useMemo(() => {
|
|
100
|
-
if (noValidate) return false;
|
|
101
|
-
|
|
102
|
-
if (innerValue === "") return false;
|
|
103
|
-
// eslint-disable-next-line no-prototype-builtins
|
|
104
|
-
if (
|
|
105
|
-
!innerValue?.hasOwnProperty("streetNumber") ||
|
|
106
|
-
!innerValue?.streetNumber
|
|
107
|
-
)
|
|
108
|
-
return true;
|
|
109
|
-
|
|
110
|
-
// eslint-disable-next-line no-prototype-builtins
|
|
111
|
-
if (!innerValue?.hasOwnProperty("street") || !innerValue?.street?.fullName)
|
|
112
|
-
return true;
|
|
113
|
-
|
|
114
|
-
return false;
|
|
115
|
-
}, [innerValue]);
|
|
116
|
-
|
|
117
|
-
const setItemAsInnerValue = (e, item) => {
|
|
118
|
-
if (e instanceof Event) {
|
|
119
|
-
e.preventDefault();
|
|
120
|
-
e.stopPropagation();
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
setTimeout(() => {
|
|
124
|
-
setInnerValue(item);
|
|
125
|
-
|
|
126
|
-
if (isMobile) {
|
|
127
|
-
setIsListVisible(false);
|
|
128
|
-
}
|
|
129
|
-
}, 0);
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
// ? Базовый метод получения списка вариантов адреса
|
|
133
|
-
const getAddressVariants = useMemo(
|
|
134
|
-
() => (innerValue) =>
|
|
135
|
-
getListItems(innerValue)
|
|
136
|
-
?.then(setListItems)
|
|
137
|
-
.finally(() => setIsListLoading(false)),
|
|
138
|
-
[getListItems],
|
|
139
|
-
);
|
|
140
|
-
|
|
141
|
-
// ? Метод получения списка вариантов адреса с тротлингом (основным и, если нужно, дополнительным)
|
|
142
|
-
// ? Без useMemo работать НЕ будет (т.к. на каждом перерендере будет создаваться новая ф-я и будет теряться замкнутая переменная id из throttle)
|
|
143
|
-
const getAddressVariantsWithThrottling = useMemo(() => {
|
|
144
|
-
const execute = getIsValidNumber(additionalThrottleTimeForListingRequest)
|
|
145
|
-
? throttle(getAddressVariants, additionalThrottleTimeForListingRequest)
|
|
146
|
-
: getAddressVariants;
|
|
147
|
-
|
|
148
|
-
return getIsValidNumber(throttleTime)
|
|
149
|
-
? throttle(execute, throttleTime)
|
|
150
|
-
: execute;
|
|
151
|
-
}, [
|
|
152
|
-
getAddressVariants,
|
|
153
|
-
additionalThrottleTimeForListingRequest,
|
|
154
|
-
throttleTime,
|
|
155
|
-
]);
|
|
156
|
-
|
|
157
|
-
// ? Итоговый "получатель" списка вариантов адресов
|
|
158
|
-
const getAddressVariantsList = () => {
|
|
159
|
-
if (!innerValue?.length) return null;
|
|
160
|
-
|
|
161
|
-
// ? Вообще с учетом надпись "Loading" в списке вариантов включается в этом месте (т.е. сразу при начале набора),
|
|
162
|
-
// ? то, наверное, можно было НЕ мутить с дополнительным тротлингом )).
|
|
163
|
-
// ? Наверное, можно было увеличить время первичного тротлинга и, наверное, работало бы так же ))
|
|
164
|
-
// ? НО, раз уже сделал )) оставлю, может будет в будущем полезно )
|
|
165
|
-
setIsListLoading(true);
|
|
166
|
-
getAddressVariantsWithThrottling(innerValue);
|
|
167
|
-
|
|
168
|
-
return null;
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
const onClearClick = (e) => {
|
|
172
|
-
e.preventDefault();
|
|
173
|
-
e.stopPropagation();
|
|
174
|
-
|
|
175
|
-
if (!isMobile) {
|
|
176
|
-
setIsListVisible(false);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
setInnerValue("");
|
|
180
|
-
|
|
181
|
-
inputRef?.current?.focus();
|
|
182
|
-
setTimeout(() => setIsFocused(true), 0);
|
|
183
|
-
};
|
|
184
|
-
|
|
185
|
-
const onOverlayClick = (e) => {
|
|
186
|
-
if (e.target === listOverlayRef?.current) {
|
|
187
|
-
e.stopPropagation();
|
|
188
|
-
e.preventDefault();
|
|
189
|
-
setIsListVisible(false);
|
|
190
|
-
setInnerValue(tempInnerValue);
|
|
191
|
-
onChange(
|
|
192
|
-
typeof innerValue === "string" ||
|
|
193
|
-
!onChangeValueTransformer ||
|
|
194
|
-
typeof onChangeValueTransformer !== "function"
|
|
195
|
-
? innerValue
|
|
196
|
-
: onChangeValueTransformer(innerValue),
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
const onKeyDown = (keyCode) => {
|
|
202
|
-
if (!isListVisible || !isKeyboardControlled) return false;
|
|
203
|
-
|
|
204
|
-
if (keyCode === 13) {
|
|
205
|
-
// Enter Controller
|
|
206
|
-
setItemAsInnerValue(null, listItems[hightlightedIndex]);
|
|
207
|
-
setHightlightedIndex(null);
|
|
208
|
-
inputRef?.current?.blur();
|
|
209
|
-
} else {
|
|
210
|
-
let newHightlightedIndex = null;
|
|
211
|
-
const listItemsElements = document.getElementsByClassName(
|
|
212
|
-
"input-address__list--item",
|
|
213
|
-
);
|
|
214
|
-
|
|
215
|
-
const listHeight = listRef?.current?.getBoundingClientRect()?.height;
|
|
216
|
-
const listScrollTop = listRef?.current?.scrollTop || 0;
|
|
217
|
-
const lastItemIndex = parseInt(listItems?.length, 10) - 1;
|
|
218
|
-
|
|
219
|
-
/** Arrows Controllers **/
|
|
220
|
-
if (keyCode === 40) {
|
|
221
|
-
// Down Key Controller
|
|
222
|
-
if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) {
|
|
223
|
-
newHightlightedIndex = 0;
|
|
224
|
-
} else if (hightlightedIndex + 1 < listItems?.length) {
|
|
225
|
-
newHightlightedIndex = hightlightedIndex + 1;
|
|
226
|
-
}
|
|
227
|
-
} else if (keyCode === 38) {
|
|
228
|
-
// Up Key Controller
|
|
229
|
-
if (hightlightedIndex === null || hightlightedIndex === 0) {
|
|
230
|
-
newHightlightedIndex = lastItemIndex;
|
|
231
|
-
} else if (hightlightedIndex - 1 >= 0) {
|
|
232
|
-
newHightlightedIndex = hightlightedIndex - 1;
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
// Scroll to Element
|
|
237
|
-
const newHightlightedElement = listItemsElements[newHightlightedIndex];
|
|
238
|
-
const newHightlightedElementHeight =
|
|
239
|
-
newHightlightedElement?.getBoundingClientRect()?.height;
|
|
240
|
-
|
|
241
|
-
const newHightlightedElementTopInList = newHightlightedElement?.offsetTop;
|
|
242
|
-
|
|
243
|
-
if (
|
|
244
|
-
newHightlightedElementTopInList + newHightlightedElementHeight >
|
|
245
|
-
listScrollTop + listHeight
|
|
246
|
-
) {
|
|
247
|
-
if (
|
|
248
|
-
Math.abs(
|
|
249
|
-
newHightlightedElementTopInList +
|
|
250
|
-
newHightlightedElementHeight -
|
|
251
|
-
(listScrollTop + listHeight),
|
|
252
|
-
) <= newHightlightedElementHeight
|
|
253
|
-
) {
|
|
254
|
-
listRef?.current?.scrollTo(
|
|
255
|
-
0,
|
|
256
|
-
listScrollTop + newHightlightedElementHeight,
|
|
257
|
-
);
|
|
258
|
-
} else {
|
|
259
|
-
listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
|
|
260
|
-
}
|
|
261
|
-
} else if (newHightlightedElementTopInList < listScrollTop) {
|
|
262
|
-
if (
|
|
263
|
-
Math.abs(newHightlightedElementTopInList - listScrollTop) <
|
|
264
|
-
newHightlightedElementHeight
|
|
265
|
-
) {
|
|
266
|
-
listRef?.current?.scrollTo(
|
|
267
|
-
0,
|
|
268
|
-
listScrollTop - newHightlightedElementHeight,
|
|
269
|
-
);
|
|
270
|
-
} else {
|
|
271
|
-
listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
if (!isMobile) setHightlightedIndex(newHightlightedIndex);
|
|
276
|
-
}
|
|
277
|
-
};
|
|
278
|
-
|
|
279
|
-
const getHintMessage = () => {
|
|
280
|
-
if (!renderHintMessage || typeof renderHintMessage !== "function")
|
|
281
|
-
return DEFAULT_HINT_MESSAGE;
|
|
282
|
-
|
|
283
|
-
return renderHintMessage(innerValue);
|
|
284
|
-
};
|
|
285
|
-
|
|
286
|
-
const getSelectedItemLabel = (value = innerValue) => {
|
|
287
|
-
if (!value) return "";
|
|
288
|
-
if (typeof value === "string") return value;
|
|
289
|
-
if (typeof renderSelectedItem === "function") renderSelectedItem(value);
|
|
290
|
-
|
|
291
|
-
const label =
|
|
292
|
-
`${value?.streetNumber || ""} ${value?.street?.fullName || ""}`.trim();
|
|
293
|
-
return !label && isLoading ? previousValueRef.current : label;
|
|
294
|
-
};
|
|
295
|
-
|
|
296
|
-
const getListItemLabel = (item) => {
|
|
297
|
-
if (typeof item === "string") return item;
|
|
298
|
-
|
|
299
|
-
if (!renderListItem || typeof renderListItem !== "function")
|
|
300
|
-
return item?.fullPrediction;
|
|
301
|
-
|
|
302
|
-
return renderListItem(item);
|
|
303
|
-
};
|
|
304
|
-
|
|
305
|
-
const setListHeight = () => {
|
|
306
|
-
if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {
|
|
307
|
-
const listWrapperHeight =
|
|
308
|
-
listWrapperRef?.current?.getBoundingClientRect()?.height;
|
|
309
|
-
const listWrapperStyles = getComputedStyle(listWrapperRef?.current);
|
|
310
|
-
|
|
311
|
-
const listHeaderHeight =
|
|
312
|
-
listHeaderRef?.current?.getBoundingClientRect()?.height;
|
|
313
|
-
|
|
314
|
-
const listHeight =
|
|
315
|
-
listWrapperHeight -
|
|
316
|
-
listHeaderHeight -
|
|
317
|
-
parseInt(listWrapperStyles.paddingBottom, 10);
|
|
318
|
-
|
|
319
|
-
listRef.current.style.maxHeight = `${listHeight}px`;
|
|
320
|
-
}
|
|
321
|
-
};
|
|
322
|
-
|
|
323
|
-
const resetListHeight = () => {
|
|
324
|
-
if (listRef.current) {
|
|
325
|
-
listRef.current.style.maxHeight = `initial`;
|
|
326
|
-
}
|
|
327
|
-
};
|
|
328
|
-
|
|
329
|
-
// ? Основной блок работы со значениями адреса
|
|
330
|
-
// ? Не меняйте вызовы setInnerValue и onChange не разобравшись в логике вызовов
|
|
331
|
-
useEffect(() => {
|
|
332
|
-
// ? Исключение инициализации - равны только при первом рендере компонента,
|
|
333
|
-
// ? т.к. рефка и стейт инициализируются верхним value
|
|
334
|
-
if (!compareValues(innerValue, previousValueRef.current)) {
|
|
335
|
-
const isObject = getIsOnlyAnObject(innerValue);
|
|
336
|
-
|
|
337
|
-
// ? innerValue меняется либо от ручного ввода, либо от выбора из списка
|
|
338
|
-
// ? Полная информация или нет - напрямую зависит от ответа getListItems
|
|
339
|
-
const isFullInfo =
|
|
340
|
-
isObject &&
|
|
341
|
-
"streetNumber" in innerValue &&
|
|
342
|
-
"street" in innerValue &&
|
|
343
|
-
"city" in innerValue &&
|
|
344
|
-
"state" in innerValue &&
|
|
345
|
-
"country" in innerValue &&
|
|
346
|
-
"zipCode" in innerValue;
|
|
347
|
-
|
|
348
|
-
// ? Для старого эндпоинта возвращается список с полной информацией, поэтому на проектах ничего не поменяется,
|
|
349
|
-
// ? если не менять запросник (getListItems), все будет проходить по этой if-ке или по 3-й (для строчных значений)
|
|
350
|
-
if (isFullInfo) {
|
|
351
|
-
onChange(innerValue);
|
|
352
|
-
setIsLoading(false);
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
// ? Неполная информация может быть только в том случае, когда метод getListItems использует уже новый эндпоинт гугл-апи.
|
|
356
|
-
// ? Предполагается, что при этом в компонент будет прокинута ф-я "уточнятель" (clarifyAddressInfo)
|
|
357
|
-
if (isObject && !isFullInfo) {
|
|
358
|
-
if (typeof clarifyAddressInfo === "function") {
|
|
359
|
-
setIsLoading(true);
|
|
360
|
-
// ? Предполагается, что clarifyAddressInfo - асинхронная ф-я, запросник уточнения опции
|
|
361
|
-
// ? Никаких await-ов НЕ нужно (тем более что в useEffect и нельзя для нового React),
|
|
362
|
-
// ? промис "выплюнется в пустоту", но НЕ будет отчищен до резолва, а useEffect (и итерация рендера в целом) при этом будет закончен(а)
|
|
363
|
-
clarifyAddressInfo(innerValue)?.then?.((res) => {
|
|
364
|
-
if (res) setInnerValue(res);
|
|
365
|
-
else {
|
|
366
|
-
setInnerValue(previousValueRef.current);
|
|
367
|
-
setTimeout(() => {
|
|
368
|
-
inputRef.current.focus();
|
|
369
|
-
inputRef.current.setSelectionRange(
|
|
370
|
-
previousValueRef.current.length,
|
|
371
|
-
previousValueRef.current.length,
|
|
372
|
-
);
|
|
373
|
-
}, 0);
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
setIsLoading(false);
|
|
377
|
-
return res;
|
|
378
|
-
});
|
|
379
|
-
}
|
|
380
|
-
// ! Если сверху поменяли эндпоинт и он выдает "облегченный листинг" (айтемы с неполной инфой),
|
|
381
|
-
// ! и НЕ пробросили clarifyAddressInfo, то на этом кейсе велью инпута будет просто зануляться
|
|
382
|
-
// ! (getSelectedItemLabel вернет пустую строку если вкинуть innerValue без всей инфы)
|
|
383
|
-
else setInnerValue(getSelectedItemLabel(innerValue));
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
// ? Кейс для строчных значений
|
|
387
|
-
if (!isObject) {
|
|
388
|
-
// ? Вызываем верхний onChange если innerValue есть или если нету, но это не после логики уточнения
|
|
389
|
-
if (innerValue || !isLoading) onChange(innerValue);
|
|
390
|
-
// ? Если innerValue есть и еще не открыт листинг - открываем
|
|
391
|
-
if (innerValue && !isListVisible) setIsListVisible(true);
|
|
392
|
-
// ? Если инпут сфокусирован и значение есть - запрашиваем список вариантов
|
|
393
|
-
if (isFocused && Boolean(innerValue)) getAddressVariantsList();
|
|
394
|
-
}
|
|
395
|
-
}
|
|
396
|
-
}, [innerValue]);
|
|
397
|
-
|
|
398
|
-
useEffect(() => {
|
|
399
|
-
if (!isFocused && !isMobile) {
|
|
400
|
-
setIsListVisible(false);
|
|
401
|
-
setHightlightedIndex(null);
|
|
402
|
-
}
|
|
403
|
-
}, [isFocused]);
|
|
404
|
-
|
|
405
|
-
useEffect(() => {
|
|
406
|
-
if (!isListVisible) {
|
|
407
|
-
setListItems([]);
|
|
408
|
-
resetListHeight();
|
|
409
|
-
}
|
|
410
|
-
|
|
411
|
-
if (isMobile && isListVisible) {
|
|
412
|
-
setTempInnerValue(innerValue);
|
|
413
|
-
setListHeight();
|
|
414
|
-
}
|
|
415
|
-
}, [isListVisible]);
|
|
416
|
-
|
|
417
|
-
useEffect(() => {
|
|
418
|
-
// ? учет изменения value сверху (верхние переназначения велью)
|
|
419
|
-
if (!compareValues(value, innerValue)) setInnerValue(value);
|
|
420
|
-
|
|
421
|
-
// ? useEffect должен быть последним, т.к. рефка меняется в рамках текущей итерации
|
|
422
|
-
previousValueRef.current = value;
|
|
423
|
-
}, [value]);
|
|
424
|
-
|
|
425
|
-
const renderSearchableInput = () => {
|
|
426
|
-
const inputValue = getSelectedItemLabel();
|
|
427
|
-
|
|
428
|
-
return (
|
|
429
|
-
<div className={cn("input-address__input-wrapper")}>
|
|
430
|
-
<Input
|
|
431
|
-
ref={inputRef}
|
|
432
|
-
testId={`inputAddress--input--key-${testId || fieldKey}`}
|
|
433
|
-
className={cn("input-address__input", className)}
|
|
434
|
-
value={inputValue}
|
|
435
|
-
onChange={setInnerValue}
|
|
436
|
-
onFocus={(e) => {
|
|
437
|
-
setIsFocused(true);
|
|
438
|
-
}}
|
|
439
|
-
onBlur={() => setIsFocused(false)}
|
|
440
|
-
onKeyDown={onKeyDown}
|
|
441
|
-
attributesOfNativeInput={attributesOfNativeInput}
|
|
442
|
-
/>
|
|
443
|
-
{isWrongAddress && (
|
|
444
|
-
<div
|
|
445
|
-
className={cn("input-address__alert", {
|
|
446
|
-
"input-address__alert--visible": !isFocused,
|
|
447
|
-
})}
|
|
448
|
-
>
|
|
449
|
-
<Hint
|
|
450
|
-
side="left"
|
|
451
|
-
hint={getHintMessage()}
|
|
452
|
-
icon={<AlertTriangle />}
|
|
453
|
-
handleOpenType="hover"
|
|
454
|
-
/>
|
|
455
|
-
</div>
|
|
456
|
-
)}
|
|
457
|
-
{isClearable && (!isWrongAddress || isFocused) && (
|
|
458
|
-
<div
|
|
459
|
-
className={cn("input-address__clear-query", {
|
|
460
|
-
"input-address__clear-query--input-focused": isFocused,
|
|
461
|
-
})}
|
|
462
|
-
>
|
|
463
|
-
<X onClick={onClearClick} />
|
|
464
|
-
</div>
|
|
465
|
-
)}
|
|
466
|
-
</div>
|
|
467
|
-
);
|
|
468
|
-
};
|
|
469
|
-
|
|
470
|
-
const renderInput = () => {
|
|
471
|
-
const inputValue = getSelectedItemLabel(
|
|
472
|
-
isListVisible ? tempInnerValue : innerValue,
|
|
473
|
-
);
|
|
474
|
-
|
|
475
|
-
return (
|
|
476
|
-
<div className={cn("input-address__input-wrapper")}>
|
|
477
|
-
<Input
|
|
478
|
-
testId={`inputAddress--input--key-${testId || fieldKey}`}
|
|
479
|
-
className={cn("input-address__input", className)}
|
|
480
|
-
value={inputValue}
|
|
481
|
-
onChange={setInnerValue}
|
|
482
|
-
onFocus={(e) => {
|
|
483
|
-
setIsListVisible(true);
|
|
484
|
-
e?.target?.blur();
|
|
485
|
-
setTimeout(() => inputRef?.current?.focus(), 200);
|
|
486
|
-
}}
|
|
487
|
-
/>
|
|
488
|
-
</div>
|
|
489
|
-
);
|
|
490
|
-
};
|
|
491
|
-
|
|
492
|
-
const renderLoader = () => {
|
|
493
|
-
return (
|
|
494
|
-
<div className="input-address__list--loader">
|
|
495
|
-
{loader || "Loading..."}
|
|
496
|
-
</div>
|
|
497
|
-
);
|
|
498
|
-
};
|
|
499
|
-
|
|
500
|
-
const renderList = () => {
|
|
501
|
-
const renderListItem = (item, i) => {
|
|
502
|
-
return (
|
|
503
|
-
<div
|
|
504
|
-
key={`input-address__list-item${i}`}
|
|
505
|
-
className={cn("input-address__list--item", {
|
|
506
|
-
"input-address__list--item-hightlighted": i === hightlightedIndex,
|
|
507
|
-
})}
|
|
508
|
-
onMouseDown={(e) => setItemAsInnerValue(e, item)}
|
|
509
|
-
>
|
|
510
|
-
{getListItemLabel(item)}
|
|
511
|
-
</div>
|
|
512
|
-
);
|
|
513
|
-
};
|
|
514
|
-
const renderListItemCustom = () => {
|
|
515
|
-
return (
|
|
516
|
-
<div
|
|
517
|
-
key={`input-address__list-item--custom`}
|
|
518
|
-
className={cn(
|
|
519
|
-
"input-address__list--item",
|
|
520
|
-
"input-address__list--item-custom",
|
|
521
|
-
)}
|
|
522
|
-
onMouseDown={(e) => setItemAsInnerValue(e, getSelectedItemLabel())}
|
|
523
|
-
>
|
|
524
|
-
{getSelectedItemLabel()}
|
|
525
|
-
<AlertTriangle />
|
|
526
|
-
<span>Choose this only if your address is not listed below</span>
|
|
527
|
-
</div>
|
|
528
|
-
);
|
|
529
|
-
};
|
|
530
|
-
const renderNoItems = () => {
|
|
531
|
-
return (
|
|
532
|
-
<div className="input-address__list--no-items">
|
|
533
|
-
{isMobile && !innerValue?.length
|
|
534
|
-
? "Please begin entering your address"
|
|
535
|
-
: noItemsMessage || "No Items"}
|
|
536
|
-
</div>
|
|
537
|
-
);
|
|
538
|
-
};
|
|
539
|
-
|
|
540
|
-
const renderListDesktop = () => {
|
|
541
|
-
return (
|
|
542
|
-
<div className="input-address__list-wrapper" ref={listWrapperRef}>
|
|
543
|
-
<div className="input-address__list" ref={listRef}>
|
|
544
|
-
{isListLoading
|
|
545
|
-
? renderLoader()
|
|
546
|
-
: listItems?.length
|
|
547
|
-
? listItems?.map(renderListItem)
|
|
548
|
-
: renderNoItems()}
|
|
549
|
-
</div>
|
|
550
|
-
</div>
|
|
551
|
-
);
|
|
552
|
-
};
|
|
553
|
-
const renderListMobile = () => {
|
|
554
|
-
return (
|
|
555
|
-
<div
|
|
556
|
-
className="input-address__list-overlay"
|
|
557
|
-
ref={listOverlayRef}
|
|
558
|
-
onClick={onOverlayClick}
|
|
559
|
-
>
|
|
560
|
-
<div className="input-address__list-wrapper" ref={listWrapperRef}>
|
|
561
|
-
{isMobile && (
|
|
562
|
-
<div
|
|
563
|
-
ref={listHeaderRef}
|
|
564
|
-
className={cn(`${RC}__list-header`, {
|
|
565
|
-
[`${RC}__list-header-with-shadow`]:
|
|
566
|
-
isScrollableList && isMobile,
|
|
567
|
-
[`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,
|
|
568
|
-
})}
|
|
569
|
-
>
|
|
570
|
-
<div className={cn(`${RC}__list-header-row`)}>
|
|
571
|
-
<div className={cn(`${RC}__list-label`)}>
|
|
572
|
-
{label || "Address"}
|
|
573
|
-
</div>
|
|
574
|
-
<div
|
|
575
|
-
className={cn(`${RC}__list-close-icon`)}
|
|
576
|
-
onClick={() => setIsListVisible(false)}
|
|
577
|
-
>
|
|
578
|
-
<X onClick={() => setIsListVisible(false)} />
|
|
579
|
-
</div>
|
|
580
|
-
</div>
|
|
581
|
-
<div className={cn(`${RC}__list-header-row`)}>
|
|
582
|
-
{renderSearchableInput()}
|
|
583
|
-
</div>
|
|
584
|
-
</div>
|
|
585
|
-
)}
|
|
586
|
-
<div className="input-address__list" ref={listRef}>
|
|
587
|
-
{isListLoading ? (
|
|
588
|
-
renderLoader()
|
|
589
|
-
) : (
|
|
590
|
-
<>
|
|
591
|
-
{getSelectedItemLabel() && renderListItemCustom()}
|
|
592
|
-
{listItems?.map(renderListItem)}
|
|
593
|
-
{!listItems?.length &&
|
|
594
|
-
!getSelectedItemLabel() &&
|
|
595
|
-
renderNoItems()}
|
|
596
|
-
</>
|
|
597
|
-
)}
|
|
598
|
-
</div>
|
|
599
|
-
</div>
|
|
600
|
-
</div>
|
|
601
|
-
);
|
|
602
|
-
};
|
|
603
|
-
|
|
604
|
-
return isMobile ? renderListMobile() : renderListDesktop();
|
|
605
|
-
};
|
|
606
|
-
|
|
607
|
-
return (
|
|
608
|
-
<div
|
|
609
|
-
className={cn("input-address", {
|
|
610
|
-
"input-address--error": error || (isWrongAddress && !isFocused),
|
|
611
|
-
})}
|
|
612
|
-
>
|
|
613
|
-
{isLoading && <Spinner size="small" />}
|
|
614
|
-
{isMobile ? renderInput() : renderSearchableInput()}
|
|
615
|
-
{isListVisible && renderList()}
|
|
616
|
-
</div>
|
|
617
|
-
);
|
|
618
|
-
};
|
|
619
|
-
|
|
620
|
-
export default InputAddress;
|
|
1
|
+
function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=Array(e);t<e;t++)r[t]=n[t];return r}function e(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}function t(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var t,r,i=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=i){var l=[],o=!0,u=!1;try{for(i=i.call(n);!(o=(t=i.next()).done)&&(l.push(t.value),!e||l.length!==e);o=!0);}catch(n){u=!0,r=n}finally{try{o||null==i.return||i.return()}finally{if(u)throw r}}return l}}(n,e)||i(n,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(n){return n&&"undefined"!=typeof Symbol&&n.constructor===Symbol?"symbol":typeof n}function i(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);if("Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r)return Array.from(r);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(e,t)}}import{jsx as l,jsxs as o,Fragment as u}from"react/jsx-runtime";import{useEffect as s,useMemo as a,useRef as c,useState as d}from"react";import f from"classnames";import{AlertTriangle as m,X as p}from"react-feather";import v from"../../Atomic/FormElements/Input/Input";import h from"../../Atomic/Layout/Spinner/Spinner";import y from"../../Atomic/UI/Hint/Hint";import g from"../../Functions/useIsMobile/useIsMobile";import{compare as _,getIsOnlyAnObject as b}from"../../Functions/utils";import"./InputAddress.scss";var N="input-address",I=function(n,e){return(void 0===n?"undefined":r(n))===(void 0===e?"undefined":r(e))&&(b(n)?_(n,e):n===e)},w=function(e,t){var r=null;return function(){for(var l=arguments.length,o=Array(l),u=0;u<l;u++)o[u]=arguments[u];r&&clearTimeout(r),r=setTimeout(function(){e.apply(void 0,function(e){if(Array.isArray(e))return n(e)}(o)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(o)||i(o)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}())},t)}},C=function(n){return!!n&&"number"==typeof n&&!Number.isNaN(n)};export default function(n){var r,i,_,S,A=n.label,T=n.className,M=void 0===T?"":T,j=n.isClearable,x=void 0===j||j,O=n.isKeyboardControlled,P=void 0===O||O,B=n.fieldKey,F=void 0===B?"":B,k=n.testId,D=void 0===k?"":k,R=n.throttle,E=void 0===R?500:R,H=n.additionalThrottleTimeForListingRequest,L=void 0===H?0:H,q=n.loader,K=void 0===q?"":q,z=n.noItemsMessage,U=void 0===z?"":z,V=n.error,$=n.value,G=void 0===$?"":$,J=n.onChange,Q=void 0===J?function(){}:J,W=n.onChangeValueTransformer,X=(n.disabled,n.getListItems),Y=void 0===X?function(){}:X,Z=n.clarifyAddressInfo,nn=n.noValidate,ne=void 0!==nn&&nn,nt=n.renderSelectedItem,nr=n.renderListItem,ni=n.renderHintMessage,nl=n.attributesOfNativeInput,no=g().isMobile,nu=c(null),ns=c(null),na=c(null),nc=c(null),nd=c(null),nf=c(G),nm=t(d(!1),2);nm[0],nm[1];var np=t(d(null),2),nv=np[0];np[1];var nh=t(d(0),2),ny=nh[0];nh[1];var ng=t(d(1),2);ng[0],ng[1];var n_=t(d(G),2),nb=n_[0],nN=n_[1],nI=t(d(null),2),nw=nI[0],nC=nI[1],nS=t(d(null),2);nS[0],nS[1];var nA=t(d([]),2),nT=nA[0],nM=nA[1],nj=t(d(!1),2),nx=nj[0],nO=nj[1],nP=t(d(!1),2),nB=nP[0],nF=nP[1],nk=t(d(null),2),nD=nk[0],nR=nk[1],nE=t(d(!1),2),nH=nE[0],nL=nE[1],nq=t(d(!1),2),nK=nq[0],nz=nq[1],nU=a(function(){var n;return!ne&&""!==nb&&!((null==nb?void 0:nb.hasOwnProperty("streetNumber"))&&(null==nb?void 0:nb.streetNumber)&&(null==nb?void 0:nb.hasOwnProperty("street"))&&(null==nb||null==(n=nb.street)?void 0:n.fullName))},[nb]),nV=function(n,e){var t;(null!=(t=Event)&&"undefined"!=typeof Symbol&&t[Symbol.hasInstance]?!!t[Symbol.hasInstance](n):n instanceof t)&&(n.preventDefault(),n.stopPropagation()),setTimeout(function(){nN(e),no&&nz(!1)},0)},n$=a(function(){return function(n){var e;return null==(e=Y(n))?void 0:e.then(nM).finally(function(){return nF(!1)})}},[Y]),nG=a(function(){var n=C(L)?w(n$,L):n$;return C(E)?w(n,E):n},[n$,L,E]),nJ=function(n){var e;n.preventDefault(),n.stopPropagation(),no||nz(!1),nN(""),null==nu||null==(e=nu.current)||e.focus(),setTimeout(function(){return nL(!0)},0)},nQ=function(n){if(!nK||!P)return!1;if(13===n){var e;nV(null,nT[nD]),nR(null),null==nu||null==(e=nu.current)||e.blur()}else{var t,r,i,l,o,u,s,a,c=null,d=document.getElementsByClassName("input-address__list--item"),f=null==ns||null==(r=ns.current)||null==(t=r.getBoundingClientRect())?void 0:t.height,m=(null==ns||null==(i=ns.current)?void 0:i.scrollTop)||0,p=parseInt(null==nT?void 0:nT.length,10)-1;40===n?null===nD||nD===p?c=0:nD+1<(null==nT?void 0:nT.length)&&(c=nD+1):38===n&&(null===nD||0===nD?c=p:nD-1>=0&&(c=nD-1));var v=d[c],h=null==v||null==(l=v.getBoundingClientRect())?void 0:l.height,y=null==v?void 0:v.offsetTop;y+h>m+f?Math.abs(y+h-(m+f))<=h?null==ns||null==(o=ns.current)||o.scrollTo(0,m+h):null==ns||null==(u=ns.current)||u.scrollTo(0,y):y<m&&(Math.abs(y-m)<h?null==ns||null==(s=ns.current)||s.scrollTo(0,m-h):null==ns||null==(a=ns.current)||a.scrollTo(0,y)),no||nR(c)}},nW=function(){var n,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:nb;if(!e)return"";if("string"==typeof e)return e;"function"==typeof nt&&nt(e);var t="".concat((null==e?void 0:e.streetNumber)||""," ").concat((null==e||null==(n=e.street)?void 0:n.fullName)||"").trim();return!t&&nx?nf.current:t},nX=function(){if((null==nc?void 0:nc.current)&&(null==nd?void 0:nd.current)&&ns.current){var n,e,t,r,i=null==nc||null==(e=nc.current)||null==(n=e.getBoundingClientRect())?void 0:n.height,l=getComputedStyle(null==nc?void 0:nc.current),o=i-(null==nd||null==(r=nd.current)||null==(t=r.getBoundingClientRect())?void 0:t.height)-parseInt(l.paddingBottom,10);ns.current.style.maxHeight="".concat(o,"px")}},nY=function(){ns.current&&(ns.current.style.maxHeight="initial")};s(function(){if(!I(nb,nf.current)){var n,e,t=b(nb),r=t&&"streetNumber"in nb&&"street"in nb&&"city"in nb&&"state"in nb&&"country"in nb&&"zipCode"in nb;r&&(Q(nb),nO(!1)),t&&!r&&("function"==typeof Z?(nO(!0),null==(e=Z(nb))||null==(n=e.then)||n.call(e,function(n){return n?nN(n):(nN(nf.current),setTimeout(function(){nu.current.focus(),nu.current.setSelectionRange(nf.current.length,nf.current.length)},0)),nO(!1),n})):nN(nW(nb))),!t&&((nb||!nx)&&Q(nb),nb&&!nK&&nz(!0),nH&&nb&&(null==nb?void 0:nb.length)&&(nF(!0),nG(nb)))}},[nb]),s(function(){nH||no||(nz(!1),nR(null))},[nH]),s(function(){nK||(nM([]),nY()),no&&nK&&(nC(nb),nX())},[nK]),s(function(){I(G,nb)||nN(G),nf.current=G},[G]);var nZ=function(){var n=nW();return o("div",{className:f("input-address__input-wrapper"),children:[l(v,{ref:nu,testId:"inputAddress--input--key-".concat(D||F),className:f("input-address__input",M),value:n,onChange:nN,onFocus:function(n){nL(!0)},onBlur:function(){return nL(!1)},onKeyDown:nQ,attributesOfNativeInput:nl}),nU&&l("div",{className:f("input-address__alert",{"input-address__alert--visible":!nH}),children:l(y,{side:"left",hint:ni&&"function"==typeof ni?ni(nb):"Select the correct address from the list of suggestions (must contains house number and street name)",icon:l(m,{}),handleOpenType:"hover"})}),x&&(!nU||nH)&&l("div",{className:f("input-address__clear-query",{"input-address__clear-query--input-focused":nH}),children:l(p,{onClick:nJ})})]})},n0=function(){return l("div",{className:"input-address__list--loader",children:K||"Loading..."})};return o("div",{className:f("input-address",{"input-address--error":V||nU&&!nH}),children:[nx&&l(h,{size:"small"}),no?(r=nW(nK?nw:nb),l("div",{className:f("input-address__input-wrapper"),children:l(v,{testId:"inputAddress--input--key-".concat(D||F),className:f("input-address__input",M),value:r,onChange:nN,onFocus:function(n){var e;nz(!0),null==n||null==(e=n.target)||e.blur(),setTimeout(function(){var n;return null==nu||null==(n=nu.current)?void 0:n.focus()},200)}})})):nZ(),nK&&(i=function(n,e){return l("div",{className:f("input-address__list--item",{"input-address__list--item-hightlighted":e===nD}),onMouseDown:function(e){return nV(e,n)},children:"string"==typeof n?n:nr&&"function"==typeof nr?nr(n):null==n?void 0:n.fullPrediction},"input-address__list-item".concat(e))},_=function(){return l("div",{className:"input-address__list--no-items",children:!no||(null==nb?void 0:nb.length)?U||"No Items":"Please begin entering your address"})},no?l("div",{className:"input-address__list-overlay",ref:na,onClick:function(n){n.target===(null==na?void 0:na.current)&&(n.stopPropagation(),n.preventDefault(),nz(!1),nN(nw),Q("string"!=typeof nb&&W&&"function"==typeof W?W(nb):nb))},children:o("div",{className:"input-address__list-wrapper",ref:nc,children:[no&&o("div",{ref:nd,className:f("".concat(N,"__list-header"),(e(S={},"".concat(N,"__list-header-with-shadow"),nv&&no),e(S,"".concat(N,"__list-header-with-shadow-hidden"),0===ny),S)),children:[o("div",{className:f("".concat(N,"__list-header-row")),children:[l("div",{className:f("".concat(N,"__list-label")),children:A||"Address"}),l("div",{className:f("".concat(N,"__list-close-icon")),onClick:function(){return nz(!1)},children:l(p,{onClick:function(){return nz(!1)}})})]}),l("div",{className:f("".concat(N,"__list-header-row")),children:nZ()})]}),l("div",{className:"input-address__list",ref:ns,children:nB?n0():o(u,{children:[nW()&&o("div",{className:f("input-address__list--item","input-address__list--item-custom"),onMouseDown:function(n){return nV(n,nW())},children:[nW(),l(m,{}),l("span",{children:"Choose this only if your address is not listed below"})]},"input-address__list-item--custom"),null==nT?void 0:nT.map(i),!(null==nT?void 0:nT.length)&&!nW()&&_()]})})]})}):l("div",{className:"input-address__list-wrapper",ref:nc,children:l("div",{className:"input-address__list",ref:ns,children:nB?n0():(null==nT?void 0:nT.length)?null==nT?void 0:nT.map(i):_()})}))]})}
|