react-input-mask - npm Package Compare versions

Comparing version 0.6.5 to 0.6.6

build/InputElement.js

@@ -32,2 +32,9 @@ // https://github.com/sanniassin/react-input-mask
     },
+    isAndroidFirefox: function () {
+        var windows = new RegExp("windows", "i");
+        var firefox = new RegExp("firefox", "i");
+        var android = new RegExp("android", "i");
+        var ua = navigator.userAgent;
+        return !windows.test(ua) && firefox.test(ua) && android.test(ua);
+    },
     isDOMElement: function (element) {
@@ -52,2 +59,45 @@ return typeof HTMLElement === "object" ? element instanceof HTMLElement // DOM2
     },
+    enableValueAccessors: function () {
+        var _this = this;
+
+        var canUseAccessors = !!(Object.getOwnPropertyDescriptor && Object.getPrototypeOf && Object.defineProperty);
+        if (canUseAccessors) {
+            var input = this.getInputDOMNode();
+            this.valueDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+            Object.defineProperty(input, 'value', {
+                configurable: true,
+                enumerable: true,
+                get: function () {
+                    return _this.value;
+                },
+                set: function (val) {
+                    _this.value = val;
+                    _this.valueDescriptor.set.call(input, val);
+                }
+            });
+        }
+    },
+    disableValueAccessors: function () {
+        var valueDescriptor = this.valueDescriptor;
+
+        if (!valueDescriptor) {
+            return;
+        }
+        this.valueDescriptor = null;
+        var input = this.getInputDOMNode();
+        Object.defineProperty(input, 'value', valueDescriptor);
+    },
+    getInputValue: function () {
+        var input = this.getInputDOMNode();
+        var valueDescriptor = this.valueDescriptor;
+
+        var value;
+        if (valueDescriptor) {
+            value = valueDescriptor.get.call(input);
+        } else {
+            value = input.value;
+        }
+
+        return value;
+    },
     getPrefix: function () {
@@ -100,3 +150,3 @@ var prefix = "";
     isEmpty: function () {
-        var _this = this;
+        var _this2 = this;
 
@@ -106,3 +156,3 @@ var value = arguments.length <= 0 || arguments[0] === undefined ? this.state.value : arguments[0];
         return !value.split("").some(function (character, i) {
-            return !_this.isPermanentChar(i) && _this.isAllowedChar(character, i);
+            return !_this2.isPermanentChar(i) && _this2.isAllowedChar(character, i);
         });
@@ -123,3 +173,3 @@ },
     formatValue: function (value) {
-        var _this2 = this;
+        var _this3 = this;
 
@@ -148,5 +198,5 @@ var maskChar = this.maskChar;
         return value.split("").concat(this.createFilledArray(mask.length - value.length, null)).map(function (character, pos) {
-            if (_this2.isAllowedChar(character, pos)) {
+            if (_this3.isAllowedChar(character, pos)) {
                 return character;
-            } else if (_this2.isPermanentChar(pos)) {
+            } else if (_this3.isPermanentChar(pos)) {
                 return mask[pos];
@@ -158,3 +208,3 @@ }
     clearRange: function (value, start, len) {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -176,3 +226,3 @@ var end = start + len;
             }
-            if (_this3.isPermanentChar(i)) {
+            if (_this4.isPermanentChar(i)) {
                 return mask[i];
@@ -325,3 +375,3 @@ }
     parseMask: function (mask) {
-        var _this4 = this;
+        var _this5 = this;
 
@@ -342,3 +392,3 @@ if (typeof mask !== "string") {
             } else {
-                if (isPermanent || !_this4.charsRules[character]) {
+                if (isPermanent || !_this5.charsRules[character]) {
                     permanents.push(str.length);
@@ -415,2 +465,3 @@ }
         }
+        this.value = newValue;
         if (this.state.value !== newValue) {
@@ -526,2 +577,4 @@ this.setState({ value: newValue });
     onChange: function (event) {
+        var _this6 = this;
+
         var pasteSelection = this.pasteSelection;
@@ -532,3 +585,9 @@ var mask = this.mask;
         var target = event.target;
-        var value = target.value;
+        var value = this.getInputValue();
+        if (!value && this.preventEmptyChange) {
+            this.disableValueAccessors();
+            this.preventEmptyChange = false;
+            target.value = this.state.value;
+            return;
+        }
         var oldValue = this.state.value;
@@ -596,2 +655,14 @@ if (pasteSelection) {
             target.value = value;
+
+            if (value && !this.getInputValue()) {
+                if (this.isAndroidFirefox) {
+                    this.value = value;
+                    this.enableValueAccessors();
+                }
+                this.preventEmptyChange = true;
+                setTimeout(function () {
+                    _this6.preventEmptyChange = false;
+                    _this6.disableValueAccessors();
+                }, 0);
+            }
         }
@@ -689,5 +760,6 @@
         this.isWindowsPhoneBrowser = this.isWindowsPhoneBrowser();
+        this.isAndroidFirefox = this.isAndroidFirefox();
     },
     render: function () {
-        var _this5 = this;
+        var _this7 = this;
 
@@ -698,3 +770,3 @@ var ourProps = {};
             handlersKeys.forEach(function (key) {
-                ourProps[key] = _this5[key];
+                ourProps[key] = _this7[key];
             });
@@ -701,0 +773,0 @@ ourProps.value = this.state.value;

InputElement.js

@@ -30,2 +30,13 @@ // https://github.com/sanniassin/react-input-mask
     },
+    isAndroidFirefox: function() {
+        var windows = new RegExp("windows", "i");
+        var firefox = new RegExp("firefox", "i");
+        var android = new RegExp("android", "i");
+        var ua = navigator.userAgent;
+        return !windows.test(ua)
+               &&
+               firefox.test(ua)
+               &&
+               android.test(ua);
+    },
     isDOMElement: function(element) {
@@ -51,2 +62,41 @@ return typeof HTMLElement === "object"
     },
+    enableValueAccessors: function() {
+        var canUseAccessors = !!(Object.getOwnPropertyDescriptor && Object.getPrototypeOf && Object.defineProperty);
+        if (canUseAccessors) {
+            var input = this.getInputDOMNode();
+            this.valueDescriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+            Object.defineProperty(input, 'value', {
+                configurable: true,
+                enumerable: true,
+                get: () => this.value,
+                set: (val) => {
+                    this.value = val;
+                    this.valueDescriptor.set.call(input, val);
+                }
+            });
+        }
+    },
+    disableValueAccessors: function() {
+        var { valueDescriptor } = this;
+        if (!valueDescriptor) {
+            return;
+        }
+        this.valueDescriptor = null;
+        var input = this.getInputDOMNode();
+        Object.defineProperty(input, 'value', valueDescriptor);
+    },
+    getInputValue: function() {
+        var input = this.getInputDOMNode();
+        var { valueDescriptor } = this;
+
+        var value;
+        if (valueDescriptor) {
+            value = valueDescriptor.get.call(input);
+        }
+        else {
+            value = input.value;
+        }
+
+        return value;
+    },
     getPrefix: function() {
@@ -400,2 +450,3 @@ var prefix = "";
         }
+        this.value = newValue;
         if (this.state.value !== newValue) {
@@ -514,3 +565,9 @@ this.setState({ value: newValue });
         var target = event.target;
-        var value = target.value;
+        var value = this.getInputValue();
+        if (!value && this.preventEmptyChange) {
+            this.disableValueAccessors();
+            this.preventEmptyChange = false;
+            target.value = this.state.value;
+            return;
+        }
         var oldValue = this.state.value;
@@ -582,2 +639,14 @@ if (pasteSelection) {
             target.value = value;
+
+            if (value && !this.getInputValue()) {
+                if (this.isAndroidFirefox) {
+                    this.value = value;
+                    this.enableValueAccessors();
+                }
+                this.preventEmptyChange = true;
+                setTimeout(() => {
+                    this.preventEmptyChange = false;
+                    this.disableValueAccessors();
+                }, 0);
+            }
         }
@@ -676,2 +745,3 @@
         this.isWindowsPhoneBrowser = this.isWindowsPhoneBrowser();
+        this.isAndroidFirefox = this.isAndroidFirefox();
     },
@@ -678,0 +748,0 @@ render: function() {

package.json

 {
   "name": "react-input-mask",
   "description": "Masked input component for React",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "homepage": "https://github.com/sanniassin/react-input-mask",
@@ -6,0 +6,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

76509

increased by6.82%

Lines of code

1893

increased by7.56%

No dependency changes