@alfalab/core-components-intl-phone-input 6.4.0 → 6.5.2
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/CHANGELOG.md +35 -0
- package/dist/{component-7d88f33a.d.ts → component-fbf58e08.d.ts} +0 -0
- package/dist/{component-7d88f33a.js → component-fbf58e08.js} +1 -1
- package/dist/component.d.ts +9 -0
- package/dist/component.js +133 -64
- package/dist/components/flag-icon/component.js +1 -1
- package/dist/components/flag-icon/index.css +261 -261
- package/dist/components/index.js +1 -1
- package/dist/components/select/component.js +2 -2
- package/dist/components/select/index.css +6 -6
- package/dist/components/select/index.js +1 -1
- package/dist/components/select-field/component.js +1 -1
- package/dist/components/select-field/index.css +8 -8
- package/dist/components/select-field/index.d.ts +1 -1
- package/dist/components/select-field/index.js +1 -1
- package/dist/cssm/component.d.ts +9 -0
- package/dist/cssm/component.js +131 -62
- package/dist/cssm/index.js +1 -1
- package/dist/cssm/{libphonenumber-js.min-d3a9d490.d.ts → libphonenumber-js.min-903db150.d.ts} +0 -0
- package/dist/cssm/libphonenumber-js.min-903db150.js +2227 -0
- package/dist/cssm/useCaretAvoidCountryCode.js +24 -20
- package/dist/cssm/utils/calculateCaretPos.d.ts +7 -0
- package/dist/cssm/utils/calculateCaretPos.js +27 -0
- package/dist/esm/{component-32da0c87.d.ts → component-25b3eb47.d.ts} +0 -0
- package/dist/esm/{component-32da0c87.js → component-25b3eb47.js} +1 -1
- package/dist/esm/component.d.ts +9 -0
- package/dist/esm/component.js +134 -65
- package/dist/esm/components/flag-icon/component.js +1 -1
- package/dist/esm/components/flag-icon/index.css +261 -261
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/select/component.js +2 -2
- package/dist/esm/components/select/index.css +6 -6
- package/dist/esm/components/select/index.js +1 -1
- package/dist/esm/components/select-field/component.js +1 -1
- package/dist/esm/components/select-field/index.css +8 -8
- package/dist/esm/components/select-field/index.d.ts +1 -1
- package/dist/esm/components/select-field/index.js +1 -1
- package/dist/esm/index.css +3 -3
- package/dist/esm/index.js +2 -2
- package/dist/esm/{libphonenumber-js.min-c49027d7.d.ts → libphonenumber-js.min-24f2609b.d.ts} +0 -0
- package/dist/esm/libphonenumber-js.min-24f2609b.js +2225 -0
- package/dist/esm/useCaretAvoidCountryCode.js +25 -21
- package/dist/esm/utils/calculateCaretPos.d.ts +7 -0
- package/dist/esm/utils/calculateCaretPos.js +23 -0
- package/dist/index.css +3 -3
- package/dist/index.js +2 -2
- package/dist/{libphonenumber-js.min-13d3dc00.d.ts → libphonenumber-js.min-6d8f77f6.d.ts} +0 -0
- package/dist/libphonenumber-js.min-6d8f77f6.js +2227 -0
- package/dist/modern/component.d.ts +9 -0
- package/dist/modern/component.js +131 -61
- package/dist/modern/components/flag-icon/component.js +1 -1
- package/dist/modern/components/flag-icon/index.css +261 -261
- package/dist/modern/components/select/component.js +1 -1
- package/dist/modern/components/select/index.css +6 -6
- package/dist/modern/components/select-field/component.js +1 -1
- package/dist/modern/components/select-field/index.css +8 -8
- package/dist/modern/index.css +3 -3
- package/dist/modern/index.js +1 -1
- package/dist/modern/{libphonenumber-js.min-c49027d7.d.ts → libphonenumber-js.min-24f2609b.d.ts} +0 -0
- package/dist/modern/libphonenumber-js.min-24f2609b.js +2225 -0
- package/dist/modern/useCaretAvoidCountryCode.js +25 -21
- package/dist/modern/utils/calculateCaretPos.d.ts +7 -0
- package/dist/modern/utils/calculateCaretPos.js +23 -0
- package/dist/useCaretAvoidCountryCode.js +24 -20
- package/dist/utils/calculateCaretPos.d.ts +7 -0
- package/dist/utils/calculateCaretPos.js +27 -0
- package/package.json +6 -6
- package/dist/cssm/libphonenumber-js.min-d3a9d490.js +0 -1569
- package/dist/cssm/usePreventCaretReset.d.ts +0 -8
- package/dist/cssm/usePreventCaretReset.js +0 -36
- package/dist/esm/libphonenumber-js.min-c49027d7.js +0 -1567
- package/dist/esm/usePreventCaretReset.d.ts +0 -8
- package/dist/esm/usePreventCaretReset.js +0 -32
- package/dist/libphonenumber-js.min-13d3dc00.js +0 -1569
- package/dist/modern/libphonenumber-js.min-c49027d7.js +0 -1567
- package/dist/modern/usePreventCaretReset.d.ts +0 -8
- package/dist/modern/usePreventCaretReset.js +0 -31
- package/dist/usePreventCaretReset.d.ts +0 -8
- package/dist/usePreventCaretReset.js +0 -36
|
@@ -6,28 +6,32 @@ var React = require('react');
|
|
|
6
6
|
|
|
7
7
|
function useCaretAvoidCountryCode(_a) {
|
|
8
8
|
var inputRef = _a.inputRef, countryCodeLength = _a.countryCodeLength, clearableCountryCode = _a.clearableCountryCode;
|
|
9
|
-
var input = inputRef.current;
|
|
10
|
-
var moveCaretFromCountryCode = React.useCallback(function () {
|
|
11
|
-
if (!input)
|
|
12
|
-
return;
|
|
13
|
-
var selectionStart = input.selectionStart || 0;
|
|
14
|
-
if (selectionStart < countryCodeLength) {
|
|
15
|
-
input.focus();
|
|
16
|
-
input.setSelectionRange(countryCodeLength, countryCodeLength);
|
|
17
|
-
}
|
|
18
|
-
}, [input, countryCodeLength]);
|
|
19
|
-
var preventCaretMovingOnCountryCode = React.useCallback(function (event) {
|
|
20
|
-
if (!input)
|
|
21
|
-
return;
|
|
22
|
-
var selectionStart = input.selectionStart || 0;
|
|
23
|
-
var toLeftKey = event.keyCode === 37;
|
|
24
|
-
if (toLeftKey && selectionStart <= countryCodeLength) {
|
|
25
|
-
event.preventDefault();
|
|
26
|
-
}
|
|
27
|
-
}, [input, countryCodeLength]);
|
|
28
9
|
React.useEffect(function () {
|
|
10
|
+
var input = inputRef.current;
|
|
29
11
|
if (!input || clearableCountryCode)
|
|
30
12
|
return;
|
|
13
|
+
var moveCaretFromCountryCode = function () {
|
|
14
|
+
var selectionStart = input.selectionStart || 0;
|
|
15
|
+
if (selectionStart < countryCodeLength) {
|
|
16
|
+
input.focus();
|
|
17
|
+
input.setSelectionRange(countryCodeLength, countryCodeLength);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var preventCaretMovingOnCountryCode = function (event) {
|
|
21
|
+
var selectionStart = input.selectionStart || 0;
|
|
22
|
+
var toLeftKey = event.keyCode === 37;
|
|
23
|
+
if (toLeftKey) {
|
|
24
|
+
if (selectionStart <= countryCodeLength) {
|
|
25
|
+
event.preventDefault();
|
|
26
|
+
}
|
|
27
|
+
// Если нажали ctrl + arrowLeft, то восстанавливаем положение каретки.
|
|
28
|
+
if (event.metaKey || event.ctrlKey) {
|
|
29
|
+
requestAnimationFrame(function () {
|
|
30
|
+
moveCaretFromCountryCode();
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
};
|
|
31
35
|
input.addEventListener('click', moveCaretFromCountryCode);
|
|
32
36
|
input.addEventListener('keydown', preventCaretMovingOnCountryCode);
|
|
33
37
|
// eslint-disable-next-line consistent-return
|
|
@@ -35,7 +39,7 @@ function useCaretAvoidCountryCode(_a) {
|
|
|
35
39
|
input.removeEventListener('click', moveCaretFromCountryCode);
|
|
36
40
|
input.removeEventListener('keydown', preventCaretMovingOnCountryCode);
|
|
37
41
|
};
|
|
38
|
-
}, [clearableCountryCode,
|
|
42
|
+
}, [clearableCountryCode, countryCodeLength, inputRef]);
|
|
39
43
|
}
|
|
40
44
|
|
|
41
45
|
exports.useCaretAvoidCountryCode = useCaretAvoidCountryCode;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Расчет нового положения каретки.
|
|
3
|
+
* @param phonePart Шаблон с которым сравнивается новое значение. (Часть телефона без маски с учетом удаленных и добавленных цифр).
|
|
4
|
+
* @param newVal Новый отформатированный телефон.
|
|
5
|
+
*/
|
|
6
|
+
declare function calculateCaretPos(phonePart: string, newVal: string): number;
|
|
7
|
+
export { calculateCaretPos };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Расчет нового положения каретки.
|
|
7
|
+
* @param phonePart Шаблон с которым сравнивается новое значение. (Часть телефона без маски с учетом удаленных и добавленных цифр).
|
|
8
|
+
* @param newVal Новый отформатированный телефон.
|
|
9
|
+
*/
|
|
10
|
+
function calculateCaretPos(phonePart, newVal) {
|
|
11
|
+
var newCaretPosition = 0;
|
|
12
|
+
for (var idx = 0; idx < phonePart.length; idx++) {
|
|
13
|
+
var digit = phonePart.charAt(idx);
|
|
14
|
+
if (digit !== newVal.charAt(newCaretPosition)) {
|
|
15
|
+
idx -= 1;
|
|
16
|
+
}
|
|
17
|
+
newCaretPosition += 1;
|
|
18
|
+
// Если произошла непредвиденная ситуация, то прерываем цикл и ставим каретку в самый конец номера.
|
|
19
|
+
if (newCaretPosition > newVal.length) {
|
|
20
|
+
newCaretPosition = newVal.length;
|
|
21
|
+
break;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return newCaretPosition;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
exports.calculateCaretPos = calculateCaretPos;
|
|
File without changes
|
|
@@ -43,7 +43,7 @@ function __rest(s, e) {
|
|
|
43
43
|
return t;
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
var styles = {"component":"intl-phone-
|
|
46
|
+
var styles = {"component":"intl-phone-input__component_14z08","flagIconContainer":"intl-phone-input__flagIconContainer_14z08","disabled":"intl-phone-input__disabled_14z08","inner":"intl-phone-input__inner_14z08","l":"intl-phone-input__l_14z08","xl":"intl-phone-input__xl_14z08","focusVisible":"intl-phone-input__focusVisible_14z08"};
|
|
47
47
|
require('./components/select-field/index.css')
|
|
48
48
|
|
|
49
49
|
var SelectField = function (_a) {
|
package/dist/esm/component.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { CountryCode } from 'libphonenumber-js';
|
|
|
4
4
|
import { SelectProps } from "@alfalab/core-components-select";
|
|
5
5
|
import { Country } from '@alfalab/utils';
|
|
6
6
|
import { InputAutocompleteProps } from "@alfalab/core-components-input-autocomplete";
|
|
7
|
+
type MaxPhoneLenByCountry = Record<string, number>;
|
|
7
8
|
type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & Pick<SelectProps, 'preventFlip'> & {
|
|
8
9
|
/**
|
|
9
10
|
* Значение
|
|
@@ -33,6 +34,10 @@ type IntlPhoneInputProps = Partial<Omit<InputAutocompleteProps, 'onChange'>> & P
|
|
|
33
34
|
* Возможность стереть код страны
|
|
34
35
|
*/
|
|
35
36
|
clearableCountryCode?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Ограничение длин вводимых номеров по странам.
|
|
39
|
+
*/
|
|
40
|
+
maxPhoneLen?: MaxPhoneLenByCountry;
|
|
36
41
|
};
|
|
37
42
|
declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<InputAutocompleteProps, "selected" | "valueRenderer" | "Optgroup" | "size" | "value" | "disabled" | "multiple" | "name" | "placeholder" | "readOnly" | "className" | "id" | "onFocus" | "onBlur" | "onInput" | "onScroll" | "optionsListWidth" | "options" | "visibleOptions" | "open" | "label" | "error" | "hint" | "Arrow" | "dataTestId" | "fieldClassName" | "success" | "block" | "optionGroupClassName" | "Option" | "inputProps" | "optionsListClassName" | "optionClassName" | "popperClassName" | "autocomplete" | "allowUnselect" | "closeOnSelect" | "circularNavigation" | "defaultOpen" | "popoverPosition" | "preventFlip" | "optionsSize" | "fieldProps" | "optionsListProps" | "optionProps" | "onOpen" | "OptionsList" | "updatePopover" | "zIndexPopover" | "showEmptyOptionsList" | "Input">> & Pick<SelectProps, "preventFlip"> & {
|
|
38
43
|
/**
|
|
@@ -63,5 +68,9 @@ declare const IntlPhoneInput: React.ForwardRefExoticComponent<Partial<Pick<Input
|
|
|
63
68
|
* Возможность стереть код страны
|
|
64
69
|
*/
|
|
65
70
|
clearableCountryCode?: boolean | undefined;
|
|
71
|
+
/**
|
|
72
|
+
* Ограничение длин вводимых номеров по странам.
|
|
73
|
+
*/
|
|
74
|
+
maxPhoneLen?: Record<string, number> | undefined;
|
|
66
75
|
} & React.RefAttributes<HTMLInputElement>>;
|
|
67
76
|
export { IntlPhoneInputProps, IntlPhoneInput };
|
package/dist/esm/component.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { _ as __rest, a as __assign } from './component-
|
|
2
|
-
import React, { forwardRef, useState, useRef,
|
|
1
|
+
import { _ as __rest, a as __assign } from './component-25b3eb47.js';
|
|
2
|
+
import React, { forwardRef, useState, useRef, useEffect } from 'react';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { getCountriesHash, getCountries } from '@alfalab/utils';
|
|
5
5
|
import { InputAutocomplete } from '@alfalab/core-components-input-autocomplete/dist/esm';
|
|
@@ -9,98 +9,92 @@ import './components/flag-icon/component.js';
|
|
|
9
9
|
import '@alfalab/core-components-select/dist/esm';
|
|
10
10
|
import { CountriesSelect } from './components/select/component.js';
|
|
11
11
|
import { formatPhoneWithUnclearableCountryCode } from './utils/format-phone-with-unclearable-country-code.js';
|
|
12
|
+
import { calculateCaretPos } from './utils/calculateCaretPos.js';
|
|
12
13
|
import { useCaretAvoidCountryCode } from './useCaretAvoidCountryCode.js';
|
|
13
|
-
import { usePreventCaretReset } from './usePreventCaretReset.js';
|
|
14
14
|
|
|
15
|
-
var styles = {"addons":"intl-phone-
|
|
15
|
+
var styles = {"addons":"intl-phone-input__addons_rhr68","l":"intl-phone-input__l_rhr68","xl":"intl-phone-input__xl_rhr68"};
|
|
16
16
|
require('./index.css')
|
|
17
17
|
|
|
18
18
|
var countriesHash = getCountriesHash();
|
|
19
19
|
var MAX_DIAL_CODE_LENGTH = 4;
|
|
20
|
+
var MASK_SYMBOLS = [' ', '-', '(', ')'];
|
|
21
|
+
var MAX_PHONE_LEN = 15;
|
|
22
|
+
var DEFAULT_MAX_PHONE_LEN_BY_COUNTRY = { RU: 11 };
|
|
20
23
|
var IntlPhoneInput = forwardRef(function (_a, ref) {
|
|
21
|
-
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, restProps = __rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps"]);
|
|
22
|
-
var
|
|
24
|
+
var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.readOnly, readOnly = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'm' : _d, _e = _a.colors, colors = _e === void 0 ? 'default' : _e, _f = _a.options, options = _f === void 0 ? [] : _f, _g = _a.countries, countries = _g === void 0 ? getCountries() : _g, _h = _a.clearableCountryCode, clearableCountryCode = _h === void 0 ? true : _h, className = _a.className, value = _a.value, onChange = _a.onChange, onCountryChange = _a.onCountryChange, _j = _a.defaultCountryIso2, defaultCountryIso2 = _j === void 0 ? 'ru' : _j, preventFlip = _a.preventFlip, inputProps = _a.inputProps, _k = _a.maxPhoneLen, maxPhoneLen = _k === void 0 ? DEFAULT_MAX_PHONE_LEN_BY_COUNTRY : _k, restProps = __rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
|
|
25
|
+
var _l = useState(defaultCountryIso2.toLowerCase()), countryIso2 = _l[0], setCountryIso2 = _l[1];
|
|
23
26
|
var inputRef = useRef(null);
|
|
24
|
-
var
|
|
27
|
+
var _m = useState(null), inputWrapperRef = _m[0], setInputWrapperRef = _m[1];
|
|
28
|
+
var _o = useState(), caretPos = _o[0], setCaretPos = _o[1];
|
|
25
29
|
var phoneLibUtils = useRef();
|
|
26
|
-
var
|
|
27
|
-
var country = countriesHash[iso2];
|
|
28
|
-
var inputValue = "+" + country.dialCode;
|
|
29
|
-
onChange(inputValue);
|
|
30
|
-
setCountryIso2(country.iso2);
|
|
31
|
-
return country;
|
|
32
|
-
}, [onChange]);
|
|
33
|
-
var setValue = useCallback(function (inputValue) {
|
|
30
|
+
var formatPhone = function (inputValue) {
|
|
34
31
|
var newValue = inputValue;
|
|
35
32
|
if (phoneLibUtils.current) {
|
|
36
33
|
var Utils = phoneLibUtils.current;
|
|
37
34
|
var utils = new Utils(countryIso2.toUpperCase());
|
|
38
35
|
newValue = utils.input(inputValue);
|
|
39
36
|
}
|
|
40
|
-
|
|
41
|
-
}
|
|
42
|
-
var
|
|
37
|
+
return newValue;
|
|
38
|
+
};
|
|
39
|
+
var setCountryByIso2 = function (iso2) {
|
|
40
|
+
var country = countriesHash[iso2];
|
|
41
|
+
var inputValue = "+" + country.dialCode;
|
|
42
|
+
onChange(inputValue);
|
|
43
|
+
setCountryIso2(country.iso2);
|
|
44
|
+
return country;
|
|
45
|
+
};
|
|
46
|
+
var handleCountryChange = function (countryCode) {
|
|
43
47
|
if (onCountryChange) {
|
|
44
48
|
onCountryChange(countryCode.toUpperCase());
|
|
45
49
|
}
|
|
46
|
-
}
|
|
47
|
-
var setCountryByDialCode =
|
|
50
|
+
};
|
|
51
|
+
var setCountryByDialCode = function (inputValue) {
|
|
48
52
|
for (var i = 0; i < countries.length; i++) {
|
|
49
53
|
var country_1 = countries[i];
|
|
50
54
|
if (new RegExp("^\\+" + country_1.dialCode).test(inputValue)) {
|
|
51
55
|
// Сначала проверяем, если приоритет не указан
|
|
52
56
|
if (country_1.priority === undefined) {
|
|
53
|
-
|
|
57
|
+
onChange(formatPhone(inputValue));
|
|
54
58
|
setCountryIso2(country_1.iso2);
|
|
55
59
|
handleCountryChange(country_1.iso2);
|
|
56
60
|
break;
|
|
57
61
|
}
|
|
58
62
|
// Если страна уже была выставлена через селект, и коды совпадают
|
|
59
63
|
if (countryIso2 === country_1.iso2) {
|
|
60
|
-
|
|
64
|
+
onChange(formatPhone(inputValue));
|
|
61
65
|
setCountryIso2(country_1.iso2);
|
|
62
66
|
handleCountryChange(country_1.iso2);
|
|
63
67
|
break;
|
|
64
68
|
// Если не совпадают - выбираем по приоритету
|
|
65
69
|
}
|
|
66
70
|
else if (country_1.priority === 0) {
|
|
67
|
-
|
|
71
|
+
onChange(formatPhone(inputValue));
|
|
68
72
|
setCountryIso2(country_1.iso2);
|
|
69
73
|
handleCountryChange(country_1.iso2);
|
|
70
74
|
break;
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
|
-
}
|
|
75
|
-
var
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
|
|
82
|
-
}, []);
|
|
83
|
-
var handleInputChange = useCallback(function (event) {
|
|
84
|
-
var targetValue = event.target.value;
|
|
78
|
+
};
|
|
79
|
+
var setCountryByDialCodeWithLengthCheck = function (inputValue) {
|
|
80
|
+
if (value.length < MAX_DIAL_CODE_LENGTH) {
|
|
81
|
+
setCountryByDialCode(inputValue);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
var addCountryCode = function (inputValue) {
|
|
85
85
|
var country = countriesHash[countryIso2];
|
|
86
86
|
if (clearableCountryCode) {
|
|
87
|
-
|
|
88
|
-
? "+" +
|
|
89
|
-
:
|
|
90
|
-
setValue(newValue);
|
|
91
|
-
if (value.length < MAX_DIAL_CODE_LENGTH) {
|
|
92
|
-
setCountryByDialCode(newValue);
|
|
93
|
-
}
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
if (!clearableCountryCode) {
|
|
97
|
-
var newValue = formatPhoneWithUnclearableCountryCode(targetValue, country);
|
|
98
|
-
setValue(newValue);
|
|
99
|
-
return;
|
|
87
|
+
return inputValue.length === 1 && inputValue !== '+'
|
|
88
|
+
? "+" + inputValue
|
|
89
|
+
: inputValue;
|
|
100
90
|
}
|
|
101
|
-
|
|
102
|
-
}
|
|
103
|
-
var
|
|
91
|
+
return formatPhoneWithUnclearableCountryCode(inputValue, country);
|
|
92
|
+
};
|
|
93
|
+
var handleInputChange = function (event) {
|
|
94
|
+
setCountryByDialCodeWithLengthCheck(event.target.value);
|
|
95
|
+
onChange(formatPhone(addCountryCode(event.target.value)));
|
|
96
|
+
};
|
|
97
|
+
var handleSelectChange = function (_a) {
|
|
104
98
|
var selected = _a.selected;
|
|
105
99
|
if (selected) {
|
|
106
100
|
var country_2 = setCountryByIso2(selected.value);
|
|
@@ -111,28 +105,103 @@ var IntlPhoneInput = forwardRef(function (_a, ref) {
|
|
|
111
105
|
}
|
|
112
106
|
handleCountryChange(country_2.iso2);
|
|
113
107
|
}
|
|
114
|
-
}
|
|
115
|
-
var handleChange =
|
|
108
|
+
};
|
|
109
|
+
var handleChange = function (payload) {
|
|
116
110
|
var selected = payload.selected;
|
|
117
111
|
if (!selected)
|
|
118
112
|
return;
|
|
119
|
-
|
|
120
|
-
|
|
113
|
+
setCountryByDialCodeWithLengthCheck(selected.key);
|
|
114
|
+
onChange(formatPhone(selected.key));
|
|
115
|
+
};
|
|
116
|
+
var country = countriesHash[countryIso2];
|
|
117
|
+
var countryCodeLength = ("+" + country.dialCode).length;
|
|
118
|
+
var handleInputNewChar = function (event, caretPosition) {
|
|
119
|
+
var input = event.target;
|
|
120
|
+
var currentValue = input.value;
|
|
121
|
+
var maxPhoneLength = (maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[countryIso2.toUpperCase()]) || MAX_PHONE_LEN;
|
|
122
|
+
// Если номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
|
|
123
|
+
var shouldReplace = maxPhoneLength === currentValue.replace(/\D/g, '').length;
|
|
124
|
+
var endPhonePart = currentValue.slice(caretPosition);
|
|
125
|
+
if (shouldReplace) {
|
|
126
|
+
var cursor = 0;
|
|
127
|
+
while (MASK_SYMBOLS.includes(endPhonePart.charAt(cursor))) {
|
|
128
|
+
cursor += 1;
|
|
129
|
+
}
|
|
130
|
+
endPhonePart = endPhonePart.slice(cursor + 1);
|
|
131
|
+
}
|
|
132
|
+
var newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
|
|
133
|
+
// Запрещаем ввод, если номер уже заполнен.
|
|
134
|
+
if (newValue.replace(/\D/g, '').length > maxPhoneLength) {
|
|
135
|
+
newValue = newValue.slice(0, -1);
|
|
136
|
+
}
|
|
137
|
+
newValue = formatPhone(addCountryCode(newValue));
|
|
138
|
+
var phonePartWithoutMask = currentValue.slice(0, caretPosition).replace(/\D/g, '') + event.key;
|
|
139
|
+
if (shouldReplace && phonePartWithoutMask.length > maxPhoneLength) {
|
|
140
|
+
phonePartWithoutMask = phonePartWithoutMask.slice(0, -1);
|
|
141
|
+
}
|
|
142
|
+
setCaretPos(calculateCaretPos(phonePartWithoutMask, newValue));
|
|
143
|
+
setCountryByDialCodeWithLengthCheck(newValue);
|
|
144
|
+
onChange(newValue);
|
|
145
|
+
};
|
|
146
|
+
var handleDeleteChar = function (event, caretPosition) {
|
|
147
|
+
var input = event.target;
|
|
148
|
+
if (!clearableCountryCode && caretPosition <= countryCodeLength)
|
|
149
|
+
return;
|
|
150
|
+
var currentValue = input.value;
|
|
151
|
+
var isMaskSymbol = function (count) {
|
|
152
|
+
var isMask = MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - count));
|
|
153
|
+
var isPossibleToRemove = clearableCountryCode
|
|
154
|
+
? caretPosition - count > 0
|
|
155
|
+
: caretPosition - count > countryCodeLength;
|
|
156
|
+
return isMask && isPossibleToRemove;
|
|
157
|
+
};
|
|
158
|
+
var deletedCharsCount = 1;
|
|
159
|
+
// Высчитываем кол-во символов, которые нужно удалить.
|
|
160
|
+
while (isMaskSymbol(deletedCharsCount)) {
|
|
161
|
+
deletedCharsCount += 1;
|
|
162
|
+
}
|
|
163
|
+
var phonePart = currentValue.slice(0, caretPosition - deletedCharsCount);
|
|
164
|
+
var newValue = formatPhone(addCountryCode(phonePart + currentValue.slice(caretPosition)));
|
|
165
|
+
var phonePartWithoutMask = phonePart.replace(/[^0-9+]+/g, '');
|
|
166
|
+
setCaretPos(calculateCaretPos(phonePartWithoutMask, newValue));
|
|
167
|
+
setCountryByDialCodeWithLengthCheck(newValue);
|
|
168
|
+
onChange(newValue);
|
|
169
|
+
};
|
|
170
|
+
var handleKeyDown = function (event) {
|
|
171
|
+
var input = event.target;
|
|
172
|
+
var caretPosition = input.selectionStart || 0;
|
|
173
|
+
// Нажат только Backspace, не сочетание клавиш с ним.
|
|
174
|
+
if (!event.shiftKey && !event.ctrlKey && !event.metaKey && event.key === 'Backspace') {
|
|
175
|
+
if (!caretPosition)
|
|
176
|
+
return;
|
|
177
|
+
event.preventDefault();
|
|
178
|
+
handleDeleteChar(event, caretPosition);
|
|
121
179
|
}
|
|
122
|
-
|
|
123
|
-
|
|
180
|
+
if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
|
|
181
|
+
event.preventDefault();
|
|
182
|
+
handleInputNewChar(event, caretPosition);
|
|
183
|
+
}
|
|
184
|
+
};
|
|
124
185
|
useEffect(function () {
|
|
125
|
-
if (
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
});
|
|
186
|
+
if (inputRef.current && caretPos !== undefined) {
|
|
187
|
+
inputRef.current.setSelectionRange(caretPos, caretPos);
|
|
188
|
+
setCaretPos(undefined);
|
|
129
189
|
}
|
|
130
|
-
}, [
|
|
131
|
-
|
|
132
|
-
|
|
190
|
+
}, [caretPos]);
|
|
191
|
+
useEffect(function () {
|
|
192
|
+
if (phoneLibUtils.current)
|
|
193
|
+
return;
|
|
194
|
+
import(
|
|
195
|
+
/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-24f2609b.js')
|
|
196
|
+
.then(function (utils) {
|
|
197
|
+
phoneLibUtils.current = utils.AsYouType;
|
|
198
|
+
setCountryByDialCode(value);
|
|
199
|
+
})
|
|
200
|
+
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
|
|
201
|
+
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
|
202
|
+
}, [value]);
|
|
133
203
|
useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
|
|
134
|
-
|
|
135
|
-
return (React.createElement(InputAutocomplete, __assign({}, restProps, { ref: ref, inputProps: __assign(__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn(className, styles[size]), addonsClassName: styles.addons, leftAddons: countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip })) }), optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
|
|
204
|
+
return (React.createElement(InputAutocomplete, __assign({}, restProps, { ref: ref, inputProps: __assign(__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn(className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, leftAddons: countries.length > 1 && (React.createElement(CountriesSelect, { dataTestId: 'countries-select', disabled: disabled || readOnly, size: size, selected: countryIso2, countries: countries, onChange: handleSelectChange, fieldWidth: inputWrapperRef && inputWrapperRef.getBoundingClientRect().width, preventFlip: preventFlip })) }), optionsListWidth: 'field', closeOnSelect: true, onInput: handleInputChange, onChange: handleChange, options: options, disabled: disabled, readOnly: readOnly, size: size, className: className, value: value })));
|
|
136
205
|
});
|
|
137
206
|
IntlPhoneInput.defaultProps = {
|
|
138
207
|
size: 'm',
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import cn from 'classnames';
|
|
3
3
|
|
|
4
|
-
var styles = {"flagIcon":"intl-phone-
|
|
4
|
+
var styles = {"flagIcon":"intl-phone-input__flagIcon_2sxng","ac":"intl-phone-input__ac_2sxng","ad":"intl-phone-input__ad_2sxng","ae":"intl-phone-input__ae_2sxng","af":"intl-phone-input__af_2sxng","ag":"intl-phone-input__ag_2sxng","ai":"intl-phone-input__ai_2sxng","al":"intl-phone-input__al_2sxng","am":"intl-phone-input__am_2sxng","ao":"intl-phone-input__ao_2sxng","aq":"intl-phone-input__aq_2sxng","ar":"intl-phone-input__ar_2sxng","as":"intl-phone-input__as_2sxng","at":"intl-phone-input__at_2sxng","au":"intl-phone-input__au_2sxng","aw":"intl-phone-input__aw_2sxng","ax":"intl-phone-input__ax_2sxng","az":"intl-phone-input__az_2sxng","ba":"intl-phone-input__ba_2sxng","bb":"intl-phone-input__bb_2sxng","bd":"intl-phone-input__bd_2sxng","be":"intl-phone-input__be_2sxng","bf":"intl-phone-input__bf_2sxng","bg":"intl-phone-input__bg_2sxng","bh":"intl-phone-input__bh_2sxng","bi":"intl-phone-input__bi_2sxng","bj":"intl-phone-input__bj_2sxng","bl":"intl-phone-input__bl_2sxng","bm":"intl-phone-input__bm_2sxng","bn":"intl-phone-input__bn_2sxng","bo":"intl-phone-input__bo_2sxng","bq":"intl-phone-input__bq_2sxng","br":"intl-phone-input__br_2sxng","bs":"intl-phone-input__bs_2sxng","bt":"intl-phone-input__bt_2sxng","bv":"intl-phone-input__bv_2sxng","bw":"intl-phone-input__bw_2sxng","by":"intl-phone-input__by_2sxng","bz":"intl-phone-input__bz_2sxng","ca":"intl-phone-input__ca_2sxng","cc":"intl-phone-input__cc_2sxng","cd":"intl-phone-input__cd_2sxng","cf":"intl-phone-input__cf_2sxng","cg":"intl-phone-input__cg_2sxng","ch":"intl-phone-input__ch_2sxng","ci":"intl-phone-input__ci_2sxng","ck":"intl-phone-input__ck_2sxng","cl":"intl-phone-input__cl_2sxng","cm":"intl-phone-input__cm_2sxng","cn":"intl-phone-input__cn_2sxng","co":"intl-phone-input__co_2sxng","cp":"intl-phone-input__cp_2sxng","cr":"intl-phone-input__cr_2sxng","cu":"intl-phone-input__cu_2sxng","cv":"intl-phone-input__cv_2sxng","cw":"intl-phone-input__cw_2sxng","cx":"intl-phone-input__cx_2sxng","cy":"intl-phone-input__cy_2sxng","cz":"intl-phone-input__cz_2sxng","de":"intl-phone-input__de_2sxng","dg":"intl-phone-input__dg_2sxng","dj":"intl-phone-input__dj_2sxng","dk":"intl-phone-input__dk_2sxng","dm":"intl-phone-input__dm_2sxng","do":"intl-phone-input__do_2sxng","dz":"intl-phone-input__dz_2sxng","ea":"intl-phone-input__ea_2sxng","ec":"intl-phone-input__ec_2sxng","ee":"intl-phone-input__ee_2sxng","eg":"intl-phone-input__eg_2sxng","eh":"intl-phone-input__eh_2sxng","er":"intl-phone-input__er_2sxng","es":"intl-phone-input__es_2sxng","et":"intl-phone-input__et_2sxng","eu":"intl-phone-input__eu_2sxng","fi":"intl-phone-input__fi_2sxng","fj":"intl-phone-input__fj_2sxng","fk":"intl-phone-input__fk_2sxng","fm":"intl-phone-input__fm_2sxng","fo":"intl-phone-input__fo_2sxng","fr":"intl-phone-input__fr_2sxng","ga":"intl-phone-input__ga_2sxng","gb":"intl-phone-input__gb_2sxng","gd":"intl-phone-input__gd_2sxng","ge":"intl-phone-input__ge_2sxng","gf":"intl-phone-input__gf_2sxng","gg":"intl-phone-input__gg_2sxng","gh":"intl-phone-input__gh_2sxng","gi":"intl-phone-input__gi_2sxng","gl":"intl-phone-input__gl_2sxng","gm":"intl-phone-input__gm_2sxng","gn":"intl-phone-input__gn_2sxng","gp":"intl-phone-input__gp_2sxng","gq":"intl-phone-input__gq_2sxng","gr":"intl-phone-input__gr_2sxng","gs":"intl-phone-input__gs_2sxng","gt":"intl-phone-input__gt_2sxng","gu":"intl-phone-input__gu_2sxng","gw":"intl-phone-input__gw_2sxng","gy":"intl-phone-input__gy_2sxng","hk":"intl-phone-input__hk_2sxng","hm":"intl-phone-input__hm_2sxng","hn":"intl-phone-input__hn_2sxng","hr":"intl-phone-input__hr_2sxng","ht":"intl-phone-input__ht_2sxng","hu":"intl-phone-input__hu_2sxng","ic":"intl-phone-input__ic_2sxng","id":"intl-phone-input__id_2sxng","ie":"intl-phone-input__ie_2sxng","il":"intl-phone-input__il_2sxng","im":"intl-phone-input__im_2sxng","in":"intl-phone-input__in_2sxng","io":"intl-phone-input__io_2sxng","iq":"intl-phone-input__iq_2sxng","ir":"intl-phone-input__ir_2sxng","is":"intl-phone-input__is_2sxng","it":"intl-phone-input__it_2sxng","je":"intl-phone-input__je_2sxng","jm":"intl-phone-input__jm_2sxng","jo":"intl-phone-input__jo_2sxng","jp":"intl-phone-input__jp_2sxng","ke":"intl-phone-input__ke_2sxng","kg":"intl-phone-input__kg_2sxng","kh":"intl-phone-input__kh_2sxng","ki":"intl-phone-input__ki_2sxng","km":"intl-phone-input__km_2sxng","kn":"intl-phone-input__kn_2sxng","kp":"intl-phone-input__kp_2sxng","kr":"intl-phone-input__kr_2sxng","kw":"intl-phone-input__kw_2sxng","ky":"intl-phone-input__ky_2sxng","kz":"intl-phone-input__kz_2sxng","la":"intl-phone-input__la_2sxng","lb":"intl-phone-input__lb_2sxng","lc":"intl-phone-input__lc_2sxng","li":"intl-phone-input__li_2sxng","lk":"intl-phone-input__lk_2sxng","lr":"intl-phone-input__lr_2sxng","ls":"intl-phone-input__ls_2sxng","lt":"intl-phone-input__lt_2sxng","lu":"intl-phone-input__lu_2sxng","lv":"intl-phone-input__lv_2sxng","ly":"intl-phone-input__ly_2sxng","ma":"intl-phone-input__ma_2sxng","mc":"intl-phone-input__mc_2sxng","md":"intl-phone-input__md_2sxng","me":"intl-phone-input__me_2sxng","mf":"intl-phone-input__mf_2sxng","mg":"intl-phone-input__mg_2sxng","mh":"intl-phone-input__mh_2sxng","mk":"intl-phone-input__mk_2sxng","ml":"intl-phone-input__ml_2sxng","mm":"intl-phone-input__mm_2sxng","mn":"intl-phone-input__mn_2sxng","mo":"intl-phone-input__mo_2sxng","mp":"intl-phone-input__mp_2sxng","mq":"intl-phone-input__mq_2sxng","mr":"intl-phone-input__mr_2sxng","ms":"intl-phone-input__ms_2sxng","mt":"intl-phone-input__mt_2sxng","mu":"intl-phone-input__mu_2sxng","mv":"intl-phone-input__mv_2sxng","mw":"intl-phone-input__mw_2sxng","mx":"intl-phone-input__mx_2sxng","my":"intl-phone-input__my_2sxng","mz":"intl-phone-input__mz_2sxng","na":"intl-phone-input__na_2sxng","nc":"intl-phone-input__nc_2sxng","ne":"intl-phone-input__ne_2sxng","nf":"intl-phone-input__nf_2sxng","ng":"intl-phone-input__ng_2sxng","ni":"intl-phone-input__ni_2sxng","nl":"intl-phone-input__nl_2sxng","no":"intl-phone-input__no_2sxng","np":"intl-phone-input__np_2sxng","nr":"intl-phone-input__nr_2sxng","nu":"intl-phone-input__nu_2sxng","nz":"intl-phone-input__nz_2sxng","om":"intl-phone-input__om_2sxng","pa":"intl-phone-input__pa_2sxng","pe":"intl-phone-input__pe_2sxng","pf":"intl-phone-input__pf_2sxng","pg":"intl-phone-input__pg_2sxng","ph":"intl-phone-input__ph_2sxng","pk":"intl-phone-input__pk_2sxng","pl":"intl-phone-input__pl_2sxng","pm":"intl-phone-input__pm_2sxng","pn":"intl-phone-input__pn_2sxng","pr":"intl-phone-input__pr_2sxng","ps":"intl-phone-input__ps_2sxng","pt":"intl-phone-input__pt_2sxng","pw":"intl-phone-input__pw_2sxng","py":"intl-phone-input__py_2sxng","qa":"intl-phone-input__qa_2sxng","re":"intl-phone-input__re_2sxng","ro":"intl-phone-input__ro_2sxng","rs":"intl-phone-input__rs_2sxng","ru":"intl-phone-input__ru_2sxng","rw":"intl-phone-input__rw_2sxng","sa":"intl-phone-input__sa_2sxng","sb":"intl-phone-input__sb_2sxng","sc":"intl-phone-input__sc_2sxng","sd":"intl-phone-input__sd_2sxng","se":"intl-phone-input__se_2sxng","sg":"intl-phone-input__sg_2sxng","sh":"intl-phone-input__sh_2sxng","si":"intl-phone-input__si_2sxng","sj":"intl-phone-input__sj_2sxng","sk":"intl-phone-input__sk_2sxng","sl":"intl-phone-input__sl_2sxng","sm":"intl-phone-input__sm_2sxng","sn":"intl-phone-input__sn_2sxng","so":"intl-phone-input__so_2sxng","sr":"intl-phone-input__sr_2sxng","ss":"intl-phone-input__ss_2sxng","st":"intl-phone-input__st_2sxng","sv":"intl-phone-input__sv_2sxng","sx":"intl-phone-input__sx_2sxng","sy":"intl-phone-input__sy_2sxng","sz":"intl-phone-input__sz_2sxng","ta":"intl-phone-input__ta_2sxng","tc":"intl-phone-input__tc_2sxng","td":"intl-phone-input__td_2sxng","tf":"intl-phone-input__tf_2sxng","tg":"intl-phone-input__tg_2sxng","th":"intl-phone-input__th_2sxng","tj":"intl-phone-input__tj_2sxng","tk":"intl-phone-input__tk_2sxng","tl":"intl-phone-input__tl_2sxng","tm":"intl-phone-input__tm_2sxng","tn":"intl-phone-input__tn_2sxng","to":"intl-phone-input__to_2sxng","tr":"intl-phone-input__tr_2sxng","tt":"intl-phone-input__tt_2sxng","tv":"intl-phone-input__tv_2sxng","tw":"intl-phone-input__tw_2sxng","tz":"intl-phone-input__tz_2sxng","ua":"intl-phone-input__ua_2sxng","ug":"intl-phone-input__ug_2sxng","um":"intl-phone-input__um_2sxng","un":"intl-phone-input__un_2sxng","us":"intl-phone-input__us_2sxng","uy":"intl-phone-input__uy_2sxng","uz":"intl-phone-input__uz_2sxng","va":"intl-phone-input__va_2sxng","vc":"intl-phone-input__vc_2sxng","ve":"intl-phone-input__ve_2sxng","vg":"intl-phone-input__vg_2sxng","vi":"intl-phone-input__vi_2sxng","vn":"intl-phone-input__vn_2sxng","vu":"intl-phone-input__vu_2sxng","wf":"intl-phone-input__wf_2sxng","ws":"intl-phone-input__ws_2sxng","xk":"intl-phone-input__xk_2sxng","ye":"intl-phone-input__ye_2sxng","yt":"intl-phone-input__yt_2sxng","za":"intl-phone-input__za_2sxng","zm":"intl-phone-input__zm_2sxng","zw":"intl-phone-input__zw_2sxng"};
|
|
5
5
|
require('./index.css')
|
|
6
6
|
|
|
7
7
|
/**
|