From 3a89c4bbe3476d8c8d6fb63c1914f005bb26f3d0 Mon Sep 17 00:00:00 2001 From: Igor Dolzhenkov Date: Sat, 13 May 2017 14:37:02 +0300 Subject: [PATCH 1/4] Add isRevealingMask option to MaskedInput Component --- demo/src/index.js | 4 ++-- src/index.js | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/demo/src/index.js b/demo/src/index.js index 024e4b8..858918e 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -54,7 +54,7 @@ const App = React.createClass({

A React component which creates a masked <input/>

- +

You can even externally update the card state like a standard input element:

@@ -64,7 +64,7 @@ const App = React.createClass({

Placeholders are automatically generated but can be overridden with your own:

- +
diff --git a/src/index.js b/src/index.js index 7389581..4962e32 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) }, @@ -268,7 +271,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 } From 3fcf4e1ab81d6f76cc441cf78c37d347b7aa5efb Mon Sep 17 00:00:00 2001 From: Igor Dolzhenkov Date: Sat, 13 May 2017 21:37:29 +0300 Subject: [PATCH 2/4] Add possibility to use 'isRevealingMask' with uncontrolled component --- README.md | 11 +++++++++++ demo/src/index.js | 7 ++++++- src/index.js | 34 +++++++++++++++------------------- 3 files changed, 32 insertions(+), 20 deletions(-) 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 858918e..85a7005 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -54,7 +54,7 @@ const App = React.createClass({

A React component which creates a masked <input/>

- +

You can even externally update the card state like a standard input element:

@@ -62,6 +62,11 @@ const App = React.createClass({

Placeholders are automatically generated but can be overridden with your own:

+
+ + +
+

You can set 'isRevealingMask' to true to make mask revealing on your typing

diff --git a/src/index.js b/src/index.js index 4962e32..5fed133 100644 --- a/src/index.js +++ b/src/index.js @@ -152,9 +152,7 @@ var MaskedInput = React.createClass({ this._updateInputSelection() } } - if (this.props.onChange) { - this.props.onChange(e) - } + this._updateValue(e) }, _onKeyDown(e) { @@ -165,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 } @@ -176,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 } @@ -192,9 +186,7 @@ var MaskedInput = React.createClass({ if (value) { this._updateInputSelection() } - if (this.props.onChange) { - this.props.onChange(e) - } + this._updateValue(e) } } }, @@ -210,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) } }, @@ -227,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) } }, @@ -267,7 +263,7 @@ var MaskedInput = React.createClass({ render() { var ref = r => this.input = r var maxLength = this.mask.pattern.length - var value = this._getDisplayValue() + var value = this._getDisplayValue() || '' var eventHandlers = this._getEventHandlers() var { size = maxLength, placeholder = this.mask.emptyValue } = this.props From dbfc1635f42e6d81c61692bae23762b644ce177e Mon Sep 17 00:00:00 2001 From: Igor Dolzhenkov Date: Sat, 13 May 2017 21:40:17 +0300 Subject: [PATCH 3/4] Minor changes for code style --- demo/src/index.js | 4 ++-- src/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/src/index.js b/demo/src/index.js index 85a7005..1e503a1 100644 --- a/demo/src/index.js +++ b/demo/src/index.js @@ -54,7 +54,7 @@ const App = React.createClass({

A React component which creates a masked <input/>

- +

You can even externally update the card state like a standard input element:

@@ -64,7 +64,7 @@ const App = React.createClass({

Placeholders are automatically generated but can be overridden with your own:

- +

You can set 'isRevealingMask' to true to make mask revealing on your typing

diff --git a/src/index.js b/src/index.js index 5fed133..db20fc5 100644 --- a/src/index.js +++ b/src/index.js @@ -263,7 +263,7 @@ var MaskedInput = React.createClass({ render() { var ref = r => this.input = r var maxLength = this.mask.pattern.length - var value = this._getDisplayValue() || '' + var value = this._getDisplayValue() var eventHandlers = this._getEventHandlers() var { size = maxLength, placeholder = this.mask.emptyValue } = this.props From 4112c5bad42a8aa903b046513bf44e03ee7840ee Mon Sep 17 00:00:00 2001 From: Igor Dolzhenkov Date: Sat, 13 May 2017 21:52:28 +0300 Subject: [PATCH 4/4] Add test for isRevealingMask option and eslint update --- src/index.js | 2 +- tests/index-test.js | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index db20fc5..25c18f8 100644 --- a/src/index.js +++ b/src/index.js @@ -222,7 +222,7 @@ var MaskedInput = React.createClass({ } }, - _updateValue(e){ + _updateValue(e) { this.mask.setValue(this.mask.getValue()) if (this.props.onChange) { this.props.onChange(e) 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