@rh-support/components 2.1.3 → 2.1.5
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/lib/cjs/PhoneInput/PhoneInput.d.ts +4 -0
- package/lib/cjs/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/lib/cjs/PhoneInput/PhoneInput.js +110 -65
- package/lib/esm/PhoneInput/PhoneInput.d.ts +4 -0
- package/lib/esm/PhoneInput/PhoneInput.d.ts.map +1 -1
- package/lib/esm/PhoneInput/PhoneInput.js +100 -56
- package/package.json +6 -6
|
@@ -10,6 +10,10 @@ interface IProps {
|
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
}
|
|
13
|
+
export declare const getPhoneObj: (phoneNumber: string) => {
|
|
14
|
+
countryCode: string;
|
|
15
|
+
phoneLine: string;
|
|
16
|
+
};
|
|
13
17
|
export declare function PhoneInput(props: IProps): JSX.Element;
|
|
14
18
|
export {};
|
|
15
19
|
//# sourceMappingURL=PhoneInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA0DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiNvC"}
|
|
@@ -22,13 +22,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
22
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.PhoneInput = void 0;
|
|
25
|
+
exports.PhoneInput = exports.getPhoneObj = void 0;
|
|
26
26
|
require("./PhoneInput.scss");
|
|
27
27
|
const react_core_1 = require("@patternfly/react-core");
|
|
28
|
-
const
|
|
28
|
+
const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
|
|
29
|
+
const isEqual_1 = __importDefault(require("lodash/isEqual"));
|
|
29
30
|
const react_1 = __importStar(require("react"));
|
|
30
31
|
const react_i18next_1 = require("react-i18next");
|
|
31
32
|
const CountryData_1 = __importDefault(require("./CountryData"));
|
|
33
|
+
const PREFIX = '+';
|
|
34
|
+
const DEFAULT_MASK = '... ... ... ... ..';
|
|
35
|
+
const alwaysDefaultMask = false;
|
|
36
|
+
// Getting Country phone format
|
|
37
|
+
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
38
|
+
if (!predefinedMask || alwaysDefaultMask) {
|
|
39
|
+
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + defaultMask;
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
const initializedCountries = CountryData_1.default.map((country) => {
|
|
46
|
+
const countryItem = {
|
|
47
|
+
name: country[0],
|
|
48
|
+
regions: country[1],
|
|
49
|
+
iso2: country[2],
|
|
50
|
+
countryCode: country[3],
|
|
51
|
+
dialCode: country[3],
|
|
52
|
+
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
|
|
53
|
+
priority: country[5] || 0,
|
|
54
|
+
};
|
|
55
|
+
return countryItem;
|
|
56
|
+
});
|
|
57
|
+
// Formatting phone numbers according to country
|
|
58
|
+
const formatNumber = (fullPhoneNumber, localFormat) => {
|
|
59
|
+
if (isEmpty_1.default(fullPhoneNumber))
|
|
60
|
+
return '';
|
|
61
|
+
let localPhone = fullPhoneNumber.replace(PREFIX, '');
|
|
62
|
+
if (isEmpty_1.default(localPhone))
|
|
63
|
+
return '';
|
|
64
|
+
// Formatting inputted number
|
|
65
|
+
let phone = '';
|
|
66
|
+
[...fullPhoneNumber].forEach((ele) => {
|
|
67
|
+
if (ele >= '0' && ele <= '9') {
|
|
68
|
+
phone = phone.concat(ele);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
let pattern = '';
|
|
72
|
+
let i = 0;
|
|
73
|
+
for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
|
|
74
|
+
if (localFormat[j] === '.') {
|
|
75
|
+
pattern += phone[i];
|
|
76
|
+
i++;
|
|
77
|
+
}
|
|
78
|
+
else {
|
|
79
|
+
pattern += localFormat[j];
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
return pattern;
|
|
83
|
+
};
|
|
84
|
+
// return phoneline and countrycode for any given phone
|
|
85
|
+
const getPhoneObj = (phoneNumber) => {
|
|
86
|
+
let localPhone = phoneNumber.replace(/[^0-9]/g, '');
|
|
87
|
+
let countryCode = '';
|
|
88
|
+
// Guessing countries according to user input
|
|
89
|
+
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
90
|
+
const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
|
|
91
|
+
if (!isEmpty_1.default(exactCountry)) {
|
|
92
|
+
countryCode = exactCountry[0].dialCode.toString();
|
|
93
|
+
}
|
|
94
|
+
else if (!isEmpty_1.default(possibleCountries)) {
|
|
95
|
+
countryCode = possibleCountries[0].dialCode.toString();
|
|
96
|
+
}
|
|
97
|
+
return {
|
|
98
|
+
countryCode: PREFIX + countryCode,
|
|
99
|
+
phoneLine: localPhone.substring(countryCode.length, localPhone.length),
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
exports.getPhoneObj = getPhoneObj;
|
|
32
103
|
function PhoneInput(props) {
|
|
33
104
|
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
|
|
34
105
|
const { t } = react_i18next_1.useTranslation();
|
|
@@ -36,9 +107,6 @@ function PhoneInput(props) {
|
|
|
36
107
|
const [iso2, setIso2] = react_1.useState('');
|
|
37
108
|
const [formattedNumber, setFormattedNumber] = react_1.useState('');
|
|
38
109
|
const [format, setFormat] = react_1.useState('');
|
|
39
|
-
const PREFIX = '+';
|
|
40
|
-
const DEFAULT_MASK = '... ... ... ... ..';
|
|
41
|
-
const alwaysDefaultMask = false;
|
|
42
110
|
const [countryObj, setCountryObj] = react_1.useState({
|
|
43
111
|
name: '',
|
|
44
112
|
regions: [''],
|
|
@@ -47,40 +115,32 @@ function PhoneInput(props) {
|
|
|
47
115
|
dialCode: '',
|
|
48
116
|
format: '', // Number Format (For US, '(...) ...-....' )
|
|
49
117
|
});
|
|
50
|
-
// Getting Country phone format
|
|
51
|
-
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
52
|
-
if (!predefinedMask || alwaysDefaultMask) {
|
|
53
|
-
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + defaultMask;
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
const initializedCountries = CountryData_1.default.map((country) => {
|
|
60
|
-
const countryItem = {
|
|
61
|
-
name: country[0],
|
|
62
|
-
regions: country[1],
|
|
63
|
-
iso2: country[2],
|
|
64
|
-
countryCode: country[3],
|
|
65
|
-
dialCode: country[3],
|
|
66
|
-
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
|
|
67
|
-
priority: country[5] || 0,
|
|
68
|
-
};
|
|
69
|
-
return countryItem;
|
|
70
|
-
});
|
|
71
118
|
const setLocalFormat = (phoneNumber) => {
|
|
72
119
|
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
120
|
+
localPhone = localPhone.replace('(', '').trim();
|
|
121
|
+
// if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
|
|
122
|
+
if (!isEmpty_1.default(countryObj) && isEqual_1.default(localPhone, countryObj.dialCode)) {
|
|
123
|
+
return countryObj.format;
|
|
124
|
+
}
|
|
73
125
|
let localFormat;
|
|
74
126
|
// Guessing countries according to user input
|
|
75
127
|
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
76
128
|
const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
|
|
77
|
-
if (!
|
|
129
|
+
if (!isEmpty_1.default(exactCountry)) {
|
|
130
|
+
if (isEqual_1.default(exactCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
131
|
+
setIso2(countryObj.iso2);
|
|
132
|
+
return countryObj.format;
|
|
133
|
+
}
|
|
78
134
|
setIso2(exactCountry[0].iso2.toString());
|
|
79
135
|
localFormat = exactCountry[0].format.toString();
|
|
80
136
|
onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
|
|
81
137
|
setFormat(localFormat);
|
|
82
138
|
}
|
|
83
|
-
else if (!
|
|
139
|
+
else if (!isEmpty_1.default(possibleCountries)) {
|
|
140
|
+
if (isEqual_1.default(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
|
|
141
|
+
setIso2(countryObj.iso2);
|
|
142
|
+
return countryObj.format;
|
|
143
|
+
}
|
|
84
144
|
setIso2(possibleCountries[0].iso2.toString());
|
|
85
145
|
localFormat = possibleCountries[0].format.toString();
|
|
86
146
|
onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
|
|
@@ -95,7 +155,7 @@ function PhoneInput(props) {
|
|
|
95
155
|
return localFormat;
|
|
96
156
|
};
|
|
97
157
|
const onPhoneChange = (phone) => {
|
|
98
|
-
if (
|
|
158
|
+
if (isEmpty_1.default(phone.trim()) || isEmpty_1.default(phone.replace(PREFIX, '').trim())) {
|
|
99
159
|
setFormattedNumber('');
|
|
100
160
|
onPhoneValueChange('');
|
|
101
161
|
setInvalid && setInvalid(false);
|
|
@@ -106,10 +166,10 @@ function PhoneInput(props) {
|
|
|
106
166
|
const localFormat = setLocalFormat(phone);
|
|
107
167
|
const _formattedNumber = formatNumber(phone, localFormat);
|
|
108
168
|
setFormattedNumber(_formattedNumber);
|
|
109
|
-
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !
|
|
169
|
+
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual_1.default(phone, '-')) {
|
|
110
170
|
onPhoneValueChange(PREFIX + phone.trim());
|
|
111
171
|
}
|
|
112
|
-
else if (phone.length <= localFormat.length) {
|
|
172
|
+
else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
|
|
113
173
|
onPhoneValueChange(phone);
|
|
114
174
|
}
|
|
115
175
|
};
|
|
@@ -138,43 +198,16 @@ function PhoneInput(props) {
|
|
|
138
198
|
});
|
|
139
199
|
return getOptions(newOptions);
|
|
140
200
|
};
|
|
141
|
-
// Formatting phone numbers according to country
|
|
142
|
-
const formatNumber = (fullPhoneNumber, localFormat) => {
|
|
143
|
-
if (lodash_1.isEmpty(fullPhoneNumber))
|
|
144
|
-
return '';
|
|
145
|
-
let localPhone = fullPhoneNumber.replace(PREFIX, '');
|
|
146
|
-
if (lodash_1.isEmpty(localPhone))
|
|
147
|
-
return '';
|
|
148
|
-
// Formatting inputted number
|
|
149
|
-
let phone = '';
|
|
150
|
-
[...fullPhoneNumber].forEach((ele) => {
|
|
151
|
-
if (ele >= '0' && ele <= '9') {
|
|
152
|
-
phone = phone.concat(ele);
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
let pattern = '';
|
|
156
|
-
let i = 0;
|
|
157
|
-
for (let j = 0; j < localFormat.length && i < phone.length; j++) {
|
|
158
|
-
if (localFormat[j] === '.') {
|
|
159
|
-
pattern += phone[i];
|
|
160
|
-
i++;
|
|
161
|
-
}
|
|
162
|
-
else {
|
|
163
|
-
pattern += localFormat[j];
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
return pattern;
|
|
167
|
-
};
|
|
168
201
|
const placeholder = (react_1.default.createElement("div", { className: "phone-number-select-placeholder" },
|
|
169
202
|
react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
|
|
170
203
|
react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
171
204
|
iso2.toUpperCase())));
|
|
172
205
|
react_1.useEffect(() => {
|
|
173
|
-
if (
|
|
206
|
+
if (isEmpty_1.default(phoneValue)) {
|
|
174
207
|
setInvalid && setInvalid(false);
|
|
175
208
|
return;
|
|
176
209
|
}
|
|
177
|
-
if (
|
|
210
|
+
if (isEmpty_1.default(iso2)) {
|
|
178
211
|
const localFormat = setLocalFormat(phoneValue);
|
|
179
212
|
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
180
213
|
setFormattedNumber(_formattedNumber);
|
|
@@ -182,7 +215,7 @@ function PhoneInput(props) {
|
|
|
182
215
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
183
216
|
}, []);
|
|
184
217
|
react_1.useEffect(() => {
|
|
185
|
-
if (!
|
|
218
|
+
if (!isEmpty_1.default(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
|
|
186
219
|
setIso2(countryObj.iso2);
|
|
187
220
|
setFormat(countryObj.format);
|
|
188
221
|
onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
|
|
@@ -191,14 +224,26 @@ function PhoneInput(props) {
|
|
|
191
224
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
192
225
|
}, [countryObj]);
|
|
193
226
|
react_1.useEffect(() => {
|
|
194
|
-
|
|
227
|
+
// when user types +, it will be replaced by empty string
|
|
228
|
+
if (isEqual_1.default(phoneValue.trim(), PREFIX) && isEmpty_1.default(iso2)) {
|
|
229
|
+
onPhoneValueChange('');
|
|
230
|
+
setFormattedNumber('');
|
|
231
|
+
return;
|
|
232
|
+
}
|
|
233
|
+
if (isEmpty_1.default(phoneValue) && isEmpty_1.default(iso2)) {
|
|
234
|
+
setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
|
|
235
|
+
}
|
|
236
|
+
if (isEmpty_1.default(phoneValue)) {
|
|
195
237
|
setIso2('');
|
|
196
238
|
setInvalid && setInvalid(false);
|
|
197
239
|
setFormattedNumber('');
|
|
198
|
-
}
|
|
199
|
-
if (lodash_1.isEqual(phoneValue.trim(), PREFIX) && lodash_1.isEmpty(iso2)) {
|
|
200
240
|
onPhoneValueChange('');
|
|
201
|
-
|
|
241
|
+
}
|
|
242
|
+
else {
|
|
243
|
+
onPhoneValueChange(phoneValue);
|
|
244
|
+
const localFormat = setLocalFormat(phoneValue);
|
|
245
|
+
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
246
|
+
setFormattedNumber(_formattedNumber);
|
|
202
247
|
}
|
|
203
248
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
204
249
|
}, [phoneValue]);
|
|
@@ -10,6 +10,10 @@ interface IProps {
|
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
isDisabled?: boolean;
|
|
12
12
|
}
|
|
13
|
+
export declare const getPhoneObj: (phoneNumber: string) => {
|
|
14
|
+
countryCode: string;
|
|
15
|
+
phoneLine: string;
|
|
16
|
+
};
|
|
13
17
|
export declare function PhoneInput(props: IProps): JSX.Element;
|
|
14
18
|
export {};
|
|
15
19
|
//# sourceMappingURL=PhoneInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAU3B,UAAU,MAAM;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;IACtE,mBAAmB,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,KAAA,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AA0DD,eAAO,MAAM,WAAW,gBAAiB,MAAM;;;CAqB9C,CAAC;AAEF,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eAiNvC"}
|
|
@@ -1,9 +1,79 @@
|
|
|
1
1
|
import './PhoneInput.scss';
|
|
2
2
|
import { InputGroup, Select, SelectOption, SelectVariant, Spinner, TextInput } from '@patternfly/react-core';
|
|
3
|
-
import
|
|
3
|
+
import isEmpty from 'lodash/isEmpty';
|
|
4
|
+
import isEqual from 'lodash/isEqual';
|
|
4
5
|
import React, { useEffect, useState } from 'react';
|
|
5
6
|
import { useTranslation } from 'react-i18next';
|
|
6
7
|
import CountryData from './CountryData';
|
|
8
|
+
const PREFIX = '+';
|
|
9
|
+
const DEFAULT_MASK = '... ... ... ... ..';
|
|
10
|
+
const alwaysDefaultMask = false;
|
|
11
|
+
// Getting Country phone format
|
|
12
|
+
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
13
|
+
if (!predefinedMask || alwaysDefaultMask) {
|
|
14
|
+
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + defaultMask;
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
const initializedCountries = CountryData.map((country) => {
|
|
21
|
+
const countryItem = {
|
|
22
|
+
name: country[0],
|
|
23
|
+
regions: country[1],
|
|
24
|
+
iso2: country[2],
|
|
25
|
+
countryCode: country[3],
|
|
26
|
+
dialCode: country[3],
|
|
27
|
+
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
|
|
28
|
+
priority: country[5] || 0,
|
|
29
|
+
};
|
|
30
|
+
return countryItem;
|
|
31
|
+
});
|
|
32
|
+
// Formatting phone numbers according to country
|
|
33
|
+
const formatNumber = (fullPhoneNumber, localFormat) => {
|
|
34
|
+
if (isEmpty(fullPhoneNumber))
|
|
35
|
+
return '';
|
|
36
|
+
let localPhone = fullPhoneNumber.replace(PREFIX, '');
|
|
37
|
+
if (isEmpty(localPhone))
|
|
38
|
+
return '';
|
|
39
|
+
// Formatting inputted number
|
|
40
|
+
let phone = '';
|
|
41
|
+
[...fullPhoneNumber].forEach((ele) => {
|
|
42
|
+
if (ele >= '0' && ele <= '9') {
|
|
43
|
+
phone = phone.concat(ele);
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
let pattern = '';
|
|
47
|
+
let i = 0;
|
|
48
|
+
for (let j = 0; j < (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length) && i < phone.length; j++) {
|
|
49
|
+
if (localFormat[j] === '.') {
|
|
50
|
+
pattern += phone[i];
|
|
51
|
+
i++;
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
pattern += localFormat[j];
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
return pattern;
|
|
58
|
+
};
|
|
59
|
+
// return phoneline and countrycode for any given phone
|
|
60
|
+
export const getPhoneObj = (phoneNumber) => {
|
|
61
|
+
let localPhone = phoneNumber.replace(/[^0-9]/g, '');
|
|
62
|
+
let countryCode = '';
|
|
63
|
+
// Guessing countries according to user input
|
|
64
|
+
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
65
|
+
const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
|
|
66
|
+
if (!isEmpty(exactCountry)) {
|
|
67
|
+
countryCode = exactCountry[0].dialCode.toString();
|
|
68
|
+
}
|
|
69
|
+
else if (!isEmpty(possibleCountries)) {
|
|
70
|
+
countryCode = possibleCountries[0].dialCode.toString();
|
|
71
|
+
}
|
|
72
|
+
return {
|
|
73
|
+
countryCode: PREFIX + countryCode,
|
|
74
|
+
phoneLine: localPhone.substring(countryCode.length, localPhone.length),
|
|
75
|
+
};
|
|
76
|
+
};
|
|
7
77
|
export function PhoneInput(props) {
|
|
8
78
|
const { phoneValue, countryCode, onCountryCodeChange, onPhoneValueChange, validations, setInvalid } = props;
|
|
9
79
|
const { t } = useTranslation();
|
|
@@ -11,9 +81,6 @@ export function PhoneInput(props) {
|
|
|
11
81
|
const [iso2, setIso2] = useState('');
|
|
12
82
|
const [formattedNumber, setFormattedNumber] = useState('');
|
|
13
83
|
const [format, setFormat] = useState('');
|
|
14
|
-
const PREFIX = '+';
|
|
15
|
-
const DEFAULT_MASK = '... ... ... ... ..';
|
|
16
|
-
const alwaysDefaultMask = false;
|
|
17
84
|
const [countryObj, setCountryObj] = useState({
|
|
18
85
|
name: '',
|
|
19
86
|
regions: [''],
|
|
@@ -22,40 +89,32 @@ export function PhoneInput(props) {
|
|
|
22
89
|
dialCode: '',
|
|
23
90
|
format: '', // Number Format (For US, '(...) ...-....' )
|
|
24
91
|
});
|
|
25
|
-
// Getting Country phone format
|
|
26
|
-
function getMask(prefix, dialCode, predefinedMask, defaultMask, alwaysDefaultMask) {
|
|
27
|
-
if (!predefinedMask || alwaysDefaultMask) {
|
|
28
|
-
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + defaultMask;
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
return prefix + ''.padEnd(dialCode.length, '.') + ' ' + predefinedMask;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
const initializedCountries = CountryData.map((country) => {
|
|
35
|
-
const countryItem = {
|
|
36
|
-
name: country[0],
|
|
37
|
-
regions: country[1],
|
|
38
|
-
iso2: country[2],
|
|
39
|
-
countryCode: country[3],
|
|
40
|
-
dialCode: country[3],
|
|
41
|
-
format: getMask(PREFIX, country[3], country[4], DEFAULT_MASK, alwaysDefaultMask),
|
|
42
|
-
priority: country[5] || 0,
|
|
43
|
-
};
|
|
44
|
-
return countryItem;
|
|
45
|
-
});
|
|
46
92
|
const setLocalFormat = (phoneNumber) => {
|
|
47
93
|
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
94
|
+
localPhone = localPhone.replace('(', '').trim();
|
|
95
|
+
// if the user selects a value from the dropdown and the country code is the same as prev, iso2 values shouldn't override
|
|
96
|
+
if (!isEmpty(countryObj) && isEqual(localPhone, countryObj.dialCode)) {
|
|
97
|
+
return countryObj.format;
|
|
98
|
+
}
|
|
48
99
|
let localFormat;
|
|
49
100
|
// Guessing countries according to user input
|
|
50
101
|
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
51
102
|
const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
|
|
52
103
|
if (!isEmpty(exactCountry)) {
|
|
104
|
+
if (isEqual(exactCountry[0].dialCode.toString(), countryObj.dialCode)) {
|
|
105
|
+
setIso2(countryObj.iso2);
|
|
106
|
+
return countryObj.format;
|
|
107
|
+
}
|
|
53
108
|
setIso2(exactCountry[0].iso2.toString());
|
|
54
109
|
localFormat = exactCountry[0].format.toString();
|
|
55
110
|
onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
|
|
56
111
|
setFormat(localFormat);
|
|
57
112
|
}
|
|
58
113
|
else if (!isEmpty(possibleCountries)) {
|
|
114
|
+
if (isEqual(possibleCountries[0].dialCode.toString(), countryObj.dialCode)) {
|
|
115
|
+
setIso2(countryObj.iso2);
|
|
116
|
+
return countryObj.format;
|
|
117
|
+
}
|
|
59
118
|
setIso2(possibleCountries[0].iso2.toString());
|
|
60
119
|
localFormat = possibleCountries[0].format.toString();
|
|
61
120
|
onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
|
|
@@ -84,7 +143,7 @@ export function PhoneInput(props) {
|
|
|
84
143
|
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
|
|
85
144
|
onPhoneValueChange(PREFIX + phone.trim());
|
|
86
145
|
}
|
|
87
|
-
else if (phone.length <= localFormat.length) {
|
|
146
|
+
else if (phone.length <= (localFormat === null || localFormat === void 0 ? void 0 : localFormat.length)) {
|
|
88
147
|
onPhoneValueChange(phone);
|
|
89
148
|
}
|
|
90
149
|
};
|
|
@@ -113,33 +172,6 @@ export function PhoneInput(props) {
|
|
|
113
172
|
});
|
|
114
173
|
return getOptions(newOptions);
|
|
115
174
|
};
|
|
116
|
-
// Formatting phone numbers according to country
|
|
117
|
-
const formatNumber = (fullPhoneNumber, localFormat) => {
|
|
118
|
-
if (isEmpty(fullPhoneNumber))
|
|
119
|
-
return '';
|
|
120
|
-
let localPhone = fullPhoneNumber.replace(PREFIX, '');
|
|
121
|
-
if (isEmpty(localPhone))
|
|
122
|
-
return '';
|
|
123
|
-
// Formatting inputted number
|
|
124
|
-
let phone = '';
|
|
125
|
-
[...fullPhoneNumber].forEach((ele) => {
|
|
126
|
-
if (ele >= '0' && ele <= '9') {
|
|
127
|
-
phone = phone.concat(ele);
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
let pattern = '';
|
|
131
|
-
let i = 0;
|
|
132
|
-
for (let j = 0; j < localFormat.length && i < phone.length; j++) {
|
|
133
|
-
if (localFormat[j] === '.') {
|
|
134
|
-
pattern += phone[i];
|
|
135
|
-
i++;
|
|
136
|
-
}
|
|
137
|
-
else {
|
|
138
|
-
pattern += localFormat[j];
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
return pattern;
|
|
142
|
-
};
|
|
143
175
|
const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
|
|
144
176
|
React.createElement("div", { className: "pf-u-display-inline-flex" },
|
|
145
177
|
React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
@@ -166,14 +198,26 @@ export function PhoneInput(props) {
|
|
|
166
198
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
167
199
|
}, [countryObj]);
|
|
168
200
|
useEffect(() => {
|
|
201
|
+
// when user types +, it will be replaced by empty string
|
|
202
|
+
if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
|
|
203
|
+
onPhoneValueChange('');
|
|
204
|
+
setFormattedNumber('');
|
|
205
|
+
return;
|
|
206
|
+
}
|
|
207
|
+
if (isEmpty(phoneValue) && isEmpty(iso2)) {
|
|
208
|
+
setCountryObj({ name: '', regions: [''], iso2: '', countryCode: '', dialCode: '', format: '' });
|
|
209
|
+
}
|
|
169
210
|
if (isEmpty(phoneValue)) {
|
|
170
211
|
setIso2('');
|
|
171
212
|
setInvalid && setInvalid(false);
|
|
172
213
|
setFormattedNumber('');
|
|
173
|
-
}
|
|
174
|
-
if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
|
|
175
214
|
onPhoneValueChange('');
|
|
176
|
-
|
|
215
|
+
}
|
|
216
|
+
else {
|
|
217
|
+
onPhoneValueChange(phoneValue);
|
|
218
|
+
const localFormat = setLocalFormat(phoneValue);
|
|
219
|
+
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
220
|
+
setFormattedNumber(_formattedNumber);
|
|
177
221
|
}
|
|
178
222
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
179
223
|
}, [phoneValue]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/components",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"description": "Contains all reusabel components for support app",
|
|
5
5
|
"author": "Vikas Rathee <vrathee@redhat.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"copy:img:cjs": "../../node_modules/.bin/copyfiles -V -u 1 -a 'src/**/*.png' 'src/**/*.jpg' 'src/**/*.gif' lib/cjs"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"@cee-eng/hydrajs": "4.15.
|
|
58
|
+
"@cee-eng/hydrajs": "4.15.87",
|
|
59
59
|
"@cee-eng/ui-toolkit": "1.1.6",
|
|
60
60
|
"@patternfly/patternfly": "4.196.7",
|
|
61
61
|
"@patternfly/react-core": "4.264.0",
|
|
@@ -74,14 +74,14 @@
|
|
|
74
74
|
"use-deep-compare-effect": "^1.6.1"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@cee-eng/hydrajs": "4.15.
|
|
77
|
+
"@cee-eng/hydrajs": "4.15.87",
|
|
78
78
|
"@cee-eng/ui-toolkit": "1.1.6",
|
|
79
79
|
"@patternfly/patternfly": "4.196.7",
|
|
80
80
|
"@patternfly/react-core": "4.264.0",
|
|
81
81
|
"@patternfly/react-table": "4.111.33",
|
|
82
82
|
"@rh-support/types": "2.0.2",
|
|
83
|
-
"@rh-support/user-permissions": "2.1.
|
|
84
|
-
"@rh-support/utils": "2.1.
|
|
83
|
+
"@rh-support/user-permissions": "2.1.3",
|
|
84
|
+
"@rh-support/utils": "2.1.1",
|
|
85
85
|
"dompurify": "^2.2.6",
|
|
86
86
|
"downshift": "^6.0.5",
|
|
87
87
|
"js-worker-search": "^1.4.1",
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
"defaults and supports es6-module",
|
|
118
118
|
"maintained node versions"
|
|
119
119
|
],
|
|
120
|
-
"gitHead": "
|
|
120
|
+
"gitHead": "4de9544feb2e412e3f3fc6c95843cce2419a026c"
|
|
121
121
|
}
|