Skip to content

Commit 7ff6ec4

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement disableParentheses option (GH-98)
2 parents 25811de + 6e5711d commit 7ff6ec4

File tree

9 files changed

+58
-22
lines changed

9 files changed

+58
-22
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ Apart from the phone-specific properties described below, all [Input](https://an
6969
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
7070
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
7171
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
72+
| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
7273
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
7374
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
7475
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |

‎examples/antd4.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"@types/react": "^18.2.0",
88
"@types/react-dom": "^18.2.0",
99
"antd": "^4.24.8",
10-
"antd-phone-input": "^0.3.5",
10+
"antd-phone-input": "^0.3.8",
1111
"craco-less": "^2.0.0",
1212
"react": "^18.2.0",
1313
"react-dom": "^18.2.0",

‎examples/antd4.x/src/Demo.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Demo = () => {
2424
const [copied, setCopied] = useState(false);
2525
const [dropdown, setDropdown] = useState(true);
2626
const [disabled, setDisabled] = useState(false);
27+
const [parentheses, setParentheses] = useState(true);
2728

2829
const validator = useCallback((_: any, {valid}: any) => {
2930
if (valid(strict)) return Promise.resolve();
@@ -35,10 +36,11 @@ const Demo = () => {
3536
if (disabled) code += " disabled\n";
3637
if (search && dropdown) code += " enableSearch\n";
3738
if (!dropdown) code += " disableDropdown\n";
39+
if (!parentheses) code += " disableParentheses\n";
3840
if (code === "<PhoneInput\n") code = "<PhoneInput />";
3941
else code += "/>";
4042
return code;
41-
}, [disabled, search, dropdown])
43+
}, [disabled, search, dropdown, parentheses])
4244

4345
const changeTheme = () => {
4446
const pathname = window.location.pathname.replace(/\/$/, '');
@@ -95,15 +97,15 @@ const Demo = () => {
9597
</Form.Item>
9698
</div>
9799
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
98-
<Form.Item label="Search" style={{margin: 0}}>
100+
<Form.Item label="Search">
99101
<Switch
100102
disabled={!dropdown}
101103
checkedChildren="enabled"
102104
unCheckedChildren="disabled"
103105
onChange={() => setSearch(!search)}
104106
/>
105107
</Form.Item>
106-
<Form.Item label="Dropdown" style={{margin: 0}}>
108+
<Form.Item label="Dropdown">
107109
<Switch
108110
defaultChecked
109111
checkedChildren="enabled"
@@ -112,6 +114,16 @@ const Demo = () => {
112114
/>
113115
</Form.Item>
114116
</div>
117+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
118+
<Form.Item label="Parentheses" style={{margin: 0}}>
119+
<Switch
120+
defaultChecked
121+
checkedChildren="enabled"
122+
unCheckedChildren="disabled"
123+
onChange={() => setParentheses(!parentheses)}
124+
/>
125+
</Form.Item>
126+
</div>
115127
<Divider orientation="left" plain>Code</Divider>
116128
<div style={{position: "relative"}}>
117129
<Button
@@ -140,6 +152,7 @@ const Demo = () => {
140152
disabled={disabled}
141153
enableSearch={search}
142154
disableDropdown={!dropdown}
155+
disableParentheses={!parentheses}
143156
/>
144157
</FormItem>
145158
{value && (

‎examples/antd5.x/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@types/react": "^18.2.0",
77
"@types/react-dom": "^18.2.0",
88
"antd": "^5.8.3",
9-
"antd-phone-input": "^0.3.5",
9+
"antd-phone-input": "^0.3.8",
1010
"copy-to-clipboard": "^3.3.3",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",

‎examples/antd5.x/src/Demo.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const Demo = () => {
2828
const [copied, setCopied] = useState(false);
2929
const [dropdown, setDropdown] = useState(true);
3030
const [disabled, setDisabled] = useState(false);
31+
const [parentheses, setParentheses] = useState(true);
3132
const [algorithm, setAlgorithm] = useState("defaultAlgorithm");
3233

3334
const validator = useCallback((_: any, {valid}: any) => {
@@ -40,10 +41,11 @@ const Demo = () => {
4041
if (disabled) code += " disabled\n";
4142
if (search && dropdown) code += " enableSearch\n";
4243
if (!dropdown) code += " disableDropdown\n";
44+
if (!parentheses) code += " disableParentheses\n";
4345
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4446
else code += "/>";
4547
return code;
46-
}, [disabled, search, dropdown])
48+
}, [disabled, search, dropdown, parentheses])
4749

4850
const changeTheme = () => {
4951
if (algorithm === "defaultAlgorithm") {
@@ -100,15 +102,15 @@ const Demo = () => {
100102
</Form.Item>
101103
</div>
102104
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
103-
<Form.Item label="Search" style={{margin: 0}}>
105+
<Form.Item label="Search">
104106
<Switch
105107
disabled={!dropdown}
106108
checkedChildren="enabled"
107109
unCheckedChildren="disabled"
108110
onChange={() => setSearch(!search)}
109111
/>
110112
</Form.Item>
111-
<Form.Item label="Dropdown" style={{margin: 0}}>
113+
<Form.Item label="Dropdown">
112114
<Switch
113115
defaultChecked
114116
checkedChildren="enabled"
@@ -117,6 +119,16 @@ const Demo = () => {
117119
/>
118120
</Form.Item>
119121
</div>
122+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
123+
<Form.Item label="Parentheses" style={{margin: 0}}>
124+
<Switch
125+
defaultChecked
126+
checkedChildren="enabled"
127+
unCheckedChildren="disabled"
128+
onChange={() => setParentheses(!parentheses)}
129+
/>
130+
</Form.Item>
131+
</div>
120132
<Divider orientation="left" plain>Code</Divider>
121133
<div style={{position: "relative"}}>
122134
<Button
@@ -145,6 +157,7 @@ const Demo = () => {
145157
disabled={disabled}
146158
enableSearch={search}
147159
disableDropdown={!dropdown}
160+
disableParentheses={!parentheses}
148161
/>
149162
</FormItem>
150163
{value && (

‎examples/deploy.sh‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ git restore .
44
git pull
55

66
cd ~/antd-phone-input/examples/antd4.x
7+
rm -r node_modules package-lock.json
78
npm install --legacy-peer-deps && npm run build
89

910
cd ~/antd-phone-input/examples/antd5.x
11+
rm -r node_modules package-lock.json
1012
npm install && npm run build
1113

1214
sudo rm -r /var/www/playground/antd-phone-input/*

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.3.7",
2+
"version": "0.3.8",
33
"name": "antd-phone-input",
44
"description": "Advanced, highly customizable phone input component for Ant Design.",
55
"keywords": [
@@ -70,7 +70,7 @@
7070
"react": ">=16"
7171
},
7272
"dependencies": {
73-
"react-phone-hooks": "^0.1.4"
73+
"react-phone-hooks": "^0.1.5"
7474
},
7575
"devDependencies": {
7676
"@testing-library/react": "^14.0.0",

‎src/index.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const PhoneInput = forwardRef(({
4141
disabled = false,
4242
enableSearch = false,
4343
disableDropdown = false,
44+
disableParentheses = false,
4445
onlyCountries = [],
4546
excludeCountries = [],
4647
preferredCountries = [],
@@ -81,6 +82,7 @@ const PhoneInput = forwardRef(({
8182
onlyCountries,
8283
excludeCountries,
8384
preferredCountries,
85+
disableParentheses,
8486
});
8587

8688
const {
@@ -211,19 +213,22 @@ const PhoneInput = forwardRef(({
211213
</div>
212214
)}
213215
>
214-
{countriesList.map(([iso, name, dial, mask]) => (
215-
<Select.Option
216-
value={iso + dial}
217-
key={`${iso}_${mask}`}
218-
label={<div className={`flag ${iso}`}/>}
219-
children={<div className={`${prefixCls}-phone-input-select-item`}>
220-
<div className={`flag ${iso}`}/>
221-
{name}&nbsp;{displayFormat(mask)}
222-
</div>}
223-
/>
224-
))}
216+
{countriesList.map(([iso, name, dial, pattern]) => {
217+
const mask = disableParentheses ? pattern.replace(/[()]/g, "") : pattern;
218+
return (
219+
<Select.Option
220+
value={iso + dial}
221+
key={`${iso}_${mask}`}
222+
label={<div className={`flag ${iso}`}/>}
223+
children={<div className={`${prefixCls}-phone-input-select-item`}>
224+
<div className={`flag ${iso}`}/>
225+
{name}&nbsp;{displayFormat(mask)}
226+
</div>}
227+
/>
228+
)
229+
})}
225230
</Select>
226-
), [selectValue, query, disabled, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
231+
), [selectValue, query, disabled, disableParentheses, disableDropdown, onDropdownVisibleChange, minWidth, searchNotFound, countriesList, setFieldValue, setValue, prefixCls, enableSearch, searchPlaceholder])
227232

228233
return (
229234
<div className={`${prefixCls}-phone-input-wrapper`}

‎src/types.ts‎

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

2020
disableDropdown?: boolean;
2121

22+
disableParentheses?: boolean;
23+
2224
onlyCountries?: string[];
2325

2426
excludeCountries?: string[];

0 commit comments

Comments
 (0)