Functioning select phone input side by side with supposed emoji flag support

package.json

@@ -32,6 +32,7 @@
     "amplitude-js": "^4.0.0",
     "bluebird": "^3.5.1",
     "classnames": "^2.2.5",
+    "country-data": "^0.0.31",
     "electron-dl": "^1.6.0",
     "formik": "^0.10.4",
     "from2": "^2.3.0",

src/renderer/component/userFieldNew/view.jsx

@@ -2,6 +2,22 @@ import React from 'react';
 import { Form, FormRow, Submit } from 'component/form.js';
 import FormField from 'component/formField';
 
+const countryCodes = require('country-data')
+  .callingCountries.all.filter(_ => _.emoji)
+  .reduce(
+    (acc, cur) => acc.concat(cur.countryCallingCodes.map(_ => ({ ...cur, countryCallingCode: _ }))),
+    []
+  )
+  .sort((a, b) => {
+    if (a.countryCallingCodes[0] < b.countryCallingCodes[0]) {
+      return -1;
+    }
+    if (a.countryCallingCodes[0] > b.countryCallingCodes[0]) {
+      return 1;
+    }
+    return 0;
+  });
+
 class UserFieldNew extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -52,10 +68,14 @@ class UserFieldNew extends React.PureComponent {
     });
   }
 
+  handleSelect(event) {
+    this.setState({ country_code: event.target.value });
+  }
+
   handleSubmit() {
     const { email, phone, country_code } = this.state;
     if (phone) {
-      this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.replace(/\D/g, ''));
+      this.props.addUserPhone(phone.replace(/\D/g, ''), country_code.substring(1));
     } else {
       this.props.addUserEmail(email);
     }
@@ -73,8 +93,12 @@ class UserFieldNew extends React.PureComponent {
         </p>
         <Form onSubmit={this.handleSubmit.bind(this)}>
           <div className="form-row-phone">
-            <FormField type="select">
-              <option>(US) +1</option>
+            <FormField type="select" onChange={this.handleSelect.bind(this)}>
+              {countryCodes.map(country => (
+                <option value={country.countryCallingCode}>
+                  {country.emoji} {country.countryCallingCode}
+                </option>
+              ))}
             </FormField>
             <FormRow
               type="text"

src/renderer/scss/component/_form-field.scss

@@ -8,8 +8,9 @@
 .form-row-phone {
   display: flex;
 
-  select {
-    margin-right: 5px;
+  .form-field__input-text {
+    margin-left: 5px;
+    width: calc(0.85 * var(--input-width));
   }
 }
 

yarn.lock

@@ -2213,6 +2213,13 @@ cosmiconfig@^3.1.0:
     parse-json "^3.0.0"
     require-from-string "^2.0.1"
 
+country-data@^0.0.31:
+  version "0.0.31"
+  resolved "https://registry.yarnpkg.com/country-data/-/country-data-0.0.31.tgz#80966b8e1d147fa6d6a589d32933f8793774956d"
+  dependencies:
+    currency-symbol-map "~2"
+    underscore ">1.4.4"
+
 create-ecdh@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
@@ -2406,6 +2413,10 @@ csso@~2.3.1:
     clap "^1.0.9"
     source-map "^0.5.3"
 
+currency-symbol-map@~2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-2.2.0.tgz#2b3c1872ff1ac2ce595d8273e58e1fff0272aea2"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -8781,6 +8792,10 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
+underscore@>1.4.4:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
+
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"