Merge pull request #4741 from Expensify/aldo_fix-input-error-messages

Handle errorText in TextInputWithLabel
Expensify · Aug 20, 2021 · cc87bc5 · cc87bc5
2 parents 0f446f0 + ec12ec4
commit cc87bc5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import ExpensiTextInputLabel from './ExpensiTextInputLabel';
+import Text from '../Text';
 import {propTypes, defaultProps} from './propTypes';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
@@ -112,6 +113,7 @@ class BaseExpensiTextInput extends Component {
             label,
             value,
             placeholder,
+            errorText,
             hasError,
             containerStyles,
             inputStyle,
@@ -123,46 +125,51 @@ class BaseExpensiTextInput extends Component {
 
         const hasLabel = Boolean(label.length);
         return (
-            <View style={[styles.componentHeightLarge, ...containerStyles]}>
-                <TouchableWithoutFeedback onPress={() => this.input.focus()} focusable={false}>
-                    <View
-                        style={[
-                            styles.expensiTextInputContainer,
-                            !hasLabel && styles.pv0,
-                            this.state.isFocused && styles.borderColorFocus,
-                            hasError && styles.borderColorDanger,
-                        ]}
-                    >
-                        {hasLabel ? (
-                            <ExpensiTextInputLabel
-                                label={label}
-                                labelTranslateX={
-                                    ignoreLabelTranslateX
-                                        ? new Animated.Value(0)
-                                        : this.state.labelTranslateX
-                                }
-                                labelTranslateY={this.state.labelTranslateY}
-                                labelScale={this.state.labelScale}
+            <View>
+                <View style={[styles.componentHeightLarge, ...containerStyles]}>
+                    <TouchableWithoutFeedback onPress={() => this.input.focus()} focusable={false}>
+                        <View
+                            style={[
+                                styles.expensiTextInputContainer,
+                                !hasLabel && styles.pv0,
+                                this.state.isFocused && styles.borderColorFocus,
+                                (hasError || errorText) && styles.borderColorDanger,
+                            ]}
+                        >
+                            {hasLabel ? (
+                                <ExpensiTextInputLabel
+                                    label={label}
+                                    labelTranslateX={
+                                        ignoreLabelTranslateX
+                                            ? new Animated.Value(0)
+                                            : this.state.labelTranslateX
+                                    }
+                                    labelTranslateY={this.state.labelTranslateY}
+                                    labelScale={this.state.labelScale}
+                                />
+                            ) : null}
+                            <TextInput
+                                ref={(ref) => {
+                                    if (typeof innerRef === 'function') { innerRef(ref); }
+                                    this.input = ref;
+                                }}
+                                // eslint-disable-next-line
+                                {...inputProps}
+                                value={value}
+                                placeholder={(this.state.isFocused || !label) ? placeholder : null}
+                                placeholderTextColor={themeColors.placeholderText}
+                                underlineColorAndroid="transparent"
+                                style={[...inputStyle, errorText ? styles.errorOutline : undefined]}
+                                onFocus={this.onFocus}
+                                onBlur={this.onBlur}
+                                onChangeText={this.setValue}
                             />
-                        ) : null}
-                        <TextInput
-                            ref={(ref) => {
-                                if (typeof innerRef === 'function') { innerRef(ref); }
-                                this.input = ref;
-                            }}
-                            // eslint-disable-next-line
-                            {...inputProps}
-                            value={value}
-                            placeholder={(this.state.isFocused || !label) ? placeholder : null}
-                            placeholderTextColor={themeColors.placeholderText}
-                            underlineColorAndroid="transparent"
-                            style={inputStyle}
-                            onFocus={this.onFocus}
-                            onBlur={this.onBlur}
-                            onChangeText={this.setValue}
-                        />
-                    </View>
-                </TouchableWithoutFeedback>
+                        </View>
+                    </TouchableWithoutFeedback>
+                </View>
+                {Boolean(errorText) && (
+                    <Text style={[styles.formError, styles.mt1]}>{errorText}</Text>
+                )}
             </View>
         );
     }

diff --git a/src/components/ExpensiTextInput/propTypes.js b/src/components/ExpensiTextInput/propTypes.js
@@ -10,6 +10,9 @@ const propTypes = {
     /** Input value placeholder */
     placeholder: PropTypes.string,
 
+    /** Error text to display */
+    errorText: PropTypes.string,
+
     /** Should the input be styled for errors  */
     hasError: PropTypes.bool,
 
@@ -28,6 +31,7 @@ const propTypes = {
 
 const defaultProps = {
     label: '',
+    errorText: '',
     placeholder: '',
     error: false,
     containerStyles: [],