react-input-mask - npm Package Compare versions

Comparing version 0.6.7 to 0.6.8

build/InputElement.js

@@ -372,2 +372,3 @@ // https://github.com/sanniassin/react-input-mask
                 mask: null,
+                lastEditablePos: null,
                 permanents: []
@@ -379,2 +380,3 @@ };
         var isPermanent = false;
+        var lastEditablePos = null;
 
@@ -387,2 +389,4 @@ mask.split("").forEach(function (character) {
                     permanents.push(str.length);
+                } else {
+                    lastEditablePos = str.length;
                 }
@@ -396,2 +400,3 @@ str += character;
             mask: str,
+            lastEditablePos: lastEditablePos,
             permanents: permanents
@@ -415,2 +420,3 @@ };
         this.permanents = mask.permanents;
+        this.lastEditablePos = mask.lastEditablePos;
         this.maskChar = "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar;
@@ -441,2 +447,3 @@
         this.permanents = mask.permanents;
+        this.lastEditablePos = mask.lastEditablePos;
         this.maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
@@ -544,2 +551,3 @@
         var maskChar = this.maskChar;
+        var lastEditablePos = this.lastEditablePos;
 
@@ -571,3 +579,3 @@ var maskLen = mask.length;
         event.preventDefault();
-        if (caretPos < maskLen && caretPos > prefixLen) {
+        if (caretPos < lastEditablePos && caretPos > prefixLen) {
             caretPos = this.getRightEditablePos(caretPos);
@@ -583,2 +591,3 @@ }
         var maskChar = this.maskChar;
+        var lastEditablePos = this.lastEditablePos;
 
@@ -625,5 +634,5 @@ var target = event.target;
 
-            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < maskLen) {
+            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < lastEditablePos) {
                 caretPos = this.getFilledLength(clearedValue);
-            } else if (caretPos < maskLen) {
+            } else if (caretPos < lastEditablePos) {
                 caretPos++;
@@ -630,0 +639,0 @@ }

InputElement.js

@@ -359,2 +359,3 @@ // https://github.com/sanniassin/react-input-mask
                 mask: null,
+                lastEditablePos: null,
                 permanents: []
@@ -366,2 +367,3 @@ };
         var isPermanent = false;
+        var lastEditablePos = null;
 
@@ -376,2 +378,5 @@ mask.split("").forEach((character) => {
                 }
+                else {
+                    lastEditablePos = str.length;
+                }
                 str += character;
@@ -384,2 +389,3 @@ isPermanent = false;
             mask: str,
+            lastEditablePos: lastEditablePos,
             permanents: permanents
@@ -407,2 +413,3 @@ };
         this.permanents = mask.permanents;
+        this.lastEditablePos = mask.lastEditablePos;
         this.maskChar = "maskChar" in this.props ? this.props.maskChar : this.defaultMaskChar;
@@ -432,2 +439,3 @@
         this.permanents = mask.permanents;
+        this.lastEditablePos = mask.lastEditablePos;
         this.maskChar = "maskChar" in nextProps ? nextProps.maskChar : this.defaultMaskChar;
@@ -537,3 +545,3 @@
         var { value } = this.state;
-        var { mask, maskChar } = this;
+        var { mask, maskChar, lastEditablePos } = this;
         var maskLen = mask.length;
@@ -565,3 +573,3 @@ var prefixLen = this.getPrefix().length;
         event.preventDefault();
-        if (caretPos < maskLen && caretPos > prefixLen) {
+        if (caretPos < lastEditablePos && caretPos > prefixLen) {
             caretPos = this.getRightEditablePos(caretPos);
@@ -572,3 +580,3 @@ }
     onChange: function(event) {
-        var { pasteSelection, mask, maskChar } = this;
+        var { pasteSelection, mask, maskChar, lastEditablePos } = this;
         var target = event.target;
@@ -615,6 +623,6 @@ var value = this.getInputValue();
 
-            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < maskLen) {
+            if (substrLen !== 1 || caretPos >= prefixLen && caretPos < lastEditablePos) {
                 caretPos = this.getFilledLength(clearedValue);
             }
-            else if (caretPos < maskLen) {
+            else if (caretPos < lastEditablePos) {
                 caretPos++;
@@ -621,0 +629,0 @@ }

package.json

 {
   "name": "react-input-mask",
   "description": "Masked input component for React",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "homepage": "https://github.com/sanniassin/react-input-mask",
@@ -21,15 +21,18 @@ "license": "MIT",
     "babel": "^5.8.34",
+    "babel-core": "^5.8.38",
     "babelify": "^6.4.0",
+    "browserify": "^13.0.1",
     "console-polyfill": "^0.2.2",
     "jasmine-core": "^2.3.4",
     "karma": "^0.13.15",
-    "karma-browserify": "^4.4.0",
-    "karma-browserstack-launcher": "^0.1.7",
-    "karma-jasmine": "^0.3.6",
-    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-browserify": "^5.0.5",
+    "karma-browserstack-launcher": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.0",
     "mocha": "^2.4.5",
-    "phantomjs": "^1.9.18",
+    "phantomjs-prebuilt": "^2.1.7",
     "react": "^0.14.3",
     "react-addons-test-utils": "^0.14.3",
-    "react-dom": "^0.14.3"
+    "react-dom": "^0.14.3",
+    "watchify": "^3.7.0"
   },
@@ -36,0 +39,0 @@ "main": "build/InputElement.js",

README.md

@@ -5,5 +5,9 @@ # react-input-mask
 
-## Demo
-[http://sanniassin.github.io/react-input-mask/demo.html](http://sanniassin.github.io/react-input-mask/demo.html)
+## [Demo](http://sanniassin.github.io/react-input-mask/demo.html)
 
+## Install
+```
+npm install react-input-mask --save
+```
+
 ## Properties
@@ -10,0 +14,0 @@ ### `mask` : `string`

tests/input-test.js

@@ -257,2 +257,17 @@ import React from 'react';
 
+    it('Characters input cursor position', createInput(
+        <Input mask="(999)" defaultValue={"11"} />, (input) => {
+        var inputNode = ReactDOM.findDOMNode(input);
+
+        inputNode.focus();
+        TestUtils.Simulate.focus(inputNode);
+
+        input.setCaretPos(3);
+        TestUtils.Simulate.keyPress(inputNode, { key: '1' });
+        expect(inputNode.value).toEqual('(111)');
+        expect(input.getCaretPos()).toEqual(4);
+
+        ReactDOM.unmountComponentAtNode(container);
+    }));
+
     it('Backspace single character', createInput(
@@ -259,0 +274,0 @@ <Input mask="[phone]" defaultValue="74953156454" />, (input) => {

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

79135

increased by3.24%

Number of package files

11

increased by10%

Lines of code

1927

increased by1.47%

Number of lines in readme file

52

increased by8.33%

Worsened metrics

Dev dependency count

18

increased by20%

No dependency changes