phone editing widget works

src/widgets/phone-edit.jsx

@@ -2,6 +2,9 @@
 
 import React from 'react';
 import { injectIntl } from 'react-intl';
+import { getExampleNumber, parsePhoneNumber } from 'libphonenumber-js/mobile';
+import examples from 'libphonenumber-js/mobile/examples'
+
 import * as dcodes from '../dcodes.json';
 import { flagEmoji } from '../lib/strformat';
 
@@ -12,10 +15,14 @@ class PhoneEdit extends React.PureComponent {
     this.codeMap = {};
     dcodes.default.forEach(dc => { this.codeMap[dc.code] = dc.dial; });
 
+    const code = props.countryCode || 'US';
+    const dial = this.codeMap[code];
+
     this.state = {
-      countryCode: props.countryCode || 'US',
-      dialCode: this.codeMap[props.countryCode || 'US'],
-      localNumber: ''
+      countryCode: code,
+      dialCode: dial,
+      localNumber: '',
+      placeholderNumber: this.placeholderNumber(code, dial)
     };
 
     this.handleChange = this.handleChange.bind(this);
@@ -29,10 +36,18 @@ class PhoneEdit extends React.PureComponent {
   }
 
   handleFinished(e) {
-    // this.setCustomValidity("Mobile phone number required");
     e.preventDefault();
-    const number = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '')
-    this.props.onSubmit(`+${number}`);
+    const raw = `${this.state.dialCode}${this.state.localNumber.trim()}`.replace(/[^\d]/g, '')
+    let number = null;
+    try {
+      number = parsePhoneNumber(raw);
+    } catch (err) {}
+
+    if (!number || !number.isValid()) {
+      this.inputField.setCustomValidity("Mobile phone number required");
+      return;
+    }
+    this.props.onSubmit(number.format('E.164'));
   }
 
 
@@ -43,7 +58,15 @@ class PhoneEdit extends React.PureComponent {
   }
 
   showCountrySelector() {
-    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode);
+    this.props.onShowCountrySelector(this.state.countryCode, this.state.dialCode,
+      (code, dial) => {
+          console.log('Callback', code, dial);
+          this.setState({
+            countryCode: code,
+            dialCode: dial,
+            placeholderNumber: this.placeholderNumber(code, dial)
+        })
+      });
   }
 
   // Filter out characters not permitted in a phone number.
@@ -56,13 +79,20 @@ class PhoneEdit extends React.PureComponent {
     return number.replace(/[^-\s().\d]/g, '');
   }
 
+  placeholderNumber(code, dial) {
+    console.log('In nplaceholder', code, dial);
+    const number = getExampleNumber(code, examples).formatInternational();
+    return number.substring(dial.length + 1).trim();
+  }
+
   render() {
+    console.log('placeholder:', this.state.placeholderNumber);
     return (
       <>
         <span className="dial-code" onClick={this.showCountrySelector}>
           <span className="country-flag">{flagEmoji(this.state.countryCode)}&nbsp;</span>
           +{this.state.dialCode}&nbsp;</span>
-        <input type="tel" placeholder={this.state.placeholder}
+        <input type="tel" ref={ref => {this.inputField = ref}} placeholder={this.state.placeholderNumber}
             value={this.state.localNumber} onChange={this.handleChange}
             maxLength={17} onKeyDown={this.handleKeyDown} onBlur={this.handleFinished}
             required autoFocus={this.props.autoFocus} />