Skip to content

Commit 240a75c

Browse files
ArtyomVancyanArtyomVancyan
authored
Integrate the new support of using SVG icons (GH-23)
2 parents f6ce1fa + b4018ea commit 240a75c

File tree

12 files changed

+55
-27
lines changed

12 files changed

+55
-27
lines changed

‎README.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -95,23 +95,24 @@ NOTE: If you use localization in the [documented](https://mui.com/material-ui/gu
9595
9696
Apart from the phone-specific properties described below, all [Input](https://mui.com/material-ui/api/input/#props) and [TextField](https://mui.com/material-ui/api/text-field/#props) properties supported by the used Material distribution can be applied to the phone input component.
9797
98-
| Property | Description | Type |
99-
|--------------------|-------------------------------------------------------------------------------------------------------------------------------|---------------------------|
100-
| value | An object containing a parsed phone number or the raw number. | [object](#value) / string |
101-
| 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 |
103-
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
104-
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
105-
| searchVariant | Accepts an Input variant, and values depend on the chosen Material distribution. | TextFieldVariants |
106-
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
107-
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
108-
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
109-
| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
110-
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
111-
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
112-
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
113-
| onChange | The only difference from the default `onChange` is that value comes first. | function(value, event) |
114-
| onMount | The callback is triggered once the component gets mounted. | function(value) |
98+
| Property | Description | Type |
99+
|--------------------|-------------------------------------------------------------------------------------------------------------------------------|-------------------------------|
100+
| value | An object containing a parsed phone number or the raw number. | [object](#value) / string |
101+
| useSVG | Whether to use **SVG** icons for the flags or keep the default. By default, it will use **PNG** icons. | boolean |
102+
| country | Country code to be selected by default. By default, it will show the flag of the user's country. | string |
103+
| distinct | Show the distinct list of country codes not listing all area codes. | boolean |
104+
| enableArrow | Shows an arrow next to the country flag. Default value is `false`. | boolean |
105+
| enableSearch | Enables search in the country selection dropdown menu. Default value is `false`. | boolean |
106+
| searchVariant | Accepts an Input variant, and values depend on the chosen Material distribution. | TextFieldVariants |
107+
| searchNotFound | The value is shown if `enableSearch` is `true` and the query does not match any country. Default value is `No country found`. | string |
108+
| searchPlaceholder | The value is shown if `enableSearch` is `true`. Default value is `Search country`. | string |
109+
| disableDropdown | Disables the manual country selection through the dropdown menu. | boolean |
110+
| disableParentheses | Disables parentheses from the input masks. Default enabled. | boolean |
111+
| onlyCountries | Country codes to be included in the list. E.g. `onlyCountries={['us', 'ca', 'uk']}`. | string[] |
112+
| excludeCountries | Country codes to be excluded from the list of countries. E.g. `excludeCountries={['us', 'ca', 'uk']}`. | string[] |
113+
| preferredCountries | Country codes to be at the top of the list. E.g. `preferredCountries={['us', 'ca', 'uk']}`. | string[] |
114+
| onChange | The only difference from the default `onChange` is that value comes first. | function(value, event) |
115+
| onMount | The callback is triggered once the component gets mounted. | function(value) |
115116
116117
## Contribute
117118

‎examples/deploy.sh‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ cd ~/mui-phone-input/
33
git restore .
44
git pull
55

6+
rm -r node_modules package-lock.json
7+
npm i && npm run build && npm pack
8+
69
cd ~/mui-phone-input/examples/material
710
rm -r node_modules package-lock.json
811
npm install && npm run build

‎examples/material/src/Demo.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const Demo = () => {
2424
const [mode, setMode] = useState<string>("light");
2525
const [show, setShow] = useState<boolean>(true);
2626
const [arrow, setArrow] = useState<boolean>(false);
27+
const [useSvg, setUseSvg] = useState(false);
2728
const [strict, setStrict] = useState<boolean>(false);
2829
const [search, setSearch] = useState<boolean>(false);
2930
const [copied, setCopied] = useState<boolean>(false);
@@ -51,6 +52,7 @@ const Demo = () => {
5152

5253
const code = useMemo(() => {
5354
let code = "<PhoneInput\n";
55+
if (useSvg) code += " useSVG\n";
5456
if (distinct) code += " distinct\n";
5557
if (disabled) code += " disabled\n";
5658
if (arrow) code += " enableArrow\n";
@@ -60,7 +62,7 @@ const Demo = () => {
6062
if (code === "<PhoneInput\n") code = "<PhoneInput />";
6163
else code += "/>";
6264
return code;
63-
}, [distinct, disabled, arrow, search, dropdown, parentheses])
65+
}, [distinct, disabled, useSvg, arrow, search, dropdown, parentheses])
6466

6567
return (
6668
<ThemeProvider theme={theme}>
@@ -105,6 +107,15 @@ const Demo = () => {
105107
style={{margin: 0}}
106108
label="Parentheses"
107109
/>
110+
<FormControlLabel
111+
control={<Switch
112+
color="primary"
113+
onChange={() => setUseSvg(!useSvg)}
114+
/>}
115+
labelPlacement="start"
116+
style={{margin: 0}}
117+
label="SVG"
118+
/>
108119
</div>
109120
<div style={{gap: 24, display: "flex", alignItems: "center"}}>
110121
<FormControlLabel
@@ -196,6 +207,7 @@ const Demo = () => {
196207
<PhoneInput
197208
{...phoneProps}
198209
error={error}
210+
useSVG={useSvg}
199211
distinct={distinct}
200212
disabled={disabled}
201213
onChange={onChange}

‎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.5",
2+
"version": "0.1.6",
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.14"
51+
"react-phone-hooks": "^0.1.17"
5252
},
5353
"devDependencies": {
5454
"@babel/core": "^7.26.0",

‎src/base/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({slotProps, ...props}, r
6060
const PhoneInput = forwardRef(({
6161
value: initialValue = "",
6262
country = getDefaultISO2Code(),
63+
useSVG = false,
6364
disableParentheses = false,
6465
onlyCountries = [],
6566
excludeCountries = [],
@@ -138,7 +139,7 @@ const PhoneInput = forwardRef(({
138139
onInput={onInput}
139140
onChange={onChange}
140141
onKeyDown={onKeyDown}
141-
startAdornment={<div className={`flag ${countryCode}`}/>}
142+
startAdornment={<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>}
142143
{...(muiInputProps as any)}
143144
/>
144145
)

‎src/base/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<InputProps, "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
country?: string;
1315

1416
disableParentheses?: boolean;

‎src/core/index.tsx‎

Lines changed: 3 additions & 2 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+
useSVG = false,
3132
distinct = false,
3233
disabled = false,
3334
enableArrow = false,
@@ -186,7 +187,7 @@ const PhoneInput = forwardRef(({
186187
setTimeout(() => input.focus(), 100);
187188
}}
188189
children={<div className="mui-phone-input-select-item">
189-
<div className={`flag ${iso}`}/>
190+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
190191
<div className="label">
191192
{countries[name]}&nbsp;{displayFormat(mask)}
192193
</div>
@@ -219,7 +220,7 @@ const PhoneInput = forwardRef(({
219220
}}
220221
onClick={() => setOpen(!open)}
221222
>
222-
<div className={`flag ${countryCode}`}/>
223+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
223224
{enableArrow && (
224225
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
225226
style={{paddingLeft: 4}} width="22" height="20">

‎src/core/types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ export type PhoneNumber = types.PhoneNumber;
99
export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
1010
value?: PhoneNumber | string;
1111

12+
useSVG?: boolean;
13+
1214
searchVariant?: TextFieldProps["variant"];
1315

1416
country?: string;

‎src/index.tsx‎

Lines changed: 3 additions & 2 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+
useSVG = false,
3031
distinct = false,
3132
disabled = false,
3233
enableArrow = false,
@@ -181,7 +182,7 @@ const PhoneInput = forwardRef(({
181182
setTimeout(() => input.focus(), 100);
182183
}}
183184
children={<div className="mui-phone-input-select-item">
184-
<div className={`flag ${iso}`}/>
185+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
185186
<div className="label">
186187
{countries[name]}&nbsp;{displayFormat(mask)}
187188
</div>
@@ -214,7 +215,7 @@ const PhoneInput = forwardRef(({
214215
}}
215216
onClick={() => setOpen(!open)}
216217
>
217-
<div className={`flag ${countryCode}`}/>
218+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
218219
{enableArrow && (
219220
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
220221
style={{paddingLeft: 4}} width="22" height="20">

‎src/joy/index.tsx‎

Lines changed: 3 additions & 2 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+
useSVG = false,
3031
distinct = false,
3132
disabled = false,
3233
enableArrow = false,
@@ -178,7 +179,7 @@ const PhoneInput = forwardRef(({
178179
setTimeout(() => input.focus(), 100);
179180
}}
180181
children={<div className="mui-phone-input-select-item">
181-
<div className={`flag ${iso}`}/>
182+
<div className={`flag ${iso} ${useSVG ? "svg" : ""}`}/>
182183
<div className="label">
183184
{countries[name]}&nbsp;{displayFormat(mask)}
184185
</div>
@@ -209,7 +210,7 @@ const PhoneInput = forwardRef(({
209210
}}
210211
onClick={() => setOpen(!open)}
211212
>
212-
<div className={`flag ${countryCode}`}/>
213+
<div className={`flag ${countryCode} ${useSVG ? "svg" : ""}`}/>
213214
{enableArrow && (
214215
<svg viewBox="0 0 24 24" focusable="false" fill="currentColor"
215216
style={{paddingLeft: 4}} width="22" height="20">

0 commit comments

Comments
 (0)