Add an ability to use 'isRevealingMask' option

README.md

@@ -124,6 +124,17 @@ A default `placeholder` will be generated from the mask's pattern, but you can p
 
 By default, the rendered `<input>`'s `size` will be the length of the pattern, but you can pass a `size` prop to override this.
 
+### `isRevealingMask` : `boolean`
+
+An optional property that, if true, progressively shows the mask as input is entered. Defaults to `false`
+
+Example:
+Given an input with a mask of `111-1111 x 111`, a value of `47`, and `isRevealingMask` set to `true`, then the input's value is formatted as `47`
+Given the same input but with a value of `476`, then the input's value is formatted as `476-`
+Given the same input but with a value of `47 3191`, then the input's value is formatted as `47_-3191 x `
+
+See the [inputmask-core docs](https://github.com/insin/inputmask-core#isrevealingmask--boolean) for details.
+
 ### Other props
 
 Any other props passed in will be passed as props to the rendered `<input>`, except for the following, which are managed by the component:

demo/src/index.js

@@ -66,6 +66,11 @@ const App = React.createClass({
         <label htmlFor="expiry">Expiry Date:</label>
         <MaskedInput mask="11/1111" name="expiry" id="expiry" placeholder="mm/yyyy" onChange={this._onChange}/>
       </div>
+      <p>You can set 'isRevealingMask' to true to make mask revealing on your typing</p>
+      <div className="form-field">
+        <label htmlFor="expiry">Expiry Date:</label>
+        <MaskedInput mask="11/1111" name="expiry" id="expiry" placeholder="mm/yyyy" onChange={this._onChange} isRevealingMask/>
+      </div>
       <div className="form-field">
         <label htmlFor="ccv">CCV:</label>
         <MaskedInput mask="111" name="ccv" id="ccv" onChange={this._onChange}/>

src/index.js

@@ -80,6 +80,9 @@ var MaskedInput = React.createClass({
     if (this.props.placeholderChar) {
       options.placeholderChar = this.props.placeholderChar
     }
+    if (this.props.isRevealingMask) {
+      options.isRevealingMask = this.props.isRevealingMask
+    }
     this.mask = new InputMask(options)
   },
 
@@ -149,9 +152,7 @@ var MaskedInput = React.createClass({
         this._updateInputSelection()
       }
     }
-    if (this.props.onChange) {
-      this.props.onChange(e)
-    }
+    this._updateValue(e)
   },
 
   _onKeyDown(e) {
@@ -162,9 +163,7 @@ var MaskedInput = React.createClass({
       if (this.mask.undo()) {
         e.target.value = this._getDisplayValue()
         this._updateInputSelection()
-        if (this.props.onChange) {
-          this.props.onChange(e)
-        }
+        this._updateValue(e)
       }
       return
     }
@@ -173,9 +172,7 @@ var MaskedInput = React.createClass({
       if (this.mask.redo()) {
         e.target.value = this._getDisplayValue()
         this._updateInputSelection()
-        if (this.props.onChange) {
-          this.props.onChange(e)
-        }
+        this._updateValue(e)
       }
       return
     }
@@ -189,9 +186,7 @@ var MaskedInput = React.createClass({
         if (value) {
           this._updateInputSelection()
         }
-        if (this.props.onChange) {
-          this.props.onChange(e)
-        }
+        this._updateValue(e)
       }
     }
   },
@@ -207,10 +202,9 @@ var MaskedInput = React.createClass({
     this._updateMaskSelection()
     if (this.mask.input((e.key || e.data))) {
       e.target.value = this.mask.getValue()
+      window.mask = this.mask
       this._updateInputSelection()
-      if (this.props.onChange) {
-        this.props.onChange(e)
-      }
+      this._updateValue(e)
     }
   },
 
@@ -224,9 +218,14 @@ var MaskedInput = React.createClass({
       e.target.value = this.mask.getValue()
       // Timeout needed for IE
       setTimeout(this._updateInputSelection, 0)
-      if (this.props.onChange) {
-        this.props.onChange(e)
-      }
+      this._updateValue(e)
+    }
+  },
+
+  _updateValue(e) {
+    this.mask.setValue(this.mask.getValue())
+    if (this.props.onChange) {
+      this.props.onChange(e)
     }
   },
 
@@ -268,7 +267,7 @@ var MaskedInput = React.createClass({
     var eventHandlers = this._getEventHandlers()
     var { size = maxLength, placeholder = this.mask.emptyValue } = this.props
 
-    var {placeholderChar, formatCharacters, ...cleanedProps} = this.props
+    var {placeholderChar, formatCharacters, isRevealingMask, ...cleanedProps} = this.props
     var inputProps = { ...cleanedProps, ...eventHandlers, ref, maxLength, value, size, placeholder }
     return <input {...inputProps} />
   }

tests/index-test.js

@@ -128,6 +128,42 @@ describe('MaskedInput', () => {
     cleanup(el)
   })
 
+  it('should handle updating value with isRevealingMask option', () => {
+    const el = setup()
+    let ref = null
+    let defaultMask = '1111 1111 1111 1111'
+
+    function render(props) {
+      ReactDOM.render(
+        <MaskedInput
+          ref={(r) => ref = r}
+          {...props}
+        />,
+        el
+      )
+    }
+
+    render({mask: defaultMask, value: '', isRevealingMask: true})
+    let input = ReactDOM.findDOMNode(ref)
+
+    // initial state
+    expect(input.value).toBe('')
+    expect(input.placeholder).toBe('')
+    expect(input.size).toBe(19)
+    expect(input.selectionStart).toBe(0)
+
+    // update value
+    render({mask: defaultMask, value: '4111'})
+    input = ReactDOM.findDOMNode(ref)
+
+    // initial state
+    expect(input.value).toBe('4111 ')
+    expect(input.size).toBe(19)
+    expect(input.selectionStart).toBe(5)
+
+    cleanup(el)
+  })
+
   it('should handle updating mask and value', () => {
     const el = setup()
     let ref = null