diff --git a/README.md b/README.md index 71b4c6d..77e3750 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 install https://github.com/ajaxangular/react-native-md-textinput --save ``` ## Usage diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 4d06928..d1689c0 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -2,10 +2,9 @@ /* @flow */ import React, { - Component, + Component, PropTypes } from 'react'; import { StyleSheet, - Animated, - PropTypes + Animated } from 'react-native'; export default class FloatingLabel extends Component { diff --git a/lib/TextField.js b/lib/TextField.js index 4f25809..ee8663a 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -2,11 +2,10 @@ /* @flow */ import React, { - Component, + Component, PropTypes } from 'react'; import { View, TextInput, - StyleSheet, - PropTypes + StyleSheet } from 'react-native'; import Underline from './Underline'; @@ -20,6 +19,19 @@ export default class TextField extends Component { text: props.value }; } + + componentWillReceiveProps(nextProps: Object){ + if(this.props.text !== nextProps.value){ + nextProps.value.length !== 0 ? + this.refs.floatingLabel.floatLabel() + : this.refs.floatingLabel.sinkLabel(); + this.setState({text: nextProps.value}); + } + if(this.props.height !== nextProps.height){ + this.setState({height: nextProps.height}); + } + } + focus() { this.refs.input.focus(); } @@ -111,19 +123,19 @@ const styles = StyleSheet.create({ position: 'relative' }, denseWrapper: { - height: 60, - paddingTop: 28, + height: 40, + paddingTop: 30, paddingBottom: 4, position: 'relative' }, textInput: { fontSize: 16, - height: 34, + height: 40, lineHeight: 34 }, denseTextInput: { fontSize: 13, - height: 27, + height: 37, lineHeight: 24, paddingBottom: 3 } diff --git a/lib/Underline.js b/lib/Underline.js index 1651edd..4e34965 100644 --- a/lib/Underline.js +++ b/lib/Underline.js @@ -2,11 +2,10 @@ /* @flow */ import React, { - Component, + Component, PropTypes } from 'react'; import { View, StyleSheet, - Animated, - PropTypes + Animated } from 'react-native'; export default class Underline extends Component { @@ -47,6 +46,13 @@ export default class Underline extends Component { } = this.props; return ( { + const measuredWidth = event.nativeEvent.layout.width; + if (!measuredWidth) { + return; + } + this.wrapperWidth = measuredWidth; + }} style={[styles.underlineWrapper, { backgroundColor: borderColor }]}