Skip to content

Commit 72c04d6

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement a distinct option for the countries list (GH-117)
2 parents 06e63c5 + 57059e5 commit 72c04d6

File tree

8 files changed

+98
-79
lines changed

8 files changed

+98
-79
lines changed

‎README.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ The value of the component is an object containing the parts of the phone number
3131
3232
## Validation
3333
34-
The validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown below:
34+
The validation is checked by the `valid` function of the value object that returns a boolean value. An example with the [react-hook-form](https://www.npmjs.com/package/react-hook-form) is shown [here](https://github.com/typesnippet/antd-phone-input/issues/64#issuecomment-1855867861).
3535
3636
```javascript
3737
import React from "react";
@@ -75,22 +75,23 @@ NOTE: If you use localization in the [documented](https://ant.design/docs/react/
7575
7676
Apart from the phone-specific properties described below, all [Input](https://ant.design/components/input#input) properties supported by the used Ant Design version can be applied to the phone input component.
7777
78-
| Property | Description | Type |
79-
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|
80-
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
81-
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
82-
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
83-
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
84-
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
85-
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
86-
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
87-
| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
88-
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
89-
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
90-
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
91-
| dropdownRender | Customize the dropdown menu content. | (menu: ReactNode) => ReactNode |
92-
| onChange | The only difference from the original `onChange` is that value comes first. | function(value, event) |
93-
| onMount | The callback is triggered once the component gets mounted. | function(value) |
78+
| Property | Description | Type |
79+
|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------|
80+
| value | An object containing a parsed phone number or the raw number. This also applies to the `initialValue` property of [Form.Item](https://ant.design/components/form#formitem). | [object](#value) / string |
81+
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
82+
| distinct | Show the distinct list of country codes not listing all area codes. | boolean |
83+
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
84+
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
85+
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
86+
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
87+
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
88+
| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
89+
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
90+
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
91+
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
92+
| dropdownRender | Customize the dropdown menu content. | (menu: ReactNode) => ReactNode |
93+
| onChange | The only difference from the original `onChange` is that value comes first. | function(value, event) |
94+
| onMount | The callback is triggered once the component gets mounted. | function(value) |
9495
9596
## Contribute
9697

‎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.9",
10+
"antd-phone-input": "^0.3.13",
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: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Demo = () => {
2424
const [search, setSearch] = useState(false);
2525
const [copied, setCopied] = useState(false);
2626
const [dropdown, setDropdown] = useState(true);
27+
const [distinct, setDistinct] = useState(false);
2728
const [disabled, setDisabled] = useState(false);
2829
const [parentheses, setParentheses] = useState(true);
2930

@@ -35,14 +36,15 @@ const Demo = () => {
3536
const code = useMemo(() => {
3637
let code = "<PhoneInput\n";
3738
if (disabled) code += " disabled\n";
39+
if (distinct) code += " distinct\n";
3840
if (arrow) code += " enableArrow\n";
3941
if (search && dropdown) code += " enableSearch\n";
4042
if (!dropdown) code += " disableDropdown\n";
4143
if (!parentheses) code += " disableParentheses\n";
4244
if (code === "<PhoneInput\n") code = "<PhoneInput />";
4345
else code += "/>";
4446
return code;
45-
}, [disabled, arrow, search, dropdown, parentheses])
47+
}, [distinct, disabled, arrow, search, dropdown, parentheses])
4648

4749
const changeTheme = () => {
4850
const pathname = window.location.pathname.replace(/\/$/, '');
@@ -78,26 +80,6 @@ const Demo = () => {
7880
the component behaves. Also, see the code for the component and the value it returns.
7981
</Paragraph>
8082
<Divider orientation="left" plain>Settings</Divider>
81-
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
82-
<Form.Item label="Theme">
83-
<Switch
84-
onChange={changeTheme}
85-
checkedChildren={<MoonOutlined/>}
86-
unCheckedChildren={<SunOutlined/>}
87-
defaultChecked={window.location.pathname.endsWith("/dark")}
88-
/>
89-
</Form.Item>
90-
<Form.Item label="Validation">
91-
<Switch
92-
checkedChildren="strict"
93-
unCheckedChildren="default"
94-
onChange={() => setStrict(!strict)}
95-
/>
96-
</Form.Item>
97-
<Form.Item label="Disabled">
98-
<Switch onChange={() => setDisabled(!disabled)}/>
99-
</Form.Item>
100-
</div>
10183
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
10284
<Form.Item label="Dropdown">
10385
<Switch
@@ -117,22 +99,47 @@ const Demo = () => {
11799
</Form.Item>
118100
</div>
119101
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
120-
<Form.Item label="Search" style={{margin: 0}}>
102+
<Form.Item label="Search">
121103
<Switch
122104
disabled={!dropdown}
123105
checkedChildren="enabled"
124106
unCheckedChildren="disabled"
125107
onChange={() => setSearch(!search)}
126108
/>
127109
</Form.Item>
128-
<Form.Item label="Arrow" style={{margin: 0}}>
110+
<Form.Item label="Arrow">
129111
<Switch
130112
checkedChildren="enabled"
131113
unCheckedChildren="disabled"
132114
onChange={() => setArrow(!arrow)}
133115
/>
134116
</Form.Item>
135117
</div>
118+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
119+
<Form.Item label="Theme">
120+
<Switch
121+
onChange={changeTheme}
122+
checkedChildren={<MoonOutlined/>}
123+
unCheckedChildren={<SunOutlined/>}
124+
defaultChecked={window.location.pathname.endsWith("/dark")}
125+
/>
126+
</Form.Item>
127+
<Form.Item label="Validation">
128+
<Switch
129+
checkedChildren="strict"
130+
unCheckedChildren="default"
131+
onChange={() => setStrict(!strict)}
132+
/>
133+
</Form.Item>
134+
</div>
135+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
136+
<Form.Item label="Disabled" style={{margin: 0}}>
137+
<Switch onChange={() => setDisabled(!disabled)}/>
138+
</Form.Item>
139+
<Form.Item label="Distinct" style={{margin: 0}}>
140+
<Switch onChange={() => setDistinct(!distinct)}/>
141+
</Form.Item>
142+
</div>
136143
<Divider orientation="left" plain>Code</Divider>
137144
<div style={{position: "relative"}}>
138145
<Button

‎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.9",
9+
"antd-phone-input": "^0.3.13",
1010
"copy-to-clipboard": "^3.3.3",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",

0 commit comments

Comments
 (0)