From aa8b84b93857d93491b24339dfb5dcf53a507f11 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Fri, 21 Oct 2016 11:55:18 +0300 Subject: [PATCH 01/10] disable focus when no editable --- lib/TextField.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index d42523a..293c7cb 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -15,7 +15,8 @@ export default class TextField extends Component { }; } focus() { - this.refs.input.focus(); + if ( this.props.editable ) + this.refs.input.focus(); } blur() { this.refs.input.blur(); @@ -141,7 +142,8 @@ TextField.propTypes = { labelStyle: PropTypes.object, multiline: PropTypes.bool, autoGrow: PropTypes.bool, - height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]) + height: PropTypes.number, + editable: PropTypes.bool }; TextField.defaultProps = { @@ -154,7 +156,8 @@ TextField.defaultProps = { underlineColorAndroid: 'rgba(0,0,0,0)', multiline: false, autoGrow: false, - height: undefined + height: undefined, + editable: true }; const styles = StyleSheet.create({ From 75d7fa096a7de6d66a2f09874ec4fb4c2b92c0dd Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Sat, 22 Oct 2016 22:45:22 +0300 Subject: [PATCH 02/10] allow reference style --- lib/TextField.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index 293c7cb..86a0390 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -137,9 +137,18 @@ TextField.propTypes = { onChange: PropTypes.func, value: PropTypes.string, dense: PropTypes.bool, - inputStyle: PropTypes.object, - wrapperStyle: PropTypes.object, - labelStyle: PropTypes.object, + inputStyle: PropTypes.oneOfType([ + PropTypes.object + View.propTypes.style + ]), + wrapperStyle: PropTypes.oneOfType([ + PropTypes.object + View.propTypes.style + ]), + labelStyle: PropTypes.oneOfType([ + PropTypes.object + View.propTypes.style + ]), multiline: PropTypes.bool, autoGrow: PropTypes.bool, height: PropTypes.number, From 2e07ea12a7bd3101f778fe5a04d255e4bcb8d123 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Sat, 22 Oct 2016 22:52:52 +0300 Subject: [PATCH 03/10] style by ref floating name --- lib/FloatingLabel.js | 7 +++++-- lib/TextField.js | 6 +++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 5f96eab..49f5592 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -1,6 +1,6 @@ 'use strict'; import React, {Component, PropTypes} from "react"; -import {StyleSheet, Animated} from "react-native"; +import {StyleSheet, Animated, View} from "react-native"; export default class FloatingLabel extends Component { constructor(props: Object) { @@ -82,7 +82,10 @@ FloatingLabel.propTypes = { labelColor: PropTypes.string, highlightColor: PropTypes.string, dense: PropTypes.bool, - style: PropTypes.object + style: PropTypes.oneOfType([ + PropTypes.object, + View.propTypes.style + ]) }; const styles = StyleSheet.create({ diff --git a/lib/TextField.js b/lib/TextField.js index 86a0390..83f9ee3 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -138,15 +138,15 @@ TextField.propTypes = { value: PropTypes.string, dense: PropTypes.bool, inputStyle: PropTypes.oneOfType([ - PropTypes.object + PropTypes.object, View.propTypes.style ]), wrapperStyle: PropTypes.oneOfType([ - PropTypes.object + PropTypes.object, View.propTypes.style ]), labelStyle: PropTypes.oneOfType([ - PropTypes.object + PropTypes.object, View.propTypes.style ]), multiline: PropTypes.bool, From 4c47bb5d3ac0165617297383f0024e4f833d18ab Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Fri, 21 Apr 2017 17:08:29 +0300 Subject: [PATCH 04/10] Update TextField.js --- lib/TextField.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/TextField.js b/lib/TextField.js index 83f9ee3..311a389 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -63,7 +63,11 @@ export default class TextField extends Component { ...props } = this.props; return ( - + Date: Sun, 23 Apr 2017 12:05:17 +0300 Subject: [PATCH 05/10] manage pos --- lib/FloatingLabel.js | 4 ++-- lib/TextField.js | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 49f5592..cf3b7ec 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -11,8 +11,8 @@ export default class FloatingLabel extends Component { this.fontLarge = 13; this.fontSmall = 13; } else { - this.posTop = 16; - this.posBottom = 37; + this.posTop = props.posTop != null ? props.posTop || 16; + this.posBottom = props.posBottom != null ? props.posBottom || 37; this.fontLarge = 16; this.fontSmall = 12; } diff --git a/lib/TextField.js b/lib/TextField.js index 311a389..45cf802 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -63,7 +63,7 @@ export default class TextField extends Component { ...props } = this.props; return ( - ); From ce35f729f8c377383a1d075e32c6848e0475f2e3 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Sun, 23 Apr 2017 12:12:20 +0300 Subject: [PATCH 06/10] fix typos --- lib/FloatingLabel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index cf3b7ec..826d0b8 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -11,8 +11,8 @@ export default class FloatingLabel extends Component { this.fontLarge = 13; this.fontSmall = 13; } else { - this.posTop = props.posTop != null ? props.posTop || 16; - this.posBottom = props.posBottom != null ? props.posBottom || 37; + this.posTop = ( props.posTop != null ) ? props.posTop : 16; + this.posBottom = ( props.posBottom != null ) ? props.posBottom : 37; this.fontLarge = 16; this.fontSmall = 12; } From d1bf1d9067e925104c6e22d2adb6b09d203a1ba8 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Thu, 15 Jun 2017 18:55:55 +0300 Subject: [PATCH 07/10] onChange -> onContentSizeChange --- lib/TextField.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/TextField.js b/lib/TextField.js index 45cf802..cb0df60 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -51,6 +51,7 @@ export default class TextField extends Component { onFocus, onBlur, onChangeText, + onContentSizeChange, onChange, value, dense, @@ -94,10 +95,13 @@ export default class TextField extends Component { onChangeText && onChangeText(text); }} onChange={(event) => { + onChange && onChange(event); + }} + onContentSizeChange={(event) => { if(autoGrow){ this.setState({height: event.nativeEvent.contentSize.height}); } - onChange && onChange(event); + onContentSizeChange && onContentSizeChange(event); }} ref="input" value={this.state.text} @@ -140,6 +144,7 @@ TextField.propTypes = { onFocus: PropTypes.func, onBlur: PropTypes.func, onChangeText: PropTypes.func, + onContentSizeChange: PropTypes.func, onChange: PropTypes.func, value: PropTypes.string, dense: PropTypes.bool, From 6cdfe55ba3628b89e33507342b7168ff6f077a3c Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Sun, 15 Oct 2017 21:26:26 +0300 Subject: [PATCH 08/10] set prop-types --- lib/FloatingLabel.js | 7 ++++--- lib/TextField.js | 11 ++++++----- lib/Underline.js | 3 ++- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index 826d0b8..b1cbe96 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -1,6 +1,7 @@ 'use strict'; -import React, {Component, PropTypes} from "react"; -import {StyleSheet, Animated, View} from "react-native"; +import React, {Component} from "react"; +import PropTypes from 'prop-types'; +import {StyleSheet, Animated, View, ViewPropTypes} from "react-native"; export default class FloatingLabel extends Component { constructor(props: Object) { @@ -84,7 +85,7 @@ FloatingLabel.propTypes = { dense: PropTypes.bool, style: PropTypes.oneOfType([ PropTypes.object, - View.propTypes.style + ViewPropTypes.style ]) }; diff --git a/lib/TextField.js b/lib/TextField.js index cb0df60..580e3d1 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -1,6 +1,7 @@ 'use strict'; -import React, {Component, PropTypes} from "react"; -import {View, TextInput, StyleSheet} from "react-native"; +import React, {Component} from "react"; +import PropTypes from 'prop-types'; +import {View, ViewPropTypes, TextInput, StyleSheet} from "react-native"; import Underline from './Underline'; import FloatingLabel from './FloatingLabel'; @@ -150,15 +151,15 @@ TextField.propTypes = { dense: PropTypes.bool, inputStyle: PropTypes.oneOfType([ PropTypes.object, - View.propTypes.style + ViewPropTypes.style ]), wrapperStyle: PropTypes.oneOfType([ PropTypes.object, - View.propTypes.style + ViewPropTypes.style ]), labelStyle: PropTypes.oneOfType([ PropTypes.object, - View.propTypes.style + ViewPropTypes.style ]), multiline: PropTypes.bool, autoGrow: PropTypes.bool, 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 ab7cfbf4942f080fe441f0448ee469a49206bda5 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Fri, 3 Nov 2017 23:31:42 +0300 Subject: [PATCH 09/10] optimize perf --- lib/FloatingLabel.js | 8 +-- lib/TextField.js | 130 +++++++++++++++++++++++++++++-------------- lib/Underline.js | 29 +++++++--- 3 files changed, 112 insertions(+), 55 deletions(-) diff --git a/lib/FloatingLabel.js b/lib/FloatingLabel.js index b1cbe96..e96676c 100644 --- a/lib/FloatingLabel.js +++ b/lib/FloatingLabel.js @@ -51,6 +51,7 @@ export default class FloatingLabel extends Component { }) ]).start(); } + render() : Object { let { label, @@ -67,9 +68,7 @@ export default class FloatingLabel extends Component { }, styles.labelText, this.props.isFocused && { color: highlightColor }, style]} - onPress={()=> { - this.props.focusHandler(); - }} + onPress={this.props.focusHandler} > {label} @@ -86,7 +85,8 @@ FloatingLabel.propTypes = { style: PropTypes.oneOfType([ PropTypes.object, ViewPropTypes.style - ]) + ]), + focusHandler: PropTypes.func.isRequired }; const styles = StyleSheet.create({ diff --git a/lib/TextField.js b/lib/TextField.js index 580e3d1..9456ab8 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -7,6 +7,11 @@ import Underline from './Underline'; import FloatingLabel from './FloatingLabel'; export default class TextField extends Component { + _wrapper: null; + _input: null; + _underline: null; + _floatingLabel: null; + constructor(props: Object, context: Object) { super(props, context); this.state = { @@ -14,31 +19,94 @@ export default class TextField extends Component { text: props.value, height: props.height }; + + this.bindFunctions(); + } + + bindFunctions() { + this.onRefWrapper = this.onRefWrapper.bind(this); + this.onRefInput = this.onRefInput.bind(this); + this.onBlur = this.onBlur.bind(this); + this.onFocus = this.onFocus.bind(this); + this.onChangeText = this.onChangeText.bind(this); + this.onChange = this.onChange.bind(this); + this.onContentSizeChange = this.onContentSizeChange.bind(this); + this.onRefUnderline = this.onRefUnderline.bind(this); + this.onRefFloatingLabel = this.onRefFloatingLabel.bind(this); + this.focus = this.focus.bind(this); } + focus() { if ( this.props.editable ) - this.refs.input.focus(); + this._input.focus(); } blur() { - this.refs.input.blur(); + this._input.blur(); } isFocused() { return this.state.isFocused; } measureLayout(...args){ - this.refs.wrapper.measureLayout(...args) + this._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._floatingLabel.floatLabel() + : this._floatingLabel.sinkLabel(); this.setState({text: nextProps.value}); } if(this.props.height !== nextProps.height){ this.setState({height: nextProps.height}); } } + + onRefWrapper(_wrapper) { + this._wrapper = _wrapper + } + + onRefInput(_input) { + this._input = _input + } + + onBlur() { + this.setState({isFocused: false}); + !this.state.text.length && this._floatingLabel.sinkLabel(); + this._underline.shrinkLine(); + this.props.onBlur && this.props.onBlur(); + } + + onFocus() { + this.setState({isFocused: true}); + this._floatingLabel.floatLabel(); + this._underline.expandLine(); + this.props.onFocus && this.props.onFocus(); + } + + onChangeText(text) { + this.setState({text}); + this.props.onChangeText && this.props.onChangeText(text); + } + + onChange(e) { + this.props.onChange && this.props.onChange(e); + } + + onContentSizeChange(e) { + if(autoGrow){ + this.setState({height: e.nativeEvent.contentSize.height}); + } + this.props.onContentSizeChange && this.props.onContentSizeChange(e); + } + + onRefUnderline(_underline) { + this._underline = _underline + } + + onRefFloatingLabel(_floatingLabel) { + this._floatingLabel = _floatingLabel + } + render() { let { label, @@ -49,11 +117,6 @@ export default class TextField extends Component { textColor, textFocusColor, textBlurColor, - onFocus, - onBlur, - onChangeText, - onContentSizeChange, - onChange, value, dense, inputStyle, @@ -66,58 +129,39 @@ export default class TextField extends Component { } = this.props; return ( { - this.setState({isFocused: true}); - this.refs.floatingLabel.floatLabel(); - this.refs.underline.expandLine(); - onFocus && onFocus(); - }} - onBlur={() => { - this.setState({isFocused: false}); - !this.state.text.length && this.refs.floatingLabel.sinkLabel(); - this.refs.underline.shrinkLine(); - onBlur && onBlur(); - }} - onChangeText={(text) => { - this.setState({text}); - onChangeText && onChangeText(text); - }} - onChange={(event) => { - onChange && onChange(event); - }} - onContentSizeChange={(event) => { - if(autoGrow){ - this.setState({height: event.nativeEvent.contentSize.height}); - } - onContentSizeChange && onContentSizeChange(event); - }} - ref="input" value={this.state.text} {...props} + + onFocus={this.onFocus} + onBlur={this.onBlur} + onChangeText={this.onChangeText} + onChange={this.onChange} + onContentSizeChange={this.onContentSizeChange} /> { - if (this.refs.wrapper == null) { + if (this._wrapper == null) { return; } - const container = this.refs.wrapper; // un-box animated view + const container = this._wrapper; // un-box animated view container.measure((left, top, width, height) => { this.wrapperWidth = width; }); @@ -34,6 +37,11 @@ export default class Underline extends Component { duration: this.props.duration }).start(); } + + onRefWrapper(_wrapper) { + this._wrapper = _wrapper + } + render() { let { borderColor, @@ -41,17 +49,19 @@ export default class Underline extends Component { } = this.props; return ( + style={[ + styles.wrapperHighlight, + { + width: this.state.lineLength, + backgroundColor: highlightColor + } + ]}> ); @@ -68,5 +78,8 @@ const styles = StyleSheet.create({ underlineWrapper: { height: 1, alignItems: 'center' + }, + wrapperHighlight: { + height: 1 } }); From 3a32333ca223e5f511c74c4e67d1e00858b24ff0 Mon Sep 17 00:00:00 2001 From: Kesha Antonov Date: Sat, 4 Nov 2017 09:11:57 +0300 Subject: [PATCH 10/10] fix --- lib/TextField.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/TextField.js b/lib/TextField.js index 9456ab8..eb8d959 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -93,7 +93,7 @@ export default class TextField extends Component { } onContentSizeChange(e) { - if(autoGrow){ + if(this.props.autoGrow){ this.setState({height: e.nativeEvent.contentSize.height}); } this.props.onContentSizeChange && this.props.onContentSizeChange(e); @@ -123,7 +123,6 @@ export default class TextField extends Component { wrapperStyle, labelStyle, height, - autoGrow, multiline, ...props } = this.props;