diff --git a/CHANGELOG.md b/CHANGELOG.md index bd7878fd..469bbaeb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,18 @@ ## Unreleased +## [1.12.2] - 2019-04-22 + +### Refactor + +- Performance improvements + - The `state` control was removed from the text mask component, using only the props to handle the mask. + - We changed the base text mask from `Component` to `PureComponent`. + - BREAKING: the `value` and `onChangeText` are now **required** props. + - These changes probably will fix (need to check with the reporters): + - [Wrong input inserting unwanted text #146](https://github.com/benhurott/react-native-masked-text/issues/146) + - [Flickering of uncontrolled input #136](https://github.com/benhurott/react-native-masked-text/issues/136) + ## [1.12.1] - 2019-04-09 ### Fixed diff --git a/README.md b/README.md index 06b3af18..b5714a64 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,8 @@ import { TextInputMask } from 'react-native-masked-text' // the options for your mask if needed } } + + // dont forget to set the "value" and "onChangeText" props value={this.state.text} onChangeText={text => { this.setState({ diff --git a/dist/lib/base-text-component.js b/dist/lib/base-text-component.js index 35d13df2..df300f06 100644 --- a/dist/lib/base-text-component.js +++ b/dist/lib/base-text-component.js @@ -1 +1 @@ -Object.defineProperty(exports,"__esModule",{value:true});var _createClass=function(){function defineProperties(target,props){for(var i=0;i { - let maskedText = self._getMaskedValue(text); - const rawText = self.props.includeRawValueInChangeText ? self.getRawValueFor(maskedText) : undefined - - if(self._mustUpdateValue(maskedText)) { - self.setState({ - value: maskedText, - rawValue: rawText - }, () => { - resolve({ - maskedText, - rawText - }); - }); - } else { - resolve({ - maskedText: self.state.value, - rawText: self.state.rawValue - }); - } - }); + let maskedText = this._getMaskedValue(text); + const rawText = this.props.includeRawValueInChangeText ? this.getRawValueFor(maskedText) : undefined + + return { + maskedText, + rawText + } } isValid() { return this._maskHandler.validate( - this._getDefaultValue(this.state.value), - this.state.options + this._getDefaultValue(this.props.value), + this._getOptions() ); } getRawValueFor(value) { return this._maskHandler.getRawValue( this._getDefaultValue(value), - this.state.options + this._getOptions() ); } getRawValue() { - return this.getRawValueFor(this.state.value) + return this.getRawValueFor(this.props.value) + } + + _getOptions() { + return this.props.options } _mustUpdateValue(newValue) { - return this.state.value !== newValue; + return this.props.value !== newValue; } _resolveMaskHandler() { - this._maskHandler = MaskResolver.resolve(this.state.type); + this._maskHandler = MaskResolver.resolve(this.props.type); } - _bindProps(props) { - let self = this; - let changeMaskHandler = this.state.type !== props.type; - - self.setState({ - type: props.type, - options: props.options - }, () => { - if (changeMaskHandler) { - self._resolveMaskHandler(); - } - - let value = self._getDefaultMaskedValue(props.value); - - self.setState({ - value: value - }); - }); + _bindProps(nextProps) { + if (this.props.type !== nextProps.type) { + this._resolveMaskHandler() + } } _getDefaultMaskedValue(value) { @@ -104,12 +70,9 @@ export default class BaseTextComponent extends Component { } _getMaskedValue(value) { - let oldValue = this.state.value; - return this._maskHandler.getValue( this._getDefaultValue(value), - this.state.options, - oldValue); + this._getOptions()); } _getDefaultValue(value) { diff --git a/lib/text-input-mask.js b/lib/text-input-mask.js index cdff3ac6..d2d083d5 100644 --- a/lib/text-input-mask.js +++ b/lib/text-input-mask.js @@ -1,4 +1,3 @@ -// @flow import React from 'react' import { TextInput } from 'react-native' import BaseTextComponent from './base-text-component' @@ -9,18 +8,16 @@ export default class TextInputMask extends BaseTextComponent { } _onChangeText(text) { - let self = this - if (!this._checkText(text)) { return } - self.updateValue(text).then(({ maskedText, rawText }) => { - if (self.props.onChangeText) { - this._trySetNativeProps(maskedText) - self.props.onChangeText(maskedText, rawText) - } - }) + const { maskedText, rawText } = this.updateValue(text) + + if (this.props.onChangeText) { + this._trySetNativeProps(maskedText) + this.props.onChangeText(maskedText, rawText) + } } _trySetNativeProps(maskedText) { @@ -34,7 +31,7 @@ export default class TextInputMask extends BaseTextComponent { _checkText(text) { if (this.props.checkText) { - return this.props.checkText(this.state.value, text) + return this.props.checkText(this.props.value, text) } return true @@ -68,7 +65,7 @@ export default class TextInputMask extends BaseTextComponent { {...this.props} {...customTextInputProps} onChangeText={text => this._onChangeText(text)} - value={this.state.value} + value={this.props.value} /> ) } diff --git a/lib/text-mask.js b/lib/text-mask.js index cfdb5a0b..e794484e 100644 --- a/lib/text-mask.js +++ b/lib/text-mask.js @@ -1,6 +1,5 @@ -import React, { Component } from 'react'; +import React from 'react'; import { - StyleSheet, Text } from 'react-native'; import BaseTextComponent from './base-text-component'; @@ -18,7 +17,7 @@ export default class TextMask extends BaseTextComponent { render() { return ( - {this.state.value} + {this.props.value} ); } } diff --git a/package.json b/package.json index c7d99ec8..3060d7f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-masked-text", - "version": "1.12.1", + "version": "1.12.2", "description": "Text and TextInput with mask for React Native applications", "licenses": [ {