@alfalab/core-components-intl-phone-input 6.3.8 → 6.5.1
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 +43 -0
- package/dist/{component-7420e24a.d.ts → component-2792ba97.d.ts} +0 -0
- package/dist/{component-7420e24a.js → component-2792ba97.js} +1 -1
- package/dist/component.d.ts +9 -0
- package/dist/component.js +167 -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 +165 -62
- package/dist/cssm/index.js +0 -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/esm/{component-2b67ad97.d.ts → component-982261f5.d.ts} +0 -0
- package/dist/esm/{component-2b67ad97.js → component-982261f5.js} +1 -1
- package/dist/esm/component.d.ts +9 -0
- package/dist/esm/component.js +168 -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 +1 -2
- package/dist/esm/{libphonenumber-js.min-468da5f3.d.ts → libphonenumber-js.min-265908f3.d.ts} +0 -0
- package/dist/esm/libphonenumber-js.min-265908f3.js +2225 -0
- package/dist/index.css +3 -3
- package/dist/index.js +1 -2
- package/dist/{libphonenumber-js.min-60cd54d4.d.ts → libphonenumber-js.min-f76d88ab.d.ts} +0 -0
- package/dist/libphonenumber-js.min-f76d88ab.js +2227 -0
- package/dist/modern/component.d.ts +9 -0
- package/dist/modern/component.js +165 -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 +0 -1
- package/dist/modern/{libphonenumber-js.min-468da5f3.d.ts → libphonenumber-js.min-265908f3.d.ts} +0 -0
- package/dist/modern/libphonenumber-js.min-265908f3.js +2225 -0
- package/package.json +7 -7
- 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-468da5f3.js +0 -1567
- package/dist/esm/usePreventCaretReset.d.ts +0 -8
- package/dist/esm/usePreventCaretReset.js +0 -32
- package/dist/libphonenumber-js.min-60cd54d4.js +0 -1569
- package/dist/modern/libphonenumber-js.min-468da5f3.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
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,49 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [6.5.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.5.0...@alfalab/core-components-intl-phone-input@6.5.1) (2022-06-29)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @alfalab/core-components-intl-phone-input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [6.5.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.4.0...@alfalab/core-components-intl-phone-input@6.5.0) (2022-06-28)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **intl-phone-input:** fixed caret jumps ([#107](https://github.com/core-ds/core-components/issues/107)) ([177bf56](https://github.com/core-ds/core-components/commit/177bf5659e79beb08b2ee6ed4c9257215861f904))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* circumflexus retrieval ([#57](https://github.com/core-ds/core-components/issues/57)) ([3820da8](https://github.com/core-ds/core-components/commit/3820da818bcdcbee6904c648b3e29c3c828fe202))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [6.4.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.3.9...@alfalab/core-components-intl-phone-input@6.4.0) (2022-06-24)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
* **amount-input:** added functionality to enter negative values ([#106](https://github.com/core-ds/core-components/issues/106)) ([d6b6ca7](https://github.com/core-ds/core-components/commit/d6b6ca71d87b5c4c62d2e87cdbe9d1ff035852c4))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## [6.3.9](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.3.8...@alfalab/core-components-intl-phone-input@6.3.9) (2022-06-23)
|
|
42
|
+
|
|
43
|
+
**Note:** Version bump only for package @alfalab/core-components-intl-phone-input
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
6
49
|
## [6.3.8](https://github.com/core-ds/core-components/compare/@alfalab/core-components-intl-phone-input@6.3.7...@alfalab/core-components-intl-phone-input@6.3.8) (2022-06-20)
|
|
7
50
|
|
|
8
51
|
**Note:** Version bump only for package @alfalab/core-components-intl-phone-input
|
|
File without changes
|
|
@@ -51,7 +51,7 @@ function __rest(s, e) {
|
|
|
51
51
|
return t;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
var styles = {"component":"intl-phone-
|
|
54
|
+
var styles = {"component":"intl-phone-input__component_krvra","flagIconContainer":"intl-phone-input__flagIconContainer_krvra","disabled":"intl-phone-input__disabled_krvra","inner":"intl-phone-input__inner_krvra","l":"intl-phone-input__l_krvra","xl":"intl-phone-input__xl_krvra","focusVisible":"intl-phone-input__focusVisible_krvra"};
|
|
55
55
|
require('./components/select-field/index.css')
|
|
56
56
|
|
|
57
57
|
var SelectField = function (_a) {
|
package/dist/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 MaxPhoneLen = 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?: MaxPhoneLen;
|
|
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/component.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var components_selectField_component = require('./component-
|
|
5
|
+
var components_selectField_component = require('./component-2792ba97.js');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var utils = require('@alfalab/utils');
|
|
@@ -14,102 +14,94 @@ require('@alfalab/core-components-select');
|
|
|
14
14
|
var components_select_component = require('./components/select/component.js');
|
|
15
15
|
var utils_formatPhoneWithUnclearableCountryCode = require('./utils/format-phone-with-unclearable-country-code.js');
|
|
16
16
|
var useCaretAvoidCountryCode = require('./useCaretAvoidCountryCode.js');
|
|
17
|
-
var usePreventCaretReset = require('./usePreventCaretReset.js');
|
|
18
17
|
|
|
19
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
19
|
|
|
21
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
21
|
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
22
|
|
|
24
|
-
var styles = {"addons":"intl-phone-
|
|
23
|
+
var styles = {"addons":"intl-phone-input__addons_arabf","l":"intl-phone-input__l_arabf","xl":"intl-phone-input__xl_arabf"};
|
|
25
24
|
require('./index.css')
|
|
26
25
|
|
|
27
26
|
var countriesHash = utils.getCountriesHash();
|
|
28
27
|
var MAX_DIAL_CODE_LENGTH = 4;
|
|
28
|
+
var MASK_SYMBOLS = [' ', '-', '(', ')'];
|
|
29
|
+
var DEFAULT_MAX_PHONE_LEN = { RU: 11 };
|
|
29
30
|
var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
30
|
-
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 ? utils.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 = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps"]);
|
|
31
|
-
var
|
|
31
|
+
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 ? utils.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 : _k, restProps = components_selectField_component.__rest(_a, ["disabled", "readOnly", "size", "colors", "options", "countries", "clearableCountryCode", "className", "value", "onChange", "onCountryChange", "defaultCountryIso2", "preventFlip", "inputProps", "maxPhoneLen"]);
|
|
32
|
+
var _l = React.useState(defaultCountryIso2.toLowerCase()), countryIso2 = _l[0], setCountryIso2 = _l[1];
|
|
32
33
|
var inputRef = React.useRef(null);
|
|
33
|
-
var
|
|
34
|
+
var _m = React.useState(null), inputWrapperRef = _m[0], setInputWrapperRef = _m[1];
|
|
35
|
+
var _o = React.useState(), caretPos = _o[0], setCaretPos = _o[1];
|
|
34
36
|
var phoneLibUtils = React.useRef();
|
|
35
|
-
var
|
|
36
|
-
var country = countriesHash[iso2];
|
|
37
|
-
var inputValue = "+" + country.dialCode;
|
|
38
|
-
onChange(inputValue);
|
|
39
|
-
setCountryIso2(country.iso2);
|
|
40
|
-
return country;
|
|
41
|
-
}, [onChange]);
|
|
42
|
-
var setValue = React.useCallback(function (inputValue) {
|
|
37
|
+
var formatPhone = function (inputValue) {
|
|
43
38
|
var newValue = inputValue;
|
|
44
39
|
if (phoneLibUtils.current) {
|
|
45
40
|
var Utils = phoneLibUtils.current;
|
|
46
41
|
var utils = new Utils(countryIso2.toUpperCase());
|
|
47
42
|
newValue = utils.input(inputValue);
|
|
48
43
|
}
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
var
|
|
44
|
+
return newValue;
|
|
45
|
+
};
|
|
46
|
+
var setCountryByIso2 = function (iso2) {
|
|
47
|
+
var country = countriesHash[iso2];
|
|
48
|
+
var inputValue = "+" + country.dialCode;
|
|
49
|
+
onChange(inputValue);
|
|
50
|
+
setCountryIso2(country.iso2);
|
|
51
|
+
return country;
|
|
52
|
+
};
|
|
53
|
+
var handleCountryChange = function (countryCode) {
|
|
52
54
|
if (onCountryChange) {
|
|
53
55
|
onCountryChange(countryCode.toUpperCase());
|
|
54
56
|
}
|
|
55
|
-
}
|
|
56
|
-
var setCountryByDialCode =
|
|
57
|
+
};
|
|
58
|
+
var setCountryByDialCode = function (inputValue) {
|
|
57
59
|
for (var i = 0; i < countries.length; i++) {
|
|
58
60
|
var country_1 = countries[i];
|
|
59
61
|
if (new RegExp("^\\+" + country_1.dialCode).test(inputValue)) {
|
|
60
62
|
// Сначала проверяем, если приоритет не указан
|
|
61
63
|
if (country_1.priority === undefined) {
|
|
62
|
-
|
|
64
|
+
onChange(formatPhone(inputValue));
|
|
63
65
|
setCountryIso2(country_1.iso2);
|
|
64
66
|
handleCountryChange(country_1.iso2);
|
|
65
67
|
break;
|
|
66
68
|
}
|
|
67
69
|
// Если страна уже была выставлена через селект, и коды совпадают
|
|
68
70
|
if (countryIso2 === country_1.iso2) {
|
|
69
|
-
|
|
71
|
+
onChange(formatPhone(inputValue));
|
|
70
72
|
setCountryIso2(country_1.iso2);
|
|
71
73
|
handleCountryChange(country_1.iso2);
|
|
72
74
|
break;
|
|
73
75
|
// Если не совпадают - выбираем по приоритету
|
|
74
76
|
}
|
|
75
77
|
else if (country_1.priority === 0) {
|
|
76
|
-
|
|
78
|
+
onChange(formatPhone(inputValue));
|
|
77
79
|
setCountryIso2(country_1.iso2);
|
|
78
80
|
handleCountryChange(country_1.iso2);
|
|
79
81
|
break;
|
|
80
82
|
}
|
|
81
83
|
}
|
|
82
84
|
}
|
|
83
|
-
}
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
|
|
91
|
-
}, []);
|
|
92
|
-
var handleInputChange = React.useCallback(function (event) {
|
|
93
|
-
var targetValue = event.target.value;
|
|
85
|
+
};
|
|
86
|
+
var setCountryByDialCodeWithLengthCheck = function (inputValue) {
|
|
87
|
+
if (value.length < MAX_DIAL_CODE_LENGTH) {
|
|
88
|
+
setCountryByDialCode(inputValue);
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
var addCountryCode = function (inputValue) {
|
|
94
92
|
var country = countriesHash[countryIso2];
|
|
95
93
|
if (clearableCountryCode) {
|
|
96
|
-
|
|
97
|
-
? "+" +
|
|
98
|
-
:
|
|
99
|
-
setValue(newValue);
|
|
100
|
-
if (value.length < MAX_DIAL_CODE_LENGTH) {
|
|
101
|
-
setCountryByDialCode(newValue);
|
|
102
|
-
}
|
|
103
|
-
return;
|
|
94
|
+
return inputValue.length === 1 && inputValue !== '+'
|
|
95
|
+
? "+" + inputValue
|
|
96
|
+
: inputValue;
|
|
104
97
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
var handleSelectChange = React.useCallback(function (_a) {
|
|
98
|
+
return utils_formatPhoneWithUnclearableCountryCode.formatPhoneWithUnclearableCountryCode(inputValue, country);
|
|
99
|
+
};
|
|
100
|
+
var handleInputChange = function (event) {
|
|
101
|
+
setCountryByDialCodeWithLengthCheck(event.target.value);
|
|
102
|
+
onChange(formatPhone(addCountryCode(event.target.value)));
|
|
103
|
+
};
|
|
104
|
+
var handleSelectChange = function (_a) {
|
|
113
105
|
var selected = _a.selected;
|
|
114
106
|
if (selected) {
|
|
115
107
|
var country_2 = setCountryByIso2(selected.value);
|
|
@@ -120,28 +112,139 @@ var IntlPhoneInput = React.forwardRef(function (_a, ref) {
|
|
|
120
112
|
}
|
|
121
113
|
handleCountryChange(country_2.iso2);
|
|
122
114
|
}
|
|
123
|
-
}
|
|
124
|
-
var handleChange =
|
|
115
|
+
};
|
|
116
|
+
var handleChange = function (payload) {
|
|
125
117
|
var selected = payload.selected;
|
|
126
118
|
if (!selected)
|
|
127
119
|
return;
|
|
128
|
-
|
|
129
|
-
|
|
120
|
+
setCountryByDialCodeWithLengthCheck(selected.key);
|
|
121
|
+
onChange(formatPhone(selected.key));
|
|
122
|
+
};
|
|
123
|
+
var country = countriesHash[countryIso2];
|
|
124
|
+
var countryCodeLength = ("+" + country.dialCode).length;
|
|
125
|
+
var handleInputNewChar = function (event, caretPosition) {
|
|
126
|
+
var input = event.target;
|
|
127
|
+
var currentValue = input.value;
|
|
128
|
+
var maxLen = maxPhoneLen === null || maxPhoneLen === void 0 ? void 0 : maxPhoneLen[countryIso2.toUpperCase()];
|
|
129
|
+
// Если задана длина номера и номер полностью заполнен, то перезатираем цифры, если каретка не в самом конце.
|
|
130
|
+
var shouldReplace = !!maxLen && maxLen === currentValue.replace(/\D/g, '').length;
|
|
131
|
+
var endPhonePart = currentValue.slice(caretPosition);
|
|
132
|
+
if (shouldReplace) {
|
|
133
|
+
var cursor = 0;
|
|
134
|
+
while (MASK_SYMBOLS.includes(endPhonePart.charAt(cursor))) {
|
|
135
|
+
cursor += 1;
|
|
136
|
+
}
|
|
137
|
+
endPhonePart = endPhonePart.slice(cursor + 1);
|
|
138
|
+
}
|
|
139
|
+
var newValue = currentValue.slice(0, caretPosition) + event.key + endPhonePart;
|
|
140
|
+
// Запрещаем ввод, если указана длина номера и номер уже заполнен.
|
|
141
|
+
if (maxLen && newValue.replace(/\D/g, '').length > maxLen) {
|
|
142
|
+
newValue = newValue.slice(0, -1);
|
|
143
|
+
}
|
|
144
|
+
newValue = formatPhone(addCountryCode(newValue));
|
|
145
|
+
var newCaretPosition;
|
|
146
|
+
var isFormatJumps = !shouldReplace && newValue.length - currentValue.length <= 0;
|
|
147
|
+
// Ситуация, когда происходят скачки номера из-за форматирования, например +7 999 999 99 99 -> +799999999999
|
|
148
|
+
if (isFormatJumps) {
|
|
149
|
+
var phonePart = currentValue.slice(0, caretPosition) + event.key;
|
|
150
|
+
var cursor = 0;
|
|
151
|
+
while (cursor < phonePart.length && cursor <= newValue.length) {
|
|
152
|
+
var currChar = phonePart.charAt(cursor);
|
|
153
|
+
var newValChar = newValue.charAt(cursor);
|
|
154
|
+
if (currChar !== newValChar) {
|
|
155
|
+
if (MASK_SYMBOLS.includes(currChar)) {
|
|
156
|
+
phonePart = phonePart.slice(0, cursor) + phonePart.slice(cursor + 1);
|
|
157
|
+
// eslint-disable-next-line no-continue
|
|
158
|
+
continue;
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
phonePart =
|
|
162
|
+
phonePart.slice(0, cursor) + newValChar + phonePart.slice(cursor);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
cursor += 1;
|
|
166
|
+
}
|
|
167
|
+
newCaretPosition = cursor;
|
|
168
|
+
}
|
|
169
|
+
else {
|
|
170
|
+
var cursor = 0;
|
|
171
|
+
while (newValue.charAt(caretPosition + cursor) &&
|
|
172
|
+
newValue.charAt(caretPosition + cursor) !== event.key) {
|
|
173
|
+
cursor += 1;
|
|
174
|
+
}
|
|
175
|
+
cursor += 1;
|
|
176
|
+
newCaretPosition = caretPosition + cursor;
|
|
177
|
+
}
|
|
178
|
+
setCaretPos(newCaretPosition);
|
|
179
|
+
setCountryByDialCodeWithLengthCheck(newValue);
|
|
180
|
+
onChange(newValue);
|
|
181
|
+
};
|
|
182
|
+
var handleDeleteChar = function (event, caretPosition) {
|
|
183
|
+
var input = event.target;
|
|
184
|
+
if (!clearableCountryCode && caretPosition <= countryCodeLength)
|
|
185
|
+
return;
|
|
186
|
+
var currentValue = input.value;
|
|
187
|
+
var deletedCharsCount = 1;
|
|
188
|
+
// Высчитываем новое положение каретки с учетом символов маски.
|
|
189
|
+
while (caretPosition - deletedCharsCount > 0 &&
|
|
190
|
+
MASK_SYMBOLS.includes(currentValue.charAt(caretPosition - deletedCharsCount))) {
|
|
191
|
+
deletedCharsCount += 1;
|
|
192
|
+
}
|
|
193
|
+
var newCaretPosition = caretPosition - deletedCharsCount;
|
|
194
|
+
var newValue = formatPhone(addCountryCode(currentValue.slice(0, newCaretPosition) + currentValue.slice(caretPosition)));
|
|
195
|
+
var isFormatJumps = newValue.length - currentValue.length >= 0;
|
|
196
|
+
// Обрабатываем ситуацию, когда происходят скачки номера из-за форматирования, например +799999999999 => +7 999 999 99 99
|
|
197
|
+
if (isFormatJumps) {
|
|
198
|
+
var phonePart = currentValue.slice(0, newCaretPosition);
|
|
199
|
+
var cursor = 0;
|
|
200
|
+
while (cursor < phonePart.length) {
|
|
201
|
+
var currChar = newValue.charAt(cursor);
|
|
202
|
+
if (currChar !== phonePart.charAt(cursor)) {
|
|
203
|
+
phonePart = phonePart.slice(0, cursor) + currChar + phonePart.slice(cursor);
|
|
204
|
+
}
|
|
205
|
+
cursor += 1;
|
|
206
|
+
}
|
|
207
|
+
newCaretPosition = cursor;
|
|
208
|
+
}
|
|
209
|
+
setCaretPos(newCaretPosition);
|
|
210
|
+
setCountryByDialCodeWithLengthCheck(newValue);
|
|
211
|
+
onChange(newValue);
|
|
212
|
+
};
|
|
213
|
+
var handleKeyDown = function (event) {
|
|
214
|
+
var input = event.target;
|
|
215
|
+
var caretPosition = input.selectionStart;
|
|
216
|
+
if (!caretPosition) {
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
if (event.key === 'Backspace') {
|
|
220
|
+
event.preventDefault();
|
|
221
|
+
handleDeleteChar(event, caretPosition);
|
|
130
222
|
}
|
|
131
|
-
|
|
132
|
-
|
|
223
|
+
if (event.key.length === 1 && /[0-9+]/.test(event.key)) {
|
|
224
|
+
event.preventDefault();
|
|
225
|
+
handleInputNewChar(event, caretPosition);
|
|
226
|
+
}
|
|
227
|
+
};
|
|
133
228
|
React.useEffect(function () {
|
|
134
|
-
if (
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
});
|
|
229
|
+
if (inputRef.current && caretPos !== undefined) {
|
|
230
|
+
inputRef.current.setSelectionRange(caretPos, caretPos);
|
|
231
|
+
setCaretPos(undefined);
|
|
138
232
|
}
|
|
139
|
-
}, [
|
|
140
|
-
|
|
141
|
-
|
|
233
|
+
}, [caretPos]);
|
|
234
|
+
React.useEffect(function () {
|
|
235
|
+
if (phoneLibUtils.current)
|
|
236
|
+
return;
|
|
237
|
+
Promise.resolve().then(function () { return require(
|
|
238
|
+
/* webpackChunkName: "libphonenumber" */ './libphonenumber-js.min-f76d88ab.js'); })
|
|
239
|
+
.then(function (utils) {
|
|
240
|
+
phoneLibUtils.current = utils.AsYouType;
|
|
241
|
+
setCountryByDialCode(value);
|
|
242
|
+
})
|
|
243
|
+
.catch(function (error) { return "An error occurred while loading libphonenumber-js:\n" + error; });
|
|
244
|
+
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
|
245
|
+
}, [value]);
|
|
142
246
|
useCaretAvoidCountryCode.useCaretAvoidCountryCode({ inputRef: inputRef, countryCodeLength: countryCodeLength, clearableCountryCode: clearableCountryCode });
|
|
143
|
-
|
|
144
|
-
return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles[size]), addonsClassName: styles.addons, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.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 })));
|
|
247
|
+
return (React__default['default'].createElement(coreComponentsInputAutocomplete.InputAutocomplete, components_selectField_component.__assign({}, restProps, { ref: ref, inputProps: components_selectField_component.__assign(components_selectField_component.__assign({}, inputProps), { ref: inputRef, wrapperRef: setInputWrapperRef, type: 'tel', colors: colors, className: cn__default['default'](className, styles[size]), addonsClassName: styles.addons, onKeyDown: handleKeyDown, leftAddons: countries.length > 1 && (React__default['default'].createElement(components_select_component.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 })));
|
|
145
248
|
});
|
|
146
249
|
IntlPhoneInput.defaultProps = {
|
|
147
250
|
size: 'm',
|
|
@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
12
12
|
|
|
13
|
-
var styles = {"flagIcon":"intl-phone-
|
|
13
|
+
var styles = {"flagIcon":"intl-phone-input__flagIcon_14laa","ac":"intl-phone-input__ac_14laa","ad":"intl-phone-input__ad_14laa","ae":"intl-phone-input__ae_14laa","af":"intl-phone-input__af_14laa","ag":"intl-phone-input__ag_14laa","ai":"intl-phone-input__ai_14laa","al":"intl-phone-input__al_14laa","am":"intl-phone-input__am_14laa","ao":"intl-phone-input__ao_14laa","aq":"intl-phone-input__aq_14laa","ar":"intl-phone-input__ar_14laa","as":"intl-phone-input__as_14laa","at":"intl-phone-input__at_14laa","au":"intl-phone-input__au_14laa","aw":"intl-phone-input__aw_14laa","ax":"intl-phone-input__ax_14laa","az":"intl-phone-input__az_14laa","ba":"intl-phone-input__ba_14laa","bb":"intl-phone-input__bb_14laa","bd":"intl-phone-input__bd_14laa","be":"intl-phone-input__be_14laa","bf":"intl-phone-input__bf_14laa","bg":"intl-phone-input__bg_14laa","bh":"intl-phone-input__bh_14laa","bi":"intl-phone-input__bi_14laa","bj":"intl-phone-input__bj_14laa","bl":"intl-phone-input__bl_14laa","bm":"intl-phone-input__bm_14laa","bn":"intl-phone-input__bn_14laa","bo":"intl-phone-input__bo_14laa","bq":"intl-phone-input__bq_14laa","br":"intl-phone-input__br_14laa","bs":"intl-phone-input__bs_14laa","bt":"intl-phone-input__bt_14laa","bv":"intl-phone-input__bv_14laa","bw":"intl-phone-input__bw_14laa","by":"intl-phone-input__by_14laa","bz":"intl-phone-input__bz_14laa","ca":"intl-phone-input__ca_14laa","cc":"intl-phone-input__cc_14laa","cd":"intl-phone-input__cd_14laa","cf":"intl-phone-input__cf_14laa","cg":"intl-phone-input__cg_14laa","ch":"intl-phone-input__ch_14laa","ci":"intl-phone-input__ci_14laa","ck":"intl-phone-input__ck_14laa","cl":"intl-phone-input__cl_14laa","cm":"intl-phone-input__cm_14laa","cn":"intl-phone-input__cn_14laa","co":"intl-phone-input__co_14laa","cp":"intl-phone-input__cp_14laa","cr":"intl-phone-input__cr_14laa","cu":"intl-phone-input__cu_14laa","cv":"intl-phone-input__cv_14laa","cw":"intl-phone-input__cw_14laa","cx":"intl-phone-input__cx_14laa","cy":"intl-phone-input__cy_14laa","cz":"intl-phone-input__cz_14laa","de":"intl-phone-input__de_14laa","dg":"intl-phone-input__dg_14laa","dj":"intl-phone-input__dj_14laa","dk":"intl-phone-input__dk_14laa","dm":"intl-phone-input__dm_14laa","do":"intl-phone-input__do_14laa","dz":"intl-phone-input__dz_14laa","ea":"intl-phone-input__ea_14laa","ec":"intl-phone-input__ec_14laa","ee":"intl-phone-input__ee_14laa","eg":"intl-phone-input__eg_14laa","eh":"intl-phone-input__eh_14laa","er":"intl-phone-input__er_14laa","es":"intl-phone-input__es_14laa","et":"intl-phone-input__et_14laa","eu":"intl-phone-input__eu_14laa","fi":"intl-phone-input__fi_14laa","fj":"intl-phone-input__fj_14laa","fk":"intl-phone-input__fk_14laa","fm":"intl-phone-input__fm_14laa","fo":"intl-phone-input__fo_14laa","fr":"intl-phone-input__fr_14laa","ga":"intl-phone-input__ga_14laa","gb":"intl-phone-input__gb_14laa","gd":"intl-phone-input__gd_14laa","ge":"intl-phone-input__ge_14laa","gf":"intl-phone-input__gf_14laa","gg":"intl-phone-input__gg_14laa","gh":"intl-phone-input__gh_14laa","gi":"intl-phone-input__gi_14laa","gl":"intl-phone-input__gl_14laa","gm":"intl-phone-input__gm_14laa","gn":"intl-phone-input__gn_14laa","gp":"intl-phone-input__gp_14laa","gq":"intl-phone-input__gq_14laa","gr":"intl-phone-input__gr_14laa","gs":"intl-phone-input__gs_14laa","gt":"intl-phone-input__gt_14laa","gu":"intl-phone-input__gu_14laa","gw":"intl-phone-input__gw_14laa","gy":"intl-phone-input__gy_14laa","hk":"intl-phone-input__hk_14laa","hm":"intl-phone-input__hm_14laa","hn":"intl-phone-input__hn_14laa","hr":"intl-phone-input__hr_14laa","ht":"intl-phone-input__ht_14laa","hu":"intl-phone-input__hu_14laa","ic":"intl-phone-input__ic_14laa","id":"intl-phone-input__id_14laa","ie":"intl-phone-input__ie_14laa","il":"intl-phone-input__il_14laa","im":"intl-phone-input__im_14laa","in":"intl-phone-input__in_14laa","io":"intl-phone-input__io_14laa","iq":"intl-phone-input__iq_14laa","ir":"intl-phone-input__ir_14laa","is":"intl-phone-input__is_14laa","it":"intl-phone-input__it_14laa","je":"intl-phone-input__je_14laa","jm":"intl-phone-input__jm_14laa","jo":"intl-phone-input__jo_14laa","jp":"intl-phone-input__jp_14laa","ke":"intl-phone-input__ke_14laa","kg":"intl-phone-input__kg_14laa","kh":"intl-phone-input__kh_14laa","ki":"intl-phone-input__ki_14laa","km":"intl-phone-input__km_14laa","kn":"intl-phone-input__kn_14laa","kp":"intl-phone-input__kp_14laa","kr":"intl-phone-input__kr_14laa","kw":"intl-phone-input__kw_14laa","ky":"intl-phone-input__ky_14laa","kz":"intl-phone-input__kz_14laa","la":"intl-phone-input__la_14laa","lb":"intl-phone-input__lb_14laa","lc":"intl-phone-input__lc_14laa","li":"intl-phone-input__li_14laa","lk":"intl-phone-input__lk_14laa","lr":"intl-phone-input__lr_14laa","ls":"intl-phone-input__ls_14laa","lt":"intl-phone-input__lt_14laa","lu":"intl-phone-input__lu_14laa","lv":"intl-phone-input__lv_14laa","ly":"intl-phone-input__ly_14laa","ma":"intl-phone-input__ma_14laa","mc":"intl-phone-input__mc_14laa","md":"intl-phone-input__md_14laa","me":"intl-phone-input__me_14laa","mf":"intl-phone-input__mf_14laa","mg":"intl-phone-input__mg_14laa","mh":"intl-phone-input__mh_14laa","mk":"intl-phone-input__mk_14laa","ml":"intl-phone-input__ml_14laa","mm":"intl-phone-input__mm_14laa","mn":"intl-phone-input__mn_14laa","mo":"intl-phone-input__mo_14laa","mp":"intl-phone-input__mp_14laa","mq":"intl-phone-input__mq_14laa","mr":"intl-phone-input__mr_14laa","ms":"intl-phone-input__ms_14laa","mt":"intl-phone-input__mt_14laa","mu":"intl-phone-input__mu_14laa","mv":"intl-phone-input__mv_14laa","mw":"intl-phone-input__mw_14laa","mx":"intl-phone-input__mx_14laa","my":"intl-phone-input__my_14laa","mz":"intl-phone-input__mz_14laa","na":"intl-phone-input__na_14laa","nc":"intl-phone-input__nc_14laa","ne":"intl-phone-input__ne_14laa","nf":"intl-phone-input__nf_14laa","ng":"intl-phone-input__ng_14laa","ni":"intl-phone-input__ni_14laa","nl":"intl-phone-input__nl_14laa","no":"intl-phone-input__no_14laa","np":"intl-phone-input__np_14laa","nr":"intl-phone-input__nr_14laa","nu":"intl-phone-input__nu_14laa","nz":"intl-phone-input__nz_14laa","om":"intl-phone-input__om_14laa","pa":"intl-phone-input__pa_14laa","pe":"intl-phone-input__pe_14laa","pf":"intl-phone-input__pf_14laa","pg":"intl-phone-input__pg_14laa","ph":"intl-phone-input__ph_14laa","pk":"intl-phone-input__pk_14laa","pl":"intl-phone-input__pl_14laa","pm":"intl-phone-input__pm_14laa","pn":"intl-phone-input__pn_14laa","pr":"intl-phone-input__pr_14laa","ps":"intl-phone-input__ps_14laa","pt":"intl-phone-input__pt_14laa","pw":"intl-phone-input__pw_14laa","py":"intl-phone-input__py_14laa","qa":"intl-phone-input__qa_14laa","re":"intl-phone-input__re_14laa","ro":"intl-phone-input__ro_14laa","rs":"intl-phone-input__rs_14laa","ru":"intl-phone-input__ru_14laa","rw":"intl-phone-input__rw_14laa","sa":"intl-phone-input__sa_14laa","sb":"intl-phone-input__sb_14laa","sc":"intl-phone-input__sc_14laa","sd":"intl-phone-input__sd_14laa","se":"intl-phone-input__se_14laa","sg":"intl-phone-input__sg_14laa","sh":"intl-phone-input__sh_14laa","si":"intl-phone-input__si_14laa","sj":"intl-phone-input__sj_14laa","sk":"intl-phone-input__sk_14laa","sl":"intl-phone-input__sl_14laa","sm":"intl-phone-input__sm_14laa","sn":"intl-phone-input__sn_14laa","so":"intl-phone-input__so_14laa","sr":"intl-phone-input__sr_14laa","ss":"intl-phone-input__ss_14laa","st":"intl-phone-input__st_14laa","sv":"intl-phone-input__sv_14laa","sx":"intl-phone-input__sx_14laa","sy":"intl-phone-input__sy_14laa","sz":"intl-phone-input__sz_14laa","ta":"intl-phone-input__ta_14laa","tc":"intl-phone-input__tc_14laa","td":"intl-phone-input__td_14laa","tf":"intl-phone-input__tf_14laa","tg":"intl-phone-input__tg_14laa","th":"intl-phone-input__th_14laa","tj":"intl-phone-input__tj_14laa","tk":"intl-phone-input__tk_14laa","tl":"intl-phone-input__tl_14laa","tm":"intl-phone-input__tm_14laa","tn":"intl-phone-input__tn_14laa","to":"intl-phone-input__to_14laa","tr":"intl-phone-input__tr_14laa","tt":"intl-phone-input__tt_14laa","tv":"intl-phone-input__tv_14laa","tw":"intl-phone-input__tw_14laa","tz":"intl-phone-input__tz_14laa","ua":"intl-phone-input__ua_14laa","ug":"intl-phone-input__ug_14laa","um":"intl-phone-input__um_14laa","un":"intl-phone-input__un_14laa","us":"intl-phone-input__us_14laa","uy":"intl-phone-input__uy_14laa","uz":"intl-phone-input__uz_14laa","va":"intl-phone-input__va_14laa","vc":"intl-phone-input__vc_14laa","ve":"intl-phone-input__ve_14laa","vg":"intl-phone-input__vg_14laa","vi":"intl-phone-input__vi_14laa","vn":"intl-phone-input__vn_14laa","vu":"intl-phone-input__vu_14laa","wf":"intl-phone-input__wf_14laa","ws":"intl-phone-input__ws_14laa","xk":"intl-phone-input__xk_14laa","ye":"intl-phone-input__ye_14laa","yt":"intl-phone-input__yt_14laa","za":"intl-phone-input__za_14laa","zm":"intl-phone-input__zm_14laa","zw":"intl-phone-input__zw_14laa"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
/**
|