react-input-mask - npm Package Compare versions

Comparing version 0.6.8 to 0.7.0

build/InputElement.js

@@ -369,3 +369,3 @@ // https://github.com/sanniassin/react-input-mask
 
-        if (typeof mask !== "string") {
+        if (!mask || typeof mask !== "string") {
             return {
@@ -438,2 +438,3 @@ mask: null,
 
+        var oldMask = this.mask;
         var mask = this.parseMask(nextProps.mask);
@@ -453,2 +454,6 @@ var isMaskChanged = mask.mask && mask.mask !== this.mask;
 
+        if (!oldMask && nextProps.value == null) {
+            newValue = this.getInputDOMNode().value;
+        }
+
         var showEmpty = nextProps.alwaysShowMask || this.isFocused();
@@ -474,2 +479,12 @@ if (isMaskChanged || mask.mask && (newValue || showEmpty && !this.hasValue)) {
     },
+    componentDidUpdate: function (prevProps, prevState) {
+        if ((this.mask || prevProps.mask) && this.props.value == null) {
+            this.updateUncontrolledInput();
+        }
+    },
+    updateUncontrolledInput: function () {
+        if (this.getInputDOMNode().value !== this.state.value) {
+            this.getInputDOMNode().value = this.state.value;
+        }
+    },
     onKeyDown: function (event) {
@@ -764,2 +779,6 @@ var hasHandler = typeof this.props.onKeyDown === "function";
         this.isAndroidFirefox = this.isAndroidFirefox();
+
+        if (this.mask && this.props.value == null) {
+            this.updateUncontrolledInput();
+        }
     },
@@ -769,11 +788,20 @@ render: function () {
 
-        var ourProps = {};
+        var props = this.props;
+
         if (this.mask) {
+            var componentKeys = ["mask", "alwaysShowMask", "maskChar", "formatChars"];
             var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];
+            props = _extends({}, props);
+            componentKeys.forEach(function (key) {
+                delete props[key];
+            });
             handlersKeys.forEach(function (key) {
-                ourProps[key] = _this7[key];
+                props[key] = _this7[key];
             });
-            ourProps.value = this.state.value;
+
+            if (props.value != null) {
+                props.value = this.state.value;
+            }
         }
-        return React.createElement("input", _extends({ ref: "input" }, this.props, ourProps));
+        return React.createElement("input", _extends({ ref: "input" }, props));
     }
@@ -780,0 +808,0 @@ });

InputElement.js

@@ -356,3 +356,3 @@ // https://github.com/sanniassin/react-input-mask
     parseMask: function(mask) {
-        if (typeof mask !== "string") {
+        if (!mask || typeof mask !== "string") {
             return {
@@ -430,2 +430,3 @@ mask: null,
 
+        var oldMask = this.mask;
         var mask = this.parseMask(nextProps.mask);
@@ -447,2 +448,6 @@ var isMaskChanged = mask.mask && mask.mask !== this.mask;
 
+        if (!oldMask && nextProps.value == null) {
+            newValue = this.getInputDOMNode().value;
+        }
+
         var showEmpty = nextProps.alwaysShowMask || this.isFocused();
@@ -468,2 +473,12 @@ if (isMaskChanged || (mask.mask && (newValue || (showEmpty && !this.hasValue)))) {
     },
+    componentDidUpdate: function(prevProps, prevState) {
+        if ((this.mask || prevProps.mask) && this.props.value == null) {
+            this.updateUncontrolledInput();
+        }
+    },
+    updateUncontrolledInput: function() {
+        if (this.getInputDOMNode().value !== this.state.value) {
+            this.getInputDOMNode().value = this.state.value;
+        }
+    },
     onKeyDown: function(event) {
@@ -757,13 +772,25 @@ var hasHandler = typeof this.props.onKeyDown === "function";
         this.isAndroidFirefox = this.isAndroidFirefox();
+
+        if (this.mask && this.props.value == null) {
+            this.updateUncontrolledInput();
+        }
     },
     render: function() {
-        var ourProps = {};
+        var { props } = this;
         if (this.mask) {
+            var componentKeys = ["mask", "alwaysShowMask", "maskChar", "formatChars"];
             var handlersKeys = ["onFocus", "onBlur", "onChange", "onKeyDown", "onKeyPress", "onPaste"];
+            props = {...props};
+            componentKeys.forEach((key) => {
+                delete props[key];
+            });
             handlersKeys.forEach((key) => {
-                ourProps[key] = this[key];
+                props[key] = this[key];
             });
-            ourProps.value = this.state.value;
+
+            if (props.value != null) {
+                props.value = this.state.value;
+            }
         }
-        return <input ref="input" {...this.props} {...ourProps}/>;
+        return <input ref="input" {...props}/>;
     }
@@ -770,0 +797,0 @@ });

package.json

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

tests/input-test.js

@@ -431,4 +431,9 @@ import React from 'react';
         input.setProps({ mask: null });
-        expect(inputNode.value).toEqual('34781226917');
+        expect(inputNode.value).toEqual('3-4-7-8');
 
+        inputNode.value = '0-1-2-3';
+
+        input.setProps({ mask: '9999' });
+        expect(inputNode.value).toEqual('0123');
+
         ReactDOM.unmountComponentAtNode(container);
@@ -435,0 +440,0 @@ }));

No alert changes

Improved metrics

Total package byte prevSize

81069

increased by2.44%

Lines of code

1978

increased by2.65%

No dependency changes