Skip to content

Commit 313d8e7

Browse files
ArtyomVancyanArtyomVancyan
committed
Add disableParentheses option for MUI and fix area code regexp pattern
1 parent d409666 commit 313d8e7

File tree

8 files changed

+83
-56
lines changed

8 files changed

+83
-56
lines changed

‎development/src/mui-phone/base/index.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,17 @@ import {PhoneInputProps, PhoneNumber} from "./types";
1919
injectMergedStyles();
2020

2121
const Input = forwardRef<HTMLInputElement, InputProps>(({slotProps, ...props}, ref) => {
22-
const defaultInputProps = (slotProps?.input as any)?.className ? {} : {outline: "none", border: "none", paddingLeft: 5, width: "calc(100% - 30px)"};
23-
const defaultRootProps = (slotProps?.root as any)?.className ? {} : {background: "white", color: "black", paddingLeft: 5};
22+
const defaultInputProps = (slotProps?.input as any)?.className ? {} : {
23+
outline: "none",
24+
border: "none",
25+
paddingLeft: 5,
26+
width: "calc(100% - 30px)"
27+
};
28+
const defaultRootProps = (slotProps?.root as any)?.className ? {} : {
29+
background: "white",
30+
color: "black",
31+
paddingLeft: 5
32+
};
2433
return (
2534
<BaseInput
2635
ref={ref}
@@ -51,6 +60,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({slotProps, ...props}, r
5160
const PhoneInput = forwardRef(({
5261
value: initialValue = "",
5362
country = getDefaultISO2Code(),
63+
disableParentheses = false,
5464
onlyCountries = [],
5565
excludeCountries = [],
5666
preferredCountries = [],
@@ -76,6 +86,7 @@ const PhoneInput = forwardRef(({
7686
onlyCountries,
7787
excludeCountries,
7888
preferredCountries,
89+
disableParentheses,
7990
});
8091

8192
const {

‎development/src/mui-phone/base/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export interface PhoneInputProps extends Omit<InputProps, "onChange"> {
1111

1212
country?: string;
1313

14+
disableParentheses?: boolean;
15+
1416
onlyCountries?: string[];
1517

1618
excludeCountries?: string[];

‎development/src/mui-phone/index.tsx

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const PhoneInput = forwardRef(({
2929
disabled = false,
3030
enableSearch = false,
3131
disableDropdown = false,
32+
disableParentheses = false,
3233
onlyCountries = [],
3334
excludeCountries = [],
3435
preferredCountries = [],
@@ -63,6 +64,7 @@ const PhoneInput = forwardRef(({
6364
onlyCountries,
6465
excludeCountries,
6566
preferredCountries,
67+
disableParentheses,
6668
});
6769

6870
const {
@@ -145,33 +147,36 @@ const PhoneInput = forwardRef(({
145147
/>
146148
)}
147149
<div className="mui-phone-input-search-list">
148-
{countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (
149-
<MenuItem
150-
disableRipple
151-
key={iso + mask}
152-
value={iso + dial}
153-
style={{maxWidth}}
154-
selected={selectValue === iso + dial}
155-
onClick={() => {
156-
const formattedNumber = getFormattedNumber(mask, mask);
157-
const input = inputRef.current.querySelector("input");
158-
input.value = formattedNumber;
159-
setValue(formattedNumber);
160-
setCountryCode(iso);
161-
setQuery("");
162-
const nativeInputValueSetter = (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") as any).set;
163-
nativeInputValueSetter.call(input, formattedNumber);
164-
input.dispatchEvent(new Event("change", {bubbles: true}));
165-
setTimeout(() => input.focus(), 100);
166-
}}
167-
children={<div className="mui-phone-input-select-item">
168-
<div className={`flag ${iso}`}/>
169-
<div className="label">
170-
{name}&nbsp;{displayFormat(mask)}
171-
</div>
172-
</div>}
173-
/>
174-
)) : <MenuItem disabled>{searchNotFound}</MenuItem>}
150+
{countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
151+
const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
152+
return (
153+
<MenuItem
154+
disableRipple
155+
key={iso + mask}
156+
value={iso + dial}
157+
style={{maxWidth}}
158+
selected={selectValue === iso + dial}
159+
onClick={() => {
160+
const formattedNumber = getFormattedNumber(mask, mask);
161+
const input = inputRef.current.querySelector("input");
162+
input.value = formattedNumber;
163+
setValue(formattedNumber);
164+
setCountryCode(iso);
165+
setQuery("");
166+
const nativeInputValueSetter = (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") as any).set;
167+
nativeInputValueSetter.call(input, formattedNumber);
168+
input.dispatchEvent(new Event("change", {bubbles: true}));
169+
setTimeout(() => input.focus(), 100);
170+
}}
171+
children={<div className="mui-phone-input-select-item">
172+
<div className={`flag ${iso}`}/>
173+
<div className="label">
174+
{name}&nbsp;{displayFormat(mask)}
175+
</div>
176+
</div>}
177+
/>
178+
)
179+
}) : <MenuItem disabled>{searchNotFound}</MenuItem>}
175180
</div>
176181
</div>
177182
</Select>

‎development/src/mui-phone/joy/index.tsx

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const PhoneInput = forwardRef(({
2929
disabled = false,
3030
enableSearch = false,
3131
disableDropdown = false,
32+
disableParentheses = false,
3233
onlyCountries = [],
3334
excludeCountries = [],
3435
preferredCountries = [],
@@ -63,6 +64,7 @@ const PhoneInput = forwardRef(({
6364
onlyCountries,
6465
excludeCountries,
6566
preferredCountries,
67+
disableParentheses,
6668
});
6769

6870
const {
@@ -144,31 +146,34 @@ const PhoneInput = forwardRef(({
144146
/>
145147
)}
146148
<div className="mui-phone-input-search-list">
147-
{countriesList.length ? countriesList.map(([iso, name, dial, mask]) => (
148-
<Option
149-
key={iso + mask}
150-
style={{maxWidth}}
151-
value={iso + dial}
152-
onClick={() => {
153-
const formattedNumber = getFormattedNumber(mask, mask);
154-
const input = inputRef.current.querySelector("input");
155-
input.value = formattedNumber;
156-
setValue(formattedNumber);
157-
setCountryCode(iso);
158-
setQuery("");
159-
const nativeInputValueSetter = (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") as any).set;
160-
nativeInputValueSetter.call(input, formattedNumber);
161-
input.dispatchEvent(new Event("change", {bubbles: true}));
162-
setTimeout(() => input.focus(), 100);
163-
}}
164-
children={<div className="mui-phone-input-select-item">
165-
<div className={`flag ${iso}`}/>
166-
<div className="label">
167-
{name}&nbsp;{displayFormat(mask)}
168-
</div>
169-
</div>}
170-
/>
171-
)) : <Option value="N/A" disabled>{searchNotFound}</Option>}
149+
{countriesList.length ? countriesList.map(([iso, name, dial, pattern]) => {
150+
const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
151+
return (
152+
<Option
153+
key={iso + mask}
154+
style={{maxWidth}}
155+
value={iso + dial}
156+
onClick={() => {
157+
const formattedNumber = getFormattedNumber(mask, mask);
158+
const input = inputRef.current.querySelector("input");
159+
input.value = formattedNumber;
160+
setValue(formattedNumber);
161+
setCountryCode(iso);
162+
setQuery("");
163+
const nativeInputValueSetter = (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value") as any).set;
164+
nativeInputValueSetter.call(input, formattedNumber);
165+
input.dispatchEvent(new Event("change", {bubbles: true}));
166+
setTimeout(() => input.focus(), 100);
167+
}}
168+
children={<div className="mui-phone-input-select-item">
169+
<div className={`flag ${iso}`}/>
170+
<div className="label">
171+
{name}&nbsp;{displayFormat(mask)}
172+
</div>
173+
</div>}
174+
/>
175+
)
176+
}) : <Option value="N/A" disabled>{searchNotFound}</Option>}
172177
</div>
173178
</div>
174179
</Select>

‎development/src/mui-phone/joy/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export interface PhoneInputProps extends Omit<InputProps, "value" | "onChange">
2121

2222
disableDropdown?: boolean;
2323

24+
disableParentheses?: boolean;
25+
2426
onlyCountries?: string[];
2527

2628
excludeCountries?: string[];

‎development/src/mui-phone/types.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
2121

2222
disableDropdown?: boolean;
2323

24+
disableParentheses?: boolean;
25+
2426
onlyCountries?: string[];
2527

2628
excludeCountries?: string[];

‎development/src/phone-hooks/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const parsePhoneNumber = (formattedNumber: string, countriesList: typeof
5656
const value = getRawValue(formattedNumber);
5757
const isoCode = getMetadata(value, countriesList, country)?.[0] || getDefaultISO2Code();
5858
const countryCodePattern = /\+\d+/;
59-
const areaCodePattern = /\((\d+)\)/;
59+
const areaCodePattern = /^\+\d+\s\(?(\d+)/;
6060

6161
/** Parses the matching partials of the phone number by predefined regex patterns */
6262
const countryCodeMatch = formattedNumber ? (formattedNumber.match(countryCodePattern) || []) : [];

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const parsePhoneNumber = (formattedNumber: string, countriesList: typeof
5656
const value = getRawValue(formattedNumber);
5757
const isoCode = getMetadata(value, countriesList, country)?.[0] || getDefaultISO2Code();
5858
const countryCodePattern = /\+\d+/;
59-
const areaCodePattern = /\((\d+)\)/;
59+
const areaCodePattern = /^\+\d+\s\(?(\d+)/;
6060

6161
/** Parses the matching partials of the phone number by predefined regex patterns */
6262
const countryCodeMatch = formattedNumber ? (formattedNumber.match(countryCodePattern) || []) : [];

0 commit comments

Comments
 (0)