@hh.ru/magritte-ui-phone-input 4.3.41 → 4.3.43
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/CallingCodeInput-CccAVXGJ.js +139 -0
- package/{CallingCodeInput-Dgx-XDoR.js.map → CallingCodeInput-CccAVXGJ.js.map} +1 -1
- package/CallingCodeInput.d.ts +1 -1
- package/CallingCodeInput.js +1 -1
- package/PhoneInput.js +162 -80
- package/PhoneInput.js.map +1 -1
- package/RegionSelect.d.ts +2 -2
- package/RegionSelect.js +95 -28
- package/RegionSelect.js.map +1 -1
- package/basicMetadata.js +246 -246
- package/basicMetadata.js.map +1 -1
- package/index.css +86 -86
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/index.mock.d.ts +1 -1
- package/index.mock.js +2 -2
- package/index.mock.js.map +1 -1
- package/{metadata.max-DSNgy9A6.js → metadata.max-BtLm3_Jz.js} +1 -1
- package/{metadata.max-DSNgy9A6.js.map → metadata.max-BtLm3_Jz.js.map} +1 -1
- package/{metadata.mobile-6_mnHNh9.js → metadata.mobile-PgGgMG2t.js} +1 -1
- package/{metadata.mobile-6_mnHNh9.js.map → metadata.mobile-PgGgMG2t.js.map} +1 -1
- package/{metadata.ru_by_kz_uz.max-CcLl17V4.js → metadata.ru_by_kz_uz.max-DOkjzVfi.js} +1 -1
- package/{metadata.ru_by_kz_uz.max-CcLl17V4.js.map → metadata.ru_by_kz_uz.max-DOkjzVfi.js.map} +1 -1
- package/{metadata.ru_by_kz_uz.mobile-CJDhJXrq.js → metadata.ru_by_kz_uz.mobile-BjjwTeqx.js} +1 -1
- package/{metadata.ru_by_kz_uz.mobile-CJDhJXrq.js.map → metadata.ru_by_kz_uz.mobile-BjjwTeqx.js.map} +1 -1
- package/package.json +9 -9
- package/phoneFormatter.d.ts +1 -1
- package/phoneFormatter.js +59 -83
- package/phoneFormatter.js.map +1 -1
- package/useCountrySelectDataProvider.d.ts +1 -1
- package/useCountrySelectDataProvider.js +116 -136
- package/useCountrySelectDataProvider.js.map +1 -1
- package/useLibPhoneNumber.js +65 -65
- package/useLibPhoneNumber.js.map +1 -1
- package/CallingCodeInput-Dgx-XDoR.js +0 -95
package/useLibPhoneNumber.js
CHANGED
|
@@ -4,74 +4,74 @@ import { basicMetadata } from './basicMetadata.js';
|
|
|
4
4
|
|
|
5
5
|
const basicCountries = [...basicMetadata.keys()];
|
|
6
6
|
const DEFAULT_API_INSTANCE = {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
7
|
+
parsePhoneNumber: () => {
|
|
8
|
+
throw new Error("libPhoneNumber is not initialized");
|
|
9
|
+
},
|
|
10
|
+
formatIncompletePhoneNumber: () => {
|
|
11
|
+
throw new Error("libPhoneNumber is not initialized");
|
|
12
|
+
},
|
|
13
|
+
getCountryCallingCode: (countryCode) => {
|
|
14
|
+
if (!basicMetadata.has(countryCode)) {
|
|
15
|
+
throw new Error(`Unknown country: ${countryCode}`);
|
|
16
|
+
}
|
|
17
|
+
return basicMetadata.get(countryCode);
|
|
18
|
+
},
|
|
19
|
+
isValidPhoneNumber: () => false,
|
|
20
|
+
getCountries: () => basicCountries,
|
|
21
|
+
isLoaded: false
|
|
22
22
|
};
|
|
23
23
|
const useLibPhoneNumber = (variant, mobileOnly, onLoadError) => {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
});
|
|
70
|
-
};
|
|
24
|
+
const [libPhoneNumber, setLibPhoneNumber] = useState(DEFAULT_API_INSTANCE);
|
|
25
|
+
const variantRef = useRef(variant);
|
|
26
|
+
const onLoadErrorRef = useRef(onLoadError);
|
|
27
|
+
onLoadErrorRef.current = onLoadError;
|
|
28
|
+
variantRef.current = variant;
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
setLibPhoneNumber(DEFAULT_API_INSTANCE);
|
|
31
|
+
const loadLibPhoneNumber = () => import('libphonenumber-js/core');
|
|
32
|
+
let loadMetadata;
|
|
33
|
+
if (variant === "ru-by-kz-uz") {
|
|
34
|
+
loadMetadata = () => (
|
|
35
|
+
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
36
|
+
mobileOnly ? (
|
|
37
|
+
// @ts-ignore
|
|
38
|
+
import('./metadata.ru_by_kz_uz.mobile-BjjwTeqx.js')
|
|
39
|
+
) : (
|
|
40
|
+
// @ts-ignore
|
|
41
|
+
import('./metadata.ru_by_kz_uz.max-DOkjzVfi.js')
|
|
42
|
+
)
|
|
43
|
+
);
|
|
44
|
+
} else {
|
|
45
|
+
loadMetadata = () => mobileOnly ? (
|
|
46
|
+
// @ts-ignore
|
|
47
|
+
import('./metadata.mobile-PgGgMG2t.js')
|
|
48
|
+
) : (
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
import('./metadata.max-BtLm3_Jz.js')
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
const loadApi = () => Promise.all([loadLibPhoneNumber(), loadMetadata()]).then(([libPhoneNumber2, metadata]) => {
|
|
54
|
+
if (variantRef.current !== variant) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const meta = metadata.default;
|
|
58
|
+
setLibPhoneNumber({
|
|
59
|
+
parsePhoneNumber: (text, defaultCountry) => libPhoneNumber2.parsePhoneNumber(text, defaultCountry, meta),
|
|
60
|
+
formatIncompletePhoneNumber: (text, countryCode) => libPhoneNumber2.formatIncompletePhoneNumber(text, countryCode, meta),
|
|
61
|
+
getCountryCallingCode: (countryCode) => libPhoneNumber2.getCountryCallingCode(countryCode, meta),
|
|
62
|
+
getCountries: () => libPhoneNumber2.getCountries(meta),
|
|
63
|
+
isValidPhoneNumber: (phoneNumber, country) => libPhoneNumber2.isValidPhoneNumber(phoneNumber, country, meta),
|
|
64
|
+
isLoaded: true
|
|
65
|
+
});
|
|
66
|
+
});
|
|
67
|
+
const onError = (error) => {
|
|
68
|
+
onLoadErrorRef.current?.(error, () => {
|
|
71
69
|
loadApi().catch(onError);
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
70
|
+
});
|
|
71
|
+
};
|
|
72
|
+
loadApi().catch(onError);
|
|
73
|
+
}, [variant]);
|
|
74
|
+
return libPhoneNumber;
|
|
75
75
|
};
|
|
76
76
|
|
|
77
77
|
export { useLibPhoneNumber };
|
package/useLibPhoneNumber.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLibPhoneNumber.js","sources":["src/useLibPhoneNumber.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport { type CountryCode, type PhoneNumber, type CountryCallingCode, type MetadataJson } from 'libphonenumber-js';\n\nimport { basicMetadata } from '@hh.ru/magritte-ui-phone-input/basicMetadata';\n\nexport type MetadataVariant = 'max' | 'ru-by-kz-uz';\n\ninterface LibPhoneNumberActualAPI {\n parsePhoneNumber: (text: string, defaultCountry: CountryCode, metadata: MetadataJson) => PhoneNumber;\n formatIncompletePhoneNumber: (text: string, countryCode: CountryCode, metadata: MetadataJson) => string;\n getCountryCallingCode: (countryCode: CountryCode, metadata: MetadataJson) => CountryCallingCode;\n getCountries: (metadata: MetadataJson) => CountryCode[];\n isValidPhoneNumber: (phoneNumber: string, country: CountryCode, metadata: MetadataJson) => boolean;\n}\n\nconst basicCountries = [...basicMetadata.keys()];\n\nexport interface LibPhoneNumberAPI {\n parsePhoneNumber: (text: string, defaultCountry: CountryCode) => PhoneNumber;\n formatIncompletePhoneNumber: (text: string, countryCode: CountryCode) => string;\n getCountryCallingCode: (countryCode: CountryCode) => CountryCallingCode;\n getCountries: () => CountryCode[];\n isValidPhoneNumber: (phoneNumber: string, country: CountryCode) => boolean;\n isLoaded: boolean;\n}\n\nconst DEFAULT_API_INSTANCE: LibPhoneNumberAPI = {\n parsePhoneNumber: () => {\n throw new Error('libPhoneNumber is not initialized');\n },\n formatIncompletePhoneNumber: () => {\n throw new Error('libPhoneNumber is not initialized');\n },\n getCountryCallingCode: (countryCode) => {\n if (!basicMetadata.has(countryCode)) {\n throw new Error(`Unknown country: ${countryCode}`);\n }\n return basicMetadata.get(countryCode) as CountryCallingCode;\n },\n isValidPhoneNumber: () => false,\n getCountries: () => basicCountries,\n isLoaded: false,\n};\n\nexport const useLibPhoneNumber = (\n variant: MetadataVariant,\n mobileOnly: boolean,\n onLoadError?: (error: Error, reload: VoidFunction) => void\n): LibPhoneNumberAPI => {\n const [libPhoneNumber, setLibPhoneNumber] = useState<LibPhoneNumberAPI>(DEFAULT_API_INSTANCE);\n const variantRef = useRef<MetadataVariant>(variant);\n const onLoadErrorRef = useRef(onLoadError);\n onLoadErrorRef.current = onLoadError;\n variantRef.current = variant;\n\n useEffect(() => {\n setLibPhoneNumber(DEFAULT_API_INSTANCE);\n\n const loadLibPhoneNumber = (): Promise<LibPhoneNumberActualAPI> => import('libphonenumber-js/core');\n let loadMetadata: () => Promise<{ default: MetadataJson }>;\n\n // пути к вариантам нельзя просто сохранить в мапу и динамически доставать по ключу, потому что вебпак\n // в этом случае не может проанализировать зависимости и просто не ресолвит модули в рантайме\n if (variant === 'ru-by-kz-uz') {\n loadMetadata = () =>\n /* eslint-disable @typescript-eslint/ban-ts-comment */\n\n (mobileOnly\n ? // @ts-ignore\n import('./metadata.ru_by_kz_uz.mobile.json')\n : // @ts-ignore\n import('./metadata.ru_by_kz_uz.max.json')) as unknown as Promise<{\n default: MetadataJson;\n }>;\n } else {\n loadMetadata = () =>\n (mobileOnly\n ? // @ts-ignore\n import('./metadata.mobile.json')\n : // @ts-ignore\n import('./metadata.max.json')) as unknown as Promise<{ default: MetadataJson }>;\n /* eslint-enable @typescript-eslint/ban-ts-comment */\n }\n\n const loadApi = () =>\n Promise.all([loadLibPhoneNumber(), loadMetadata()]).then(([libPhoneNumber, metadata]) => {\n if (variantRef.current !== variant) {\n return;\n }\n const meta = metadata.default;\n setLibPhoneNumber({\n parsePhoneNumber: (text, defaultCountry) =>\n libPhoneNumber.parsePhoneNumber(text, defaultCountry, meta),\n formatIncompletePhoneNumber: (text, countryCode) =>\n libPhoneNumber.formatIncompletePhoneNumber(text, countryCode, meta),\n getCountryCallingCode: (countryCode) => libPhoneNumber.getCountryCallingCode(countryCode, meta),\n getCountries: () => libPhoneNumber.getCountries(meta),\n isValidPhoneNumber: (phoneNumber, country) =>\n libPhoneNumber.isValidPhoneNumber(phoneNumber, country, meta),\n isLoaded: true,\n });\n });\n\n const onError = (error: Error) => {\n onLoadErrorRef.current?.(error, () => {\n loadApi().catch(onError);\n });\n };\n\n loadApi().catch(onError);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [variant]);\n\n return libPhoneNumber;\n};\n"],"names":[],"mappings":";;;AAeA,MAAM,
|
|
1
|
+
{"version":3,"file":"useLibPhoneNumber.js","sources":["src/useLibPhoneNumber.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\nimport { type CountryCode, type PhoneNumber, type CountryCallingCode, type MetadataJson } from 'libphonenumber-js';\n\nimport { basicMetadata } from '@hh.ru/magritte-ui-phone-input/basicMetadata';\n\nexport type MetadataVariant = 'max' | 'ru-by-kz-uz';\n\ninterface LibPhoneNumberActualAPI {\n parsePhoneNumber: (text: string, defaultCountry: CountryCode, metadata: MetadataJson) => PhoneNumber;\n formatIncompletePhoneNumber: (text: string, countryCode: CountryCode, metadata: MetadataJson) => string;\n getCountryCallingCode: (countryCode: CountryCode, metadata: MetadataJson) => CountryCallingCode;\n getCountries: (metadata: MetadataJson) => CountryCode[];\n isValidPhoneNumber: (phoneNumber: string, country: CountryCode, metadata: MetadataJson) => boolean;\n}\n\nconst basicCountries = [...basicMetadata.keys()];\n\nexport interface LibPhoneNumberAPI {\n parsePhoneNumber: (text: string, defaultCountry: CountryCode) => PhoneNumber;\n formatIncompletePhoneNumber: (text: string, countryCode: CountryCode) => string;\n getCountryCallingCode: (countryCode: CountryCode) => CountryCallingCode;\n getCountries: () => CountryCode[];\n isValidPhoneNumber: (phoneNumber: string, country: CountryCode) => boolean;\n isLoaded: boolean;\n}\n\nconst DEFAULT_API_INSTANCE: LibPhoneNumberAPI = {\n parsePhoneNumber: () => {\n throw new Error('libPhoneNumber is not initialized');\n },\n formatIncompletePhoneNumber: () => {\n throw new Error('libPhoneNumber is not initialized');\n },\n getCountryCallingCode: (countryCode) => {\n if (!basicMetadata.has(countryCode)) {\n throw new Error(`Unknown country: ${countryCode}`);\n }\n return basicMetadata.get(countryCode) as CountryCallingCode;\n },\n isValidPhoneNumber: () => false,\n getCountries: () => basicCountries,\n isLoaded: false,\n};\n\nexport const useLibPhoneNumber = (\n variant: MetadataVariant,\n mobileOnly: boolean,\n onLoadError?: (error: Error, reload: VoidFunction) => void\n): LibPhoneNumberAPI => {\n const [libPhoneNumber, setLibPhoneNumber] = useState<LibPhoneNumberAPI>(DEFAULT_API_INSTANCE);\n const variantRef = useRef<MetadataVariant>(variant);\n const onLoadErrorRef = useRef(onLoadError);\n onLoadErrorRef.current = onLoadError;\n variantRef.current = variant;\n\n useEffect(() => {\n setLibPhoneNumber(DEFAULT_API_INSTANCE);\n\n const loadLibPhoneNumber = (): Promise<LibPhoneNumberActualAPI> => import('libphonenumber-js/core');\n let loadMetadata: () => Promise<{ default: MetadataJson }>;\n\n // пути к вариантам нельзя просто сохранить в мапу и динамически доставать по ключу, потому что вебпак\n // в этом случае не может проанализировать зависимости и просто не ресолвит модули в рантайме\n if (variant === 'ru-by-kz-uz') {\n loadMetadata = () =>\n /* eslint-disable @typescript-eslint/ban-ts-comment */\n\n (mobileOnly\n ? // @ts-ignore\n import('./metadata.ru_by_kz_uz.mobile.json')\n : // @ts-ignore\n import('./metadata.ru_by_kz_uz.max.json')) as unknown as Promise<{\n default: MetadataJson;\n }>;\n } else {\n loadMetadata = () =>\n (mobileOnly\n ? // @ts-ignore\n import('./metadata.mobile.json')\n : // @ts-ignore\n import('./metadata.max.json')) as unknown as Promise<{ default: MetadataJson }>;\n /* eslint-enable @typescript-eslint/ban-ts-comment */\n }\n\n const loadApi = () =>\n Promise.all([loadLibPhoneNumber(), loadMetadata()]).then(([libPhoneNumber, metadata]) => {\n if (variantRef.current !== variant) {\n return;\n }\n const meta = metadata.default;\n setLibPhoneNumber({\n parsePhoneNumber: (text, defaultCountry) =>\n libPhoneNumber.parsePhoneNumber(text, defaultCountry, meta),\n formatIncompletePhoneNumber: (text, countryCode) =>\n libPhoneNumber.formatIncompletePhoneNumber(text, countryCode, meta),\n getCountryCallingCode: (countryCode) => libPhoneNumber.getCountryCallingCode(countryCode, meta),\n getCountries: () => libPhoneNumber.getCountries(meta),\n isValidPhoneNumber: (phoneNumber, country) =>\n libPhoneNumber.isValidPhoneNumber(phoneNumber, country, meta),\n isLoaded: true,\n });\n });\n\n const onError = (error: Error) => {\n onLoadErrorRef.current?.(error, () => {\n loadApi().catch(onError);\n });\n };\n\n loadApi().catch(onError);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [variant]);\n\n return libPhoneNumber;\n};\n"],"names":["libPhoneNumber"],"mappings":"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"}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import './index.css';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useRef, useState, useEffect } from 'react';
|
|
4
|
-
import classNames from 'classnames';
|
|
5
|
-
import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
6
|
-
import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
7
|
-
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
8
|
-
import { useSelectTrigger, useTriggerRef, useSearchState, useVisibility } from '@hh.ru/magritte-ui-select';
|
|
9
|
-
|
|
10
|
-
var styles = {"calling-code-input":"magritte-calling-code-input___Hb20f_4-3-41","callingCodeInput":"magritte-calling-code-input___Hb20f_4-3-41","calling-code-input-container":"magritte-calling-code-input-container___UXmHV_4-3-41","callingCodeInputContainer":"magritte-calling-code-input-container___UXmHV_4-3-41","disabled":"magritte-disabled___fvEeH_4-3-41","focused":"magritte-focused___Ok8x4_4-3-41","invalid":"magritte-invalid___kptbH_4-3-41","ghost-data":"magritte-ghost-data___zShvn_4-3-41","ghostData":"magritte-ghost-data___zShvn_4-3-41","focus-visible":"magritte-focus-visible___kbwmg_4-3-41","focusVisible":"magritte-focus-visible___kbwmg_4-3-41","country-locked":"magritte-country-locked___9HDyw_4-3-41","countryLocked":"magritte-country-locked___9HDyw_4-3-41","flag-container":"magritte-flag-container___wsoAd_4-3-41","flagContainer":"magritte-flag-container___wsoAd_4-3-41","input-container":"magritte-input-container___WSSZi_4-3-41","inputContainer":"magritte-input-container___WSSZi_4-3-41","phone-input-container":"magritte-phone-input-container___D587K_4-3-41","phoneInputContainer":"magritte-phone-input-container___D587K_4-3-41","flag-emoji":"magritte-flag-emoji___pyJS7_4-3-41","flagEmoji":"magritte-flag-emoji___pyJS7_4-3-41","no-flag-emoji":"magritte-no-flag-emoji___yiuyr_4-3-41","noFlagEmoji":"magritte-no-flag-emoji___yiuyr_4-3-41"};
|
|
11
|
-
|
|
12
|
-
const CallingCodeInput = ({ value, setValue, selectOptions, exactMatchRef, onChange, flag, invalid, disabled, className, inputElementRef, descriptionId, }) => {
|
|
13
|
-
const { onBlur, onKeyDown: onKeyDownInput, onFocus } = useSelectTrigger({ searchable: true });
|
|
14
|
-
const triggerRef = useTriggerRef();
|
|
15
|
-
const { setSearchValue } = useSearchState();
|
|
16
|
-
const { toggleListVisibility } = useVisibility();
|
|
17
|
-
const inputRef = useRef(null);
|
|
18
|
-
const inputRefMultiplexer = useMultipleRefs(inputRef, inputElementRef);
|
|
19
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
20
|
-
const [isFocusVisible, setIsFocusVisible] = useState(false);
|
|
21
|
-
const { isMobile } = useBreakpoint();
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (inputRef.current) {
|
|
24
|
-
setIsFocusVisible(isFocused && inputRef.current.classList.contains('focus-visible'));
|
|
25
|
-
}
|
|
26
|
-
}, [isFocused]);
|
|
27
|
-
return (jsxs("div", { className: classNames(styles.callingCodeInputContainer, className, {
|
|
28
|
-
[styles.focusVisible]: isFocusVisible && !disabled,
|
|
29
|
-
[styles.focused]: isFocused && !disabled,
|
|
30
|
-
[styles.invalid]: invalid,
|
|
31
|
-
[styles.disabled]: disabled,
|
|
32
|
-
}), tabIndex: disabled ? -1 : 0, onFocus: () => {
|
|
33
|
-
if (disabled) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
|
-
if (!isMobile) {
|
|
37
|
-
inputRef.current?.focus();
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
setIsFocused(true);
|
|
41
|
-
setSearchValue('');
|
|
42
|
-
onFocus?.();
|
|
43
|
-
}, onBlur: () => {
|
|
44
|
-
if (!isMobile) {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
setIsFocused(false);
|
|
48
|
-
onBlur?.();
|
|
49
|
-
}, onKeyDown: (event) => {
|
|
50
|
-
if (isMobile && keyboardMatches(event.nativeEvent, [keyboardKeys.Space, keyboardKeys.Enter])) {
|
|
51
|
-
event.preventDefault();
|
|
52
|
-
toggleListVisibility(true);
|
|
53
|
-
}
|
|
54
|
-
}, ref: triggerRef, "data-qa": "magritte-phone-input-calling-code", children: [jsx("div", { className: styles.flagContainer, children: flag }), jsxs("div", { className: styles.inputContainer, children: [jsx("input", { ref: inputRefMultiplexer, onFocus: () => {
|
|
55
|
-
setIsFocused(true);
|
|
56
|
-
setSearchValue('');
|
|
57
|
-
onFocus?.();
|
|
58
|
-
}, onBlur: () => {
|
|
59
|
-
setIsFocused(false);
|
|
60
|
-
onBlur?.();
|
|
61
|
-
}, onKeyDown: onKeyDownInput, className: styles.callingCodeInput, value: value, onChange: (event) => {
|
|
62
|
-
const nextValue = event.target.value;
|
|
63
|
-
if (nextValue === '') {
|
|
64
|
-
setValue('+');
|
|
65
|
-
setSearchValue('');
|
|
66
|
-
}
|
|
67
|
-
if (!nextValue.startsWith('+')) {
|
|
68
|
-
return;
|
|
69
|
-
}
|
|
70
|
-
const code = nextValue.substring(1);
|
|
71
|
-
let hasPartialMatch = false;
|
|
72
|
-
const exactMatch = selectOptions.find((option) => {
|
|
73
|
-
if (!option.value) {
|
|
74
|
-
return false;
|
|
75
|
-
}
|
|
76
|
-
if (option.callingCode.startsWith(code)) {
|
|
77
|
-
hasPartialMatch = true;
|
|
78
|
-
}
|
|
79
|
-
return option.callingCode === code;
|
|
80
|
-
});
|
|
81
|
-
// выполнится даже если есть точное совпадение
|
|
82
|
-
if (hasPartialMatch) {
|
|
83
|
-
exactMatchRef.current = false;
|
|
84
|
-
setValue(`+${code}`);
|
|
85
|
-
setSearchValue(code === '' ? '' : `+${code}`);
|
|
86
|
-
}
|
|
87
|
-
if (exactMatch) {
|
|
88
|
-
exactMatchRef.current = true;
|
|
89
|
-
onChange(exactMatch.value, exactMatch.callingCode);
|
|
90
|
-
}
|
|
91
|
-
}, disabled: disabled, "data-qa": "magritte-phone-input-calling-code-input", "aria-describedby": descriptionId, "aria-invalid": invalid }), jsx("div", { className: styles.ghostData, "data-qa": "magritte-phone-input-calling-code-value", children: value })] })] }));
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
export { CallingCodeInput as C, styles as s };
|
|
95
|
-
//# sourceMappingURL=CallingCodeInput-Dgx-XDoR.js.map
|