Merge pull request #2 from braxtonex/fix

ssr fix
alexplumb · Mar 30, 2020 · 88032cd · 88032cd
2 parents b7ab328 + c619f2f
commit 88032cd
Show file tree

Hide file tree

Showing 7 changed files with 723 additions and 720 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/package.json b/package.json
@@ -34,18 +34,14 @@
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
-    "css-loader": "^3.0.0",
     "eslint": "^6.2.2",
     "eslint-config-airbnb": "^18.0.1",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.14.3",
     "file-loader": "^4.0.0",
-    "less": "^3.9.0",
-    "less-loader": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "react-hot-loader": "^4.12.7",
-    "style-loader": "^0.23.1",
     "uglifyjs-webpack-plugin": "^2.1.3",
     "url-loader": "^2.0.1",
     "webpack": "^4.36.1",

diff --git a/src/components/Item.jsx b/src/components/Item.jsx
@@ -6,7 +6,7 @@ import RootRef from '@material-ui/core/RootRef';
 class Item extends React.PureComponent {
   render() {
     const {
-      name, iso2, dialCode, localization, itemRef, native, ...restProps
+      name, iso2, dialCode, localization, itemRef, native, flagClass, ...restProps
     } = this.props;
 
     if (native) {
@@ -33,7 +33,7 @@ class Item extends React.PureComponent {
           data-country-code={iso2}
           {...restProps}
         >
-          <div className={`flag ${iso2} margin`} />
+          <div className={`flag ${iso2} margin ${flagClass}`} />
 
           <span className="country-name">
             {localization || name}
@@ -53,6 +53,7 @@ Item.propTypes = {
   itemRef: PropTypes.func.isRequired,
   localization: PropTypes.string,
   native: PropTypes.bool,
+  flagClass: PropTypes.string.isRequired,
 };
 
 Item.defaultProps = {

diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -14,8 +14,8 @@ import {
 } from 'lodash';
 import countryData from '../country_data';
 import Item from './Item';
-import '../styles.less';
-import '../flags.png';
+import flagStyles from '../flag_styles.css';
+import flagSprite from '../flags.png';
 
 const styles = () => ({
   flagButton: {
@@ -43,6 +43,7 @@ const styles = () => ({
   positionStart: {
     position: 'relative',
   },
+  ...flagStyles(flagSprite)
 });
 
 class MaterialUiPhoneNumber extends React.Component {
@@ -588,7 +589,7 @@ class MaterialUiPhoneNumber extends React.Component {
     const {
       classes, dropdownClass, localization, disableDropdown, native,
     } = this.props;
-    const inputFlagClasses = `flag ${selectedCountry.iso2}`;
+    const inputFlagClasses = `flag ${selectedCountry.iso2} ${classes.flag}`;
 
     const isSelected = (country) => Boolean(selectedCountry && selectedCountry.dialCode === country.dialCode);
 
@@ -623,6 +624,7 @@ class MaterialUiPhoneNumber extends React.Component {
                     dialCode={country.dialCode}
                     localization={localization && localization[country.name]}
                     native
+                    flagClass={classes.flag}
                   />
                 ))}
 
@@ -637,6 +639,7 @@ class MaterialUiPhoneNumber extends React.Component {
                     dialCode={country.dialCode}
                     localization={localization && localization[country.name]}
                     native
+                    flagClass={classes.flag}
                   />
                 ))}
               </NativeSelect>
@@ -673,6 +676,7 @@ class MaterialUiPhoneNumber extends React.Component {
                       iso2={country.iso2}
                       dialCode={country.dialCode}
                       localization={localization && localization[country.name]}
+                      flagClass={classes.flag}
                     />
                   ))}
 
@@ -690,6 +694,7 @@ class MaterialUiPhoneNumber extends React.Component {
                       iso2={country.iso2}
                       dialCode={country.dialCode}
                       localization={localization && localization[country.name]}
+                      flagClass={classes.flag}
                     />
                   ))}
                 </Menu>