Create custom TextInput

android/app/src/main/java/com/expensify/chat/generated/BasePackageList.java

@@ -0,0 +1,13 @@
+package com.expensify.chat.generated;
+
+import java.util.Arrays;
+import java.util.List;
+import org.unimodules.core.interfaces.Package;
+
+public class BasePackageList {
+  public List<Package> getPackageList() {
+    return Arrays.<Package>asList(
+        new expo.modules.haptics.HapticsPackage()
+    );
+  }
+}

ios/Podfile.lock

@@ -872,7 +872,7 @@ SPEC CHECKSUMS:
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   EXHaptics: 337c160c148baa6f0e7166249f368965906e346b
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 884d4cc2b011759361797a4035c47e10099393b5
+  FBReactNativeSpec: c783a75db87c963c60afcd461fc38358805fe5ba
   Firebase: 54cdc8bc9c9b3de54f43dab86e62f5a76b47034f
   FirebaseABTesting: 4cb61aeeb50f60680af1c01fff781dfaf9293916
   FirebaseAnalytics: 4751d6a49598a2b58da678cc07df696bcd809ab9

src/components/AddPlaidBankAccount.js

@@ -3,7 +3,6 @@ import React from 'react';
 import {
     ActivityIndicator,
     View,
-    TextInput,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
@@ -22,6 +21,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import Button from './Button';
 import Picker from './Picker';
 import Text from './Text';
+import ExpensiTextInput from './ExpensiTextInput';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -175,12 +175,9 @@ class AddPlaidBankAccount extends React.Component {
                             </View>
                             {!_.isUndefined(this.state.selectedIndex) && (
                                 <View style={[styles.mb5]}>
-                                    <Text style={[styles.formLabel]}>
-                                        {this.props.translate('addPersonalBankAccountPage.enterPassword')}
-                                    </Text>
-                                    <TextInput
+                                    <ExpensiTextInput
+                                        label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
                                         secureTextEntry
-                                        style={[styles.textInput, styles.mb2]}
                                         value={this.state.password}
                                         autoCompleteType="password"
                                         textContentType="password"

src/components/ExpensiPicker/defaultProps.js

@@ -0,0 +1,9 @@
+const expensiPickerDefaultProps = {
+    label: '',
+    value: '',
+    placeholder: {},
+    useDisabledStyles: false,
+    size: 'normal',
+};
+
+export default expensiPickerDefaultProps;

src/components/ExpensiPicker/index.js

@@ -0,0 +1,52 @@
+import React, {PureComponent} from 'react';
+import {Text, View} from 'react-native';
+import Picker from '../Picker';
+import styles from '../../styles/styles';
+import propTypes from './propTypes';
+import defaultProps from './defaultProps';
+
+class ExpensiPicker extends PureComponent {
+    constructor() {
+        super();
+        this.state = {
+            isOpen: false,
+        };
+    }
+
+    toggleFocus = open => this.setState({
+        isOpen: open,
+    })
+
+    render() {
+        const {
+            label, value, placeholder, useDisabledStyles, ...pickerProps
+        } = this.props;
+        const {isOpen} = this.state;
+        return (
+            <View
+                style={[
+                    styles.expensiPickerContainer,
+                    isOpen && styles.expensiPickerContainerOnFocus,
+                    useDisabledStyles && styles.expensiPickerContainerDisabled,
+                ]}
+            >
+                {label && (
+                    <Text style={styles.expensiPickerLabel}>{label}</Text>
+                )}
+                <Picker
+                    placeholder={placeholder}
+                    value={value}
+                    onOpen={() => this.toggleFocus(true)}
+                    onClose={() => this.toggleFocus(false)}
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...pickerProps}
+                />
+            </View>
+        );
+    }
+}
+
+ExpensiPicker.propTypes = propTypes;
+ExpensiPicker.defaultProps = defaultProps;
+
+export default ExpensiPicker;

src/components/ExpensiPicker/propTypes.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    label: PropTypes.string,
+    value: PropTypes.string,
+
+    /** Something to show as the placeholder before something is selected */
+    placeholder: PropTypes.shape({
+        /** The value of the placeholder item, usually an empty string */
+        value: PropTypes.string,
+
+        /** The text to be displayed as the placeholder */
+        label: PropTypes.string,
+    }),
+
+    /** Picker disabled style */
+    useDisabledStyles: PropTypes.boolean,
+
+    /** Picker size */
+    size: PropTypes.oneOf(['normal', 'small']),
+};
+
+export default propTypes;

src/components/ExpensiTextInput/ExpensiTextInputDefaultProps.js

@@ -0,0 +1,12 @@
+const expensiTextInputDefaultProps = {
+    label: '',
+    placeholder: '',
+    error: false,
+    onFocusExtra: null,
+    onBlurExtra: null,
+    containerStyles: [],
+    translateX: -22,
+    androidStyle: [],
+};
+
+export default expensiTextInputDefaultProps;

src/components/ExpensiTextInput/ExpensiTextInputLabel/ExpensiTextInputLabelPropTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import {Animated} from 'react-native';
+
+const expensiTextInputLabelPropTypes = {
+    label: PropTypes.string,
+
+    /** Label vertical translate */
+    labelTranslateY: PropTypes.instanceOf(Animated.Value).isRequired,
+
+    /** Label horizontal translate */
+    labelTranslateX: PropTypes.instanceOf(Animated.Value).isRequired,
+
+    /** Label scale */
+    labelScale: PropTypes.instanceOf(Animated.Value).isRequired,
+};
+
+export default expensiTextInputLabelPropTypes;

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.js

@@ -0,0 +1,31 @@
+import React, {PureComponent} from 'react';
+import {Animated} from 'react-native';
+import styles from '../../../styles/styles';
+import expensiTextInputLabelPropTypes from './ExpensiTextInputLabelPropTypes';
+
+class ExpensiTextInputLabel extends PureComponent {
+    render() {
+        const {
+            label, labelTranslateX, labelTranslateY, labelScale,
+        } = this.props;
+        return (
+            <Animated.Text
+                style={[
+                    styles.expensiTextInputLabel,
+                    styles.expensiTextInputLabelDesktop,
+                    styles.expensiTextInputLabelTransformation(
+                        labelTranslateY,
+                        labelTranslateX,
+                        labelScale,
+                    ),
+                ]}
+            >
+                {label}
+            </Animated.Text>
+        );
+    }
+}
+
+ExpensiTextInputLabel.propTypes = expensiTextInputLabelPropTypes;
+
+export default ExpensiTextInputLabel;

src/components/ExpensiTextInput/ExpensiTextInputLabel/index.native.js

@@ -0,0 +1,30 @@
+import React, {PureComponent} from 'react';
+import {Animated} from 'react-native';
+import styles from '../../../styles/styles';
+import expensiTextInputLabelPropTypes from './ExpensiTextInputLabelPropTypes';
+
+class ExpensiTextInputLabel extends PureComponent {
+    render() {
+        const {
+            label, labelTranslateX, labelTranslateY, labelScale,
+        } = this.props;
+        return (
+            <Animated.Text
+                style={[
+                    styles.expensiTextInputLabel,
+                    styles.expensiTextInputLabelTransformation(
+                        labelTranslateY,
+                        labelTranslateX,
+                        labelScale,
+                    ),
+                ]}
+            >
+                {label}
+            </Animated.Text>
+        );
+    }
+}
+
+ExpensiTextInputLabel.propTypes = expensiTextInputLabelPropTypes;
+
+export default ExpensiTextInputLabel;

src/components/ExpensiTextInput/ExpensiTextInputPropTypes.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+
+const expensiTextInputPropTypes = {
+    /** Input label */
+    label: PropTypes.string,
+
+    /** Input value */
+    value: PropTypes.string.isRequired,
+
+    /** Input value placeholder */
+    placeholder: PropTypes.string,
+
+    /** Callback that is called when the text input is focused. */
+    onFocusExtra: PropTypes.func,
+
+    /** Callback that is called when the text input is blurred. */
+    onBlurExtra: PropTypes.func,
+
+    /** Input with error  */
+    error: PropTypes.bool,
+
+    /** Styles for the outermost container for this component. */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** label translate x */
+    translateX: PropTypes.number,
+
+    /** android specific styles */
+    androidStyle: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default expensiTextInputPropTypes;

src/components/ExpensiTextInput/ExpensiTextInputWrapper/ExpensiTextInputWrapperPropTypes.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+const expensiTextInputWrapperPropTypes = {
+    /** Input label */
+    children: PropTypes.node.isRequired,
+
+    /** Has Label */
+    hasLabel: PropTypes.bool.isRequired,
+
+    /** On press to wrapper */
+    onPress: PropTypes.func.isRequired,
+
+    /** Is input in focus? */
+    isFocused: PropTypes.bool.isRequired,
+
+    /** Has error? */
+    error: PropTypes.bool.isRequired,
+
+    /** Styles for the outermost container for this component. */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default expensiTextInputWrapperPropTypes;

src/components/ExpensiTextInput/ExpensiTextInputWrapper/index.js

@@ -0,0 +1,38 @@
+import React, {PureComponent} from 'react';
+import {TouchableWithoutFeedback, View} from 'react-native';
+import expensiTextInputWrapperPropTypes from './ExpensiTextInputWrapperPropTypes';
+import styles from '../../../styles/styles';
+
+const defaultProps = {
+    containerStyles: [],
+};
+
+class ExpensiTextInputWrapper extends PureComponent {
+    render() {
+        const {
+            children, onPress, containerStyles, isFocused, error, hasLabel,
+        } = this.props;
+
+        return (
+            <View style={[styles.expensiTextInputWrapper, ...containerStyles]}>
+                <TouchableWithoutFeedback onPress={onPress}>
+                    <View
+                        style={[
+                            styles.expensiTextInputContainer,
+                            !hasLabel && styles.expensiTextInputContainerWithoutLabel,
+                            isFocused && styles.expensiTextInputContainerOnFocus,
+                            error && styles.expensiTextInputContainerOnError,
+                        ]}
+                    >
+                        {children}
+                    </View>
+                </TouchableWithoutFeedback>
+            </View>
+        );
+    }
+}
+
+ExpensiTextInputWrapper.propTypes = expensiTextInputWrapperPropTypes;
+ExpensiTextInputWrapper.defaultProps = defaultProps;
+
+export default ExpensiTextInputWrapper;

src/components/ExpensiTextInput/index.android.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from '../../styles/styles';
+import ExpensiTextInput from './index.ios';
+import expensiTextInputPropTypes from './ExpensiTextInputPropTypes';
+import expensiTextInputDefaultProps from './ExpensiTextInputDefaultProps';
+
+const ExpensiTextInputAndroid = ({
+    androidStyles,
+    translateX,
+    ...props
+}) => (
+    <ExpensiTextInput
+        androidStyles={styles.expensiTextInputAndroid(Math.abs(translateX))}
+        translateX={translateX}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+    />
+);
+
+ExpensiTextInputAndroid.propTypes = expensiTextInputPropTypes;
+ExpensiTextInputAndroid.defaultProps = expensiTextInputDefaultProps;
+
+export default ExpensiTextInputAndroid;