diff --git a/README.md b/README.md index 781eca4..2e81204 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ React Native TextInput styled with Material Design. ## Installation ``` -npm install react-native-md-textinput +npm i -S react-native-md-textinput ``` ## Usage @@ -66,7 +66,10 @@ Below are the props you can pass to the React Component to customize the TextInp 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. +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. textColor | string | `#000` | This string represents the hex code, rgb, or rgba color of the text entered in the TextInput. Note: If you set textFocusColor or textBlurColor, those colors will override this one during the corresponding state of the TextInput. @@ -93,6 +96,5 @@ labelStyle | Object | | Object to override the styles of the Label that animates ## TODO -- [ ] Support multi-line TextInput fields - [ ] Support character limit - [ ] Add option for dark theme diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 5f96eab..8a5726f 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -1,4 +1,3 @@ -'use strict'; import React, {Component, PropTypes} from "react"; import {StyleSheet, Animated} from "react-native"; @@ -55,14 +54,16 @@ export default class FloatingLabel extends Component { label, labelColor, highlightColor, - style + labelFontFamily, + keepHightlightColor } = this.props; return ( { this.setState({isFocused: true}); this.refs.floatingLabel.floatLabel(); @@ -84,13 +66,11 @@ 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({height: event.nativeEvent.contentSize.height}); + this.setState({text: event.nativeEvent.text, height: event.nativeEvent.contentSize.height}); + }else{ + this.setState({text: event.nativeEvent.text}); } onChange && onChange(event); }} @@ -113,8 +93,9 @@ export default class TextField extends Component { highlightColor={highlightColor} duration={duration} dense={dense} + keepHightlightColor={keepHightlightColor} + labelFontFamily={labelFontFamily} hasValue={(this.state.text.length) ? true : false} - style={labelStyle} /> ); @@ -125,47 +106,38 @@ TextField.propTypes = { duration: PropTypes.number, label: PropTypes.string, highlightColor: PropTypes.string, - labelColor: PropTypes.string, - borderColor: PropTypes.string, - textColor: PropTypes.string, - textFocusColor: PropTypes.string, - textBlurColor: PropTypes.string, onFocus: PropTypes.func, onBlur: PropTypes.func, - onChangeText: PropTypes.func, onChange: PropTypes.func, value: PropTypes.string, dense: PropTypes.bool, - inputStyle: PropTypes.object, - wrapperStyle: PropTypes.object, - labelStyle: PropTypes.object, multiline: PropTypes.bool, autoGrow: PropTypes.bool, - height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]) + textInputFontFamily: PropTypes.string, + labelFontFamily: PropTypes.string, + keepHightlightColor: PropTypes.bool }; TextField.defaultProps = { duration: 200, labelColor: '#9E9E9E', borderColor: '#E0E0E0', - textColor: '#000', value: '', dense: false, underlineColorAndroid: 'rgba(0,0,0,0)', multiline: false, autoGrow: false, - height: undefined + 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' @@ -174,7 +146,6 @@ const styles = StyleSheet.create({ fontSize: 16, height: 34, lineHeight: 34, - textAlignVertical: 'top' }, denseTextInput: { fontSize: 13, diff --git a/lib/Underline.js b/lib/Underline.js index 4368733..4f91775 100644 --- a/lib/Underline.js +++ b/lib/Underline.js @@ -1,4 +1,3 @@ -'use strict'; import React, {Component, PropTypes} from "react"; import {View, StyleSheet, Animated} from "react-native";