From 3f811b892a112764d82bad533998a46f15f2ea30 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Thu, 24 Mar 2016 14:31:01 +1030 Subject: [PATCH 1/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 72d1d0827cd2d78550dc2adc70f5879f7ca75c90 Mon Sep 17 00:00:00 2001 From: Matt Labrum Date: Wed, 18 May 2016 12:52:25 +0930 Subject: [PATCH 2/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 3/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 4/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 5/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 6/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 7/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. From 0df5ea4bd308c91e1b73c846bfadb9657745620e Mon Sep 17 00:00:00 2001 From: stoffern Date: Fri, 15 Jul 2016 14:57:21 +0200 Subject: [PATCH 8/9] spaces over tabs --- lib/FloatingLabel.js | 20 +++---- lib/TextField.js | 131 +++++++++++++++++++++---------------------- lib/Underline.js | 1 - 3 files changed, 75 insertions(+), 77 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 2a92783..8a5726f 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -50,13 +50,13 @@ export default class FloatingLabel extends Component { ]).start(); } render() : Object { - let { - label, - labelColor, - highlightColor, + let { + label, + labelColor, + highlightColor, labelFontFamily, keepHightlightColor - } = this.props; + } = this.props; return ( { this.setState({isFocused: true}); this.refs.floatingLabel.floatLabel(); @@ -68,12 +67,12 @@ export default class TextField extends Component { onBlur && onBlur(); }} 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); + 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} @@ -90,13 +89,13 @@ export default class TextField extends Component { ref="floatingLabel" focusHandler={this.focus.bind(this)} label={label} - labelColor={labelColor} - highlightColor={highlightColor} - duration={duration} - dense={dense} + labelColor={labelColor} + highlightColor={highlightColor} + duration={duration} + dense={dense} keepHightlightColor={keepHightlightColor} labelFontFamily={labelFontFamily} - hasValue={(this.state.text.length) ? true : false} + hasValue={(this.state.text.length) ? true : false} /> ); @@ -104,31 +103,31 @@ export default class TextField extends Component { } TextField.propTypes = { - duration: PropTypes.number, - label: PropTypes.string, - highlightColor: PropTypes.string, - onFocus: PropTypes.func, - onBlur: PropTypes.func, - onChange: PropTypes.func, - value: PropTypes.string, - dense: PropTypes.bool, - multiline: PropTypes.bool, - autoGrow: PropTypes.bool, + duration: PropTypes.number, + label: PropTypes.string, + highlightColor: PropTypes.string, + onFocus: PropTypes.func, + onBlur: PropTypes.func, + onChange: PropTypes.func, + value: PropTypes.string, + dense: PropTypes.bool, + multiline: PropTypes.bool, + autoGrow: PropTypes.bool, textInputFontFamily: PropTypes.string, labelFontFamily: PropTypes.string, keepHightlightColor: PropTypes.bool }; TextField.defaultProps = { - duration: 200, - labelColor: '#9E9E9E', - borderColor: '#E0E0E0', - value: '', - dense: false, - underlineColorAndroid: 'rgba(0,0,0,0)', - multiline: false, - autoGrow: false, - height: false, + duration: 200, + labelColor: '#9E9E9E', + borderColor: '#E0E0E0', + value: '', + dense: false, + underlineColorAndroid: 'rgba(0,0,0,0)', + multiline: false, + autoGrow: false, + height: false, keepHightlightColor: false }; @@ -138,15 +137,15 @@ const styles = StyleSheet.create({ paddingBottom: 7, position: 'relative' }, - denseWrapper: { - paddingTop: 28, - paddingBottom: 4, - position: 'relative' - }, + denseWrapper: { + paddingTop: 28, + paddingBottom: 4, + position: 'relative' + }, textInput: { fontSize: 16, - height: 34, - lineHeight: 34, + height: 34, + lineHeight: 34, }, 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"; From 3591ee660b778b6a2eb342308981ebd39cedc271 Mon Sep 17 00:00:00 2001 From: Kristoffer K Date: Fri, 15 Jul 2016 15:14:35 +0200 Subject: [PATCH 9/9] update polish --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index afa1981..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