diff --git a/CHANGELOG.md b/CHANGELOG.md index b5ab7a73..c67ad959 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,21 @@ ## Unreleased +## [1.11.0] - 2019-02-23 + +### Added + +- Adding `maskType` to `cel-phone` with options: `BRL` and `INTERNATIONAL`. + +### Changed + +- New documentation in `README`. + +### Removed + +- [BREAKING CHANGE] The `zeroCents` option was removed from `money` mask, if you want to not show the cents, use the `precision: 0`. + + ## [1.10.1] - 2019-01-07 ### Fixed diff --git a/README.md b/README.md index 64196711..2abe6a8c 100644 --- a/README.md +++ b/README.md @@ -17,387 +17,612 @@ React-native: 0.32.0 or higher ## Usage (TextInputMask) -```jsx -import React, { Component } from 'react' +For all the masks you will use in this way: -// import the component +```jsx import { TextInputMask } from 'react-native-masked-text' -export default class MyComponent extends Component { - constructor(props) { - super(props) - } - - componentDidMount() { - // isValid method returns if the inputed value is valid. - // Ex: if you input 40/02/1990 30:20:20, it will return false - // because in this case, the day and the hour is invalid. - let valid = this.myDateText.isValid(); - - // get converted value. Using type=datetime, it returns the moment object. - // If it's using type=money, it returns a Number object. - let rawValue = this.myDateText.getRawValue(); - } - - render() { - // the type is required but options is required only for some specific types. - return ( - this.myDateText = ref} - type={'datetime'} - options={{ - format: 'DD-MM-YYYY HH:mm:ss' - }} - /> - ) - } -} +//... + + { + this.setState({ + text: text + }) + }} +/> ``` -### Props +### Cel Phone -#### type +Mask: -_credit-card_: use the mask 9999 9999 9999 9999. It accepts options (see later in this doc).
-_cpf_: use the mask `999.999.999-99` and `numeric` keyboard.
-_cnpj_: use the mask `99.999.999/9999-99` and `numeric` keyboard.
-_zip-code_: use the mask `99999-999` and `numeric` keyboard.
-_only-numbers_: accept only numbers on field with `numeric` keyboard.
-_money_: use the mask `R$ 0,00` on the field with `numeric` keyboard. It accepts options (see later in this doc).
-_cel-phone_: use the mask `(99) 9999-9999` or `(99) 99999-9999` (changing automaticaly by length). It accepts options (see later in this doc).
-_datetime_: use datetime mask with moment format (default DD/MM/YYYY HH:mm:ss). It accepts options (see later in this doc).
-_custom_: use your custom mask (see the options props later in this doc).
+- BRL (default): `(99) 9999-9999` or `(99) 99999-9999` (will detect automatically) +- INTERNATIONAL: `+999 999 999 999` -#### onChangeText +If you need a different formatting, use the `Custom` mask =). -Invoked after new value applied to mask. +Sample code ([source](https://github.com/benhurott/react-native-masked-text-samples/blob/master/ReactNativeMaskedTextSamples/Samples/CelPhone.js)): ```jsx -/** - * @param {String} text the text AFTER mask is applied. -*/ -onChangeText(text) { - // ... -} + { + this.setState({ + international: text + }) + }} +/> +``` +#### Options +| name | type | required | default | description | +| ---------- | ------- | -------- | ------- | ----------- | +| maskType | string | no | `maskType` | the type of the mask to use. Available: `BRL` or `INTERNATIONAL` | +| withDDD | boolean | no | `true` | if the mask type is `BRL`, include the DDD | +| dddMask | string | no | `(99) ` | if the mask type is `BRL`, the DDD mask | + +#### Methods + +You can get the `unmasked` value using the `getRawValue` method: + +```jsx + type={'cel-phone'} + options={{ + maskType: 'BRL', + withDDD: true, + dddMask: '(99) ' + }} + value={this.state.international} + onChangeText={text => { + this.setState({ + international: text + }) + }} + // add the ref to a local var + ref={(ref) => this.phoneField = ref} +/> + +//... + +const unmasked = this.phoneField.getRawValue() +// in the mask: (51) 98765-4321 +// unmasked: 51987654321 ``` -#### checkText -Allow you to check and prevent value to be inputed. +### CPF + +Mask: `999.999.999-99` + +Sample code ([source](https://github.com/benhurott/react-native-masked-text-samples/blob/master/ReactNativeMaskedTextSamples/Samples/Cpf.js)): ```jsx -/** - * @param {String} previous the previous text in the masked field. - * @param {String} next the next text that will be setted to field. - * @return {Boolean} return true if must accept the value. -*/ -checkText(previous, next) { - return next === 'your valid value or other boolean condition'; -} + { + this.setState({ + cpf: text + }) + }} +/> +``` + +#### Methods +You can check if the cpf is valid by calling the `isValid()` method: + +```jsx + type={'cpf'} + value={this.state.cpf} + onChangeText={text => { + this.setState({ + cpf: text + }) + }} + // add the ref to a local var + ref={(ref) => this.cpfField = ref} +/> + +// get the validation + +const cpfIsValid = this.cpfField.isValid() +console.log(cpfIsValid) // boolean ``` -#### customTextInput +You can get the `unmasked` cpf calling the `getRawValue` method: + +```jsx +const unmasked = this.cpfField.getRawValue() +// in the mask: 123.456.789-01 +// unmasked: 12345678901 +``` -You can use this prop if you want custom text input instead native TextInput component: +### CNPJ + +Mask: `99.999.999/9999-99` + +Sample code ([source](https://github.com/benhurott/react-native-masked-text-samples/blob/master/ReactNativeMaskedTextSamples/Samples/Cnpj.js)): ```jsx -const Textfield = MKTextField.textfield() - .withPlaceholder('Text...') - .withStyle(styles.textfield) - .build(); + { + this.setState({ + cnpj: text + }) + }} +/> +``` +#### Methods +You can check if the cnpj is valid by calling the `isValid()` method: + +```jsx this.myDateText = ref} - type={'money'} - style={styles.input} - customTextInput={Textfield} - placeholder="Enter text to see events" + type={'cnpj'} + value={this.state.cnpj} + onChangeText={text => { + this.setState({ + cnpj: text + }) + }} + // add the ref to a local var + ref={(ref) => this.cnpjField = ref} /> + +// get the validation + +const cnpjIsValid = this.cnpjField.isValid() +console.log(cnpjIsValid) // boolean ``` -#### customTextInputProps -Some custom inputs like [react-native-textinput-effects](https://github.com/halilb/react-native-textinput-effects) have to set properties in mount time. For these types of components we use this property. +You can get the `unmasked` cpf calling the `getRawValue` method: ```jsx -import React from 'react' -import { StyleSheet, View } from 'react-native' +const unmasked = this.cnpjField.getRawValue() +// in the mask: 99.999.999/9999-99 +// unmasked: 99999999999999 +``` -import { TextInputMask } from 'react-native-masked-text' -import { Kaede } from 'react-native-textinput-effects' +### Credit Card -export default class App extends React.Component { - constructor(props) { - super(props) +Mask: - this.state = { - birthday: '' - } - } +- visa or master: `9999 9999 9999 9999` or `9999 **** **** 9999` (obfuscated) +- amex: `9999 999999 99999` or `9999 ****** 99999` (obfuscated) +- diners: `9999 999999 9999` or `9999 ****** 9999` (obfuscated) - render() { - return ( - - this.myDateText = ref} - // here we set the custom component and their props. - customTextInput={Kaede} - customTextInputProps={{ - style:{ width: '80%' }, - label:'Birthday' - }} - - type={'datetime'} - options={{ - format: 'DD-MM-YYYY HH:mm:ss' - }} - - // don't forget: the value and state! - onChangeText={birthday => this.setState({ birthday })} - value={this.state.birthday} /> - - ); - } -} +Sample code ([source](https://github.com/benhurott/react-native-masked-text-samples/blob/master/ReactNativeMaskedTextSamples/Samples/CreditCard.js)) -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center' - } -}) +```jsx + { + this.setState({ + creditCard: text + }) + }} +/> ``` -#### TextInput Props +#### Options -You can use the native props of TextInput, with this in mind: +| name | type | required | default | description | +| ---------- | ------- | -------- | -------------------- | ----------- | +| obfuscated | boolean | no | `false` | if the mask should be obfuscated or not| +| issuer | string | no | `visa-or-mastercard` | the type of the card mask. The options are: `visa-or-mastercard`, `amex` or `diners` | -- onChangeText is intercepted by component. -- value is intercepted by component. -- if you pass keyboardType, it will override the keyboardType of masked component. -#### TextInput Methods +#### Methods -If you want to use the methods of the native TextInput, use the `getElement()` method: +You can get the array containing the groups of the value value using the `getRawValue` method: ```jsx -export default class App extends React.Component { - onGoFocus() { - // when you call getElement method, the instance of native TextInput will returned. - this._myTextInputMask.getElement().focus() - } + { + this.setState({ + creditCard: text + }) + }} + // add the ref to a local var + ref={(ref) => this.creditCardField = ref} +/> - render() { - return ( - - - (this._myTextInputMask = ref)} - type={'only-numbers'} - style={styles.input} - /> - - -