Skip to content

Commit a997366

Browse files
author
Joe Withey
committed
Add a flagIcons prop for custom icons
1 parent aefebf0 commit a997366

File tree

5 files changed

+72
-18
lines changed

5 files changed

+72
-18
lines changed

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,11 @@ function handleOnChange(value) {
109109
<td> bool </td>
110110
<td colspan="2"> true by default </td>
111111
</tr>
112+
<tr>
113+
<td> flagIcons </td>
114+
<td> objext </td>
115+
<td colspan="2"> A dictionary of the countryCode => asset.svg (see country-flag-icons/react/3x2) </td>
116+
</tr>
112117

113118
<tr>
114119
<td colspan="4"><b>Supported TextField props</b></td>

‎src/components/Item.jsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import MenuItem from '@mui/material/MenuItem';
4-
import Flags from 'country-flag-icons/react/3x2'
54

6-
class Item extends React.PureComponent {
5+
class Item extends React.Component {
76
render() {
87
const ref = React.createRef();
98
const {
109
name, iso2, dialCode, localization,
11-
itemRef, native, className = '', ...restProps
10+
itemRef, native, flagIcons, className = '', ...restProps
1211
} = this.props;
1312

1413
if (native) {
@@ -27,7 +26,7 @@ class Item extends React.PureComponent {
2726
);
2827
}
2928

30-
const FlagComponent = Flags[iso2.toUpperCase()];
29+
const FlagComponent = flagIcons[iso2.toUpperCase()];
3130

3231
return (
3332
<MenuItem
@@ -60,6 +59,7 @@ Item.propTypes = {
6059
itemRef: PropTypes.func.isRequired,
6160
localization: PropTypes.string,
6261
native: PropTypes.bool,
62+
flagIcons: PropTypes.object,
6363
};
6464

6565
Item.defaultProps = {

‎src/components/index.jsx

+10-3
Original file line numberDiff line numberDiff line change
@@ -592,7 +592,7 @@ class MaterialUiPhoneNumber extends React.Component {
592592

593593
const {
594594
classes, dropdownClass, localization, disableDropdown,
595-
native,
595+
native, flagIcons
596596
} = this.props;
597597

598598
onlyCountries.sort((a, b) => {
@@ -603,7 +603,8 @@ class MaterialUiPhoneNumber extends React.Component {
603603

604604
const isSelected = (country) => Boolean(selectedCountry && selectedCountry.dialCode === country.dialCode);
605605

606-
const FlagComponent = Flags[selectedCountry.iso2.toUpperCase()];
606+
const flagIconsDictionary = flagIcons || Flags
607+
const FlagComponent = flagIconsDictionary[selectedCountry.iso2.toUpperCase()];
607608

608609
const dropdownProps = disableDropdown ? {} : {
609610
startAdornment: (
@@ -636,6 +637,7 @@ class MaterialUiPhoneNumber extends React.Component {
636637
iso2={country.iso2}
637638
dialCode={country.dialCode}
638639
localization={localization && localization[country.name]}
640+
flagIcons={flagIconsDictionary}
639641
native
640642
/>
641643
))}
@@ -649,6 +651,7 @@ class MaterialUiPhoneNumber extends React.Component {
649651
name={country.name}
650652
iso2={country.iso2}
651653
dialCode={country.dialCode}
654+
flagIcons={flagIconsDictionary}
652655
localization={localization && localization[country.name]}
653656
native
654657
/>
@@ -687,6 +690,7 @@ class MaterialUiPhoneNumber extends React.Component {
687690
iso2={country.iso2}
688691
dialCode={country.dialCode}
689692
localization={localization && localization[country.name]}
693+
flagIcons={flagIconsDictionary}
690694
className={classes.flagIcon}
691695
/>
692696
))}
@@ -705,6 +709,7 @@ class MaterialUiPhoneNumber extends React.Component {
705709
iso2={country.iso2}
706710
dialCode={country.dialCode}
707711
localization={localization && localization[country.name]}
712+
flagIcons={flagIconsDictionary}
708713
className={classes.flagIcon}
709714
/>
710715
))}
@@ -729,7 +734,7 @@ class MaterialUiPhoneNumber extends React.Component {
729734
dropdownClass, autoFormat, disableAreaCodes, isValid, disableCountryCode,
730735
disableDropdown, enableLongNumbers, countryCodeEditable, onEnterKeyPress,
731736
isModernBrowser, classes, keys, localization, placeholder, regions, onChange,
732-
value,
737+
value, flagIcons,
733738
// end placeholder props
734739
inputClass, error, InputProps,
735740
...restProps
@@ -805,6 +810,8 @@ MaterialUiPhoneNumber.propTypes = {
805810
isModernBrowser: PropTypes.func,
806811
onEnterKeyPress: PropTypes.func,
807812
keys: PropTypes.object,
813+
814+
flagIcons: PropTypes.object,
808815
};
809816

810817
MaterialUiPhoneNumber.defaultProps = {

‎src/demo.jsx

+7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { render } from 'react-dom';
3+
import Flags from 'country-flag-icons/react/1x1';
34
import MaterialUiPhoneNumber from './index';
45

56
class ChangeDemo extends React.Component {
@@ -61,6 +62,12 @@ export default render(
6162
preferredCountries={['it', 'se']}
6263
native
6364
/>
65+
<p>Prop supplied icons</p>
66+
<MaterialUiPhoneNumber
67+
defaultCountry="it"
68+
preferredCountries={['it', 'se']}
69+
flagIcons={Flags}
70+
/>
6471
</div>
6572

6673
<div style={{ display: 'inline-block', marginLeft: '40px' }}>

‎yarn.lock

+46-11
Original file line numberDiff line numberDiff line change
@@ -1770,6 +1770,13 @@
17701770
"resolved" "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz"
17711771
"version" "1.13.1"
17721772

1773+
"bindings@^1.5.0":
1774+
"integrity" "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="
1775+
"resolved" "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz"
1776+
"version" "1.5.0"
1777+
dependencies:
1778+
"file-uri-to-path" "1.0.0"
1779+
17731780
"bluebird@^3.5.5":
17741781
"integrity" "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
17751782
"resolved" "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
@@ -2854,6 +2861,11 @@
28542861
"jsx-ast-utils" "^3.1.0"
28552862
"language-tags" "^1.0.5"
28562863

2864+
"eslint-plugin-react-hooks@^4 || ^3 || ^2.3.0 || ^1.7.0":
2865+
"integrity" "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA=="
2866+
"resolved" "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz"
2867+
"version" "4.3.0"
2868+
28572869
"eslint-plugin-react@^7.21.5", "eslint-plugin-react@^7.26.1":
28582870
"integrity" "sha512-Lug0+NOFXeOE+ORZ5pbsh6mSKjBKXDXItUD2sQoT+5Yl0eoT82DqnXeTMfUare4QVCn9QwXbfzO/dBLjLXwVjQ=="
28592871
"resolved" "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.26.1.tgz"
@@ -2912,7 +2924,7 @@
29122924
"resolved" "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz"
29132925
"version" "3.0.0"
29142926

2915-
"eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7", "eslint@^5.16.0 || ^6.8.0 || ^7.2.0", "eslint@^8.0.0", "eslint@>= 4.12.1", "eslint@>=5":
2927+
"eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8", "eslint@^3 || ^4 || ^5 || ^6 || ^7", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^5.16.0 || ^6.8.0 || ^7.2.0", "eslint@^8.0.0", "eslint@>= 4.12.1", "eslint@>=5":
29162928
"integrity" "sha512-03spzPzMAO4pElm44m60Nj08nYonPGQXmw6Ceai/S4QK82IgwWO1EXx1s9namKzVlbVu3Jf81hb+N+8+v21/HQ=="
29172929
"resolved" "https://registry.npmjs.org/eslint/-/eslint-8.0.0.tgz"
29182930
"version" "8.0.0"
@@ -3182,6 +3194,11 @@
31823194
"loader-utils" "^2.0.0"
31833195
"schema-utils" "^3.0.0"
31843196

3197+
"[email protected]":
3198+
"integrity" "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
3199+
"resolved" "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz"
3200+
"version" "1.0.0"
3201+
31853202
"fill-range@^4.0.0":
31863203
"integrity" "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc="
31873204
"resolved" "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz"
@@ -3321,6 +3338,14 @@
33213338
"resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
33223339
"version" "1.0.0"
33233340

3341+
"fsevents@^1.2.7":
3342+
"integrity" "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw=="
3343+
"resolved" "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz"
3344+
"version" "1.2.13"
3345+
dependencies:
3346+
"bindings" "^1.5.0"
3347+
"nan" "^2.12.1"
3348+
33243349
"function-bind@^1.1.1":
33253350
"integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
33263351
"resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -4207,14 +4232,7 @@
42074232
"resolved" "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz"
42084233
"version" "1.0.1"
42094234

4210-
"kind-of@^3.0.2", "kind-of@^3.0.3":
4211-
"integrity" "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ="
4212-
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
4213-
"version" "3.2.2"
4214-
dependencies:
4215-
"is-buffer" "^1.1.5"
4216-
4217-
"kind-of@^3.2.0":
4235+
"kind-of@^3.0.2", "kind-of@^3.0.3", "kind-of@^3.2.0":
42184236
"integrity" "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ="
42194237
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
42204238
"version" "3.2.2"
@@ -4233,7 +4251,12 @@
42334251
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz"
42344252
"version" "5.1.0"
42354253

4236-
"kind-of@^6.0.0", "kind-of@^6.0.2":
4254+
"kind-of@^6.0.0":
4255+
"integrity" "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
4256+
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
4257+
"version" "6.0.3"
4258+
4259+
"kind-of@^6.0.2":
42374260
"integrity" "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
42384261
"resolved" "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
42394262
"version" "6.0.3"
@@ -4623,6 +4646,11 @@
46234646
"dns-packet" "^1.3.1"
46244647
"thunky" "^1.0.2"
46254648

4649+
"nan@^2.12.1":
4650+
"integrity" "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
4651+
"resolved" "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz"
4652+
"version" "2.15.0"
4653+
46264654
"nanocolors@^0.1.12":
46274655
"integrity" "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ=="
46284656
"resolved" "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz"
@@ -5822,7 +5850,14 @@
58225850
"resolved" "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz"
58235851
"version" "0.12.0"
58245852

5825-
"rimraf@^2.5.4", "rimraf@^2.6.3":
5853+
"rimraf@^2.5.4":
5854+
"integrity" "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA=="
5855+
"resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz"
5856+
"version" "2.6.3"
5857+
dependencies:
5858+
"glob" "^7.1.3"
5859+
5860+
"rimraf@^2.6.3":
58265861
"integrity" "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA=="
58275862
"resolved" "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz"
58285863
"version" "2.6.3"

0 commit comments

Comments
 (0)