fix phone mask bug

src/routes/selfRegister/components/SignUp.js

@@ -21,6 +21,8 @@ import Checkbox from 'material-ui/Checkbox';
 
 import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
 
+import InputMask from 'react-input-mask';
+
 class SignUp extends React.Component {
   constructor(props) {
     super(props);
@@ -61,24 +63,12 @@ class SignUp extends React.Component {
 
   componentDidMount = () => { }
 
-  getFormattedPhoneNumber(){
-    if(this.state.phone_number && this.state.phone_number.length > 0) {
-      return this.state.phone_number.replace('+1','').replace('(','').replace(')','').replace('-','').replace(' ','').trim()
-    }
-    return '';
-  }
-
-  isPhoneNumberFormatValid() {
-    let formattedNumber = this.getFormattedPhoneNumber();
-    return !isNaN(formattedNumber) && (formattedNumber.toString().length === 10);
-  }
-
   buttonValidated = () => {
     let validated = true;
     if (!this.state.provider_name || this.state.provider_name === null || this.state.provider_name === "") validated = false;
     if (!this.state.provider_npi || this.state.provider_npi === null || this.state.provider_npi === "") validated = false;
     if (!this.state.email || this.state.email === null || this.state.email === "") validated = false;
-    if (!this.state.phone_number || this.state.phone_number === null || this.state.phone_number === "" || !this.isPhoneNumberFormatValid()) validated = false;
+    if (!this.state.phone_number || this.state.phone_number === null || this.state.phone_number === "") validated = false;
     if (!this.state.first || this.state.first === null || this.state.first === "") validated = false;
     if (!this.state.last || this.state.last === null || this.state.last === "") validated = false;
     if (!this.state.pass || this.state.pass === null || this.state.pass === "") validated = false;
@@ -109,10 +99,6 @@ class SignUp extends React.Component {
 
   handlePhone = (event) => {
     let phone = event.target.value;
-    if (phone.indexOf("+1") < 0 && phone.length == 10) {
-      phone = "+1" + phone;
-      phone = phone.substring(0, 12);
-    }
 
     this.setState(Object.assign(this.state, { phone_number: phone }));
   };
@@ -245,7 +231,9 @@ class SignUp extends React.Component {
                     type="telephone"
                     onChange={this.handlePhone}
                     onBlur={this.buttonValidated}
-                  />
+                  >
+                    <InputMask mask="(999) 999-9999" maskChar={null} value={this.state.phone_number} />
+                  </TextField>
                 </div>
                 <div className="form-group">
                   <TextField