Skip to content

Commit f6ce1fa

Browse files
ArtyomVancyanArtyomVancyan
authored
Implement a distinct option for the countries list (GH-22)
2 parents 31c6fe1 + f90a812 commit f6ce1fa

File tree

10 files changed

+44
-17
lines changed

10 files changed

+44
-17
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ Apart from the phone-specific properties described below, all [Input](https://mu
9999
|--------------------|-------------------------------------------------------------------------------------------------------------------------------|---------------------------|
100100
| value | An object containing a parsed phone number or the raw number. | [object](#value) / string |
101101
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
102+
| distinct | Show the distinct list of country codes not listing all area codes. | boolean |
102103
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
103104
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
104105
| searchVariant | Accepts an Input variant, and values depend on the chosen Material distribution. | TextFieldVariants |

‎examples/material/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"@types/react": "^18.2.0",
1111
"@types/react-dom": "^18.2.0",
1212
"copy-to-clipboard": "^3.3.3",
13-
"mui-phone-input": "^0.1.3",
13+
"mui-phone-input": "^0.1.5",
1414
"react": "^18.2.0",
1515
"react-dom": "^18.2.0",
1616
"react-hook-form": "^7.51.4",

‎examples/material/src/Demo.tsx‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const Demo = () => {
2929
const [copied, setCopied] = useState<boolean>(false);
3030
const [preview, setPreview] = useState<boolean>(false);
3131
const [dropdown, setDropdown] = useState<boolean>(true);
32+
const [distinct, setDistinct] = useState<boolean>(false);
3233
const [disabled, setDisabled] = useState<boolean>(false);
3334
const [parentheses, setParentheses] = useState(true);
3435

@@ -50,6 +51,7 @@ const Demo = () => {
5051

5152
const code = useMemo(() => {
5253
let code = "<PhoneInput\n";
54+
if (distinct) code += " distinct\n";
5355
if (disabled) code += " disabled\n";
5456
if (arrow) code += " enableArrow\n";
5557
if (search && dropdown) code += " enableSearch\n";
@@ -58,7 +60,7 @@ const Demo = () => {
5860
if (code === "<PhoneInput\n") code = "<PhoneInput />";
5961
else code += "/>";
6062
return code;
61-
}, [disabled, arrow, search, dropdown, parentheses])
63+
}, [distinct, disabled, arrow, search, dropdown, parentheses])
6264

6365
return (
6466
<ThemeProvider theme={theme}>
@@ -85,53 +87,64 @@ const Demo = () => {
8587
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
8688
<FormControlLabel
8789
control={<Switch
90+
defaultChecked
8891
color="primary"
89-
onChange={changeTheme}
92+
onChange={() => setDropdown(!dropdown)}
9093
/>}
9194
labelPlacement="start"
9295
style={{margin: 0}}
93-
label="Theme"
96+
label="Dropdown"
9497
/>
9598
<FormControlLabel
9699
control={<Switch
100+
defaultChecked
97101
color="primary"
98-
onChange={() => setStrict(!strict)}
102+
onChange={() => setParentheses(!parentheses)}
99103
/>}
100104
labelPlacement="start"
101105
style={{margin: 0}}
102-
label="Validation"
103-
defaultChecked
106+
label="Parentheses"
104107
/>
108+
</div>
109+
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
105110
<FormControlLabel
106111
control={<Switch
107112
color="primary"
108-
onChange={() => setDisabled(!disabled)}
113+
onChange={changeTheme}
109114
/>}
110115
labelPlacement="start"
111116
style={{margin: 0}}
112-
label="Disabled"
117+
label="Theme"
118+
/>
119+
<FormControlLabel
120+
control={<Switch
121+
color="primary"
122+
onChange={() => setStrict(!strict)}
123+
/>}
124+
labelPlacement="start"
125+
style={{margin: 0}}
126+
label="Validation"
127+
defaultChecked
113128
/>
114129
</div>
115130
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
116131
<FormControlLabel
117132
control={<Switch
118-
defaultChecked
119133
color="primary"
120-
onChange={() => setDropdown(!dropdown)}
134+
onChange={() => setDisabled(!disabled)}
121135
/>}
122136
labelPlacement="start"
123137
style={{margin: 0}}
124-
label="Dropdown"
138+
label="Disabled"
125139
/>
126140
<FormControlLabel
127141
control={<Switch
128-
defaultChecked
129142
color="primary"
130-
onChange={() => setParentheses(!parentheses)}
143+
onChange={() => setDistinct(!distinct)}
131144
/>}
132145
labelPlacement="start"
133146
style={{margin: 0}}
134-
label="Parentheses"
147+
label="Distinct"
135148
/>
136149
</div>
137150
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
@@ -183,6 +196,7 @@ const Demo = () => {
183196
<PhoneInput
184197
{...phoneProps}
185198
error={error}
199+
distinct={distinct}
186200
disabled={disabled}
187201
onChange={onChange}
188202
enableArrow={arrow}

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "0.1.4",
2+
"version": "0.1.5",
33
"name": "mui-phone-input",
44
"description": "Advanced, highly customizable phone input component for Material UI.",
55
"keywords": [
@@ -48,7 +48,7 @@
4848
"react": "^16.8.6 || ^17.0.0 || ^18.0.0"
4949
},
5050
"dependencies": {
51-
"react-phone-hooks": "^0.1.12"
51+
"react-phone-hooks": "^0.1.14"
5252
},
5353
"devDependencies": {
5454
"@babel/core": "^7.26.0",

‎src/core/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const PhoneInput = forwardRef(({
2828
variant = undefined,
2929
searchVariant = undefined,
3030
country = getDefaultISO2Code(),
31+
distinct = false,
3132
disabled = false,
3233
enableArrow = false,
3334
enableSearch = false,
@@ -70,6 +71,7 @@ const PhoneInput = forwardRef(({
7071
query,
7172
locale,
7273
country,
74+
distinct,
7375
countryCode,
7476
initialValue,
7577
onlyCountries,

‎src/core/types.ts‎

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

1414
country?: string;
1515

16+
distinct?: boolean;
17+
1618
enableArrow?: boolean;
1719

1820
enableSearch?: boolean;

‎src/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
2727
variant = undefined,
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
30+
distinct = false,
3031
disabled = false,
3132
enableArrow = false,
3233
enableSearch = false,
@@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({
6970
query,
7071
locale,
7172
country,
73+
distinct,
7274
countryCode,
7375
initialValue,
7476
onlyCountries,

‎src/joy/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const PhoneInput = forwardRef(({
2727
variant = undefined,
2828
searchVariant = undefined,
2929
country = getDefaultISO2Code(),
30+
distinct = false,
3031
disabled = false,
3132
enableArrow = false,
3233
enableSearch = false,
@@ -69,6 +70,7 @@ const PhoneInput = forwardRef(({
6970
query,
7071
locale,
7172
country,
73+
distinct,
7274
countryCode,
7375
initialValue,
7476
onlyCountries,

‎src/joy/types.ts‎

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

1414
country?: string;
1515

16+
distinct?: boolean;
17+
1618
enableArrow?: boolean;
1719

1820
enableSearch?: boolean;

‎src/types.ts‎

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

1414
country?: string;
1515

16+
distinct?: boolean;
17+
1618
enableArrow?: boolean;
1719

1820
enableSearch?: boolean;

0 commit comments

Comments
 (0)