react-number-format - npm Package Compare versions

Comparing version 3.6.2 to 4.0.0

dist/react-number-format.es.js

 /**
- * react-number-format - 3.6.2
+ * react-number-format - 4.0.0
  * Author : Sudhanshu Yadav
@@ -349,2 +349,15 @@ * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
+}
+function getThousandsGroupRegex(thousandsGroupStyle) {
+  switch (thousandsGroupStyle) {
+    case 'lakh':
+      return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
+
+    case 'wan':
+      return /(\d)(?=(\d{4})+(?!\d))/g;
+
+    case 'thousand':
+    default:
+      return /(\d)(?=(\d{3})+(?!\d))/g;
+  }
 } //spilt a float number into different parts beforeDecimal, afterDecimal, and negation
@@ -491,2 +504,3 @@
   decimalSeparator: propTypes.string,
+  thousandsGroupStyle: propTypes.oneOf(['thousand', 'lakh', 'wan']),
   decimalScale: propTypes.number,
@@ -501,2 +515,3 @@ fixedDecimalScale: propTypes.bool,
   value: propTypes.oneOfType([propTypes.number, propTypes.string]),
+  defaultValue: propTypes.oneOfType([propTypes.number, propTypes.string]),
   isNumericString: propTypes.bool,
@@ -512,3 +527,3 @@ customInput: propTypes.func,
   onBlur: propTypes.func,
-  type: propTypes.oneOf(['text', 'tel']),
+  type: propTypes.oneOf(['text', 'tel', 'password']),
   isAllowed: propTypes.func,
@@ -521,2 +536,3 @@ renderText: propTypes.func,
   decimalSeparator: '.',
+  thousandsGroupStyle: 'thousand',
   fixedDecimalScale: false,
@@ -549,7 +565,8 @@ prefix: '',
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props)); //validate props
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props));
+    var defaultValue = props.defaultValue; //validate props
 
     _this.validateProps();
 
-    var formattedValue = _this.formatValueProp();
+    var formattedValue = _this.formatValueProp(defaultValue);
 
@@ -581,3 +598,8 @@ _this.state = {
       var props = this.props,
-          state = this.state;
+          state = this.state,
+          inFocus = this.inFocus;
+      var onValueChange = props.onValueChange;
+      var stateValue = state.value,
+          _state$numAsString = state.numAsString,
+          lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
 
@@ -587,4 +609,2 @@ if (prevProps !== props) {
         this.validateProps();
-        var stateValue = state.value;
-        var lastNumStr = state.numAsString || '';
         var lastValueWithNewFormat = this.formatNumString(lastNumStr);
@@ -596,3 +616,6 @@ var formattedValue = props.value === undefined ? lastValueWithNewFormat : this.formatValueProp();
 
-        if ((!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || lastValueWithNewFormat !== stateValue) {
+        if ( //while typing set state only when float value changes
+        (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
+        lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
+        inFocus === false && formattedValue !== stateValue) {
           this.setState({
@@ -602,2 +625,3 @@ value: formattedValue,
           });
+          onValueChange(this.getValueObject(formattedValue, numAsString));
         }
@@ -930,3 +954,4 @@ }
           suffix = _this$props5.suffix,
-          allowNegative = _this$props5.allowNegative;
+          allowNegative = _this$props5.allowNegative,
+          thousandsGroupStyle = _this$props5.thousandsGroupStyle;
 
@@ -949,3 +974,4 @@ var _this$getSeparators4 = this.getSeparators(),
       if (thousandSeparator) {
-        beforeDecimal = beforeDecimal.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousandSeparator);
+        var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle);
+        beforeDecimal = beforeDecimal.replace(thousandsGroupRegex, '$1' + thousandSeparator);
       } //add prefix and suffix
@@ -987,3 +1013,3 @@
     key: "formatValueProp",
-    value: function formatValueProp() {
+    value: function formatValueProp(defaultValue) {
       var _this$props7 = this.props,
@@ -995,3 +1021,4 @@ format = _this$props7.format,
       var _this$props8 = this.props,
-          value = _this$props8.value,
+          _this$props8$value = _this$props8.value,
+          value = _this$props8$value === void 0 ? defaultValue : _this$props8$value,
           isNumericString = _this$props8.isNumericString;
@@ -1098,6 +1125,9 @@ var isNonNumericFalsy = !value && value !== 0;
           format = _this$props10.format,
-          decimalSeparator = _this$props10.decimalSeparator,
           allowNegative = _this$props10.allowNegative,
           prefix = _this$props10.prefix,
           suffix = _this$props10.suffix;
+
+      var _this$getSeparators6 = this.getSeparators(),
+          decimalSeparator = _this$getSeparators6.decimalSeparator;
+
       var lastNumStr = this.state.numAsString || '';
@@ -1111,2 +1141,8 @@ var _this$selectionBefore = this.selectionBeforeInput,
           end = _findChangedIndex.end;
+      /** Check if only . is added in the numeric format and replace it with decimal separator */
+
+
+      if (!format && decimalSeparator !== '.' && start === end && value[selectionStart] === '.') {
+        return value.substr(0, selectionStart) + decimalSeparator + value.substr(selectionStart + 1, value.length);
+      }
       /* don't do anyhting if something got added,
@@ -1185,3 +1221,3 @@ or if value is empty string (when whole input is cleared)
         }, function () {
-          props.onValueChange(valueObj, e);
+          props.onValueChange(valueObj);
           props.onChange(e);
@@ -1204,2 +1240,3 @@ });
       var lastValue = state.value;
+      this.inFocus = false;
 
@@ -1219,3 +1256,3 @@ if (!format) {
 
-            props.onValueChange(valueObj, e);
+            props.onValueChange(valueObj);
             onBlur(e);
@@ -1302,3 +1339,3 @@ });
 
-            onValueChange(valueObj, e);
+            onValueChange(valueObj);
           });
@@ -1362,2 +1399,3 @@ } else if (!negativeRegex.test(value[expectedCaretPosition])) {
       e.persist();
+      this.inFocus = true;
       setTimeout(function () {
@@ -1364,0 +1402,0 @@ var el = e.target;

dist/react-number-format.js

 /**
- * react-number-format - 3.6.2
+ * react-number-format - 4.0.0
  * Author : Sudhanshu Yadav
@@ -355,2 +355,15 @@ * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
     return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
+  }
+  function getThousandsGroupRegex(thousandsGroupStyle) {
+    switch (thousandsGroupStyle) {
+      case 'lakh':
+        return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
+
+      case 'wan':
+        return /(\d)(?=(\d{4})+(?!\d))/g;
+
+      case 'thousand':
+      default:
+        return /(\d)(?=(\d{3})+(?!\d))/g;
+    }
   } //spilt a float number into different parts beforeDecimal, afterDecimal, and negation
@@ -497,2 +510,3 @@
     decimalSeparator: propTypes.string,
+    thousandsGroupStyle: propTypes.oneOf(['thousand', 'lakh', 'wan']),
     decimalScale: propTypes.number,
@@ -507,2 +521,3 @@ fixedDecimalScale: propTypes.bool,
     value: propTypes.oneOfType([propTypes.number, propTypes.string]),
+    defaultValue: propTypes.oneOfType([propTypes.number, propTypes.string]),
     isNumericString: propTypes.bool,
@@ -518,3 +533,3 @@ customInput: propTypes.func,
     onBlur: propTypes.func,
-    type: propTypes.oneOf(['text', 'tel']),
+    type: propTypes.oneOf(['text', 'tel', 'password']),
     isAllowed: propTypes.func,
@@ -527,2 +542,3 @@ renderText: propTypes.func,
     decimalSeparator: '.',
+    thousandsGroupStyle: 'thousand',
     fixedDecimalScale: false,
@@ -555,7 +571,8 @@ prefix: '',
 
-      _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props)); //validate props
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props));
+      var defaultValue = props.defaultValue; //validate props
 
       _this.validateProps();
 
-      var formattedValue = _this.formatValueProp();
+      var formattedValue = _this.formatValueProp(defaultValue);
 
@@ -587,3 +604,8 @@ _this.state = {
         var props = this.props,
-            state = this.state;
+            state = this.state,
+            inFocus = this.inFocus;
+        var onValueChange = props.onValueChange;
+        var stateValue = state.value,
+            _state$numAsString = state.numAsString,
+            lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
 
@@ -593,4 +615,2 @@ if (prevProps !== props) {
           this.validateProps();
-          var stateValue = state.value;
-          var lastNumStr = state.numAsString || '';
           var lastValueWithNewFormat = this.formatNumString(lastNumStr);
@@ -602,3 +622,6 @@ var formattedValue = props.value === undefined ? lastValueWithNewFormat : this.formatValueProp();
 
-          if ((!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || lastValueWithNewFormat !== stateValue) {
+          if ( //while typing set state only when float value changes
+          (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
+          lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
+          inFocus === false && formattedValue !== stateValue) {
             this.setState({
@@ -608,2 +631,3 @@ value: formattedValue,
             });
+            onValueChange(this.getValueObject(formattedValue, numAsString));
           }
@@ -936,3 +960,4 @@ }
             suffix = _this$props5.suffix,
-            allowNegative = _this$props5.allowNegative;
+            allowNegative = _this$props5.allowNegative,
+            thousandsGroupStyle = _this$props5.thousandsGroupStyle;
 
@@ -955,3 +980,4 @@ var _this$getSeparators4 = this.getSeparators(),
         if (thousandSeparator) {
-          beforeDecimal = beforeDecimal.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousandSeparator);
+          var thousandsGroupRegex = getThousandsGroupRegex(thousandsGroupStyle);
+          beforeDecimal = beforeDecimal.replace(thousandsGroupRegex, '$1' + thousandSeparator);
         } //add prefix and suffix
@@ -993,3 +1019,3 @@
       key: "formatValueProp",
-      value: function formatValueProp() {
+      value: function formatValueProp(defaultValue) {
         var _this$props7 = this.props,
@@ -1001,3 +1027,4 @@ format = _this$props7.format,
         var _this$props8 = this.props,
-            value = _this$props8.value,
+            _this$props8$value = _this$props8.value,
+            value = _this$props8$value === void 0 ? defaultValue : _this$props8$value,
             isNumericString = _this$props8.isNumericString;
@@ -1104,6 +1131,9 @@ var isNonNumericFalsy = !value && value !== 0;
             format = _this$props10.format,
-            decimalSeparator = _this$props10.decimalSeparator,
             allowNegative = _this$props10.allowNegative,
             prefix = _this$props10.prefix,
             suffix = _this$props10.suffix;
+
+        var _this$getSeparators6 = this.getSeparators(),
+            decimalSeparator = _this$getSeparators6.decimalSeparator;
+
         var lastNumStr = this.state.numAsString || '';
@@ -1117,2 +1147,8 @@ var _this$selectionBefore = this.selectionBeforeInput,
             end = _findChangedIndex.end;
+        /** Check if only . is added in the numeric format and replace it with decimal separator */
+
+
+        if (!format && decimalSeparator !== '.' && start === end && value[selectionStart] === '.') {
+          return value.substr(0, selectionStart) + decimalSeparator + value.substr(selectionStart + 1, value.length);
+        }
         /* don't do anyhting if something got added,
@@ -1191,3 +1227,3 @@ or if value is empty string (when whole input is cleared)
           }, function () {
-            props.onValueChange(valueObj, e);
+            props.onValueChange(valueObj);
             props.onChange(e);
@@ -1210,2 +1246,3 @@ });
         var lastValue = state.value;
+        this.inFocus = false;
 
@@ -1225,3 +1262,3 @@ if (!format) {
 
-              props.onValueChange(valueObj, e);
+              props.onValueChange(valueObj);
               onBlur(e);
@@ -1308,3 +1345,3 @@ });
 
-              onValueChange(valueObj, e);
+              onValueChange(valueObj);
             });
@@ -1368,2 +1405,3 @@ } else if (!negativeRegex.test(value[expectedCaretPosition])) {
         e.persist();
+        this.inFocus = true;
         setTimeout(function () {
@@ -1370,0 +1408,0 @@ var el = e.target;

dist/react-number-format.min.js

 /**
- * react-number-format - 3.6.2
+ * react-number-format - 4.0.0
  * Author : Sudhanshu Yadav
@@ -8,2 +8,2 @@ * Copyright (c) 2016, 2018 to Sudhanshu Yadav, released under the MIT license.
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):e.NumberFormat=t(e.React)}(this,function(h){"use strict";function o(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function g(){return(g=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function e(e){return function(){return e}}h=h&&h.hasOwnProperty("default")?h.default:h;var t=function(){};t.thatReturns=e,t.thatReturnsFalse=e(!1),t.thatReturnsTrue=e(!0),t.thatReturnsNull=e(null),t.thatReturnsThis=function(){return this},t.thatReturnsArgument=function(e){return e};var n=t;var c=function(e,t,r,n,o,a,i,s){if(!e){var u;if(void 0===t)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,n,o,a,i,s],l=0;(u=new Error(t.replace(/%s/g,function(){return c[l++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},r=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}})()&&Object.assign;var f,p=(function(e){e.exports=function(){function e(e,t,r,n,o,a){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a&&c(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}var r={array:e.isRequired=e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r}()}(f={exports:{}},f.exports),f.exports);function m(){}function v(e){return!!(e||"").match(/\d/)}function d(e){return e.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}function P(e){var t=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],r="-"===e[0],n=r&&t,o=(e=e.replace("-","")).split(".");return{beforeDecimal:o[0],afterDecimal:o[1]||"",hasNagation:r,addNegation:n}}function y(e,t,r){for(var n="",o=r?"0":"",a=0;a<=t-1;a++)n+=e[a]||o;return n}function S(e,t){if(e.value=e.value,null!==e){if(e.createTextRange){var r=e.createTextRange();return r.move("character",t),r.select(),!0}return e.selectionStart||0===e.selectionStart?(e.focus(),e.setSelectionRange(t,t),!0):(e.focus(),!1)}}function b(e,t,r){return Math.min(Math.max(e,t),r)}var x={thousandSeparator:p.oneOfType([p.string,p.oneOf([!0])]),decimalSeparator:p.string,decimalScale:p.number,fixedDecimalScale:p.bool,displayType:p.oneOf(["input","text"]),prefix:p.string,suffix:p.string,format:p.oneOfType([p.string,p.func]),removeFormatting:p.func,mask:p.oneOfType([p.string,p.arrayOf(p.string)]),value:p.oneOfType([p.number,p.string]),isNumericString:p.bool,customInput:p.func,allowNegative:p.bool,allowEmptyFormatting:p.bool,onValueChange:p.func,onKeyDown:p.func,onMouseUp:p.func,onChange:p.func,onFocus:p.func,onBlur:p.func,type:p.oneOf(["text","tel"]),isAllowed:p.func,renderText:p.func,getInputRef:p.func},O={displayType:"input",decimalSeparator:".",fixedDecimalScale:!1,prefix:"",suffix:"",allowNegative:!0,allowEmptyFormatting:!1,isNumericString:!1,type:"text",onValueChange:m,onChange:m,onKeyDown:m,onMouseUp:m,onFocus:m,onBlur:m,isAllowed:function(){return!0},getInputRef:m},w=function(e){function a(e){var t,r,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),r=this,(t=!(n=i(a).call(this,e))||"object"!=typeof n&&"function"!=typeof n?u(r):n).validateProps();var o=t.formatValueProp();return t.state={value:o,numAsString:t.removeFormatting(o)},t.selectionBeforeInput={selectionStart:0,selectionEnd:0},t.onChange=t.onChange.bind(u(u(t))),t.onKeyDown=t.onKeyDown.bind(u(u(t))),t.onMouseUp=t.onMouseUp.bind(u(u(t))),t.onFocus=t.onFocus.bind(u(u(t))),t.onBlur=t.onBlur.bind(u(u(t))),t}var t,r,n;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}(a,h.Component),t=a,(r=[{key:"componentDidUpdate",value:function(e){this.updateValueIfRequired(e)}},{key:"updateValueIfRequired",value:function(e){var t=this.props,r=this.state;if(e!==t){this.validateProps();var n=r.value,o=r.numAsString||"",a=this.formatNumString(o),i=void 0===t.value?a:this.formatValueProp(),s=this.removeFormatting(i),u=parseFloat(s),c=parseFloat(o);(isNaN(u)&&isNaN(c)||u===c)&&a===n||this.setState({value:i,numAsString:s})}}},{key:"getFloatString",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=this.props.decimalScale,r=this.getSeparators().decimalSeparator,n=this.getNumberRegex(!0),o="-"===e[0];o&&(e=e.replace("-","")),r&&0===t&&(e=e.split(r)[0]);var a=(e=(e.match(n)||[]).join("").replace(r,".")).indexOf(".");return-1!==a&&(e="".concat(e.substring(0,a),".").concat(e.substring(a+1,e.length).replace(new RegExp(d(r),"g"),""))),o&&(e="-"+e),e}},{key:"getNumberRegex",value:function(e,t){var r=this.props,n=r.format,o=r.decimalScale,a=this.getSeparators().decimalSeparator;return new RegExp("\\d"+(!a||0===o||t||n?"":"|"+d(a)),e?"g":void 0)}},{key:"getSeparators",value:function(){var e=this.props.decimalSeparator,t=this.props.thousandSeparator;return!0===t&&(t=","),{decimalSeparator:e,thousandSeparator:t}}},{key:"getMaskAtIndex",value:function(e){var t=this.props.mask,r=void 0===t?" ":t;return"string"==typeof r?r:r[e]||" "}},{key:"getValueObject",value:function(e,t){var r=parseFloat(t);return{formattedValue:e,value:t,floatValue:isNaN(r)?void 0:r}}},{key:"validateProps",value:function(){var e=this.props.mask,t=this.getSeparators(),r=t.decimalSeparator,n=t.thousandSeparator;if(r===n)throw new Error("\n          Decimal separator can't be same as thousand separator.\n          thousandSeparator: ".concat(n,' (thousandSeparator = {true} is same as thousandSeparator = ",")\n          decimalSeparator: ').concat(r," (default value for decimalSeparator is .)\n       "));if(e&&("string"===e?e:e.toString()).match(/\d/g))throw new Error("\n          Mask ".concat(e," should not contain numeric character;\n        "))}},{key:"setPatchedCaretPosition",value:function(e,t,r){S(e,t),setTimeout(function(){e.value===r&&S(e,t)},0)}},{key:"correctCaretPosition",value:function(e,t,r){var n=this.props,o=n.prefix,a=n.suffix,i=n.format;if(""===e)return 0;if(t=b(t,0,e.length),!i){var s="-"===e[0];return b(t,o.length+(s?1:0),e.length-a.length)}if("function"==typeof i)return t;if("#"===i[t]&&v(e[t]))return t;if("#"===i[t-1]&&v(e[t-1]))return t;var u=i.indexOf("#");t=b(t,u,i.lastIndexOf("#")+1);for(var c=i.substring(t,i.length).indexOf("#"),l=t,f=t+(-1===c?0:c);u<l&&("#"!==i[l]||!v(e[l]));)l-=1;return!v(e[f])||"left"===r&&t!==u||t-l<f-t?v(e[l])?l+1:l:f}},{key:"getCaretPosition",value:function(e,t,r){var n,o,a=this.props.format,i=this.state.value,s=this.getNumberRegex(!0),u=(e.match(s)||[]).join(""),c=(t.match(s)||[]).join("");for(o=n=0;o<r;o++){var l=e[o]||"",f=t[n]||"";if((l.match(s)||l===f)&&("0"!==l||!f.match(s)||"0"===f||u.length===c.length)){for(;l!==t[n]&&n<t.length;)n++;n++}}return"string"!=typeof a||i||(n=t.length),n=this.correctCaretPosition(t,n)}},{key:"removePrefixAndSuffix",value:function(e){var t=this.props,r=t.format,n=t.prefix,o=t.suffix;if(!r&&e){var a="-"===e[0];a&&(e=e.substring(1,e.length));var i=(e=n&&0===e.indexOf(n)?e.substring(n.length,e.length):e).lastIndexOf(o);e=o&&-1!==i&&i===e.length-o.length?e.substring(0,i):e,a&&(e="-"+e)}return e}},{key:"removePatternFormatting",value:function(e){for(var t=this.props.format.split("#").filter(function(e){return""!==e}),r=0,n="",o=0,a=t.length;o<=a;o++){var i=t[o]||"",s=o===a?e.length:e.indexOf(i,r);if(-1===s){n=e;break}n+=e.substring(r,s),r=s+i.length}return(n.match(/\d/g)||[]).join("")}},{key:"removeFormatting",value:function(e){var t=this.props,r=t.format,n=t.removeFormatting;return e?e=r?"string"==typeof r?this.removePatternFormatting(e):"function"==typeof n?n(e):(e.match(/\d/g)||[]).join(""):(e=this.removePrefixAndSuffix(e),this.getFloatString(e)):e}},{key:"formatWithPattern",value:function(e){for(var t=this.props.format,r=0,n=t.split(""),o=0,a=t.length;o<a;o++)"#"===t[o]&&(n[o]=e[r]||this.getMaskAtIndex(r),r+=1);return n.join("")}},{key:"formatAsNumber",value:function(e){var t=this.props,r=t.decimalScale,n=t.fixedDecimalScale,o=t.prefix,a=t.suffix,i=t.allowNegative,s=this.getSeparators(),u=s.thousandSeparator,c=s.decimalSeparator,l=-1!==e.indexOf(".")||r&&n,f=P(e,i),p=f.beforeDecimal,h=f.afterDecimal,g=f.addNegation;return void 0!==r&&(h=y(h,r,n)),u&&(p=p.replace(/(\d)(?=(\d{3})+(?!\d))/g,"$1"+u)),o&&(p=o+p),a&&(h+=a),g&&(p="-"+p),e=p+(l&&c||"")+h}},{key:"formatNumString",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=this.props,r=t.format,n=t.allowEmptyFormatting,o=e;return""!==e||n?"-"!==e||r?o="string"==typeof r?this.formatWithPattern(o):"function"==typeof r?r(o):this.formatAsNumber(o):(o="-",e=""):o="",o}},{key:"formatValueProp",value:function(){var e=this.props,t=e.format,r=e.decimalScale,n=e.fixedDecimalScale,o=e.allowEmptyFormatting,a=this.props,i=a.value,s=a.isNumericString,u=!i&&0!==i;return u&&o&&(i=""),u&&!o?"":("number"==typeof i&&(i=i.toString(),s=!0),s&&!t&&"number"==typeof r&&(i=function(e,t,r){if(-1!==["","-"].indexOf(e))return e;var n=-1!==e.indexOf(".")&&t,o=P(e),a=o.beforeDecimal,i=o.afterDecimal,s=o.hasNagation,u=parseFloat("0.".concat(i||"0")).toFixed(t).split("."),c=a.split("").reverse().reduce(function(e,t,r){return e.length>r?(Number(e[0])+Number(t)).toString()+e.substring(1,e.length):t+e},u[0]),l=y(u[1]||"",Math.min(t,i.length),r),f=n?".":"";return"".concat(s?"-":"").concat(c).concat(f).concat(l)}(i,r,n)),s?this.formatNumString(i):this.formatInput(i))}},{key:"formatNegation",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",t=this.props.allowNegative,r=new RegExp("(-)"),n=new RegExp("(-)(.)*(-)"),o=r.test(e),a=n.test(e);return e=e.replace(/-/g,""),o&&!a&&t&&(e="-"+e),e}},{key:"formatInput",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return this.props.format||(e=this.formatNegation(e)),e=this.removeFormatting(e),this.formatNumString(e)}},{key:"isCharacterAFormat",value:function(e,t){var r=this.props,n=r.format,o=r.prefix,a=r.suffix,i=r.decimalScale,s=r.fixedDecimalScale,u=this.getSeparators().decimalSeparator;return"string"==typeof n&&"#"!==n[e]||!(n||!(e<o.length||e>=t.length-a.length||i&&s&&t[e]===u))}},{key:"checkIfFormatGotDeleted",value:function(e,t,r){for(var n=e;n<t;n++)if(this.isCharacterAFormat(n,r))return!0;return!1}},{key:"correctInputValue",value:function(e,t,r){var n=this.props,o=n.format,a=n.decimalSeparator,i=n.allowNegative,s=n.prefix,u=n.suffix,c=this.state.numAsString||"",l=this.selectionBeforeInput,f=l.selectionStart,p=l.selectionEnd,h=function(e,t){for(var r=0,n=0,o=e.length,a=t.length;e[r]===t[r]&&r<o;)r++;for(;e[o-1-n]===t[a-1-n]&&r<a-n&&r<o-n;)n++;return{start:r,end:o-n}}(t,r),g=h.start,m=h.end,v=o?0:s.length,d=t.length-(o?0:u.length);if(r.length>t.length||!r.length||g===m||0===f&&p===t.length||f===v&&p===d)return r;if(this.checkIfFormatGotDeleted(g,m,t)&&(r=t),!o){var y=this.removeFormatting(r),S=P(y,i),b=S.beforeDecimal,x=S.afterDecimal,O=S.addNegation,w=e<r.indexOf(a)+1;if(y.length<c.length&&w&&""===b&&!parseFloat(x))return O?"-":""}return r}},{key:"onChange",value:function(e){e.persist();var t=e.target,r=t.value,n=this.state,o=this.props,a=o.isAllowed,i=n.value||"",s=Math.max(t.selectionStart,t.selectionEnd);r=this.correctInputValue(s,i,r);var u=this.formatInput(r)||"",c=this.removeFormatting(u),l=this.getValueObject(u,c);a(l)||(u=i),t.value=u;var f=this.getCaretPosition(r,u,s);this.setPatchedCaretPosition(t,f,u),u!==i?this.setState({value:u,numAsString:c},function(){o.onValueChange(l,e),o.onChange(e)}):o.onChange(e)}},{key:"onBlur",value:function(t){var r=this,n=this.props,e=this.state,o=n.format,a=n.onBlur,i=e.numAsString,s=e.value;if(!o){i=function(e){if(!e)return e;var t="-"===e[0];t&&(e=e.substring(1,e.length));var r=e.split("."),n=r[0].replace(/^0+/,"")||"0",o=r[1]||"";return"".concat(t?"-":"").concat(n).concat(o?".".concat(o):"")}(i);var u=this.formatNumString(i);if(u!==s)return t.persist(),void this.setState({value:u,numAsString:i},function(){var e=r.getValueObject(u,i);n.onValueChange(e,t),a(t)})}a(t)}},{key:"onKeyDown",value:function(e){var t,r=this,n=e.target,o=e.key,a=n.selectionStart,i=n.selectionEnd,s=n.value,u=void 0===s?"":s,c=this.props,l=c.decimalScale,f=c.fixedDecimalScale,p=c.prefix,h=c.suffix,g=c.format,m=c.onKeyDown,v=c.onValueChange,d=void 0!==l&&f,y=this.getNumberRegex(!1,d),S=new RegExp("-"),b="string"==typeof g;if(this.selectionBeforeInput={selectionStart:a,selectionEnd:i},"ArrowLeft"===o||"Backspace"===o?t=a-1:"ArrowRight"===o?t=a+1:"Delete"===o&&(t=a),void 0!==t&&a===i){var x=t,O=b?g.indexOf("#"):p.length,w=b?g.lastIndexOf("#")+1:u.length-h.length;if("ArrowLeft"===o||"ArrowRight"===o){var P="ArrowLeft"===o?"left":"right";x=this.correctCaretPosition(u,t,P)}else if("Delete"!==o||y.test(u[t])||S.test(u[t])){if("Backspace"===o&&!y.test(u[t]))if(a<=O+1&&"-"===u[0]&&void 0===g){var k=u.substring(1),N=this.removeFormatting(k),F=this.getValueObject(k,N);e.persist(),this.setState({value:k,numAsString:N},function(){r.setPatchedCaretPosition(n,x,k),v(F,e)})}else if(!S.test(u[t])){for(;!y.test(u[x-1])&&O<x;)x--;x=this.correctCaretPosition(u,x,"left")}}else for(;!y.test(u[x])&&x<w;)x++;(x!==t||t<O||w<t)&&(e.preventDefault(),this.setPatchedCaretPosition(n,x,u)),e.isUnitTestRun&&this.setPatchedCaretPosition(n,x,u),this.props.onKeyDown(e)}else m(e)}},{key:"onMouseUp",value:function(e){var t=e.target,r=t.selectionStart,n=t.selectionEnd,o=t.value,a=void 0===o?"":o;if(r===n){var i=this.correctCaretPosition(a,r);i!==r&&this.setPatchedCaretPosition(t,i,a)}this.props.onMouseUp(e)}},{key:"onFocus",value:function(i){var s=this;i.persist(),setTimeout(function(){var e=i.target,t=e.selectionStart,r=e.selectionEnd,n=e.value,o=void 0===n?"":n,a=s.correctCaretPosition(o,t);a===t||0===t&&r===o.length||s.setPatchedCaretPosition(e,a,o),s.props.onFocus(i)},0)}},{key:"render",value:function(){var t,r,n,e=this.props,o=e.type,a=e.displayType,i=e.customInput,s=e.renderText,u=e.getInputRef,c=this.state.value,l=(t=this.props,r=x,n={},Object.keys(t).forEach(function(e){r[e]||(n[e]=t[e])}),n),f=g({},l,{type:o,value:c,onChange:this.onChange,onKeyDown:this.onKeyDown,onMouseUp:this.onMouseUp,onFocus:this.onFocus,onBlur:this.onBlur});if("text"===a)return s?s(c)||null:h.createElement("span",g({},l,{ref:u}),c);if(i){var p=i;return h.createElement(p,f)}return h.createElement("input",g({},f,{ref:u}))}}])&&o(t.prototype,r),n&&o(t,n),a}();return w.propTypes=x,w.defaultProps=O,w});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):t.NumberFormat=e(t.React)}(this,function(h){"use strict";function a(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function g(){return(g=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(t[n]=r[n])}return t}).apply(this,arguments)}function s(t){return(s=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function t(t){return function(){return t}}h=h&&h.hasOwnProperty("default")?h.default:h;var e=function(){};e.thatReturns=t,e.thatReturnsFalse=t(!1),e.thatReturnsTrue=t(!0),e.thatReturnsNull=t(null),e.thatReturnsThis=function(){return this},e.thatReturnsArgument=function(t){return t};var n=e;var i=function(t,e,r,n,a,o,i,s){if(!t){var u;if(void 0===e)u=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,n,a,o,i,s],c=0;(u=new Error(e.replace(/%s/g,function(){return l[c++]}))).name="Invariant Violation"}throw u.framesToPop=1,u}},r=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;(function(){try{if(!Object.assign)return!1;var t=new String("abc");if(t[5]="de","5"===Object.getOwnPropertyNames(t)[0])return!1;for(var e={},r=0;r<10;r++)e["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(e).map(function(t){return e[t]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(t){n[t]=t}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(t){return!1}})()&&Object.assign;var f,p=(function(t){t.exports=function(){function t(t,e,r,n,a,o){"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==o&&i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return t}var r={array:t.isRequired=t,bool:t,func:t,number:t,object:t,string:t,symbol:t,any:t,arrayOf:e,element:t,instanceOf:e,node:t,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return r.checkPropTypes=n,r.PropTypes=r}()}(f={exports:{}},f.exports),f.exports);function m(){}function d(t){return!!(t||"").match(/\d/)}function v(t){return t.replace(/[-[\]/{}()*+?.\\^$|]/g,"\\$&")}function P(t){var e=!(1<arguments.length&&void 0!==arguments[1])||arguments[1],r="-"===t[0],n=r&&e,a=(t=t.replace("-","")).split(".");return{beforeDecimal:a[0],afterDecimal:a[1]||"",hasNagation:r,addNegation:n}}function y(t,e,r){for(var n="",a=r?"0":"",o=0;o<=e-1;o++)n+=t[o]||a;return n}function S(t,e){if(t.value=t.value,null!==t){if(t.createTextRange){var r=t.createTextRange();return r.move("character",e),r.select(),!0}return t.selectionStart||0===t.selectionStart?(t.focus(),t.setSelectionRange(e,e),!0):(t.focus(),!1)}}function b(t,e,r){return Math.min(Math.max(t,e),r)}var x={thousandSeparator:p.oneOfType([p.string,p.oneOf([!0])]),decimalSeparator:p.string,thousandsGroupStyle:p.oneOf(["thousand","lakh","wan"]),decimalScale:p.number,fixedDecimalScale:p.bool,displayType:p.oneOf(["input","text"]),prefix:p.string,suffix:p.string,format:p.oneOfType([p.string,p.func]),removeFormatting:p.func,mask:p.oneOfType([p.string,p.arrayOf(p.string)]),value:p.oneOfType([p.number,p.string]),defaultValue:p.oneOfType([p.number,p.string]),isNumericString:p.bool,customInput:p.func,allowNegative:p.bool,allowEmptyFormatting:p.bool,onValueChange:p.func,onKeyDown:p.func,onMouseUp:p.func,onChange:p.func,onFocus:p.func,onBlur:p.func,type:p.oneOf(["text","tel","password"]),isAllowed:p.func,renderText:p.func,getInputRef:p.func},O={displayType:"input",decimalSeparator:".",thousandsGroupStyle:"thousand",fixedDecimalScale:!1,prefix:"",suffix:"",allowNegative:!0,allowEmptyFormatting:!1,isNumericString:!1,type:"text",onValueChange:m,onChange:m,onKeyDown:m,onMouseUp:m,onFocus:m,onBlur:m,isAllowed:function(){return!0},getInputRef:m},w=function(t){function i(t){var e,r,n;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),r=this,e=!(n=s(i).call(this,t))||"object"!=typeof n&&"function"!=typeof n?u(r):n;var a=t.defaultValue;e.validateProps();var o=e.formatValueProp(a);return e.state={value:o,numAsString:e.removeFormatting(o)},e.selectionBeforeInput={selectionStart:0,selectionEnd:0},e.onChange=e.onChange.bind(u(u(e))),e.onKeyDown=e.onKeyDown.bind(u(u(e))),e.onMouseUp=e.onMouseUp.bind(u(u(e))),e.onFocus=e.onFocus.bind(u(u(e))),e.onBlur=e.onBlur.bind(u(u(e))),e}var e,r,n;return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(i,h.Component),e=i,(r=[{key:"componentDidUpdate",value:function(t){this.updateValueIfRequired(t)}},{key:"updateValueIfRequired",value:function(t){var e=this.props,r=this.state,n=this.inFocus,a=e.onValueChange,o=r.value,i=r.numAsString,s=void 0===i?"":i;if(t!==e){this.validateProps();var u=this.formatNumString(s),l=void 0===e.value?u:this.formatValueProp(),c=this.removeFormatting(l),f=parseFloat(c),p=parseFloat(s);(isNaN(f)&&isNaN(p)||f===p)&&u===o&&(!1!==n||l===o)||(this.setState({value:l,numAsString:c}),a(this.getValueObject(l,c)))}}},{key:"getFloatString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.decimalScale,r=this.getSeparators().decimalSeparator,n=this.getNumberRegex(!0),a="-"===t[0];a&&(t=t.replace("-","")),r&&0===e&&(t=t.split(r)[0]);var o=(t=(t.match(n)||[]).join("").replace(r,".")).indexOf(".");return-1!==o&&(t="".concat(t.substring(0,o),".").concat(t.substring(o+1,t.length).replace(new RegExp(v(r),"g"),""))),a&&(t="-"+t),t}},{key:"getNumberRegex",value:function(t,e){var r=this.props,n=r.format,a=r.decimalScale,o=this.getSeparators().decimalSeparator;return new RegExp("\\d"+(!o||0===a||e||n?"":"|"+v(o)),t?"g":void 0)}},{key:"getSeparators",value:function(){var t=this.props.decimalSeparator,e=this.props.thousandSeparator;return!0===e&&(e=","),{decimalSeparator:t,thousandSeparator:e}}},{key:"getMaskAtIndex",value:function(t){var e=this.props.mask,r=void 0===e?" ":e;return"string"==typeof r?r:r[t]||" "}},{key:"getValueObject",value:function(t,e){var r=parseFloat(e);return{formattedValue:t,value:e,floatValue:isNaN(r)?void 0:r}}},{key:"validateProps",value:function(){var t=this.props.mask,e=this.getSeparators(),r=e.decimalSeparator,n=e.thousandSeparator;if(r===n)throw new Error("\n          Decimal separator can't be same as thousand separator.\n          thousandSeparator: ".concat(n,' (thousandSeparator = {true} is same as thousandSeparator = ",")\n          decimalSeparator: ').concat(r," (default value for decimalSeparator is .)\n       "));if(t&&("string"===t?t:t.toString()).match(/\d/g))throw new Error("\n          Mask ".concat(t," should not contain numeric character;\n        "))}},{key:"setPatchedCaretPosition",value:function(t,e,r){S(t,e),setTimeout(function(){t.value===r&&S(t,e)},0)}},{key:"correctCaretPosition",value:function(t,e,r){var n=this.props,a=n.prefix,o=n.suffix,i=n.format;if(""===t)return 0;if(e=b(e,0,t.length),!i){var s="-"===t[0];return b(e,a.length+(s?1:0),t.length-o.length)}if("function"==typeof i)return e;if("#"===i[e]&&d(t[e]))return e;if("#"===i[e-1]&&d(t[e-1]))return e;var u=i.indexOf("#");e=b(e,u,i.lastIndexOf("#")+1);for(var l=i.substring(e,i.length).indexOf("#"),c=e,f=e+(-1===l?0:l);u<c&&("#"!==i[c]||!d(t[c]));)c-=1;return!d(t[f])||"left"===r&&e!==u||e-c<f-e?d(t[c])?c+1:c:f}},{key:"getCaretPosition",value:function(t,e,r){var n,a,o=this.props.format,i=this.state.value,s=this.getNumberRegex(!0),u=(t.match(s)||[]).join(""),l=(e.match(s)||[]).join("");for(a=n=0;a<r;a++){var c=t[a]||"",f=e[n]||"";if((c.match(s)||c===f)&&("0"!==c||!f.match(s)||"0"===f||u.length===l.length)){for(;c!==e[n]&&n<e.length;)n++;n++}}return"string"!=typeof o||i||(n=e.length),n=this.correctCaretPosition(e,n)}},{key:"removePrefixAndSuffix",value:function(t){var e=this.props,r=e.format,n=e.prefix,a=e.suffix;if(!r&&t){var o="-"===t[0];o&&(t=t.substring(1,t.length));var i=(t=n&&0===t.indexOf(n)?t.substring(n.length,t.length):t).lastIndexOf(a);t=a&&-1!==i&&i===t.length-a.length?t.substring(0,i):t,o&&(t="-"+t)}return t}},{key:"removePatternFormatting",value:function(t){for(var e=this.props.format.split("#").filter(function(t){return""!==t}),r=0,n="",a=0,o=e.length;a<=o;a++){var i=e[a]||"",s=a===o?t.length:t.indexOf(i,r);if(-1===s){n=t;break}n+=t.substring(r,s),r=s+i.length}return(n.match(/\d/g)||[]).join("")}},{key:"removeFormatting",value:function(t){var e=this.props,r=e.format,n=e.removeFormatting;return t?t=r?"string"==typeof r?this.removePatternFormatting(t):"function"==typeof n?n(t):(t.match(/\d/g)||[]).join(""):(t=this.removePrefixAndSuffix(t),this.getFloatString(t)):t}},{key:"formatWithPattern",value:function(t){for(var e=this.props.format,r=0,n=e.split(""),a=0,o=e.length;a<o;a++)"#"===e[a]&&(n[a]=t[r]||this.getMaskAtIndex(r),r+=1);return n.join("")}},{key:"formatAsNumber",value:function(t){var e=this.props,r=e.decimalScale,n=e.fixedDecimalScale,a=e.prefix,o=e.suffix,i=e.allowNegative,s=e.thousandsGroupStyle,u=this.getSeparators(),l=u.thousandSeparator,c=u.decimalSeparator,f=-1!==t.indexOf(".")||r&&n,p=P(t,i),h=p.beforeDecimal,g=p.afterDecimal,m=p.addNegation;if(void 0!==r&&(g=y(g,r,n)),l){var d=function(t){switch(t){case"lakh":return/(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;case"wan":return/(\d)(?=(\d{4})+(?!\d))/g;case"thousand":default:return/(\d)(?=(\d{3})+(?!\d))/g}}(s);h=h.replace(d,"$1"+l)}return a&&(h=a+h),o&&(g+=o),m&&(h="-"+h),t=h+(f&&c||"")+g}},{key:"formatNumString",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props,r=e.format,n=e.allowEmptyFormatting,a=t;return""!==t||n?"-"!==t||r?a="string"==typeof r?this.formatWithPattern(a):"function"==typeof r?r(a):this.formatAsNumber(a):(a="-",t=""):a="",a}},{key:"formatValueProp",value:function(t){var e=this.props,r=e.format,n=e.decimalScale,a=e.fixedDecimalScale,o=e.allowEmptyFormatting,i=this.props,s=i.value,u=void 0===s?t:s,l=i.isNumericString,c=!u&&0!==u;return c&&o&&(u=""),c&&!o?"":("number"==typeof u&&(u=u.toString(),l=!0),l&&!r&&"number"==typeof n&&(u=function(t,e,r){if(-1!==["","-"].indexOf(t))return t;var n=-1!==t.indexOf(".")&&e,a=P(t),o=a.beforeDecimal,i=a.afterDecimal,s=a.hasNagation,u=parseFloat("0.".concat(i||"0")).toFixed(e).split("."),l=o.split("").reverse().reduce(function(t,e,r){return t.length>r?(Number(t[0])+Number(e)).toString()+t.substring(1,t.length):e+t},u[0]),c=y(u[1]||"",Math.min(e,i.length),r),f=n?".":"";return"".concat(s?"-":"").concat(l).concat(f).concat(c)}(u,n,a)),l?this.formatNumString(u):this.formatInput(u))}},{key:"formatNegation",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"",e=this.props.allowNegative,r=new RegExp("(-)"),n=new RegExp("(-)(.)*(-)"),a=r.test(t),o=n.test(t);return t=t.replace(/-/g,""),a&&!o&&e&&(t="-"+t),t}},{key:"formatInput",value:function(){var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";return this.props.format||(t=this.formatNegation(t)),t=this.removeFormatting(t),this.formatNumString(t)}},{key:"isCharacterAFormat",value:function(t,e){var r=this.props,n=r.format,a=r.prefix,o=r.suffix,i=r.decimalScale,s=r.fixedDecimalScale,u=this.getSeparators().decimalSeparator;return"string"==typeof n&&"#"!==n[t]||!(n||!(t<a.length||t>=e.length-o.length||i&&s&&e[t]===u))}},{key:"checkIfFormatGotDeleted",value:function(t,e,r){for(var n=t;n<e;n++)if(this.isCharacterAFormat(n,r))return!0;return!1}},{key:"correctInputValue",value:function(t,e,r){var n=this.props,a=n.format,o=n.allowNegative,i=n.prefix,s=n.suffix,u=this.getSeparators().decimalSeparator,l=this.state.numAsString||"",c=this.selectionBeforeInput,f=c.selectionStart,p=c.selectionEnd,h=function(t,e){for(var r=0,n=0,a=t.length,o=e.length;t[r]===e[r]&&r<a;)r++;for(;t[a-1-n]===e[o-1-n]&&r<o-n&&r<a-n;)n++;return{start:r,end:a-n}}(e,r),g=h.start,m=h.end;if(!a&&"."!==u&&g===m&&"."===r[f])return r.substr(0,f)+u+r.substr(f+1,r.length);var d=a?0:i.length,v=e.length-(a?0:s.length);if(r.length>e.length||!r.length||g===m||0===f&&p===e.length||f===d&&p===v)return r;if(this.checkIfFormatGotDeleted(g,m,e)&&(r=e),!a){var y=this.removeFormatting(r),S=P(y,o),b=S.beforeDecimal,x=S.afterDecimal,O=S.addNegation,w=t<r.indexOf(u)+1;if(y.length<l.length&&w&&""===b&&!parseFloat(x))return O?"-":""}return r}},{key:"onChange",value:function(t){t.persist();var e=t.target,r=e.value,n=this.state,a=this.props,o=a.isAllowed,i=n.value||"",s=Math.max(e.selectionStart,e.selectionEnd);r=this.correctInputValue(s,i,r);var u=this.formatInput(r)||"",l=this.removeFormatting(u),c=this.getValueObject(u,l);o(c)||(u=i),e.value=u;var f=this.getCaretPosition(r,u,s);this.setPatchedCaretPosition(e,f,u),u!==i?this.setState({value:u,numAsString:l},function(){a.onValueChange(c),a.onChange(t)}):a.onChange(t)}},{key:"onBlur",value:function(e){var r=this,n=this.props,t=this.state,a=n.format,o=n.onBlur,i=t.numAsString,s=t.value;if(this.inFocus=!1,!a){i=function(t){if(!t)return t;var e="-"===t[0];e&&(t=t.substring(1,t.length));var r=t.split("."),n=r[0].replace(/^0+/,"")||"0",a=r[1]||"";return"".concat(e?"-":"").concat(n).concat(a?".".concat(a):"")}(i);var u=this.formatNumString(i);if(u!==s)return e.persist(),void this.setState({value:u,numAsString:i},function(){var t=r.getValueObject(u,i);n.onValueChange(t),o(e)})}o(e)}},{key:"onKeyDown",value:function(t){var e,r=this,n=t.target,a=t.key,o=n.selectionStart,i=n.selectionEnd,s=n.value,u=void 0===s?"":s,l=this.props,c=l.decimalScale,f=l.fixedDecimalScale,p=l.prefix,h=l.suffix,g=l.format,m=l.onKeyDown,d=l.onValueChange,v=void 0!==c&&f,y=this.getNumberRegex(!1,v),S=new RegExp("-"),b="string"==typeof g;if(this.selectionBeforeInput={selectionStart:o,selectionEnd:i},"ArrowLeft"===a||"Backspace"===a?e=o-1:"ArrowRight"===a?e=o+1:"Delete"===a&&(e=o),void 0!==e&&o===i){var x=e,O=b?g.indexOf("#"):p.length,w=b?g.lastIndexOf("#")+1:u.length-h.length;if("ArrowLeft"===a||"ArrowRight"===a){var P="ArrowLeft"===a?"left":"right";x=this.correctCaretPosition(u,e,P)}else if("Delete"!==a||y.test(u[e])||S.test(u[e])){if("Backspace"===a&&!y.test(u[e]))if(o<=O+1&&"-"===u[0]&&void 0===g){var k=u.substring(1),F=this.removeFormatting(k),N=this.getValueObject(k,F);t.persist(),this.setState({value:k,numAsString:F},function(){r.setPatchedCaretPosition(n,x,k),d(N)})}else if(!S.test(u[e])){for(;!y.test(u[x-1])&&O<x;)x--;x=this.correctCaretPosition(u,x,"left")}}else for(;!y.test(u[x])&&x<w;)x++;(x!==e||e<O||w<e)&&(t.preventDefault(),this.setPatchedCaretPosition(n,x,u)),t.isUnitTestRun&&this.setPatchedCaretPosition(n,x,u),this.props.onKeyDown(t)}else m(t)}},{key:"onMouseUp",value:function(t){var e=t.target,r=e.selectionStart,n=e.selectionEnd,a=e.value,o=void 0===a?"":a;if(r===n){var i=this.correctCaretPosition(o,r);i!==r&&this.setPatchedCaretPosition(e,i,o)}this.props.onMouseUp(t)}},{key:"onFocus",value:function(i){var s=this;i.persist(),this.inFocus=!0,setTimeout(function(){var t=i.target,e=t.selectionStart,r=t.selectionEnd,n=t.value,a=void 0===n?"":n,o=s.correctCaretPosition(a,e);o===e||0===e&&r===a.length||s.setPatchedCaretPosition(t,o,a),s.props.onFocus(i)},0)}},{key:"render",value:function(){var e,r,n,t=this.props,a=t.type,o=t.displayType,i=t.customInput,s=t.renderText,u=t.getInputRef,l=this.state.value,c=(e=this.props,r=x,n={},Object.keys(e).forEach(function(t){r[t]||(n[t]=e[t])}),n),f=g({},c,{type:a,value:l,onChange:this.onChange,onKeyDown:this.onKeyDown,onMouseUp:this.onMouseUp,onFocus:this.onFocus,onBlur:this.onBlur});if("text"===o)return s?s(l)||null:h.createElement("span",g({},c,{ref:u}),l);if(i){var p=i;return h.createElement(p,f)}return h.createElement("input",g({},f,{ref:u}))}}])&&a(e.prototype,r),n&&a(e,n),i}();return w.propTypes=x,w.defaultProps=O,w});

example/src/index.js

@@ -8,4 +8,2 @@ import React from 'react';
 
-
-
 class App extends React.Component {
@@ -56,2 +54,24 @@ constructor() {
           <h3>
+            Indian (lakh) style number grouping
+          </h3>
+          <NumberFormat
+            thousandSeparator={true}
+            prefix="₹"
+            thousandsGroupStyle="lakh"
+          />
+        </div>
+
+        <div className="example">
+          <h3>
+            Chinese (wan) style number grouping
+          </h3>
+          <NumberFormat
+            thousandSeparator={true}
+            prefix="¥"
+            thousandsGroupStyle="wan"
+          />
+        </div>
+
+        <div className="example">
+          <h3>
             Decimal scale : Format currency in input with decimal scale
@@ -58,0 +78,0 @@ </h3>

lib/number_format.js

@@ -39,2 +39,3 @@ "use strict";
   decimalSeparator: _propTypes.default.string,
+  thousandsGroupStyle: _propTypes.default.oneOf(['thousand', 'lakh', 'wan']),
   decimalScale: _propTypes.default.number,
@@ -49,2 +50,3 @@ fixedDecimalScale: _propTypes.default.bool,
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   isNumericString: _propTypes.default.bool,
@@ -60,3 +62,3 @@ customInput: _propTypes.default.func,
   onBlur: _propTypes.default.func,
-  type: _propTypes.default.oneOf(['text', 'tel']),
+  type: _propTypes.default.oneOf(['text', 'tel', 'password']),
   isAllowed: _propTypes.default.func,
@@ -69,2 +71,3 @@ renderText: _propTypes.default.func,
   decimalSeparator: '.',
+  thousandsGroupStyle: 'thousand',
   fixedDecimalScale: false,
@@ -97,7 +100,8 @@ prefix: '',
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props)); //validate props
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(NumberFormat).call(this, props));
+    var defaultValue = props.defaultValue; //validate props
 
     _this.validateProps();
 
-    var formattedValue = _this.formatValueProp();
+    var formattedValue = _this.formatValueProp(defaultValue);
 
@@ -129,3 +133,8 @@ _this.state = {
       var props = this.props,
-          state = this.state;
+          state = this.state,
+          inFocus = this.inFocus;
+      var onValueChange = props.onValueChange;
+      var stateValue = state.value,
+          _state$numAsString = state.numAsString,
+          lastNumStr = _state$numAsString === void 0 ? '' : _state$numAsString;
 
@@ -135,4 +144,2 @@ if (prevProps !== props) {
         this.validateProps();
-        var stateValue = state.value;
-        var lastNumStr = state.numAsString || '';
         var lastValueWithNewFormat = this.formatNumString(lastNumStr);
@@ -144,3 +151,6 @@ var formattedValue = props.value === undefined ? lastValueWithNewFormat : this.formatValueProp();
 
-        if ((!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || lastValueWithNewFormat !== stateValue) {
+        if ( //while typing set state only when float value changes
+        (!isNaN(floatValue) || !isNaN(lastFloatValue)) && floatValue !== lastFloatValue || //can also set state when float value is same and the format props changes
+        lastValueWithNewFormat !== stateValue || //set state always when not in focus and formatted value is changed
+        inFocus === false && formattedValue !== stateValue) {
           this.setState({
@@ -150,2 +160,3 @@ value: formattedValue,
           });
+          onValueChange(this.getValueObject(formattedValue, numAsString));
         }
@@ -478,3 +489,4 @@ }
           suffix = _this$props5.suffix,
-          allowNegative = _this$props5.allowNegative;
+          allowNegative = _this$props5.allowNegative,
+          thousandsGroupStyle = _this$props5.thousandsGroupStyle;
 
@@ -497,3 +509,4 @@ var _this$getSeparators4 = this.getSeparators(),
       if (thousandSeparator) {
-        beforeDecimal = beforeDecimal.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousandSeparator);
+        var thousandsGroupRegex = (0, _utils.getThousandsGroupRegex)(thousandsGroupStyle);
+        beforeDecimal = beforeDecimal.replace(thousandsGroupRegex, '$1' + thousandSeparator);
       } //add prefix and suffix
@@ -535,3 +548,3 @@
     key: "formatValueProp",
-    value: function formatValueProp() {
+    value: function formatValueProp(defaultValue) {
       var _this$props7 = this.props,
@@ -543,3 +556,4 @@ format = _this$props7.format,
       var _this$props8 = this.props,
-          value = _this$props8.value,
+          _this$props8$value = _this$props8.value,
+          value = _this$props8$value === void 0 ? defaultValue : _this$props8$value,
           isNumericString = _this$props8.isNumericString;
@@ -646,6 +660,9 @@ var isNonNumericFalsy = !value && value !== 0;
           format = _this$props10.format,
-          decimalSeparator = _this$props10.decimalSeparator,
           allowNegative = _this$props10.allowNegative,
           prefix = _this$props10.prefix,
           suffix = _this$props10.suffix;
+
+      var _this$getSeparators6 = this.getSeparators(),
+          decimalSeparator = _this$getSeparators6.decimalSeparator;
+
       var lastNumStr = this.state.numAsString || '';
@@ -659,2 +676,8 @@ var _this$selectionBefore = this.selectionBeforeInput,
           end = _findChangedIndex.end;
+      /** Check if only . is added in the numeric format and replace it with decimal separator */
+
+
+      if (!format && decimalSeparator !== '.' && start === end && value[selectionStart] === '.') {
+        return value.substr(0, selectionStart) + decimalSeparator + value.substr(selectionStart + 1, value.length);
+      }
       /* don't do anyhting if something got added,
@@ -733,3 +756,3 @@ or if value is empty string (when whole input is cleared)
         }, function () {
-          props.onValueChange(valueObj, e);
+          props.onValueChange(valueObj);
           props.onChange(e);
@@ -752,2 +775,3 @@ });
       var lastValue = state.value;
+      this.inFocus = false;
 
@@ -767,3 +791,3 @@ if (!format) {
 
-            props.onValueChange(valueObj, e);
+            props.onValueChange(valueObj);
             onBlur(e);
@@ -850,3 +874,3 @@ });
 
-            onValueChange(valueObj, e);
+            onValueChange(valueObj);
           });
@@ -910,2 +934,3 @@ } else if (!negativeRegex.test(value[expectedCaretPosition])) {
       e.persist();
+      this.inFocus = true;
       setTimeout(function () {
@@ -912,0 +937,0 @@ var el = e.target;

lib/utils.js

@@ -10,2 +10,3 @@ "use strict";
 exports.escapeRegExp = escapeRegExp;
+exports.getThousandsGroupRegex = getThousandsGroupRegex;
 exports.splitDecimal = splitDecimal;
@@ -33,2 +34,16 @@ exports.fixLeadingZero = fixLeadingZero;
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
+}
+
+function getThousandsGroupRegex(thousandsGroupStyle) {
+  switch (thousandsGroupStyle) {
+    case 'lakh':
+      return /(\d+?)(?=(\d\d)+(\d)(?!\d))(\.\d+)?/g;
+
+    case 'wan':
+      return /(\d)(?=(\d{4})+(?!\d))/g;
+
+    case 'thousand':
+    default:
+      return /(\d)(?=(\d{3})+(?!\d))/g;
+  }
 } //spilt a float number into different parts beforeDecimal, afterDecimal, and negation
@@ -35,0 +50,0 @@

package.json

 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "3.6.2",
+  "version": "4.0.0",
   "main": "lib/number_format.js",
@@ -6,0 +6,0 @@ "author": "Sudhanshu Yadav",

README.md

@@ -9,3 +9,3 @@ # react-number-format
 4. Custom formatting handler.
-5. Formatting a input or a simple text.
+5. Format number in an input or format as a simple text.
 
@@ -45,2 +45,3 @@ ### Install
 | decimalSeparator | single character string| . | Support decimal point on a number |
+| thousandsGroupStyle | One of ['thousand', 'lakh', 'wan'] |thousand| Define the thousand grouping style, It support three types. thousand style (thousand) : `123,456,789`, indian style (lakh) : `12,34,56,789`, chinese style (wan) : `1,2345,6789`|
 | decimalScale | number| none| If defined it limits to given decimal scale |
@@ -53,5 +54,6 @@ | fixedDecimalScale | boolean| false| If true it add 0s to match given decimalScale|
 | value | Number or String | null | Value to the number format. It can be a float number, or formatted string. If value is string representation of number (unformatted), isNumericString props should be passed as true. |
+| defaultValue | Number or String | null | Value to the used as default value if value is not provided. The format of defaultValue should be similar as defined for the value. |
 | isNumericString | boolean | false | If value is passed as string representation of numbers (unformatted) then this should be passed as true |
 | displayType | String: text / input | input | If input it renders a input element where formatting happens as you input characters. If text it renders it as a normal text in a span formatting the given value |
-| type | One of ['text', 'tel'] | text | Input type attribute |
+| type | One of ['text', 'tel', 'password'] | text | Input type attribute |
 | format | String : Hash based ex (#### #### #### ####) <br/> Or Function| none | If format given as hash string allow number input inplace of hash. If format given as function, component calls the function with unformatted number and expects formatted number. |
@@ -61,3 +63,3 @@ | removeFormatting | (formattedValue) => numericString | none | If you are providing custom format method and it add numbers as format you will need to add custom removeFormatting logic |
 | customInput | Component Reference | input | This allow supporting custom inputs with number format. |
-| onValueChange | (values, e) => {} | none | onValueChange handler accepts [values object](#values-object) and event object (change / blur) as second parameter |
+| onValueChange | (values) => {} | none | onValueChange handler accepts [values object](#values-object) |
 | isAllowed | ([values](#values-object)) => true or false | none | A checker function to check if input value is valid or not |
@@ -93,3 +95,3 @@ | renderText | (formattedValue) => React Element | null | A renderText method useful if you want to render formattedValue in different element other than span. |
 
-7. onValueChange is not same as onChange. It gets called on different events. So don't make assumption about the event object (second parameter). It can be change event or blur event.
+7. onValueChange is not same as onChange. It gets called on whenever there is change in value which can be caused by any event like change or blur event or by a prop change. It no longer receives event object as second parameter.
 
@@ -125,2 +127,16 @@ ### Examples
 
+#### Indian(lakh) style and chinese(wan) style number grouping
+Indian (lakh) style grouping
+```jsx
+<NumberFormat thousandSeparator={true} thousandsGroupStyle="lakh" prefix={'₹'} value={123456789}/>
+```
+Output: ₹12,34,56,789
+
+Chinese (wan) style grouping
+```jsx
+<NumberFormat thousandSeparator={true} thousandsGroupStyle="wan" prefix={'¥'} value={123456789}/>
+```
+Output: ¥1,2345,6789
+
+
 #### Maintaining change value on state
@@ -241,2 +257,15 @@ ```jsx
 
+#### v4.0.0
+Breaking Changes
+
+- onValueChange no longer receives event object as second parameter, so if you accessing it, it will break.
+
+Feature Addition
+- Support defaultValue prop.
+- Trigger onValueChange if the value is formatted due to prop change.
+- Allow password as type prop.
+- Support indian (lakh) and chinese (wan) style thousand grouping.
+- Always allow . to be typed as decimal separator, even when decimal separator is defined differently
+
+
 #### v3.0.0
@@ -243,0 +272,0 @@ - onChange no longer gets values object. You need to use onValueChange instead. This is done because formatted value may change on onBlur event. calling onChange on onBlur doesn't feel right.

typings/number_format.d.ts

@@ -27,5 +27,6 @@ /// <reference types="react" />
     decimalSeparator?: boolean | string;
+    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan';
     decimalScale?: number;
     fixedDecimalScale?: boolean;
-    displayType?: "input" | "text";
+    displayType?: 'input' | 'text';
     prefix?: string;
@@ -37,2 +38,3 @@ suffix?: string;
     value?: number | string;
+    defaultValue?: number | string;
     isNumericString?: boolean;
@@ -54,3 +56,3 @@ customInput?: React.ComponentType<any>;
      */
-    type?: "text" | "tel";
+    type?: 'text' | 'tel'  | 'password';
     isAllowed?: (values: NumberFormatValues) => boolean;
@@ -57,0 +59,0 @@ renderText?: (formattedValue: string) => React.ReactNode;

No alert changes

Improved metrics

Total package byte prevSize

523339

increased by1.53%

Lines of code

4032

increased by3.09%

Number of lines in readme file

297

increased by10.82%

No dependency changes