From e8607be23ddc8b94ee70195c8194cec0e9051574 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 5 Feb 2022 02:47:51 +0530 Subject: [PATCH 1/9] Separate padding from TextInput styles --- src/components/TextInput/index.js | 2 +- src/components/TextInput/index.native.js | 2 +- src/styles/styles.js | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index f58681846897..d52211a55e3c 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -8,7 +8,7 @@ const TextInput = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} innerRef={ref} - inputStyle={[styles.baseTextInput, styles.textInputDesktop]} + inputStyle={[styles.baseTextInput, styles.baseTextInputPaddingHorizontal, styles.textInputDesktop]} /> )); diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js index b03865ce4a47..66c9015ca03d 100644 --- a/src/components/TextInput/index.native.js +++ b/src/components/TextInput/index.native.js @@ -12,7 +12,7 @@ const TextInput = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-multi-spaces autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType} innerRef={ref} - inputStyle={[styles.baseTextInput]} + inputStyle={[styles.baseTextInput, styles.baseTextInputPaddingHorizontal]} /> )); diff --git a/src/styles/styles.js b/src/styles/styles.js index 9d3207277e8d..11fc16051b31 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -682,11 +682,14 @@ const styles = { color: themeColors.text, paddingTop: 23, paddingBottom: 8, - paddingHorizontal: 11, borderWidth: 0, borderRadius: variables.componentBorderRadiusNormal, }, + baseTextInputPaddingHorizontal: { + paddingHorizontal: 11, + }, + textInputAndIconContainer: { zIndex: -1, flexDirection: 'row', From d4139158c2776bbbe34dcdc0125e8756fc915c51 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 5 Feb 2022 02:48:43 +0530 Subject: [PATCH 2/9] Add FormHelp and new props to TextInput --- src/components/FormHelp.js | 34 +++++++++++++++++++ .../TextInput/baseTextInputPropTypes.js | 8 +++++ 2 files changed, 42 insertions(+) create mode 100644 src/components/FormHelp.js diff --git a/src/components/FormHelp.js b/src/components/FormHelp.js new file mode 100644 index 000000000000..f519f10ab135 --- /dev/null +++ b/src/components/FormHelp.js @@ -0,0 +1,34 @@ +import _ from 'underscore'; +import React from 'react'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; +import styles from '../styles/styles'; + +const propTypes = { + /** Content of FormHelp */ + // eslint-disable-next-line react/forbid-prop-types + children: PropTypes.any.isRequired, +}; + +const FormHelp = (props) => { + if (_.isEmpty(props.children)) { + return null; + } + + return ( + + {props.children} + + ); +}; + +FormHelp.propTypes = propTypes; +FormHelp.displayName = 'FormHelp'; +export default FormHelp; diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js index cdb3a2cb1056..6791ea9598a8 100644 --- a/src/components/TextInput/baseTextInputPropTypes.js +++ b/src/components/TextInput/baseTextInputPropTypes.js @@ -45,6 +45,12 @@ const propTypes = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, + + /** Maximum charactor allowed */ + maxLength: PropTypes.number, + + /** Hint text to display below the TextInput */ + hint: PropTypes.string, }; const defaultProps = { @@ -66,6 +72,8 @@ const defaultProps = { defaultValue: undefined, forceActiveLabel: false, shouldSaveDraft: false, + maxLength: null, + hint: '', }; export {propTypes, defaultProps}; From 7889b38f017075d6f440f13f02440da40ecae299 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 5 Feb 2022 02:50:26 +0530 Subject: [PATCH 3/9] Implement counter and add hint to TextInput --- src/components/TextInput/BaseTextInput.js | 27 ++++++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index c4a2693b5d44..f65a5fbca87a 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -10,9 +10,10 @@ import themeColors from '../../styles/themes/default'; import styles from '../../styles/styles'; import Icon from '../Icon'; import * as Expensicons from '../Icon/Expensicons'; -import InlineErrorText from '../InlineErrorText'; +import Text from '../Text'; import * as styleConst from './styleConst'; import TextInputWithName from '../TextInputWithName'; +import FormHelp from '../FormHelp'; class BaseTextInput extends Component { constructor(props) { @@ -146,6 +147,9 @@ class BaseTextInput extends Component { // eslint-disable-next-line react/forbid-foreign-prop-types const inputProps = _.omit(this.props, _.keys(baseTextInputPropTypes.propTypes)); const hasLabel = Boolean(this.props.label.length); + const inputHelpText = this.props.errorText || this.props.hint; + const formHelpStyles = this.props.errorText ? styles.formError : styles.formHelp; + return ( - {!_.isEmpty(this.props.errorText) && ( - - {this.props.errorText} - - )} + + {!_.isEmpty(inputHelpText) && ( + {inputHelpText} + )} + {!_.isNull(this.props.maxLength) && ( + <> + + + {this.value.length} + / + {this.props.maxLength} + + + )} + ); } From 7d1a87d0ca44df65ef873caca33db17eb98f9f5a Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 9 Feb 2022 20:09:45 +0530 Subject: [PATCH 4/9] Revert "Separate padding from TextInput styles" This reverts commit e8607be23ddc8b94ee70195c8194cec0e9051574. --- src/components/TextInput/index.js | 2 +- src/components/TextInput/index.native.js | 2 +- src/styles/styles.js | 5 +---- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js index d52211a55e3c..f58681846897 100644 --- a/src/components/TextInput/index.js +++ b/src/components/TextInput/index.js @@ -8,7 +8,7 @@ const TextInput = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} innerRef={ref} - inputStyle={[styles.baseTextInput, styles.baseTextInputPaddingHorizontal, styles.textInputDesktop]} + inputStyle={[styles.baseTextInput, styles.textInputDesktop]} /> )); diff --git a/src/components/TextInput/index.native.js b/src/components/TextInput/index.native.js index 66c9015ca03d..b03865ce4a47 100644 --- a/src/components/TextInput/index.native.js +++ b/src/components/TextInput/index.native.js @@ -12,7 +12,7 @@ const TextInput = forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-multi-spaces autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType} innerRef={ref} - inputStyle={[styles.baseTextInput, styles.baseTextInputPaddingHorizontal]} + inputStyle={[styles.baseTextInput]} /> )); diff --git a/src/styles/styles.js b/src/styles/styles.js index 11fc16051b31..9d3207277e8d 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -682,14 +682,11 @@ const styles = { color: themeColors.text, paddingTop: 23, paddingBottom: 8, + paddingHorizontal: 11, borderWidth: 0, borderRadius: variables.componentBorderRadiusNormal, }, - baseTextInputPaddingHorizontal: { - paddingHorizontal: 11, - }, - textInputAndIconContainer: { zIndex: -1, flexDirection: 'row', From 3cb8964b6d88455d40e705ab9d64cb702a50e33c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 9 Feb 2022 20:11:16 +0530 Subject: [PATCH 5/9] Fix: padding for the formhelp text --- src/components/FormHelp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormHelp.js b/src/components/FormHelp.js index f519f10ab135..9a674176d816 100644 --- a/src/components/FormHelp.js +++ b/src/components/FormHelp.js @@ -21,7 +21,7 @@ const FormHelp = (props) => { styles.mt1, styles.flexRow, styles.justifyContentBetween, - styles.baseTextInputPaddingHorizontal, + styles.ph3, ]} > {props.children} From 1154088ce41486589c15b5dd2c2aa20f3f65de9c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Feb 2022 00:11:23 +0530 Subject: [PATCH 6/9] refactor and remove extra component --- src/components/FormHelp.js | 34 ------------------- src/components/TextInput/BaseTextInput.js | 40 ++++++++++++++--------- 2 files changed, 24 insertions(+), 50 deletions(-) delete mode 100644 src/components/FormHelp.js diff --git a/src/components/FormHelp.js b/src/components/FormHelp.js deleted file mode 100644 index 9a674176d816..000000000000 --- a/src/components/FormHelp.js +++ /dev/null @@ -1,34 +0,0 @@ -import _ from 'underscore'; -import React from 'react'; -import {View} from 'react-native'; -import PropTypes from 'prop-types'; -import styles from '../styles/styles'; - -const propTypes = { - /** Content of FormHelp */ - // eslint-disable-next-line react/forbid-prop-types - children: PropTypes.any.isRequired, -}; - -const FormHelp = (props) => { - if (_.isEmpty(props.children)) { - return null; - } - - return ( - - {props.children} - - ); -}; - -FormHelp.propTypes = propTypes; -FormHelp.displayName = 'FormHelp'; -export default FormHelp; diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index f65a5fbca87a..df7a717cc7fc 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -13,7 +13,6 @@ import * as Expensicons from '../Icon/Expensicons'; import Text from '../Text'; import * as styleConst from './styleConst'; import TextInputWithName from '../TextInputWithName'; -import FormHelp from '../FormHelp'; class BaseTextInput extends Component { constructor(props) { @@ -224,21 +223,30 @@ class BaseTextInput extends Component { - - {!_.isEmpty(inputHelpText) && ( - {inputHelpText} - )} - {!_.isNull(this.props.maxLength) && ( - <> - - - {this.value.length} - / - {this.props.maxLength} - - - )} - + {(!_.isEmpty(inputHelpText) || !_.isNull(this.props.maxLength)) && ( + + {!_.isEmpty(inputHelpText) && ( + {inputHelpText} + )} + {!_.isNull(this.props.maxLength) && ( + <> + + + {this.value.length} + / + {this.props.maxLength} + + + )} + + )} ); } From d648f6b09ae8515b2934830c5ad285b77b22872b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Feb 2022 00:12:31 +0530 Subject: [PATCH 7/9] typo fixed --- src/components/TextInput/baseTextInputPropTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js index 6791ea9598a8..c96ccb9fd2db 100644 --- a/src/components/TextInput/baseTextInputPropTypes.js +++ b/src/components/TextInput/baseTextInputPropTypes.js @@ -46,7 +46,7 @@ const propTypes = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft: PropTypes.bool, - /** Maximum charactor allowed */ + /** Maximum characters allowed */ maxLength: PropTypes.number, /** Hint text to display below the TextInput */ From 921dd2266fa7f3bd19d7610712092b08794a341d Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Feb 2022 21:59:30 +0530 Subject: [PATCH 8/9] Fix: styling --- src/components/TextInput/BaseTextInput.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index df7a717cc7fc..c574365dd4ff 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -76,13 +76,13 @@ class BaseTextInput extends Component { } onFocus(event) { - if (this.props.onFocus) { this.props.onFocus(event); } + if (this.props.onFocus) {this.props.onFocus(event);} this.setState({isFocused: true}); this.activateLabel(); } onBlur(event) { - if (this.props.onBlur) { this.props.onBlur(event); } + if (this.props.onBlur) {this.props.onBlur(event);} this.setState({isFocused: false}); this.deactivateLabel(); } @@ -181,7 +181,7 @@ class BaseTextInput extends Component { { - if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } + if (typeof this.props.innerRef === 'function') {this.props.innerRef(ref);} this.input = ref; }} // eslint-disable-next-line @@ -236,14 +236,11 @@ class BaseTextInput extends Component { {inputHelpText} )} {!_.isNull(this.props.maxLength) && ( - <> - - - {this.value.length} - / - {this.props.maxLength} - - + + {this.value.length} + / + {this.props.maxLength} + )} )} From f08bdc56cf9572c027bbed7352303790938d242e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 10 Feb 2022 22:28:40 +0530 Subject: [PATCH 9/9] Fix: Linting issues --- src/components/TextInput/BaseTextInput.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextInput/BaseTextInput.js b/src/components/TextInput/BaseTextInput.js index c574365dd4ff..a2b96380f1a6 100644 --- a/src/components/TextInput/BaseTextInput.js +++ b/src/components/TextInput/BaseTextInput.js @@ -76,13 +76,13 @@ class BaseTextInput extends Component { } onFocus(event) { - if (this.props.onFocus) {this.props.onFocus(event);} + if (this.props.onFocus) { this.props.onFocus(event); } this.setState({isFocused: true}); this.activateLabel(); } onBlur(event) { - if (this.props.onBlur) {this.props.onBlur(event);} + if (this.props.onBlur) { this.props.onBlur(event); } this.setState({isFocused: false}); this.deactivateLabel(); } @@ -181,7 +181,7 @@ class BaseTextInput extends Component { { - if (typeof this.props.innerRef === 'function') {this.props.innerRef(ref);} + if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); } this.input = ref; }} // eslint-disable-next-line