Merge pull request #14 from CanopyTax/improve-pasteing

Improve pasting

.babelrc

@@ -1,4 +1,10 @@
 {
-	"presets": ["es2015", "react", "stage-0"],
-	"plugins": ["transform-object-rest-spread"]
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties"
+  ]
 }

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-      - "5"
+      - "8"
 before_script:
       - npm install

__tests__/cpr-mask.helpers.tests.js

@@ -188,14 +188,14 @@ describe("inputControl", () => {
   })
   describe("getMaskSlice", () => {
     it("should get back a full slice of a pattern", () => {
-      expect(getMaskSlice("1-1_1-", 0, 3)).toEqual({maskSlice: "111", selectionMove: 2});
-      expect(getMaskSlice("11--11", 0, 2)).toEqual({maskSlice: "11", selectionMove: 0});
-      expect(getMaskSlice("11--AA", 0, 3)).toEqual({maskSlice: "11A", selectionMove: 2});
-      expect(getMaskSlice("11--WW", 2, 4)).toEqual({maskSlice: "WW", selectionMove: 2});
+      expect(getMaskSlice("1-1_1-", "1", 0, 3)).toEqual({maskSlice: "111", selectionMove: 2});
+      expect(getMaskSlice("11--11", "1", 0, 2)).toEqual({maskSlice: "11", selectionMove: 0});
+      expect(getMaskSlice("11--AA", "A", 0, 3)).toEqual({maskSlice: "11A", selectionMove: 2});
+      expect(getMaskSlice("11--WW", "W", 2, 4)).toEqual({maskSlice: "WW", selectionMove: 2});
     })
     it("should stop at the end of the pattern even without all the characters", () => {
-      expect(getMaskSlice("11------", 0, 3)).toEqual({maskSlice: "11", selectionMove: 6});
-      expect(getMaskSlice("1------1", 0, 3)).toEqual({maskSlice: "11", selectionMove: 6});
+      expect(getMaskSlice("11------", "1", 0, 3)).toEqual({maskSlice: "11", selectionMove: 6});
+      expect(getMaskSlice("1------1", "1", 0, 3)).toEqual({maskSlice: "11", selectionMove: 6});
     })
   })
   describe("oldToNewMask", () => {
@@ -214,6 +214,9 @@ describe("inputControl", () => {
     it("Should take character and fill spots - out of order 2", () => {
       expect(oldToNewMask("sdf", " - - - -", 4, "A-A-A-A-")).toBe(" - -s-d-f")
     })
+    it("should handle pasteing values that include the pattern", () => {
+      expect(oldToNewMask("123-45-6789", "   -  -    ", 0, "111-11-1111", " ")).toBe("123-45-6789")
+    })
   })
   describe("checkCharsMatchPattern", () => {
     it("should accept a valid input", () => {
@@ -225,6 +228,9 @@ describe("inputControl", () => {
     it("should deny an invalid input", () => {
       expect(checkCharsMatchPattern("A1W", "125")).toBe(false);
     })
+    it("should accept an input when the pattern matches the filler", () => {
+      expect(checkCharsMatchPattern("(111) 1-1", "(801) 2-4", " ")).toBe(true);
+    })
   })
   describe("checkForAddingOrReplacing", () => {
     describe("should detect when an input has done replacing behavior", () => {
@@ -353,6 +359,9 @@ describe("inputControl", () => {
     it("should handle skipped values", () => {
       expect(valueToMask("12 4", "1--1-1-1")).toBe("1--2- -4")
     })
+    it("should keep the value even a character matches a pattern character", () => {
+      expect(valueToMask("12345-6789", "11111-1111")).toBe("12345-6789")
+    })
   })
   describe("getNewMaskCursor", () => {
     it("should get the cursor for a new mask", () => {

package.json

@@ -30,15 +30,16 @@
     "react": ">=15"
   },
   "devDependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-jest": "^9.0.3",
-    "babel-plugin-transform-object-rest-spread": "^6.19.0",
-    "babel-polyfill": "^6.16.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.4.2",
     "enzyme": "^2.6.0",
-    "jest": "^21.2.1",
+    "jest": "^24.1.0",
     "lodash": "^4.17.11",
     "react": "^15.4.1",
     "react-addons-test-utils": "^15.4.1",

src/cpr-mask.helpers.js

@@ -40,6 +40,8 @@ export function handleMasks(input) {
 	if (mask.pattern !== this.state.maskPattern) {
 		//Mask a new newMask
 		newMask = valueToMask(newValue, mask.pattern, this.props.filler);
+		//Use new pattern to get newValue
+		newValue = maskToValue(newMask, mask.pattern, this.props.filler);
 		//If that fails
 		if (newMask === false) {
 			//stick with the old mask
@@ -102,7 +104,7 @@ export function maskToMask(input, oldMask, maskPattern, cursor, filler = " ") {
 
 
 export function adding(input, oldMask, maskPattern, cursor, lengthDiff, filler) {
-	let {maskSlice, selectionMove} = getMaskSlice(maskPattern, cursor - lengthDiff, cursor);
+	let {maskSlice, selectionMove} = getMaskSlice(maskPattern, input, cursor - lengthDiff, cursor);
 	let inputSlice = input.slice(cursor - lengthDiff, cursor);
 	if (!checkCharsMatchPattern(maskSlice, inputSlice, filler)) {
 		return {
@@ -129,7 +131,7 @@ export function deleting(input, oldMask, maskPattern, cursor, filler) {
 
 export function checkCharsMatchPattern(pattern, chars, filler) {
 	for (let i = 0; i < pattern.length; i++) {
-		if (chars[i] === filler) return false;
+		if (chars[i] === filler && chars[i] !== pattern[i]) return false;
 		if (!charMatchesRegexPattern(pattern[i], chars[i])) return false;
 	}
 	return true;
@@ -158,14 +160,14 @@ export function checkForAddingOrReplacing(input, oldMask, inputStop, maskPattern
 }
 
 export function oldToNewMask(characters, oldMask, start, pattern, filler) {
-	let replacePattern = pattern.slice(start).replace(/[A1W*]/g, "")
+	let replacePattern = pattern.slice(start).replace(/[A1W*]/g, "");
 	let charBank = characters;
 	let newMask = oldMask.slice(0, start) + oldMask.slice(start).split("").map((char, index) => {
 		if (char === replacePattern[0]) {
+			if (charBank[0] === replacePattern[0]) charBank = charBank.slice(1)
 			replacePattern = replacePattern.slice(1);
 			return char;
-		}
-		else if (charBank) {
+		} else if (charBank) {
 			let replacement = charBank[0];
 			charBank = charBank.slice(1);
 			return replacement;
@@ -184,23 +186,27 @@ function charMatchesRegexPattern(pattern, char) {
 	if (pattern === "1") return /\d/.test(char);
 	if (pattern === "W") return /[A-Za-z0-9]/.test(char);
 	if (pattern === "*") return /./.test(char);
+	return true;
 }
 
-export function getMaskSlice(pattern, start, stop) {
+export function getMaskSlice(pattern, input, start, stop) {
 	let totalRequired = stop - start;
 	let found = "";
 	let i = start;
 	let selectionMove = 0;
 	while (found.length < totalRequired) {
 		if (/[A1W*]/.test(pattern[i])) {
 			found += pattern[i];
+		} else if (pattern[i] === input[i]) {
+			found += pattern[i];
+			selectionMove++;
 		} else {
-			selectionMove++
+			selectionMove++;
 		}
-			if (i >= pattern.length - 1) {
-				break;
-			}
-			i++;
+		if (i >= pattern.length - 1) {
+			break;
+		}
+		i++;
 	}
 	return {maskSlice: found, selectionMove};
 }
@@ -220,6 +226,9 @@ export function valueToMask(value, maskPattern, filler = " ") {
 				charBank = charBank.slice(1);
 				return nextChar || filler;
 			} else return false;
+		} else if (patternChar === charBank[0]) {
+			charBank = charBank.slice(1);
+			return patternChar;
 		} else return patternChar;
 	})
 	return filledMask.indexOf(false) === -1 ? filledMask.join("") : false;