From fed8f6415fc8a7e57e707c97b260e6efb6b4d636 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Thu, 17 Mar 2016 13:22:50 +1030 Subject: [PATCH 1/9] Update TextField to support updating value property --- lib/TextField.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/TextField.js b/lib/TextField.js index 4f25809..6772498 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -23,6 +23,12 @@ export default class TextField extends Component { focus() { this.refs.input.focus(); } + 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}) + } + } render() { let { label, From 3f811b892a112764d82bad533998a46f15f2ea30 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Thu, 24 Mar 2016 14:31:01 +1030 Subject: [PATCH 2/9] Add measureLayout method --- lib/TextField.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/TextField.js b/lib/TextField.js index 6772498..6374f8a 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -21,8 +21,13 @@ export default class TextField extends Component { }; } focus() { - this.refs.input.focus(); + this.refs.input.focus(); } + + measureLayout(...args){ + this.refs.wrapper.measureLayout(...args) + } + componentWillReceiveProps(nextProps: Object){ if(this.props.text != nextProps.value){ nextProps.value.length !== 0 ? this.refs.floatingLabel.floatLabel() : this.refs.floatingLabel.sinkLabel() From 555c7de087bc98d73ae878a2b1c8b1012ed2ca32 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Fri, 13 May 2016 16:41:55 +0930 Subject: [PATCH 3/9] Fix depreciation warnings about importing React from React-Native package Used https://github.com/sibeliusseraphini/codemod-RN24-to-RN25 --- examples/FloatingLabel/index.android.js | 9 ++------- examples/FloatingLabel/index.ios.js | 9 ++------- lib/FloatingLabel.js | 10 ++-------- lib/TextField.js | 11 ++--------- lib/Underline.js | 11 ++--------- 5 files changed, 10 insertions(+), 40 deletions(-) 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..429a8a1 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) { diff --git a/lib/TextField.js b/lib/TextField.js index 4f25809..208f0a2 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -1,13 +1,6 @@ 'use strict'; -/* @flow */ - -import React, { - Component, - View, - TextInput, - StyleSheet, - PropTypes -} from 'react-native'; +import React, {Component, PropTypes} from "react"; +import {View, TextInput, StyleSheet} from "react-native"; import Underline from './Underline'; import FloatingLabel from './FloatingLabel'; 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) { From 72d1d0827cd2d78550dc2adc70f5879f7ca75c90 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Wed, 18 May 2016 12:52:25 +0930 Subject: [PATCH 4/9] Add multiline + auto grow support --- README.md | 4 +++- lib/TextField.js | 38 +++++++++++++++++++++++++++----------- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 71b4c6d..75fd83e 100644 --- a/README.md +++ b/README.md @@ -71,10 +71,12 @@ duration | number | `200` | A number representing the duration of floating label 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/lib/TextField.js b/lib/TextField.js index 4f25809..02de011 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -17,9 +17,15 @@ export default class TextField extends Component { super(props, context); this.state = { isFocused: false, - text: props.value + text: props.value, + height: props.height }; } + componentWillReceiveProps(nextProps: Object){ + if(this.props.height !== nextProps.height){ + this.setState({height: nextProps.height}); + } + } focus() { this.refs.input.focus(); } @@ -32,15 +38,18 @@ export default class TextField extends Component { borderColor, onFocus, onBlur, - onChangeText, + onChange, value, dense, + multiline, + autoGrow, ...props } = this.props; return ( { this.setState({isFocused: true}); this.refs.floatingLabel.floatLabel(); @@ -53,9 +62,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} @@ -89,9 +102,11 @@ 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 }; TextField.defaultProps = { @@ -100,18 +115,19 @@ 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 }; const styles = StyleSheet.create({ wrapper: { - height: 72, paddingTop: 30, paddingBottom: 7, position: 'relative' }, denseWrapper: { - height: 60, paddingTop: 28, paddingBottom: 4, position: 'relative' From 5b160a0432a6dcfb74b89881d1b71992c2a62d09 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Wed, 18 May 2016 13:00:10 +0930 Subject: [PATCH 5/9] Fix merge conflict --- lib/TextField.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index eaffbd2..ced7114 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -15,6 +15,10 @@ export default class TextField extends Component { }; } 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}); } @@ -27,12 +31,6 @@ export default class TextField extends Component { this.refs.wrapper.measureLayout(...args) } - 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}) - } - } render() { let { label, From bd38ceffabdbb3d9a40e963604b0571e1f0eaad2 Mon Sep 17 00:00:00 2001 From: Jody Brewster Date: Sat, 21 May 2016 05:48:35 -0400 Subject: [PATCH 6/9] Update FloatingLabel.js Added keepHightlightColor, labelFontFamily props --- lib/FloatingLabel.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 429a8a1..1e0b1a8 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -54,14 +54,17 @@ export default class FloatingLabel extends Component { let { label, labelColor, - highlightColor + highlightColor, + labelFontFamily, + keepHightlightColor } = this.props; return ( Date: Sat, 21 May 2016 05:49:30 -0400 Subject: [PATCH 7/9] Update TextField.js Added textInputFontFamily, labelFontFamily, keepHightlightColor props --- lib/TextField.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index ced7114..31b8369 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -26,11 +26,11 @@ export default class TextField extends Component { focus() { this.refs.input.focus(); } - + measureLayout(...args){ this.refs.wrapper.measureLayout(...args) } - + render() { let { label, @@ -45,12 +45,15 @@ export default class TextField extends Component { dense, multiline, autoGrow, + textInputFontFamily, + labelFontFamily, + keepHightlightColor, ...props } = this.props; return ( { this.setState({isFocused: true}); @@ -91,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} /> @@ -108,7 +113,10 @@ TextField.propTypes = { value: PropTypes.string, dense: PropTypes.bool, multiline: PropTypes.bool, - autoGrow: PropTypes.bool + autoGrow: PropTypes.bool, + textInputFontFamily: PropTypes.string, + labelFontFamily: PropTypes.string, + keepHightlightColor: PropTypes.bool }; TextField.defaultProps = { @@ -120,7 +128,8 @@ TextField.defaultProps = { underlineColorAndroid: 'rgba(0,0,0,0)', multiline: false, autoGrow: false, - height: false + height: false, + keepHightlightColor: false }; const styles = StyleSheet.create({ @@ -137,7 +146,7 @@ const styles = StyleSheet.create({ textInput: { fontSize: 16, height: 34, - lineHeight: 34 + lineHeight: 34, }, denseTextInput: { fontSize: 13, From 830cda935d1b4ab6000b8a9a8d4cefbc0c542aa1 Mon Sep 17 00:00:00 2001 From: Jody Brewster Date: Sat, 21 May 2016 05:53:21 -0400 Subject: [PATCH 8/9] Update README.md Updated documentation to reflect the new props keepHightlightColor, labelFontFamily, textInputFontFamily --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 75fd83e..977fcca 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,9 @@ 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. From 8359f45b38499116ac37a493252b82a35fc25b86 Mon Sep 17 00:00:00 2001 From: Jody Brewster Date: Sat, 21 May 2016 05:53:59 -0400 Subject: [PATCH 9/9] Update README.md Edit sentences --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 977fcca..f218022 100644 --- a/README.md +++ b/README.md @@ -67,9 +67,9 @@ 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 +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.