@cloud-ru/uikit-product-fields-predefined 0.16.0 → 0.17.0
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 +11 -0
- package/dist/cjs/components/FieldPhone/FieldPhone.js +31 -0
- package/dist/cjs/components/FieldPhone/__tests__/constants.d.ts +29 -0
- package/dist/cjs/components/FieldPhone/__tests__/constants.js +175 -1
- package/dist/cjs/components/FieldPhone/__tests__/handleAutoInsert.spec.d.ts +1 -0
- package/dist/cjs/components/FieldPhone/__tests__/handleAutoInsert.spec.js +63 -0
- package/dist/cjs/components/FieldPhone/utils.d.ts +7 -0
- package/dist/cjs/components/FieldPhone/utils.js +30 -1
- package/dist/esm/components/FieldPhone/FieldPhone.js +32 -1
- package/dist/esm/components/FieldPhone/__tests__/constants.d.ts +29 -0
- package/dist/esm/components/FieldPhone/__tests__/constants.js +174 -0
- package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.d.ts +1 -0
- package/dist/esm/components/FieldPhone/__tests__/handleAutoInsert.spec.js +61 -0
- package/dist/esm/components/FieldPhone/utils.d.ts +7 -0
- package/dist/esm/components/FieldPhone/utils.js +28 -0
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/FieldPhone/FieldPhone.tsx +35 -1
- package/src/components/FieldPhone/__tests__/constants.ts +175 -0
- package/src/components/FieldPhone/__tests__/handleAutoInsert.spec.ts +87 -0
- package/src/components/FieldPhone/utils.ts +41 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
# 0.17.0 (2026-01-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **GIGAID-673:** fieldPhone browser paste ([0f3ed76](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/0f3ed76746a5499db194edc06c97f7987461262d))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# 0.16.0 (2026-01-20)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -33,6 +33,8 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
33
33
|
const localRef = (0, react_1.useRef)(null);
|
|
34
34
|
const options = (0, hooks_1.useCountries)(optionsProp);
|
|
35
35
|
const isOnlyOneCountryAvailable = options.length === 1;
|
|
36
|
+
const rawInsertRef = (0, react_1.useRef)('');
|
|
37
|
+
const insertSwitchRef = (0, react_1.useRef)(false);
|
|
36
38
|
const [country, setCountry] = (0, utils_1.useValueControl)({
|
|
37
39
|
defaultValue: options[0],
|
|
38
40
|
onChange: onChangeCountry,
|
|
@@ -51,7 +53,19 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
51
53
|
definitions: {
|
|
52
54
|
X: /[0-9]/,
|
|
53
55
|
},
|
|
56
|
+
prepare: (str) => {
|
|
57
|
+
if (str.replace(/\D/g, '').length > 1) {
|
|
58
|
+
rawInsertRef.current = str;
|
|
59
|
+
}
|
|
60
|
+
return str;
|
|
61
|
+
},
|
|
54
62
|
}), [country === null || country === void 0 ? void 0 : country.mask]);
|
|
63
|
+
const clearRaw = () => {
|
|
64
|
+
rawInsertRef.current = '';
|
|
65
|
+
};
|
|
66
|
+
const markSwitchRef = () => {
|
|
67
|
+
insertSwitchRef.current = true;
|
|
68
|
+
};
|
|
55
69
|
const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = (0, react_imask_1.useIMask)(maskOptions, {
|
|
56
70
|
onAccept: (_, maskRef) => {
|
|
57
71
|
const unmasked = maskRef.unmaskedValue;
|
|
@@ -60,6 +74,23 @@ exports.FieldPhone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
60
74
|
if (value !== valueProp) {
|
|
61
75
|
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
|
|
62
76
|
}
|
|
77
|
+
if (insertSwitchRef.current) {
|
|
78
|
+
insertSwitchRef.current = false;
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
(0, utils_2.handleAutoInsert)({
|
|
82
|
+
raw: rawInsertRef.current,
|
|
83
|
+
onValueChange: value => {
|
|
84
|
+
setTimeout(() => setValue(value), 0);
|
|
85
|
+
},
|
|
86
|
+
onCountryChange: country => {
|
|
87
|
+
markSwitchRef();
|
|
88
|
+
clearRaw();
|
|
89
|
+
setCountry(country);
|
|
90
|
+
},
|
|
91
|
+
country,
|
|
92
|
+
options,
|
|
93
|
+
});
|
|
63
94
|
},
|
|
64
95
|
});
|
|
65
96
|
(0, react_1.useEffect)(() => {
|
|
@@ -3,3 +3,32 @@ export declare const phoneFormatCases: {
|
|
|
3
3
|
input: string;
|
|
4
4
|
expected: string;
|
|
5
5
|
}[];
|
|
6
|
+
export declare const handleAutoInsertCases: ({
|
|
7
|
+
name: string;
|
|
8
|
+
raw: string;
|
|
9
|
+
currentId: string;
|
|
10
|
+
expectedCountryId: string;
|
|
11
|
+
expectedValue: string;
|
|
12
|
+
expectedLengthFromCountryId?: undefined;
|
|
13
|
+
} | {
|
|
14
|
+
name: string;
|
|
15
|
+
raw: string;
|
|
16
|
+
currentId: string;
|
|
17
|
+
expectedValue: string;
|
|
18
|
+
expectedCountryId?: undefined;
|
|
19
|
+
expectedLengthFromCountryId?: undefined;
|
|
20
|
+
} | {
|
|
21
|
+
name: string;
|
|
22
|
+
raw: string;
|
|
23
|
+
currentId: string;
|
|
24
|
+
expectedCountryId?: undefined;
|
|
25
|
+
expectedValue?: undefined;
|
|
26
|
+
expectedLengthFromCountryId?: undefined;
|
|
27
|
+
} | {
|
|
28
|
+
name: string;
|
|
29
|
+
raw: string;
|
|
30
|
+
currentId: string;
|
|
31
|
+
expectedCountryId: string;
|
|
32
|
+
expectedLengthFromCountryId: string;
|
|
33
|
+
expectedValue?: undefined;
|
|
34
|
+
})[];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.phoneFormatCases = void 0;
|
|
3
|
+
exports.handleAutoInsertCases = exports.phoneFormatCases = void 0;
|
|
4
4
|
exports.phoneFormatCases = [
|
|
5
5
|
{ country: 'Russia', input: '+79878887879', expected: '+7 987 888-78-79' },
|
|
6
6
|
{ country: 'Russia', input: '+7987****875', expected: '+7 987 ***-*8-75' },
|
|
@@ -27,3 +27,177 @@ exports.phoneFormatCases = [
|
|
|
27
27
|
{ country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
|
|
28
28
|
{ country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
|
|
29
29
|
];
|
|
30
|
+
exports.handleAutoInsertCases = [
|
|
31
|
+
{
|
|
32
|
+
name: 'Kyrgyzstan switches + exact national',
|
|
33
|
+
raw: '+996 201 666666',
|
|
34
|
+
currentId: 'russia',
|
|
35
|
+
expectedCountryId: 'kyrgyzstan',
|
|
36
|
+
expectedValue: '201666666',
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: 'Kyrgyzstan same => exact national',
|
|
40
|
+
raw: '+996201666666',
|
|
41
|
+
currentId: 'kyrgyzstan',
|
|
42
|
+
expectedValue: '201666666',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
name: 'Russia incomplete => no calls',
|
|
46
|
+
raw: '+7 987',
|
|
47
|
+
currentId: 'russia',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: 'Albania (+355) XXX XXX-XXX',
|
|
51
|
+
raw: '+355 675 123 456',
|
|
52
|
+
currentId: 'russia',
|
|
53
|
+
expectedCountryId: 'albania',
|
|
54
|
+
expectedLengthFromCountryId: 'albania',
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'Algeria (+213) XX XXX-XXXX',
|
|
58
|
+
raw: '+213 12 345 6789',
|
|
59
|
+
currentId: 'russia',
|
|
60
|
+
expectedCountryId: 'algeria',
|
|
61
|
+
expectedLengthFromCountryId: 'algeria',
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'Armenia (+374) XX XXX-XXX',
|
|
65
|
+
raw: '+374 10 123 456',
|
|
66
|
+
currentId: 'russia',
|
|
67
|
+
expectedCountryId: 'armenia',
|
|
68
|
+
expectedLengthFromCountryId: 'armenia',
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
name: 'Austria (+43) XXX XXX-XXXX',
|
|
72
|
+
raw: '+43 664 123 4567',
|
|
73
|
+
currentId: 'russia',
|
|
74
|
+
expectedCountryId: 'austria',
|
|
75
|
+
expectedLengthFromCountryId: 'austria',
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: 'Australia (+61) X XXXX-XXXX',
|
|
79
|
+
raw: '+61 4 1234 5678',
|
|
80
|
+
currentId: 'russia',
|
|
81
|
+
expectedCountryId: 'australia',
|
|
82
|
+
expectedLengthFromCountryId: 'australia',
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: 'Belarus (+375) XX XXX-XX-XX',
|
|
86
|
+
raw: '+375 29 123 45 67',
|
|
87
|
+
currentId: 'russia',
|
|
88
|
+
expectedCountryId: 'belarus',
|
|
89
|
+
expectedLengthFromCountryId: 'belarus',
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
name: 'Bangladesh (+880) X XXX-XXXX',
|
|
93
|
+
raw: '+880 1 234 5678',
|
|
94
|
+
currentId: 'russia',
|
|
95
|
+
expectedCountryId: 'bangladesh',
|
|
96
|
+
expectedLengthFromCountryId: 'bangladesh',
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
name: 'Bahrain (+973) XX XXX-XXX',
|
|
100
|
+
raw: '+973 33 123 456',
|
|
101
|
+
currentId: 'russia',
|
|
102
|
+
expectedCountryId: 'bahrain',
|
|
103
|
+
expectedLengthFromCountryId: 'bahrain',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
name: 'Cyprus (+357) XX XXXXXX',
|
|
107
|
+
raw: '+357 99 123456',
|
|
108
|
+
currentId: 'russia',
|
|
109
|
+
expectedCountryId: 'cyprus',
|
|
110
|
+
expectedLengthFromCountryId: 'cyprus',
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
name: 'Georgia (+995) XXX XX-XX-XX',
|
|
114
|
+
raw: '+995 555 12 34 56',
|
|
115
|
+
currentId: 'russia',
|
|
116
|
+
expectedCountryId: 'georgia',
|
|
117
|
+
expectedLengthFromCountryId: 'georgia',
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
name: 'India (+91) XXXXX-XXXXX',
|
|
121
|
+
raw: '+91 98765 43210',
|
|
122
|
+
currentId: 'russia',
|
|
123
|
+
expectedCountryId: 'india',
|
|
124
|
+
expectedLengthFromCountryId: 'india',
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: 'Iran (+98) XXX XXX-XXXX',
|
|
128
|
+
raw: '+98 912 345 6789',
|
|
129
|
+
currentId: 'russia',
|
|
130
|
+
expectedCountryId: 'iran',
|
|
131
|
+
expectedLengthFromCountryId: 'iran',
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
name: 'Netherlands (+31) XX XXX-XXXX',
|
|
135
|
+
raw: '+31 20 123 4567',
|
|
136
|
+
currentId: 'russia',
|
|
137
|
+
expectedCountryId: 'netherlands',
|
|
138
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
name: 'Romania (+40) XX XXX-XXXX',
|
|
142
|
+
raw: '+40 21 123 4567',
|
|
143
|
+
currentId: 'russia',
|
|
144
|
+
expectedCountryId: 'romania',
|
|
145
|
+
expectedLengthFromCountryId: 'romania',
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
name: 'Serbia (+381) XX XXX-XXXX',
|
|
149
|
+
raw: '+381 11 123 4567',
|
|
150
|
+
currentId: 'russia',
|
|
151
|
+
expectedCountryId: 'serbia',
|
|
152
|
+
expectedLengthFromCountryId: 'serbia',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
name: 'Uzbekistan (+998) XX XXX-XX-XX',
|
|
156
|
+
raw: '+998 90 123 45 67',
|
|
157
|
+
currentId: 'russia',
|
|
158
|
+
expectedCountryId: 'uzbekistan',
|
|
159
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
name: 'Tajikistan (+992) XX XXX-XXXX',
|
|
163
|
+
raw: '+992 93 123 4567',
|
|
164
|
+
currentId: 'russia',
|
|
165
|
+
expectedCountryId: 'tajikistan',
|
|
166
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
name: 'Moldova (+373) XXXX XXXX',
|
|
170
|
+
raw: '+373 1234 5678',
|
|
171
|
+
currentId: 'russia',
|
|
172
|
+
expectedCountryId: 'moldova',
|
|
173
|
+
expectedLengthFromCountryId: 'moldova',
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
name: 'Netherlands (+31) switches from Moldova',
|
|
177
|
+
raw: '+31 20 123 4567',
|
|
178
|
+
currentId: 'moldova',
|
|
179
|
+
expectedCountryId: 'netherlands',
|
|
180
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
name: 'Uzbekistan (+998) switches from Tajikistan',
|
|
184
|
+
raw: '+998 90 123 45 67',
|
|
185
|
+
currentId: 'tajikistan',
|
|
186
|
+
expectedCountryId: 'uzbekistan',
|
|
187
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
name: 'Tajikistan (+992) switches from Albania',
|
|
191
|
+
raw: '+992 93 123 4567',
|
|
192
|
+
currentId: 'albania',
|
|
193
|
+
expectedCountryId: 'tajikistan',
|
|
194
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
name: 'Moldova (+373) switches from Egypt',
|
|
198
|
+
raw: '+373 1234 5678',
|
|
199
|
+
currentId: 'egypt',
|
|
200
|
+
expectedCountryId: 'moldova',
|
|
201
|
+
expectedLengthFromCountryId: 'moldova',
|
|
202
|
+
},
|
|
203
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const vitest_1 = require("vitest");
|
|
4
|
+
const countries_1 = require("../countries");
|
|
5
|
+
const utils_1 = require("../utils");
|
|
6
|
+
const constants_1 = require("./constants");
|
|
7
|
+
const OPTIONS = countries_1.ALL_COUNTRY_CODES.map(c => ({
|
|
8
|
+
id: c.value,
|
|
9
|
+
iso2: c.iso2,
|
|
10
|
+
mask: c.mask,
|
|
11
|
+
content: {
|
|
12
|
+
caption: c.caption,
|
|
13
|
+
option: c.value,
|
|
14
|
+
},
|
|
15
|
+
beforeContent: null,
|
|
16
|
+
}));
|
|
17
|
+
const byId = (id) => {
|
|
18
|
+
const found = OPTIONS.find(c => c.id === id);
|
|
19
|
+
if (!found)
|
|
20
|
+
throw new Error(`Country not found in OPTIONS: ${id}`);
|
|
21
|
+
return found;
|
|
22
|
+
};
|
|
23
|
+
const casesNoCalls = constants_1.handleAutoInsertCases.filter((c) => !('expectedValue' in c) && !('expectedLengthFromCountryId' in c));
|
|
24
|
+
const casesExact = constants_1.handleAutoInsertCases.filter((c) => 'expectedValue' in c);
|
|
25
|
+
(0, vitest_1.describe)('handleAutoInsert — no calls', () => {
|
|
26
|
+
casesNoCalls.forEach(tc => {
|
|
27
|
+
(0, vitest_1.it)(`${tc.name}`, () => {
|
|
28
|
+
const onValueChange = vitest_1.vi.fn();
|
|
29
|
+
const onCountryChange = vitest_1.vi.fn();
|
|
30
|
+
(0, utils_1.handleAutoInsert)({
|
|
31
|
+
raw: tc.raw,
|
|
32
|
+
onValueChange,
|
|
33
|
+
onCountryChange,
|
|
34
|
+
country: byId(tc.currentId),
|
|
35
|
+
options: OPTIONS,
|
|
36
|
+
});
|
|
37
|
+
(0, vitest_1.expect)(onCountryChange).not.toHaveBeenCalled();
|
|
38
|
+
(0, vitest_1.expect)(onValueChange).not.toHaveBeenCalled();
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
});
|
|
42
|
+
(0, vitest_1.describe)('handleAutoInsert — exact value', () => {
|
|
43
|
+
casesExact.forEach(tc => {
|
|
44
|
+
(0, vitest_1.it)(`${tc.name}`, () => {
|
|
45
|
+
var _a, _b;
|
|
46
|
+
const onValueChange = vitest_1.vi.fn();
|
|
47
|
+
const onCountryChange = vitest_1.vi.fn();
|
|
48
|
+
(0, utils_1.handleAutoInsert)({
|
|
49
|
+
raw: tc.raw,
|
|
50
|
+
onValueChange,
|
|
51
|
+
onCountryChange,
|
|
52
|
+
country: byId(tc.currentId),
|
|
53
|
+
options: OPTIONS,
|
|
54
|
+
});
|
|
55
|
+
(0, vitest_1.expect)(onValueChange).toHaveBeenCalledTimes(1);
|
|
56
|
+
(0, vitest_1.expect)(onValueChange).toHaveBeenCalledWith(tc.expectedValue);
|
|
57
|
+
const expectedCountryCalls = tc.expectedCountryId ? 1 : 0;
|
|
58
|
+
(0, vitest_1.expect)(onCountryChange).toHaveBeenCalledTimes(expectedCountryCalls);
|
|
59
|
+
const actualCountryId = (_b = (_a = onCountryChange.mock.calls[0]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id;
|
|
60
|
+
(0, vitest_1.expect)(actualCountryId).toBe(tc.expectedCountryId);
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
});
|
|
@@ -5,3 +5,10 @@ export declare const formatPhoneNumber: <T extends {
|
|
|
5
5
|
mask: string;
|
|
6
6
|
}>(phone: string, countries: readonly T[]) => string;
|
|
7
7
|
export declare function detectCountryByPhone(text: string, options: FieldPhoneOptionsProps[]): FieldPhoneOptionsProps | undefined;
|
|
8
|
+
export declare const handleAutoInsert: ({ raw, onValueChange, onCountryChange, country, options, }: {
|
|
9
|
+
raw: string;
|
|
10
|
+
onValueChange: (str: string) => void;
|
|
11
|
+
onCountryChange: (country: FieldPhoneOptionsProps) => void;
|
|
12
|
+
country?: FieldPhoneOptionsProps;
|
|
13
|
+
options: FieldPhoneOptionsProps[];
|
|
14
|
+
}) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.formatPhoneNumber = exports.uniqueSet = void 0;
|
|
3
|
+
exports.handleAutoInsert = exports.formatPhoneNumber = exports.uniqueSet = void 0;
|
|
4
4
|
exports.detectCountryByPhone = detectCountryByPhone;
|
|
5
5
|
const awesome_phonenumber_1 = require("awesome-phonenumber");
|
|
6
6
|
const countries_1 = require("./countries");
|
|
@@ -55,3 +55,32 @@ function detectCountryByPhone(text, options) {
|
|
|
55
55
|
}
|
|
56
56
|
return options.find(opt => opt.iso2 === regionCode);
|
|
57
57
|
}
|
|
58
|
+
const handleAutoInsert = ({ raw, onValueChange, onCountryChange, country, options, }) => {
|
|
59
|
+
var _a, _b, _c, _d, _e, _f;
|
|
60
|
+
if (!raw)
|
|
61
|
+
return;
|
|
62
|
+
const parsed = (0, awesome_phonenumber_1.parsePhoneNumber)(raw);
|
|
63
|
+
const ok = parsed.valid || parsed.possible;
|
|
64
|
+
if (!ok)
|
|
65
|
+
return;
|
|
66
|
+
const detected = detectCountryByPhone(raw, options);
|
|
67
|
+
if (!detected)
|
|
68
|
+
return;
|
|
69
|
+
let national = (_a = parsed.number) === null || _a === void 0 ? void 0 : _a.significant.replace(/\D/g, '');
|
|
70
|
+
if (!national)
|
|
71
|
+
return;
|
|
72
|
+
const nextNationalLength = ((_c = (_b = detected.mask) === null || _b === void 0 ? void 0 : _b.match(/X/g)) !== null && _c !== void 0 ? _c : []).length;
|
|
73
|
+
if (nextNationalLength && national.length > nextNationalLength) {
|
|
74
|
+
national = national.slice(-nextNationalLength);
|
|
75
|
+
}
|
|
76
|
+
const fullDigits = ((_e = (_d = parsed.number) === null || _d === void 0 ? void 0 : _d.e164) !== null && _e !== void 0 ? _e : raw).replace(/\D/g, '');
|
|
77
|
+
const countryCodeDigits = String((_f = parsed.countryCode) !== null && _f !== void 0 ? _f : '');
|
|
78
|
+
const expected = countryCodeDigits.length + nextNationalLength;
|
|
79
|
+
if (fullDigits.length < expected)
|
|
80
|
+
return;
|
|
81
|
+
if (detected.id !== (country === null || country === void 0 ? void 0 : country.id)) {
|
|
82
|
+
onCountryChange(detected);
|
|
83
|
+
}
|
|
84
|
+
onValueChange(national);
|
|
85
|
+
};
|
|
86
|
+
exports.handleAutoInsert = handleAutoInsert;
|
|
@@ -20,13 +20,15 @@ import { useValueControl } from '@snack-uikit/utils';
|
|
|
20
20
|
import { PLACEHOLDER_CHAR } from './constants';
|
|
21
21
|
import { useCountries } from './hooks';
|
|
22
22
|
import styles from './styles.module.css';
|
|
23
|
-
import { detectCountryByPhone } from './utils';
|
|
23
|
+
import { detectCountryByPhone, handleAutoInsert } from './utils';
|
|
24
24
|
export const FieldPhone = forwardRef((_a, ref) => {
|
|
25
25
|
var { value: valueProp, onChangeCountry, onChange: onChangeProp, showClearButton = true, searchPlaceholder, onPaste, className, scrollList, options: optionsProp } = _a, rest = __rest(_a, ["value", "onChangeCountry", "onChange", "showClearButton", "searchPlaceholder", "onPaste", "className", "scrollList", "options"]);
|
|
26
26
|
const [open, setOpen] = useState(false);
|
|
27
27
|
const localRef = useRef(null);
|
|
28
28
|
const options = useCountries(optionsProp);
|
|
29
29
|
const isOnlyOneCountryAvailable = options.length === 1;
|
|
30
|
+
const rawInsertRef = useRef('');
|
|
31
|
+
const insertSwitchRef = useRef(false);
|
|
30
32
|
const [country, setCountry] = useValueControl({
|
|
31
33
|
defaultValue: options[0],
|
|
32
34
|
onChange: onChangeCountry,
|
|
@@ -45,7 +47,19 @@ export const FieldPhone = forwardRef((_a, ref) => {
|
|
|
45
47
|
definitions: {
|
|
46
48
|
X: /[0-9]/,
|
|
47
49
|
},
|
|
50
|
+
prepare: (str) => {
|
|
51
|
+
if (str.replace(/\D/g, '').length > 1) {
|
|
52
|
+
rawInsertRef.current = str;
|
|
53
|
+
}
|
|
54
|
+
return str;
|
|
55
|
+
},
|
|
48
56
|
}), [country === null || country === void 0 ? void 0 : country.mask]);
|
|
57
|
+
const clearRaw = () => {
|
|
58
|
+
rawInsertRef.current = '';
|
|
59
|
+
};
|
|
60
|
+
const markSwitchRef = () => {
|
|
61
|
+
insertSwitchRef.current = true;
|
|
62
|
+
};
|
|
49
63
|
const { ref: iMaskRef, value: iMaskValue, setValue, unmaskedValue, } = useIMask(maskOptions, {
|
|
50
64
|
onAccept: (_, maskRef) => {
|
|
51
65
|
const unmasked = maskRef.unmaskedValue;
|
|
@@ -54,6 +68,23 @@ export const FieldPhone = forwardRef((_a, ref) => {
|
|
|
54
68
|
if (value !== valueProp) {
|
|
55
69
|
onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
|
|
56
70
|
}
|
|
71
|
+
if (insertSwitchRef.current) {
|
|
72
|
+
insertSwitchRef.current = false;
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
handleAutoInsert({
|
|
76
|
+
raw: rawInsertRef.current,
|
|
77
|
+
onValueChange: value => {
|
|
78
|
+
setTimeout(() => setValue(value), 0);
|
|
79
|
+
},
|
|
80
|
+
onCountryChange: country => {
|
|
81
|
+
markSwitchRef();
|
|
82
|
+
clearRaw();
|
|
83
|
+
setCountry(country);
|
|
84
|
+
},
|
|
85
|
+
country,
|
|
86
|
+
options,
|
|
87
|
+
});
|
|
57
88
|
},
|
|
58
89
|
});
|
|
59
90
|
useEffect(() => {
|
|
@@ -3,3 +3,32 @@ export declare const phoneFormatCases: {
|
|
|
3
3
|
input: string;
|
|
4
4
|
expected: string;
|
|
5
5
|
}[];
|
|
6
|
+
export declare const handleAutoInsertCases: ({
|
|
7
|
+
name: string;
|
|
8
|
+
raw: string;
|
|
9
|
+
currentId: string;
|
|
10
|
+
expectedCountryId: string;
|
|
11
|
+
expectedValue: string;
|
|
12
|
+
expectedLengthFromCountryId?: undefined;
|
|
13
|
+
} | {
|
|
14
|
+
name: string;
|
|
15
|
+
raw: string;
|
|
16
|
+
currentId: string;
|
|
17
|
+
expectedValue: string;
|
|
18
|
+
expectedCountryId?: undefined;
|
|
19
|
+
expectedLengthFromCountryId?: undefined;
|
|
20
|
+
} | {
|
|
21
|
+
name: string;
|
|
22
|
+
raw: string;
|
|
23
|
+
currentId: string;
|
|
24
|
+
expectedCountryId?: undefined;
|
|
25
|
+
expectedValue?: undefined;
|
|
26
|
+
expectedLengthFromCountryId?: undefined;
|
|
27
|
+
} | {
|
|
28
|
+
name: string;
|
|
29
|
+
raw: string;
|
|
30
|
+
currentId: string;
|
|
31
|
+
expectedCountryId: string;
|
|
32
|
+
expectedLengthFromCountryId: string;
|
|
33
|
+
expectedValue?: undefined;
|
|
34
|
+
})[];
|
|
@@ -24,3 +24,177 @@ export const phoneFormatCases = [
|
|
|
24
24
|
{ country: 'Tajikistan', input: '+992123456789', expected: '+992 12 345-6789' },
|
|
25
25
|
{ country: 'Moldova', input: '+37312345678', expected: '+373 1234 5678' },
|
|
26
26
|
];
|
|
27
|
+
export const handleAutoInsertCases = [
|
|
28
|
+
{
|
|
29
|
+
name: 'Kyrgyzstan switches + exact national',
|
|
30
|
+
raw: '+996 201 666666',
|
|
31
|
+
currentId: 'russia',
|
|
32
|
+
expectedCountryId: 'kyrgyzstan',
|
|
33
|
+
expectedValue: '201666666',
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
name: 'Kyrgyzstan same => exact national',
|
|
37
|
+
raw: '+996201666666',
|
|
38
|
+
currentId: 'kyrgyzstan',
|
|
39
|
+
expectedValue: '201666666',
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: 'Russia incomplete => no calls',
|
|
43
|
+
raw: '+7 987',
|
|
44
|
+
currentId: 'russia',
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
name: 'Albania (+355) XXX XXX-XXX',
|
|
48
|
+
raw: '+355 675 123 456',
|
|
49
|
+
currentId: 'russia',
|
|
50
|
+
expectedCountryId: 'albania',
|
|
51
|
+
expectedLengthFromCountryId: 'albania',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
name: 'Algeria (+213) XX XXX-XXXX',
|
|
55
|
+
raw: '+213 12 345 6789',
|
|
56
|
+
currentId: 'russia',
|
|
57
|
+
expectedCountryId: 'algeria',
|
|
58
|
+
expectedLengthFromCountryId: 'algeria',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
name: 'Armenia (+374) XX XXX-XXX',
|
|
62
|
+
raw: '+374 10 123 456',
|
|
63
|
+
currentId: 'russia',
|
|
64
|
+
expectedCountryId: 'armenia',
|
|
65
|
+
expectedLengthFromCountryId: 'armenia',
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
name: 'Austria (+43) XXX XXX-XXXX',
|
|
69
|
+
raw: '+43 664 123 4567',
|
|
70
|
+
currentId: 'russia',
|
|
71
|
+
expectedCountryId: 'austria',
|
|
72
|
+
expectedLengthFromCountryId: 'austria',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
name: 'Australia (+61) X XXXX-XXXX',
|
|
76
|
+
raw: '+61 4 1234 5678',
|
|
77
|
+
currentId: 'russia',
|
|
78
|
+
expectedCountryId: 'australia',
|
|
79
|
+
expectedLengthFromCountryId: 'australia',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: 'Belarus (+375) XX XXX-XX-XX',
|
|
83
|
+
raw: '+375 29 123 45 67',
|
|
84
|
+
currentId: 'russia',
|
|
85
|
+
expectedCountryId: 'belarus',
|
|
86
|
+
expectedLengthFromCountryId: 'belarus',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
name: 'Bangladesh (+880) X XXX-XXXX',
|
|
90
|
+
raw: '+880 1 234 5678',
|
|
91
|
+
currentId: 'russia',
|
|
92
|
+
expectedCountryId: 'bangladesh',
|
|
93
|
+
expectedLengthFromCountryId: 'bangladesh',
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
name: 'Bahrain (+973) XX XXX-XXX',
|
|
97
|
+
raw: '+973 33 123 456',
|
|
98
|
+
currentId: 'russia',
|
|
99
|
+
expectedCountryId: 'bahrain',
|
|
100
|
+
expectedLengthFromCountryId: 'bahrain',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: 'Cyprus (+357) XX XXXXXX',
|
|
104
|
+
raw: '+357 99 123456',
|
|
105
|
+
currentId: 'russia',
|
|
106
|
+
expectedCountryId: 'cyprus',
|
|
107
|
+
expectedLengthFromCountryId: 'cyprus',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
name: 'Georgia (+995) XXX XX-XX-XX',
|
|
111
|
+
raw: '+995 555 12 34 56',
|
|
112
|
+
currentId: 'russia',
|
|
113
|
+
expectedCountryId: 'georgia',
|
|
114
|
+
expectedLengthFromCountryId: 'georgia',
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
name: 'India (+91) XXXXX-XXXXX',
|
|
118
|
+
raw: '+91 98765 43210',
|
|
119
|
+
currentId: 'russia',
|
|
120
|
+
expectedCountryId: 'india',
|
|
121
|
+
expectedLengthFromCountryId: 'india',
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
name: 'Iran (+98) XXX XXX-XXXX',
|
|
125
|
+
raw: '+98 912 345 6789',
|
|
126
|
+
currentId: 'russia',
|
|
127
|
+
expectedCountryId: 'iran',
|
|
128
|
+
expectedLengthFromCountryId: 'iran',
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
name: 'Netherlands (+31) XX XXX-XXXX',
|
|
132
|
+
raw: '+31 20 123 4567',
|
|
133
|
+
currentId: 'russia',
|
|
134
|
+
expectedCountryId: 'netherlands',
|
|
135
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
name: 'Romania (+40) XX XXX-XXXX',
|
|
139
|
+
raw: '+40 21 123 4567',
|
|
140
|
+
currentId: 'russia',
|
|
141
|
+
expectedCountryId: 'romania',
|
|
142
|
+
expectedLengthFromCountryId: 'romania',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
name: 'Serbia (+381) XX XXX-XXXX',
|
|
146
|
+
raw: '+381 11 123 4567',
|
|
147
|
+
currentId: 'russia',
|
|
148
|
+
expectedCountryId: 'serbia',
|
|
149
|
+
expectedLengthFromCountryId: 'serbia',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
name: 'Uzbekistan (+998) XX XXX-XX-XX',
|
|
153
|
+
raw: '+998 90 123 45 67',
|
|
154
|
+
currentId: 'russia',
|
|
155
|
+
expectedCountryId: 'uzbekistan',
|
|
156
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
name: 'Tajikistan (+992) XX XXX-XXXX',
|
|
160
|
+
raw: '+992 93 123 4567',
|
|
161
|
+
currentId: 'russia',
|
|
162
|
+
expectedCountryId: 'tajikistan',
|
|
163
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
name: 'Moldova (+373) XXXX XXXX',
|
|
167
|
+
raw: '+373 1234 5678',
|
|
168
|
+
currentId: 'russia',
|
|
169
|
+
expectedCountryId: 'moldova',
|
|
170
|
+
expectedLengthFromCountryId: 'moldova',
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
name: 'Netherlands (+31) switches from Moldova',
|
|
174
|
+
raw: '+31 20 123 4567',
|
|
175
|
+
currentId: 'moldova',
|
|
176
|
+
expectedCountryId: 'netherlands',
|
|
177
|
+
expectedLengthFromCountryId: 'netherlands',
|
|
178
|
+
},
|
|
179
|
+
{
|
|
180
|
+
name: 'Uzbekistan (+998) switches from Tajikistan',
|
|
181
|
+
raw: '+998 90 123 45 67',
|
|
182
|
+
currentId: 'tajikistan',
|
|
183
|
+
expectedCountryId: 'uzbekistan',
|
|
184
|
+
expectedLengthFromCountryId: 'uzbekistan',
|
|
185
|
+
},
|
|
186
|
+
{
|
|
187
|
+
name: 'Tajikistan (+992) switches from Albania',
|
|
188
|
+
raw: '+992 93 123 4567',
|
|
189
|
+
currentId: 'albania',
|
|
190
|
+
expectedCountryId: 'tajikistan',
|
|
191
|
+
expectedLengthFromCountryId: 'tajikistan',
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
name: 'Moldova (+373) switches from Egypt',
|
|
195
|
+
raw: '+373 1234 5678',
|
|
196
|
+
currentId: 'egypt',
|
|
197
|
+
expectedCountryId: 'moldova',
|
|
198
|
+
expectedLengthFromCountryId: 'moldova',
|
|
199
|
+
},
|
|
200
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|