Adding Brazilian Formatting

README.md

@@ -8,20 +8,20 @@ A simple react component to format a phone number as the user types.
 ```shell-script
 npm install react-phone-input --save
 ```
-  
+
 ## Usage:
 
 ```jsx
 React.render(
-  <ReactPhoneInput defaultCountry={'us'} onChange={handleOnChange)/>,
+  <ReactPhoneInput defaultCountry={'us'} onChange={handleOnChange}/>,
   document.getElementById('content'));
 ```
 
 Your handler for the ``onChange`` event should expect a string as
 parameter, where the value is that of the entered phone number. For example:
 
 ```jsx
-function handeOnChange(value) {
+function handleOnChange(value) {
    this.setState({
       phone: value
    });

src/country_data.js

@@ -150,7 +150,10 @@ var rawAllCountries = [
     [
       "Brazil",
       "br",
-      "55"
+      "55",
+      "+.. (..) ?....-....",
+      0,
+      ["11", "12", "13", "14", "15", "16", "17", "18", "19", "21", "22", "24", "27", "28", "31", "32", "33", "34", "35", "37", "38", "41", "42", "43", "44", "45", "46", "47", "48", "49", "51", "53", "54", "55", "61", "62", "63", "64", "65", "66", "67", "68", "69", "71", "73", "74", "75", "77", "79", "81", "82", "83", "84", "85", "86", "87", "88", "89", "91", "92", "93", "94", "95", "96", "97", "98", "99"]
     ],
     [
       "British Indian Ocean Territory",
@@ -1260,7 +1263,7 @@ function addCountryCode (iso2, dialCode, priority) {
 
 for (let i = 0; i < rawAllCountries.length; i++) {
     // countries
-    
+
     let c = rawAllCountries[i];
     allCountries.push({
       name: c[0],
@@ -1282,7 +1285,7 @@ for (let i = 0; i < rawAllCountries.length; i++) {
             // full dial code is country code + dial code
             var dialCode = c[2] + c[5][j];
             addCountryCode(c[1], dialCode);
-     
+
             let virtualCountry = Object.assign({},allCountries[countryIdx]);
             virtualCountry.dialCode = dialCode;
             allCountries.push(virtualCountry);

src/index.js

@@ -28,11 +28,30 @@ let keys = {
   SPACE: 32
 };
 
-function isNumberValid(inputNumber) {
-  let countries = countryData.allCountries;
-  return some(countries, function(country) {
-    return startsWith(inputNumber, country.dialCode) || startsWith(country.dialCode, inputNumber);
-  });
+
+function isNumberValid() {
+  var firstTime = true;
+  return function (inputNumber) {
+    if(firstTime) {
+      firstTime = false;
+      return true;
+    }
+    let countries = countryData.allCountries;
+    // check every country
+    for(let country of countries) {
+      // if country code matches the inputNumber code
+      if(startsWith(inputNumber, country.dialCode)) {
+        // if country has no format just return true
+        if(!country.format) return true
+        // test if the country format matches the inputNumber
+        // (by checking inputNumber's length vs number of '.' in format)
+        if(inputNumber.length >= country.format.split('').filter(x => x==='.').length) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
 }
 
 function getOnlyCountries(onlyCountriesArray) {
@@ -115,7 +134,7 @@ class ReactPhoneInput extends React.Component {
   }
 
   getValue() {
-    return this.getNumber();
+    return this.state.formattedNumber.replace(/\D/g, '');
   }
 
   resetNumber() {
@@ -197,12 +216,26 @@ class ReactPhoneInput extends React.Component {
       return `+${text}`;
     }
 
+    // Count of '.' characters in pattern
+    let patternDotCount = pattern.split('').filter(x => x==='.').length
+    // How many '?' should be replaced by numbers (if > 0)
+    let optionalNumberCount = text.length - patternDotCount
+
     let formattedObject = reduce(pattern, function(acc, character) {
       if(acc.remainingText.length === 0) {
           return acc;
       }
 
-      if(character !== '.') {
+      if(character === '?') {
+        if(optionalNumberCount-- > 0) {
+          return {
+            formattedText: acc.formattedText + head(acc.remainingText),
+            remainingText: tail(acc.remainingText)
+          };
+        } else {
+          return acc;
+        }
+      } else if(character !== '.') {
         return {
           formattedText: acc.formattedText + character,
           remainingText: acc.remainingText
@@ -214,7 +247,7 @@ class ReactPhoneInput extends React.Component {
         remainingText: tail(acc.remainingText)
       };
     }, {formattedText: '', remainingText: text.split('')});
-    return formattedObject.formattedText + formattedObject.remainingText.join('');
+    return formattedObject.formattedText;
   }
 
   // put the cursor to the end of the input (usually after a focus event)
@@ -484,7 +517,6 @@ class ReactPhoneInput extends React.Component {
       "form-control": true,
       "invalid-number": !this.props.isValid(this.state.formattedNumber.replace(/\D/g, ''))
     });
-
     let flagViewClasses = classNames({
       "flag-dropdown": true,
       "open-dropdown": this.state.showDropDown
@@ -563,7 +595,7 @@ ReactPhoneInput.defaultProps = {
   onlyCountries: [],
   excludeCountries: [],
   defaultCountry: allCountries[0].iso2,
-  isValid: isNumberValid,
+  isValid: isNumberValid(),
   flagsImagePath: './flags.png',
   onEnterKeyPress: function () {}
 };
@@ -587,7 +619,4 @@ if (__DEV__) {
   ReactDOM.render(
     <ReactPhoneInput defaultCountry='us' preferredCountries={['us', 'de']} excludeCountries={'in'}/>,
     document.getElementById('content'));
-  ReactDOM.render(
-      <ReactPhoneInput defaultCountry='de' preferredCountries={['it']}/>,
-      document.getElementById('content'));
 }