@rh-support/components 2.1.0 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4OvC"}
|
|
@@ -69,7 +69,7 @@ function PhoneInput(props) {
|
|
|
69
69
|
return countryItem;
|
|
70
70
|
});
|
|
71
71
|
const setLocalFormat = (phoneNumber) => {
|
|
72
|
-
let localPhone = phoneNumber.replace(PREFIX, '');
|
|
72
|
+
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
73
73
|
let localFormat;
|
|
74
74
|
// Guessing countries according to user input
|
|
75
75
|
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
@@ -95,9 +95,10 @@ function PhoneInput(props) {
|
|
|
95
95
|
return localFormat;
|
|
96
96
|
};
|
|
97
97
|
const onPhoneChange = (phone) => {
|
|
98
|
-
if (lodash_1.isEmpty(phone.replace(PREFIX, ''))) {
|
|
98
|
+
if (lodash_1.isEmpty(phone.trim()) || lodash_1.isEmpty(phone.replace(PREFIX, '').trim())) {
|
|
99
99
|
setFormattedNumber('');
|
|
100
100
|
onPhoneValueChange('');
|
|
101
|
+
setInvalid && setInvalid(false);
|
|
101
102
|
}
|
|
102
103
|
const regex = /^[\d ()+-]+$/;
|
|
103
104
|
if (setInvalid)
|
|
@@ -105,10 +106,10 @@ function PhoneInput(props) {
|
|
|
105
106
|
const localFormat = setLocalFormat(phone);
|
|
106
107
|
const _formattedNumber = formatNumber(phone, localFormat);
|
|
107
108
|
setFormattedNumber(_formattedNumber);
|
|
108
|
-
if (!
|
|
109
|
-
onPhoneValueChange(
|
|
109
|
+
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !lodash_1.isEqual(phone, '-')) {
|
|
110
|
+
onPhoneValueChange(PREFIX + phone.trim());
|
|
110
111
|
}
|
|
111
|
-
else if (phone.length <=
|
|
112
|
+
else if (phone.length <= localFormat.length) {
|
|
112
113
|
onPhoneValueChange(phone);
|
|
113
114
|
}
|
|
114
115
|
};
|
|
@@ -169,8 +170,10 @@ function PhoneInput(props) {
|
|
|
169
170
|
react_1.default.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
170
171
|
iso2.toUpperCase())));
|
|
171
172
|
react_1.useEffect(() => {
|
|
172
|
-
if (lodash_1.isEmpty(phoneValue))
|
|
173
|
+
if (lodash_1.isEmpty(phoneValue)) {
|
|
174
|
+
setInvalid && setInvalid(false);
|
|
173
175
|
return;
|
|
176
|
+
}
|
|
174
177
|
if (lodash_1.isEmpty(iso2)) {
|
|
175
178
|
const localFormat = setLocalFormat(phoneValue);
|
|
176
179
|
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
@@ -193,6 +196,10 @@ function PhoneInput(props) {
|
|
|
193
196
|
setInvalid && setInvalid(false);
|
|
194
197
|
setFormattedNumber('');
|
|
195
198
|
}
|
|
199
|
+
if (lodash_1.isEqual(phoneValue.trim(), PREFIX) && lodash_1.isEmpty(iso2)) {
|
|
200
|
+
onPhoneValueChange('');
|
|
201
|
+
setFormattedNumber('');
|
|
202
|
+
}
|
|
196
203
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
197
204
|
}, [phoneValue]);
|
|
198
205
|
return (react_1.default.createElement(react_core_1.InputGroup, { className: "phone-number-input" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../src/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAS3B,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;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,eA4OvC"}
|
|
@@ -44,7 +44,7 @@ export function PhoneInput(props) {
|
|
|
44
44
|
return countryItem;
|
|
45
45
|
});
|
|
46
46
|
const setLocalFormat = (phoneNumber) => {
|
|
47
|
-
let localPhone = phoneNumber.replace(PREFIX, '');
|
|
47
|
+
let localPhone = phoneNumber.replace(PREFIX, '').trim();
|
|
48
48
|
let localFormat;
|
|
49
49
|
// Guessing countries according to user input
|
|
50
50
|
const possibleCountries = initializedCountries.filter((country) => localPhone === null || localPhone === void 0 ? void 0 : localPhone.startsWith(country.dialCode.toString()));
|
|
@@ -70,9 +70,10 @@ export function PhoneInput(props) {
|
|
|
70
70
|
return localFormat;
|
|
71
71
|
};
|
|
72
72
|
const onPhoneChange = (phone) => {
|
|
73
|
-
if (isEmpty(phone.replace(PREFIX, ''))) {
|
|
73
|
+
if (isEmpty(phone.trim()) || isEmpty(phone.replace(PREFIX, '').trim())) {
|
|
74
74
|
setFormattedNumber('');
|
|
75
75
|
onPhoneValueChange('');
|
|
76
|
+
setInvalid && setInvalid(false);
|
|
76
77
|
}
|
|
77
78
|
const regex = /^[\d ()+-]+$/;
|
|
78
79
|
if (setInvalid)
|
|
@@ -80,10 +81,10 @@ export function PhoneInput(props) {
|
|
|
80
81
|
const localFormat = setLocalFormat(phone);
|
|
81
82
|
const _formattedNumber = formatNumber(phone, localFormat);
|
|
82
83
|
setFormattedNumber(_formattedNumber);
|
|
83
|
-
if (!
|
|
84
|
-
onPhoneValueChange(
|
|
84
|
+
if (!phone.trim().startsWith(PREFIX) && regex.test(phone) && !isEqual(phone, '-')) {
|
|
85
|
+
onPhoneValueChange(PREFIX + phone.trim());
|
|
85
86
|
}
|
|
86
|
-
else if (phone.length <=
|
|
87
|
+
else if (phone.length <= localFormat.length) {
|
|
87
88
|
onPhoneValueChange(phone);
|
|
88
89
|
}
|
|
89
90
|
};
|
|
@@ -144,8 +145,10 @@ export function PhoneInput(props) {
|
|
|
144
145
|
React.createElement("div", { className: `flag ${iso2}`, style: { marginRight: '5px' } }),
|
|
145
146
|
iso2.toUpperCase())));
|
|
146
147
|
useEffect(() => {
|
|
147
|
-
if (isEmpty(phoneValue))
|
|
148
|
+
if (isEmpty(phoneValue)) {
|
|
149
|
+
setInvalid && setInvalid(false);
|
|
148
150
|
return;
|
|
151
|
+
}
|
|
149
152
|
if (isEmpty(iso2)) {
|
|
150
153
|
const localFormat = setLocalFormat(phoneValue);
|
|
151
154
|
const _formattedNumber = formatNumber(phoneValue, localFormat);
|
|
@@ -168,6 +171,10 @@ export function PhoneInput(props) {
|
|
|
168
171
|
setInvalid && setInvalid(false);
|
|
169
172
|
setFormattedNumber('');
|
|
170
173
|
}
|
|
174
|
+
if (isEqual(phoneValue.trim(), PREFIX) && isEmpty(iso2)) {
|
|
175
|
+
onPhoneValueChange('');
|
|
176
|
+
setFormattedNumber('');
|
|
177
|
+
}
|
|
171
178
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
172
179
|
}, [phoneValue]);
|
|
173
180
|
return (React.createElement(InputGroup, { className: "phone-number-input" },
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rh-support/components",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "Contains all reusabel components for support app",
|
|
5
5
|
"author": "Vikas Rathee <vrathee@redhat.com>",
|
|
6
6
|
"license": "ISC",
|
|
@@ -80,7 +80,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.
|
|
83
|
+
"@rh-support/user-permissions": "2.1.2",
|
|
84
84
|
"@rh-support/utils": "2.1.0",
|
|
85
85
|
"dompurify": "^2.2.6",
|
|
86
86
|
"downshift": "^6.0.5",
|
|
@@ -117,5 +117,5 @@
|
|
|
117
117
|
"defaults and supports es6-module",
|
|
118
118
|
"maintained node versions"
|
|
119
119
|
],
|
|
120
|
-
"gitHead": "
|
|
120
|
+
"gitHead": "01f23b19ee074f6515c54b2cdec744deb3ba2c1b"
|
|
121
121
|
}
|