conformToMask: accept mask functions (#781)

lozjackson · web-flow · commit 474f54feac89 · 2018-04-29T17:14:30.000+01:00
* Add tests

* Update tests

* Move strFunction const to utilities

* handle mask functions

* Move test

* Remove blank line

* Update readme
diff --git a/core/README.md b/core/README.md
@@ -89,7 +89,7 @@ The `update` method should be called every time the `inputElement.value` changes
 This function takes three arguments:
 
 * rawValue (string): the string value that you want to conform to the mask
-* mask (array): the mask to which you want the string to conform. You can find
+* mask (array or function): the mask to which you want the string to conform. You can find
 [mask documentation here](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md#readme).
 * config (object): config object. See below for details
 
diff --git a/core/src/conformToMask.js b/core/src/conformToMask.js
@@ -1,14 +1,27 @@
-import {convertMaskToPlaceholder, isArray} from './utilities'
-import {placeholderChar as defaultPlaceholderChar} from './constants'
+import {convertMaskToPlaceholder, isArray, processCaretTraps} from './utilities'
+import {placeholderChar as defaultPlaceholderChar, strFunction} from './constants'
 
 const emptyArray = []
 const emptyString = ''
 
 export default function conformToMask(rawValue = emptyString, mask = emptyArray, config = {}) {
   if (!isArray(mask)) {
-    throw new Error(
-      'Text-mask:conformToMask; The mask property must be an array.'
-    )
+    // If someone passes a function as the mask property, we should call the
+    // function to get the mask array - Normally this is handled by the
+    // `createTextMaskInputElement:update` function - this allows mask functions
+    // to be used directly with `conformToMask`
+    if (typeof mask === strFunction) {
+      // call the mask function to get the mask array
+      mask = mask(rawValue, config)
+
+      // mask functions can setup caret traps to have some control over how the caret moves. We need to process
+      // the mask for any caret traps. `processCaretTraps` will remove the caret traps from the mask
+      mask = processCaretTraps(mask).maskWithoutCaretTraps
+    } else {
+      throw new Error(
+        'Text-mask:conformToMask; The mask property must be an array.'
+      )
+    }
   }
 
   // These configurations tell us how to conform the mask
diff --git a/core/src/constants.js b/core/src/constants.js
@@ -1 +1,2 @@
 export const placeholderChar = '_'
+export const strFunction = 'function'
diff --git a/core/src/createTextMaskInputElement.js b/core/src/createTextMaskInputElement.js
@@ -1,9 +1,8 @@
 import adjustCaretPosition from './adjustCaretPosition'
 import conformToMask from './conformToMask'
 import {convertMaskToPlaceholder, isString, isNumber, processCaretTraps} from './utilities'
-import {placeholderChar as defaultPlaceholderChar} from './constants'
+import {placeholderChar as defaultPlaceholderChar, strFunction} from './constants'
 
-const strFunction = 'function'
 const emptyString = ''
 const strNone = 'none'
 const strObject = 'object'
diff --git a/core/test/conformToMask.spec.js b/core/test/conformToMask.spec.js
@@ -17,6 +17,16 @@ const conformToMask = (isVerify()) ?
 const testInputs = ['rawValue', 'mask', 'previousConformedValue', 'currentCaretPosition']
 
 describe('conformToMask', () => {
+  it('throws if mask is not an array or function', () => {
+    const err = 'Text-mask:conformToMask; The mask property must be an array.'
+    expect(() => conformToMask('', false)).to.throw(err)
+    expect(() => conformToMask('', true)).to.throw(err)
+    expect(() => conformToMask('', 'abc')).to.throw(err)
+    expect(() => conformToMask('', 123)).to.throw(err)
+    expect(() => conformToMask('', null)).to.throw(err)
+    expect(() => conformToMask('', {})).to.throw(err)
+  })
+
   describe('Accepted character in mask', () => {
     dynamicTests(
       _.filter(acceptedCharInMask, test => !test.skip),
@@ -134,6 +144,57 @@ describe('conformToMask', () => {
   })
 
   describe('Mask function', () => {
+    it('works with mask functions', () => {
+      const mask = () => [/\d/, /\d/, /\d/, /\d/]
+
+      expect(() => conformToMask('', mask)).to.not.throw()
+    })
+
+    it('calls the mask function', () => {
+      const maskSpy = sinon.spy(() => [/\d/, /\d/, /\d/, /\d/])
+      const result = conformToMask('2', maskSpy)
+
+      expect(result.conformedValue).to.equal('2___')
+      expect(maskSpy.callCount).to.equal(1)
+    })
+
+    it('passes the rawValue to the mask function', () => {
+      const mask = (value) => {
+        expect(typeof value).to.equal('string')
+        expect(value).to.equal('2')
+        return [/\d/, /\d/, /\d/, /\d/]
+      }
+      const result = conformToMask('2', mask)
+
+      expect(result.conformedValue).to.equal('2___')
+    })
+
+    it('passes the config to the mask function', () => {
+      const mask = (value, config) => {
+        expect(typeof config).to.equal('object')
+        expect(config).to.deep.equal({
+          currentCaretPosition: 2,
+          previousConformedValue: '1',
+          placeholderChar: '_'
+        })
+        return [/\d/, /\d/, /\d/, /\d/]
+      }
+      const result = conformToMask('12', mask, {
+        currentCaretPosition: 2,
+        previousConformedValue: '1',
+        placeholderChar: '_'
+      })
+
+      expect(result.conformedValue).to.equal('12__')
+    })
+
+    it('processes the result of the mask function and removes caretTraps', () => {
+      const mask = () => [/\d/, /\d/, '[]', '.', '[]', /\d/, /\d/]
+      const result = conformToMask('2', mask)
+
+      expect(result.conformedValue).to.equal('2_.__')
+    })
+
     dynamicTests(
       maskFunctionTests,
 
diff --git a/core/test/utilities.spec.js b/core/test/utilities.spec.js
@@ -1,5 +1,17 @@
-import {processCaretTraps} from '../src/utilities'
+import {convertMaskToPlaceholder, processCaretTraps} from '../src/utilities'
 
+describe('convertMaskToPlaceholder', () => {
+  it('throws if mask is not an array', () => {
+    const err = 'Text-mask:convertMaskToPlaceholder; The mask property must be an array.'
+    expect(() => convertMaskToPlaceholder(false)).to.throw(err)
+    expect(() => convertMaskToPlaceholder(true)).to.throw(err)
+    expect(() => convertMaskToPlaceholder('abc')).to.throw(err)
+    expect(() => convertMaskToPlaceholder(123)).to.throw(err)
+    expect(() => convertMaskToPlaceholder(null)).to.throw(err)
+    expect(() => convertMaskToPlaceholder({})).to.throw(err)
+    expect(() => convertMaskToPlaceholder(() => {})).to.throw(err)
+  })
+})
 describe('processCaretTraps', () => {
   it('returns the mask without caret traps and the caret trap indexes', () => {
     const mask = ['$', /\d/, /\d/, /\d/, /\d/, '.', '[]', /\d/, /\d/]

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`	`1`	`export const placeholderChar = '_'`
	`2`	`+export const strFunction = 'function'`