From 2024db847c710b12fa9e7c9bdb0da4994529925d Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Wed, 28 Jun 2017 18:07:29 +0200 Subject: [PATCH 1/6] fix the input height --- lib/TextField.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index d42523a..8855587 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -59,10 +59,13 @@ export default class TextField extends Component { height, autoGrow, multiline, + maxheight, ...props } = this.props; + let inputHeight = this.state.height; + inputHeight = inputHeight && height && inputHeight > height ? height : inputHeight; return ( - + { this.setState({isFocused: true}); @@ -89,8 +92,9 @@ export default class TextField extends Component { onChangeText && onChangeText(text); }} onChange={(event) => { - if(autoGrow){ - this.setState({height: event.nativeEvent.contentSize.height}); + const newheight = event.nativeEvent.contentSize.height; + if (autoGrow && (!height || height <= newheight)) { + this.setState({ height: newheight }); } onChange && onChange(event); }} From 3c117a77495f3b0b15bbd63c00e4b2f7ba758198 Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Wed, 28 Jun 2017 18:10:43 +0200 Subject: [PATCH 2/6] remove maxHeight, we use only height prop --- lib/TextField.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/TextField.js b/lib/TextField.js index 8855587..dd4e586 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -59,7 +59,6 @@ export default class TextField extends Component { height, autoGrow, multiline, - maxheight, ...props } = this.props; let inputHeight = this.state.height; From fa2474efa304441b8f1cf6222c9a126ffe0978f7 Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Wed, 26 Jul 2017 11:17:17 +0200 Subject: [PATCH 3/6] use onContentSizeChange instead of onChange --- lib/TextField.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index dd4e586..14eb56a 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -50,7 +50,7 @@ export default class TextField extends Component { onFocus, onBlur, onChangeText, - onChange, + onContentSizeChange, value, dense, inputStyle, @@ -90,12 +90,12 @@ export default class TextField extends Component { this.setState({text}); onChangeText && onChangeText(text); }} - onChange={(event) => { + onContentSizeChange={(event) => { const newheight = event.nativeEvent.contentSize.height; if (autoGrow && (!height || height <= newheight)) { this.setState({ height: newheight }); } - onChange && onChange(event); + onContentSizeChange && onContentSizeChange(event); }} ref="input" value={this.state.text} From 1eb0b0897f9404bc5383b361fc1ea7b2d8c50715 Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Tue, 22 Aug 2017 14:43:27 +0200 Subject: [PATCH 4/6] add calculate heights operation (for the inpute and the wrapper), add the minHeight props --- lib/TextField.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index 14eb56a..a82b377 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -13,6 +13,7 @@ export default class TextField extends Component { text: props.value, height: props.height }; + this.calculateHeights = this.calculateHeights.bind(this) } focus() { this.refs.input.focus(); @@ -37,6 +38,14 @@ export default class TextField extends Component { this.setState({height: nextProps.height}); } } + calculateHeights(){ + const { height, minHeight } = this.props; + let inputHeight = this.state.height || minHeight; + inputHeight = inputHeight && height && inputHeight > height ? height : inputHeight; + inputHeight = minHeight && inputHeight < minHeight ? minHeight : inputHeight; + const wrapperHeight = inputHeight + 30 + return { inputHeight, wrapperHeight } + } render() { let { label, @@ -61,10 +70,9 @@ export default class TextField extends Component { multiline, ...props } = this.props; - let inputHeight = this.state.height; - inputHeight = inputHeight && height && inputHeight > height ? height : inputHeight; + const heights = this.calculateHeights(); return ( - + { this.setState({isFocused: true}); From 0c460bba4ba5f9e20c9776de52a3816a943bdee5 Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Thu, 14 Dec 2017 23:46:18 +0100 Subject: [PATCH 5/6] update to react 16 --- lib/FloatingLabel.js | 3 ++- lib/TextField.js | 3 ++- lib/Underline.js | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 5f96eab..bca5db9 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -1,5 +1,6 @@ 'use strict'; -import React, {Component, PropTypes} from "react"; +import React, {Component} from "react"; +import PropTypes from 'prop-types'; import {StyleSheet, Animated} from "react-native"; export default class FloatingLabel extends Component { diff --git a/lib/TextField.js b/lib/TextField.js index a82b377..264ed4f 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -1,5 +1,6 @@ 'use strict'; -import React, {Component, PropTypes} from "react"; +import React, {Component} from "react"; +import PropTypes from 'prop-types'; import {View, TextInput, StyleSheet} from "react-native"; import Underline from './Underline'; diff --git a/lib/Underline.js b/lib/Underline.js index 4368733..2a2a436 100644 --- a/lib/Underline.js +++ b/lib/Underline.js @@ -1,5 +1,6 @@ 'use strict'; -import React, {Component, PropTypes} from "react"; +import React, {Component} from "react"; +import PropTypes from 'prop-types'; import {View, StyleSheet, Animated} from "react-native"; export default class Underline extends Component { From 017e8c0370d7c15285cf17c207e41ccf62b9624c Mon Sep 17 00:00:00 2001 From: Amen Souissi Date: Fri, 15 Dec 2017 10:26:52 +0100 Subject: [PATCH 6/6] fix PropTypes.oneOf arg for the TextField component --- lib/TextField.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/TextField.js b/lib/TextField.js index 264ed4f..c40239a 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -153,7 +153,7 @@ TextField.propTypes = { labelStyle: PropTypes.object, multiline: PropTypes.bool, autoGrow: PropTypes.bool, - height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]) + height: PropTypes.oneOfType([PropTypes.oneOf([undefined]), PropTypes.number]) }; TextField.defaultProps = {