react-input-mask - npm Package Compare versions

Comparing version 0.5.10 to 0.6.1

build/InputElement.js

@@ -12,3 +12,3 @@ // https://github.com/sanniassin/react-input-mask
 
-    charsRules: {
+    defaultCharsRules: {
         "9": "[0-9]",
@@ -186,3 +186,4 @@ "a": "[A-Za-z]",
         for (var i = pos; i < mask.length && substr.length;) {
-            if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
+            var isPermanent = this.isPermanentChar(i);
+            if (!isPermanent || mask[i] === substr[0]) {
                 var char = substr.shift();
@@ -204,2 +205,4 @@ if (this.isAllowedChar(char, i, true)) {
                     value += mask[i];
+                } else if (maskChar && isPermanent && substr[0] === maskChar) {
+                    substr.shift();
                 }
@@ -344,2 +347,4 @@ ++i;
     getInitialState: function () {
+        this.charsRules = "formatChars" in this.props ? this.props.formatChars : this.defaultCharsRules;
+
         var mask = this.parseMask(this.props.mask);
@@ -369,2 +374,4 @@ var defaultValue = this.props.defaultValue != null ? this.props.defaultValue : null;
     componentWillReceiveProps: function (nextProps) {
+        this.charsRules = "formatChars" in nextProps ? nextProps.formatChars : this.defaultCharsRules;
+
         var mask = this.parseMask(nextProps.mask);
@@ -371,0 +378,0 @@ var isMaskChanged = mask.mask && mask.mask !== this.mask;

InputElement.js

@@ -6,3 +6,3 @@ // https://github.com/sanniassin/react-input-mask
 var InputElement = React.createClass({
-    charsRules: {
+    defaultCharsRules: {
         "9": "[0-9]",
@@ -171,3 +171,4 @@ "a": "[A-Za-z]",
         for (var i = pos; i < mask.length && substr.length; ) {
-            if (!this.isPermanentChar(i) || mask[i] === substr[0]) {
+            var isPermanent = this.isPermanentChar(i);
+            if (!isPermanent || mask[i] === substr[0]) {
                 var char = substr.shift();
@@ -193,2 +194,5 @@ if (this.isAllowedChar(char, i, true)) {
                 }
+                else if (maskChar && isPermanent && substr[0] === maskChar) {
+                    substr.shift();
+                }
                 ++i;
@@ -331,2 +335,4 @@ }
     getInitialState: function() {
+        this.charsRules = "formatChars" in this.props ? this.props.formatChars : this.defaultCharsRules;
+
         var mask = this.parseMask(this.props.mask);
@@ -360,2 +366,4 @@ var defaultValue = this.props.defaultValue != null
     componentWillReceiveProps: function(nextProps) {
+        this.charsRules = "formatChars" in nextProps ? nextProps.formatChars : this.defaultCharsRules;
+
         var mask = this.parseMask(nextProps.mask);
@@ -362,0 +370,0 @@ var isMaskChanged = mask.mask && mask.mask !== this.mask;

package.json

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

README.md

@@ -16,3 +16,3 @@ # react-input-mask
 
-Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, German phone mask with unremoveable prefix +49 will look like <code>"+4\\\\9 99 999 99"</code>
+Any character can be escaped with backslash, which usually will appear as double backslash in JS strings. For example, German phone mask with unremoveable prefix +49 will look like <code>mask="+4\\9 99 999 99"</code> or <code>mask={"+4\\\\9 99 999 99"}</code>
 
@@ -23,2 +23,13 @@ ### `maskChar` : `string`
 
+### `formatChars` : `object`
+
+Defines format characters with characters as keys and corresponding RegExp string as values. Default ones:
+```js
+{
+  "9": "[0-9]",
+  "a": "[A-Za-z]",
+  "*": "[A-Za-z0-9]"
+}
+```
+
 ### `alwaysShowMask` : `boolean`
@@ -25,0 +36,0 @@

tests/input-test.js

@@ -460,2 +460,20 @@ import React from 'react';
     }));
+
+    it('Paste string with maskChar at place of permanent char', createInput(
+        <Input mask="9999-9999-9999" maskChar=" " />, (input) => {
+        var inputNode = ReactDOM.findDOMNode(input);
+
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
+        input.pasteText(inputNode.value, '1111 1111 1111', input.getSelection());
+        expect(inputNode.value).toEqual('1111-1111-1111');
+    }));
+
+    it('Custom rules', createInput(
+        <Input mask="11-11" defaultValue="1234" formatChars={{'1': '[1-3]'}} />, (input) => {
+        var inputNode = ReactDOM.findDOMNode(input);
+
+        expect(inputNode.value).toEqual('12-3_');
+    }));
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68803

increased by2.51%

Lines of code

1714

increased by1.42%

Number of lines in readme file

48

increased by29.73%

No dependency changes