diff --git a/README.md b/README.md index 71b4c6d..f218022 100644 --- a/README.md +++ b/README.md @@ -67,14 +67,19 @@ Prop | Type | Default | description -----|------|---------|------------ label | string | | This string appears as the label. highlightColor | string | | This string represents the hex code, rgb, or rgba color of the textInput label and underline when it is active/focused on. +keepHighlightColor | bool | false | If true will keep the highlight color active. +labelFontFamily | string | | Adds a custom font to the label. +textInputFontFamily | string | | Adds a custom font to the text input. duration | number | `200` | A number representing the duration of floating label and underline animations in milliseconds. labelColor | string | `#9E9E9E` | This string represents the hex code, rgb, or rgba color of the textInput label when it is inactive. borderColor | string | `#E0E0E0` | This string represents the hex code, rgb, or rgba color of the textInput underline when it is inactive. dense | bool | `false` | If true, it will render the "dense" input field which is smaller in height and has smaller font sizes. You can view more [here](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels). +multiline | bool | `false` | If true, it will allow multiline text input +height | number | `false` | A number representing the initial height of the textInput +autoGrow | bool | `false` | If true enables autogrow of the textInput underlineColorAndroid | string | `rgba(0,0,0,0)` | This sets the default underline color on Android to transparent ([Issue #1](https://github.com/evblurbs/react-native-md-textinput/issues/1)). ## TODO -- [ ] Support multi-line TextInput fields - [ ] Support character limit - [ ] Add option for dark theme diff --git a/examples/FloatingLabel/index.android.js b/examples/FloatingLabel/index.android.js index 4341519..a3b3b7a 100644 --- a/examples/FloatingLabel/index.android.js +++ b/examples/FloatingLabel/index.android.js @@ -3,13 +3,8 @@ * that demos the react-native-md-textinput */ 'use strict'; -import React, { - AppRegistry, - Component, - StyleSheet, - Text, - ScrollView -} from 'react-native'; +import React, {Component} from "react"; +import {AppRegistry, StyleSheet, Text, ScrollView} from "react-native"; import TextField from 'react-native-md-textinput'; diff --git a/examples/FloatingLabel/index.ios.js b/examples/FloatingLabel/index.ios.js index 560c86c..db61857 100644 --- a/examples/FloatingLabel/index.ios.js +++ b/examples/FloatingLabel/index.ios.js @@ -3,13 +3,8 @@ * that demos the react-native-md-textinput */ 'use strict'; -import React, { - AppRegistry, - Component, - StyleSheet, - Text, - ScrollView -} from 'react-native'; +import React, {Component} from "react"; +import {AppRegistry, StyleSheet, Text, ScrollView} from "react-native"; import TextField from 'react-native-md-textinput'; diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 4d06928..1e0b1a8 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -1,12 +1,6 @@ 'use strict'; -/* @flow */ - -import React, { - Component, - StyleSheet, - Animated, - PropTypes -} from 'react-native'; +import React, {Component, PropTypes} from "react"; +import {StyleSheet, Animated} from "react-native"; export default class FloatingLabel extends Component { constructor(props: Object) { @@ -60,14 +54,17 @@ export default class FloatingLabel extends Component { let { label, labelColor, - highlightColor + highlightColor, + labelFontFamily, + keepHightlightColor } = this.props; return ( { this.setState({isFocused: true}); this.refs.floatingLabel.floatLabel(); @@ -53,9 +67,13 @@ export default class TextField extends Component { this.refs.underline.shrinkLine(); onBlur && onBlur(); }} - onChangeText={(text) => { - this.setState({text}); - onChangeText && onChangeText(text); + onChange={(event) => { + if(autoGrow){ + this.setState({text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height}); + }else{ + this.setState({text: event.nativeEvent.text}); + } + onChange && onChange(event); }} ref="input" value={this.state.text} @@ -76,6 +94,8 @@ export default class TextField extends Component { highlightColor={highlightColor} duration={duration} dense={dense} + keepHightlightColor={keepHightlightColor} + labelFontFamily={labelFontFamily} hasValue={(this.state.text.length) ? true : false} /> @@ -89,9 +109,14 @@ TextField.propTypes = { highlightColor: PropTypes.string, onFocus: PropTypes.func, onBlur: PropTypes.func, - onChangeText: PropTypes.func, + onChange: PropTypes.func, value: PropTypes.string, - dense: PropTypes.bool + dense: PropTypes.bool, + multiline: PropTypes.bool, + autoGrow: PropTypes.bool, + textInputFontFamily: PropTypes.string, + labelFontFamily: PropTypes.string, + keepHightlightColor: PropTypes.bool }; TextField.defaultProps = { @@ -100,18 +125,20 @@ TextField.defaultProps = { borderColor: '#E0E0E0', value: '', dense: false, - underlineColorAndroid: 'rgba(0,0,0,0)' + underlineColorAndroid: 'rgba(0,0,0,0)', + multiline: false, + autoGrow: false, + height: false, + keepHightlightColor: false }; const styles = StyleSheet.create({ wrapper: { - height: 72, paddingTop: 30, paddingBottom: 7, position: 'relative' }, denseWrapper: { - height: 60, paddingTop: 28, paddingBottom: 4, position: 'relative' @@ -119,7 +146,7 @@ const styles = StyleSheet.create({ textInput: { fontSize: 16, height: 34, - lineHeight: 34 + lineHeight: 34, }, denseTextInput: { fontSize: 13, diff --git a/lib/Underline.js b/lib/Underline.js index 1651edd..a387ea9 100644 --- a/lib/Underline.js +++ b/lib/Underline.js @@ -1,13 +1,6 @@ 'use strict'; -/* @flow */ - -import React, { - Component, - View, - StyleSheet, - Animated, - PropTypes -} from 'react-native'; +import React, {Component, PropTypes} from "react"; +import {View, StyleSheet, Animated} from "react-native"; export default class Underline extends Component { constructor(props: Object) {