@rh-support/components 2.1.3 → 2.1.4
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 +93 -64
- 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 +83 -55
- 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,eA+LvC"}
|
|
@@ -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.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,19 @@ 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();
|
|
73
120
|
let localFormat;
|
|
74
121
|
// Guessing countries according to user input
|
|
75
122
|
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
76
123
|
const exactCountry = initializedCountries.filter((country) => country.dialCode.toString() === localPhone);
|
|
77
|
-
if (!
|
|
124
|
+
if (!isEmpty_1.default(exactCountry)) {
|
|
78
125
|
setIso2(exactCountry[0].iso2.toString());
|
|
79
126
|
localFormat = exactCountry[0].format.toString();
|
|
80
127
|
onCountryCodeChange && onCountryCodeChange(PREFIX + exactCountry[0].dialCode.toString());
|
|
81
128
|
setFormat(localFormat);
|
|
82
129
|
}
|
|
83
|
-
else if (!
|
|
130
|
+
else if (!isEmpty_1.default(possibleCountries)) {
|
|
84
131
|
setIso2(possibleCountries[0].iso2.toString());
|
|
85
132
|
localFormat = possibleCountries[0].format.toString();
|
|
86
133
|
onCountryCodeChange && onCountryCodeChange(PREFIX + possibleCountries[0].dialCode.toString());
|
|
@@ -95,7 +142,7 @@ function PhoneInput(props) {
|
|
|
95
142
|
return localFormat;
|
|
96
143
|
};
|
|
97
144
|
const onPhoneChange = (phone) => {
|
|
98
|
-
if (
|
|
145
|
+
if (isEmpty_1.default(phone.trim()) || isEmpty_1.default(phone.replace(PREFIX, '').trim())) {
|
|
99
146
|
setFormattedNumber('');
|
|
100
147
|
onPhoneValueChange('');
|
|
101
148
|
setInvalid && setInvalid(false);
|
|
@@ -106,7 +153,7 @@ function PhoneInput(props) {
|
|
|
106
153
|
const localFormat = setLocalFormat(phone);
|
|
107
154
|
const _formattedNumber = formatNumber(phone, localFormat);
|
|
108
155
|
setFormattedNumber(_formattedNumber);
|
|
109
|
-
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !
|
|
156
|
+
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual_1.default(phone, '-')) {
|
|
110
157
|
onPhoneValueChange(PREFIX + phone.trim());
|
|
111
158
|
}
|
|
112
159
|
else if (phone.length <= localFormat.length) {
|
|
@@ -138,43 +185,16 @@ function PhoneInput(props) {
|
|
|
138
185
|
});
|
|
139
186
|
return getOptions(newOptions);
|
|
140
187
|
};
|
|
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
188
|
const placeholder = (react_1.default.createElement("div", { className: "phone-number-select-placeholder" },
|
|
169
189
|
react_1.default.createElement("div", { className: "pf-u-display-inline-flex" },
|
|
170
190
|
react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
171
191
|
iso2.toUpperCase())));
|
|
172
192
|
react_1.useEffect(() => {
|
|
173
|
-
if (
|
|
193
|
+
if (isEmpty_1.default(phoneValue)) {
|
|
174
194
|
setInvalid && setInvalid(false);
|
|
175
195
|
return;
|
|
176
196
|
}
|
|
177
|
-
if (
|
|
197
|
+
if (isEmpty_1.default(iso2)) {
|
|
178
198
|
const localFormat = setLocalFormat(phoneValue);
|
|
179
199
|
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
180
200
|
setFormattedNumber(_formattedNumber);
|
|
@@ -182,7 +202,7 @@ function PhoneInput(props) {
|
|
|
182
202
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
183
203
|
}, []);
|
|
184
204
|
react_1.useEffect(() => {
|
|
185
|
-
if (!
|
|
205
|
+
if (!isEmpty_1.default(countryObj.iso2) && `${PREFIX}${countryObj.dialCode}` !== countryCode) {
|
|
186
206
|
setIso2(countryObj.iso2);
|
|
187
207
|
setFormat(countryObj.format);
|
|
188
208
|
onPhoneValueChange(`${PREFIX}${countryObj.dialCode}`);
|
|
@@ -191,14 +211,23 @@ function PhoneInput(props) {
|
|
|
191
211
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
192
212
|
}, [countryObj]);
|
|
193
213
|
react_1.useEffect(() => {
|
|
194
|
-
|
|
214
|
+
// when user types +, it will be replaced by empty string
|
|
215
|
+
if (isEqual_1.default(phoneValue.trim(), PREFIX) && isEmpty_1.default(iso2)) {
|
|
216
|
+
onPhoneValueChange('');
|
|
217
|
+
setFormattedNumber('');
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
if (isEmpty_1.default(phoneValue)) {
|
|
195
221
|
setIso2('');
|
|
196
222
|
setInvalid && setInvalid(false);
|
|
197
223
|
setFormattedNumber('');
|
|
198
|
-
}
|
|
199
|
-
if (lodash_1.isEqual(phoneValue.trim(), PREFIX) && lodash_1.isEmpty(iso2)) {
|
|
200
224
|
onPhoneValueChange('');
|
|
201
|
-
|
|
225
|
+
}
|
|
226
|
+
else {
|
|
227
|
+
onPhoneValueChange(phoneValue);
|
|
228
|
+
const localFormat = setLocalFormat(phoneValue);
|
|
229
|
+
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
230
|
+
setFormattedNumber(_formattedNumber);
|
|
202
231
|
}
|
|
203
232
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
204
233
|
}, [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,eA+LvC"}
|
|
@@ -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.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,27 +89,6 @@ 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();
|
|
48
94
|
let localFormat;
|
|
@@ -113,33 +159,6 @@ export function PhoneInput(props) {
|
|
|
113
159
|
});
|
|
114
160
|
return getOptions(newOptions);
|
|
115
161
|
};
|
|
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
162
|
const placeholder = (React.createElement("div", { className: "phone-number-select-placeholder" },
|
|
144
163
|
React.createElement("div", { className: "pf-u-display-inline-flex" },
|
|
145
164
|
React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
@@ -166,14 +185,23 @@ export function PhoneInput(props) {
|
|
|
166
185
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
167
186
|
}, [countryObj]);
|
|
168
187
|
useEffect(() => {
|
|
188
|
+
// when user types +, it will be replaced by empty string
|
|
189
|
+
if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
|
|
190
|
+
onPhoneValueChange('');
|
|
191
|
+
setFormattedNumber('');
|
|
192
|
+
return;
|
|
193
|
+
}
|
|
169
194
|
if (isEmpty(phoneValue)) {
|
|
170
195
|
setIso2('');
|
|
171
196
|
setInvalid && setInvalid(false);
|
|
172
197
|
setFormattedNumber('');
|
|
173
|
-
}
|
|
174
|
-
if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
|
|
175
198
|
onPhoneValueChange('');
|
|
176
|
-
|
|
199
|
+
}
|
|
200
|
+
else {
|
|
201
|
+
onPhoneValueChange(phoneValue);
|
|
202
|
+
const localFormat = setLocalFormat(phoneValue);
|
|
203
|
+
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
204
|
+
setFormattedNumber(_formattedNumber);
|
|
177
205
|
}
|
|
178
206
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
179
207
|
}, [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.4",
|
|
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": "d0220cf8078eb0da56f34f1cf0598edad0704669"
|
|
121
121
|
}
|