diff --git a/README.md b/README.md
index cbfb565..31ffe7a 100644
--- a/README.md
+++ b/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 ``'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 ``, except for the following, which are managed by the component:
diff --git a/demo/src/index.js b/demo/src/index.js
index 024e4b8..1e503a1 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -66,6 +66,11 @@ const App = React.createClass({
+
You can set 'isRevealingMask' to true to make mask revealing on your typing
+
+
+
+
diff --git a/src/index.js b/src/index.js
index 7389581..25c18f8 100644
--- a/src/index.js
+++ b/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
}
diff --git a/tests/index-test.js b/tests/index-test.js
index fa12f70..b8a03ef 100644
--- a/tests/index-test.js
+++ b/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(
+ 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