diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..7b237aca --- /dev/null +++ b/.eslintrc @@ -0,0 +1,58 @@ +{ + "extends": [ + "airbnb", + "plugin:flowtype/recommended", + ], + "plugins": [ + "flowtype" + ], + "parser": "babel-eslint", + "parserOptions": { + "sourceType": "module", + "allowImportExportEverywhere": false, + "codeFrame": false + }, + "env": { + "browser": true, + "node": true, + "es6": true, + "mocha": true, + "jest": true + }, + "rules": { + "class-methods-use-this": [ 0, { + "exceptMethods": [] + }], + + "react/jsx-filename-extension": [ 1, { + "extensions": [".js", ".jsx"] + }], + "react/jsx-max-props-per-line": [ 1, { + "maximum": 2, + "when": "multiline" + }], + "react/prefer-stateless-function": [ 0, {} ], + "require-jsdoc": ["error", { + "require": { + "FunctionDeclaration": true, + "MethodDefinition": true, + "ClassDeclaration": true + } + }], + "react/sort-comp": [ 2, { + order: [ + "type-annotations", + "static-methods", + "life-cycle", + "everything-else", + "render" + ] + }], + "valid-jsdoc": ["error", { + "requireReturn": true, + "requireReturnType": true, + "requireParamDescription": true, + "requireReturnDescription": true + }] + } +} diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 00000000..af13fa53 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,53 @@ +[ignore] +; We fork some components by platform +.*/*[.]android.js + +; Ignore "BUCK" generated dirs +/\.buckd/ +.*/node_modules/.* + +; Ignore unexpected extra "@providesModule" +.*/node_modules/.*/node_modules/fbjs/.* + +; .*/node_modules/expo/.* + +; Ignore duplicate module providers +; For RN Apps installed via npm, "Libraries" folder is inside +; "node_modules/react-native" but in the source repo is inside the root +.*/Libraries/react-native/React.js +.*/Libraries/react-native/ReactNative.js + +[include] + +[libs] +node_modules/react-native/Libraries/react-native/react-native-interface.js +node_modules/react-native/flow +flow/ +./flow-typed/ + +[options] +emoji=true + +module.system=haste + +esproposal.class_static_fields=enable +esproposal.class_instance_fields=enable + +munge_underscores=true + +module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' + +suppress_type=$FlowIssue +suppress_type=$FlowFixMe +suppress_type=$FixMe +suppress_type=$FlowExpectedError + +suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) +suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-7]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ +suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError + +unsafe.enable_getters_and_setters=true + +[version] +^0.52.0 diff --git a/README.md b/README.md index 97019949..8e39a2c0 100644 --- a/README.md +++ b/README.md @@ -32,18 +32,18 @@ export default class MyComponent extends Component { // 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.refs['myDateText'].isValid() + 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.refs['myDateText'].getRawValue() + 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' @@ -110,11 +110,13 @@ You can use this prop if you want custom text input instead native TextInput com ```jsx const Textfield = MKTextField.textfield() - .withPlaceholder('Text...') - .withStyle(styles.textfield) - .build() -; this.myDateText = ref;} type={'money'} style={styles.input} customTextInput={Textfield} @@ -134,36 +136,37 @@ import { TextInputMask } from 'react-native-masked-text' import { Kaede } from 'react-native-textinput-effects' export default class App extends React.Component { - constructor(props) { - super(props) - - this.state = { - birthday: '' - } - } - - render() { - return ( - - this.setState({ birthday })} - value={this.state.birthday} - /> - - ) - } + constructor(props) { + super(props) + + this.state = { + birthday: '' + } + } + + 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} /> + + ); + } } const styles = StyleSheet.create({ @@ -400,6 +403,7 @@ var money = MaskService.toMask('money', '123', { * Adding `ts definitions`. (thanks to [iiandrade](https://github.com/iiandrade)) * Adding `toRawValue` method to MaskService. (thanks to [fabioh8010](https://github.com/fabioh8010)) +* Replace old legacy ref string by the new callback. (thanks to [Yamilquery](https://github.com/Yamilquery)) ## 1.6.5 diff --git a/lib/text-input-mask.js b/lib/text-input-mask.js index 528ccf8a..89690a6d 100644 --- a/lib/text-input-mask.js +++ b/lib/text-input-mask.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +// @flow +import React from 'react'; import { StyleSheet, - TextInput + TextInput, } from 'react-native'; import BaseTextComponent from './base-text-component'; @@ -50,7 +51,13 @@ export default class TextInputMask extends BaseTextComponent { return ( { + if(ref) { + if (typeof this.props.refInput === 'function') { + this.props.refInput(ref); + } + } + }} keyboardType={this._getKeyboardType()} {...this.props} {...customTextInputProps}