From 1d1847a4c20a0f09e17f871ce187dae9e3262e9a Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Tue, 8 Jun 2021 08:06:22 +0500 Subject: [PATCH 001/106] create custom textinput --- src/libs/TextInput.js | 106 ++++++++++++++++++++++ src/pages/settings/Profile/ProfilePage.js | 19 +++- src/styles/styles.js | 28 ++++++ 3 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 src/libs/TextInput.js diff --git a/src/libs/TextInput.js b/src/libs/TextInput.js new file mode 100644 index 00000000000..6f50a781764 --- /dev/null +++ b/src/libs/TextInput.js @@ -0,0 +1,106 @@ +import React, {Component} from 'react'; + +import { + Animated, Text, TextInput, View, +} from 'react-native'; +import styles from '../styles/styles'; +import themeColors from '../styles/themes/default'; + +const ACTIVE_LABEL_TRANSLATE_Y = -12; +const ACTIVE_LABEL_TRANSLATE_X = -5; +const ACTIVE_LABEL_SCALE = 0.85; + +const INACTIVE_LABEL_TRANSLATE_Y = 0; +const INACTIVE_LABEL_TRANSLATE_X = 0; +const INACTIVE_LABEL_SCALE = 1; + +class ExpensiTextInput extends Component { + constructor(props) { + super(props); + + const hasValue = props.value.length > 0; + + console.log(hasValue); + + this.state = { + isFocused: false, + labelTranslateY: new Animated.Value(hasValue ? ACTIVE_LABEL_TRANSLATE_Y : INACTIVE_LABEL_TRANSLATE_Y), + labelTranslateX: new Animated.Value(hasValue ? ACTIVE_LABEL_TRANSLATE_X : INACTIVE_LABEL_TRANSLATE_X), + labelScale: new Animated.Value(hasValue ? ACTIVE_LABEL_SCALE : INACTIVE_LABEL_SCALE), + }; + + this.input = null; + } + + animateLabel = (translateY, translateX, scale) => { + Animated.parallel([ + Animated.spring(this.state.labelTranslateY, { + toValue: translateY, + duration: 80, + useNativeDriver: true, + }), + Animated.spring(this.state.labelTranslateX, { + toValue: translateX, + duration: 80, + useNativeDriver: true, + }), + Animated.spring(this.state.labelScale, { + toValue: scale, + duration: 80, + useNativeDriver: true, + }), + ]).start(); + } + + onFocus = () => { + this.setState({isFocused: true}); + + if (this.props.value.length === 0) { + this.animateLabel(ACTIVE_LABEL_TRANSLATE_Y, ACTIVE_LABEL_TRANSLATE_X, ACTIVE_LABEL_SCALE); + } + } + + onBlur = () => { + this.setState({isFocused: false}); + if (this.props.value.length === 0) { + this.animateLabel(INACTIVE_LABEL_TRANSLATE_Y, INACTIVE_LABEL_TRANSLATE_X, INACTIVE_LABEL_SCALE); + } + } + + render() { + const { + label, value, placeholder, onChangeText, + } = this.props; + const { + isFocused, labelTranslateY, labelTranslateX, labelScale, + } = this.state; + return ( + + this.input.focus()} + > + {label} + + this.input = ref} + value={value} + onChangeText={onChangeText} + onFocus={this.onFocus} + onBlur={this.onBlur} + placeholder={isFocused ? placeholder : null} + placeholderTextColor={themeColors.placeholderText} + /> + + ); + } +} + +export default ExpensiTextInput; diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 3d95dd475d6..a145163fe84 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -31,6 +31,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import compose from '../../../libs/compose'; import Button from '../../../components/Button'; import Growl from '../../../libs/Growl'; +import ExpensiTextInput from '../../../libs/TextInput'; const propTypes = { /* Onyx Props */ @@ -305,6 +306,22 @@ class ProfilePage extends Component { + this.setState({firstName})} + placeholder={this.props.translate('profilePage.john')} + /> + + + this.setState({lastName})} + placeholder={this.props.translate('profilePage.john')} + /> + + {/* {this.props.translate('profilePage.firstName')} @@ -327,7 +344,7 @@ class ProfilePage extends Component { placeholder={this.props.translate('profilePage.doe')} placeholderTextColor={themeColors.placeholderText} /> - + */} diff --git a/src/styles/styles.js b/src/styles/styles.js index 66f1a333e5e..95f720bc6f0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -329,6 +329,34 @@ const styles = { marginRight: 8, }, + expensiTextInputContainer: { + flex: 1, + borderWidth: 1, + borderRadius: variables.componentBorderRadiusNormal, + borderColor: themeColors.border, + paddingTop: 25, + paddingBottom: 10, + paddingHorizontal: 12, + justifyContent: 'center', + }, + expensiTextInputContainerBlueBorder: { + borderColor: themeColors.borderFocus, + }, + expensiTextInputLabel: { + position: 'absolute', + left: 12, + fontSize: variables.fontSizeLabel, + fontWeight: fontWeightBold, + color: themeColors.text, + fontFamily: fontFamily.GTA, + }, + expensiTextInputLabelTransformation: (translateY, translateX, scale) => ({ + transform: [ + {translateY}, + {translateX}, + {scale}, + ], + }), textInput: { backgroundColor: themeColors.componentBG, borderRadius: variables.componentBorderRadiusNormal, From 32ac54df9a8865cf0ecec8a36299d87117393f9b Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sun, 20 Jun 2021 17:24:25 +0500 Subject: [PATCH 002/106] restyling --- ios/Podfile.lock | 6 +- src/libs/TextInput.js | 96 ++++++++++++++++------- src/pages/settings/Profile/ProfilePage.js | 79 +++---------------- src/styles/styles.js | 19 +++-- 4 files changed, 94 insertions(+), 106 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 8f4aa1dc3ac..57c79391908 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -152,7 +152,7 @@ PODS: - RNPermissions - Permission-LocationWhenInUse (3.0.1): - RNPermissions - - Plaid (2.1.2) + - Plaid (2.1.3) - PromisesObjC (1.2.12) - RCT-Folly (2020.01.13.00): - boost-for-react-native @@ -728,7 +728,7 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53 - FBReactNativeSpec: 7c304782592aaf95fe9fc6add0746906d6562739 + FBReactNativeSpec: c783a75db87c963c60afcd461fc38358805fe5ba Firebase: c23a36d9e4cdf7877dfcba8dd0c58add66358999 FirebaseAnalytics: 3bb096873ee0d7fa4b6c70f5e9166b6da413cc7f FirebaseCore: d3a978a3cfa3240bf7e4ba7d137fdf5b22b628ec @@ -754,7 +754,7 @@ SPEC CHECKSUMS: Permission-LocationAccuracy: e8adff9ede1b23b43b7054a4500113d515fc87a8 Permission-LocationAlways: 7f7f373d086af7a81b2f4f20d65d29266ca2043b Permission-LocationWhenInUse: 3ae82a9feb5da4e94e386dba17c7dd3531af9feb - Plaid: c02276ccc630a726a9ed790bf923d29839ff4017 + Plaid: f55c6acdc249245c6778a4045757eb4e839cca61 PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97 RCT-Folly: ec7a233ccc97cc556cf7237f0db1ff65b986f27c RCTRequired: ec2ebc96b7bfba3ca5c32740f5a0c6a014a274d2 diff --git a/src/libs/TextInput.js b/src/libs/TextInput.js index 6f50a781764..7d4a58b1b8a 100644 --- a/src/libs/TextInput.js +++ b/src/libs/TextInput.js @@ -1,27 +1,51 @@ import React, {Component} from 'react'; +import PropTypes from 'prop-types'; import { - Animated, Text, TextInput, View, + Animated, TextInput, TouchableWithoutFeedback, View, } from 'react-native'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; -const ACTIVE_LABEL_TRANSLATE_Y = -12; -const ACTIVE_LABEL_TRANSLATE_X = -5; -const ACTIVE_LABEL_SCALE = 0.85; +const ACTIVE_LABEL_TRANSLATE_Y = -10; +const ACTIVE_LABEL_TRANSLATE_X = -9; +const ACTIVE_LABEL_SCALE = 0.8661; const INACTIVE_LABEL_TRANSLATE_Y = 0; const INACTIVE_LABEL_TRANSLATE_X = 0; const INACTIVE_LABEL_SCALE = 1; +const propTypes = { + /** 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's text changes. + * Changed text is passed as an argument to the callback handler. + */ + onChangeText: PropTypes.func.isRequired, + + /** Input with error */ + error: PropTypes.bool, +}; + +const defaultProps = { + label: '', + placeholder: '', + error: false, +}; + class ExpensiTextInput extends Component { constructor(props) { super(props); const hasValue = props.value.length > 0; - console.log(hasValue); - this.state = { isFocused: false, labelTranslateY: new Animated.Value(hasValue ? ACTIVE_LABEL_TRANSLATE_Y : INACTIVE_LABEL_TRANSLATE_Y), @@ -54,7 +78,6 @@ class ExpensiTextInput extends Component { onFocus = () => { this.setState({isFocused: true}); - if (this.props.value.length === 0) { this.animateLabel(ACTIVE_LABEL_TRANSLATE_Y, ACTIVE_LABEL_TRANSLATE_X, ACTIVE_LABEL_SCALE); } @@ -69,38 +92,53 @@ class ExpensiTextInput extends Component { render() { const { - label, value, placeholder, onChangeText, + label, value, placeholder, onChangeText, error, } = this.props; const { isFocused, labelTranslateY, labelTranslateX, labelScale, } = this.state; + + const hasLabel = !!label.length; return ( - - this.input.focus()}> + this.input.focus()} > - {label} - - this.input = ref} - value={value} - onChangeText={onChangeText} - onFocus={this.onFocus} - onBlur={this.onBlur} - placeholder={isFocused ? placeholder : null} - placeholderTextColor={themeColors.placeholderText} - /> - + {hasLabel > 0 && ( + + {label} + + )} + this.input = ref} + value={value} + onChangeText={onChangeText} + onFocus={this.onFocus} + onBlur={this.onBlur} + placeholder={isFocused || !label ? placeholder : null} + placeholderTextColor={themeColors.placeholderText} + /> + + ); } } +ExpensiTextInput.propTypes = propTypes; +ExpensiTextInput.defaultProps = defaultProps; + export default ExpensiTextInput; diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index fe987c544b2..83d4ff4e2b4 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -1,11 +1,7 @@ import React, {Component} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import { - View, - TextInput, - ScrollView, -} from 'react-native'; +import {View, ScrollView} from 'react-native'; import Str from 'expensify-common/lib/str'; import moment from 'moment-timezone'; import _ from 'underscore'; @@ -21,7 +17,6 @@ import styles from '../../../styles/styles'; import Text from '../../../components/Text'; import Icon from '../../../components/Icon'; import Checkbox from '../../../components/Checkbox'; -import themeColors from '../../../styles/themes/default'; import LoginField from './LoginField'; import {DownArrow, Upload, Trashcan} from '../../../components/Icon/Expensicons'; import AttachmentPicker from '../../../components/AttachmentPicker'; @@ -309,58 +304,23 @@ class ProfilePage extends Component { - - {this.props.translate('common.firstName')} - - this.setState({firstName})} placeholder={this.props.translate('profilePage.john')} - placeholderTextColor={themeColors.placeholderText} /> - - {this.props.translate('common.lastName')} - - this.setState({lastName})} placeholder={this.props.translate('profilePage.doe')} - placeholderTextColor={themeColors.placeholderText} /> -<<<<<<< HEAD - - )} - - - {this.props.translate('profilePage.tellUsAboutYourself')} - - - - this.setState({firstName})} - placeholder={this.props.translate('profilePage.john')} - /> - - - this.setState({lastName})} - placeholder={this.props.translate('profilePage.john')} - /> - - {/* -======= ->>>>>>> 408b7e00cf33c16600af0b67b819c764fcb5388a {this.props.translate('profilePage.preferredPronouns')} @@ -376,13 +336,11 @@ class ProfilePage extends Component { /> {this.state.pronouns === this.props.translate('pronouns.selfSelect') && ( - this.setState({selfSelectedPronouns})} - placeholder={this.props.translate('profilePage.selfSelectYourPronoun')} - placeholderTextColor={themeColors.placeholderText} - /> + this.setState({selfSelectedPronouns})} + placeholder={this.props.translate('profilePage.selfSelectYourPronoun')} + /> )} {this.props.translate('profilePage.timezone')} -<<<<<<< HEAD - this.setState({lastName})} - placeholder={this.props.translate('profilePage.doe')} - placeholderTextColor={themeColors.placeholderText} - /> - */} - - - - {this.props.translate('profilePage.preferredPronouns')} - - -======= ->>>>>>> 408b7e00cf33c16600af0b67b819c764fcb5388a this.setState({selectedTimezone})} items={timezones} diff --git a/src/styles/styles.js b/src/styles/styles.js index 07caddee328..c45939f4aa0 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -351,20 +351,29 @@ const styles = { borderRadius: variables.componentBorderRadiusNormal, borderColor: themeColors.border, paddingTop: 25, - paddingBottom: 10, paddingHorizontal: 12, + paddingVertical: 8, justifyContent: 'center', + height: 52, + backgroundColor: '#fff', }, - expensiTextInputContainerBlueBorder: { + expensiTextInputContainerWithoutLabel: { + paddingTop: 0, + paddingBottom: 0, + }, + expensiTextInputContainerOnFocus: { borderColor: themeColors.borderFocus, }, + expensiTextInputContainerOnError: { + borderColor: themeColors.badgeDangerBG, + }, expensiTextInputLabel: { position: 'absolute', left: 12, - fontSize: variables.fontSizeLabel, - fontWeight: fontWeightBold, - color: themeColors.text, + fontSize: variables.fontSizeNormal, + color: themeColors.textSupporting, fontFamily: fontFamily.GTA, + width: '100%', }, expensiTextInputLabelTransformation: (translateY, translateX, scale) => ({ transform: [ From 9bb3acccb16cde595282262de05a2bc5924239e9 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sun, 20 Jun 2021 18:10:51 +0500 Subject: [PATCH 003/106] change password screen implementation and small refactors --- .../{TextInput.js => ExpensiTextInput.js} | 22 +++++++++------ src/pages/settings/PasswordPage.js | 28 +++++++------------ src/pages/settings/Profile/ProfilePage.js | 2 +- 3 files changed, 25 insertions(+), 27 deletions(-) rename src/libs/{TextInput.js => ExpensiTextInput.js} (87%) diff --git a/src/libs/TextInput.js b/src/libs/ExpensiTextInput.js similarity index 87% rename from src/libs/TextInput.js rename to src/libs/ExpensiTextInput.js index 7d4a58b1b8a..9f8c8549af9 100644 --- a/src/libs/TextInput.js +++ b/src/libs/ExpensiTextInput.js @@ -8,8 +8,8 @@ import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; const ACTIVE_LABEL_TRANSLATE_Y = -10; -const ACTIVE_LABEL_TRANSLATE_X = -9; -const ACTIVE_LABEL_SCALE = 0.8661; +const ACTIVE_LABEL_TRANSLATE_X = -10; +const ACTIVE_LABEL_SCALE = 0.8668; const INACTIVE_LABEL_TRANSLATE_Y = 0; const INACTIVE_LABEL_TRANSLATE_X = 0; @@ -25,10 +25,11 @@ const propTypes = { /** Input value placeholder */ placeholder: PropTypes.string, - /** Callback that is called when the text input's text changes. - * Changed text is passed as an argument to the callback handler. - */ - onChangeText: PropTypes.func.isRequired, + /** 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, @@ -38,6 +39,8 @@ const defaultProps = { label: '', placeholder: '', error: false, + onFocusExtra: null, + onBlurExtra: null, }; class ExpensiTextInput extends Component { @@ -77,6 +80,7 @@ class ExpensiTextInput extends Component { } onFocus = () => { + if (this.props.onFocusExtra) { this.props.onFocusExtra(); } this.setState({isFocused: true}); if (this.props.value.length === 0) { this.animateLabel(ACTIVE_LABEL_TRANSLATE_Y, ACTIVE_LABEL_TRANSLATE_X, ACTIVE_LABEL_SCALE); @@ -84,6 +88,7 @@ class ExpensiTextInput extends Component { } onBlur = () => { + if (this.props.onBlurExtra) { this.props.onBlurExtra(); } this.setState({isFocused: false}); if (this.props.value.length === 0) { this.animateLabel(INACTIVE_LABEL_TRANSLATE_Y, INACTIVE_LABEL_TRANSLATE_X, INACTIVE_LABEL_SCALE); @@ -92,7 +97,7 @@ class ExpensiTextInput extends Component { render() { const { - label, value, placeholder, onChangeText, error, + label, value, placeholder, error, ...inputProps } = this.props; const { isFocused, labelTranslateY, labelTranslateX, labelScale, @@ -126,11 +131,12 @@ class ExpensiTextInput extends Component { this.input = ref} value={value} - onChangeText={onChangeText} onFocus={this.onFocus} onBlur={this.onBlur} placeholder={isFocused || !label ? placeholder : null} placeholderTextColor={themeColors.placeholderText} + // eslint-disable-next-line react/jsx-props-no-spreading + {...inputProps} /> diff --git a/src/pages/settings/PasswordPage.js b/src/pages/settings/PasswordPage.js index bc2fce9526a..4737715c177 100755 --- a/src/pages/settings/PasswordPage.js +++ b/src/pages/settings/PasswordPage.js @@ -1,5 +1,5 @@ import React, {Component} from 'react'; -import {View, TextInput, ScrollView} from 'react-native'; +import {View, ScrollView} from 'react-native'; import Onyx, {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import {isEmpty} from 'underscore'; @@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize import compose from '../../libs/compose'; import KeyboardAvoidingView from '../../components/KeyboardAvoidingView'; import FixedFooter from '../../components/FixedFooter'; +import ExpensiTextInput from '../../libs/ExpensiTextInput'; const propTypes = { /* Onyx Props */ @@ -82,31 +83,25 @@ class PasswordPage extends Component { {this.props.translate('passwordPage.changingYourPasswordPrompt')} - - {`${this.props.translate('passwordPage.currentPassword')}*`} - - this.setState({currentPassword})} /> - - {`${this.props.translate('passwordPage.newPassword')}*`} - - this.setState({newPassword})} - onFocus={() => this.setState({isPasswordRequirementsVisible: true})} - onBlur={() => this.setState({isPasswordRequirementsVisible: false})} + onFocusExtra={() => this.setState({isPasswordRequirementsVisible: true})} + onBlurExtra={() => this.setState({isPasswordRequirementsVisible: false})} /> {this.state.isPasswordRequirementsVisible && ( @@ -115,14 +110,11 @@ class PasswordPage extends Component { )} - - {`${this.props.translate('passwordPage.confirmNewPassword')}*`} - - this.setState({confirmNewPassword})} onSubmitEditing={this.handleChangePassword} diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index 83d4ff4e2b4..8234e116dc1 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -28,7 +28,7 @@ import Button from '../../../components/Button'; import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; import FixedFooter from '../../../components/FixedFooter'; import Growl from '../../../libs/Growl'; -import ExpensiTextInput from '../../../libs/TextInput'; +import ExpensiTextInput from '../../../libs/ExpensiTextInput'; const propTypes = { /* Onyx Props */ From 0001f43489d5102a5da0ad6d9e8fa6ab637dd785 Mon Sep 17 00:00:00 2001 From: Donnie Darko Date: Sun, 20 Jun 2021 19:11:16 +0500 Subject: [PATCH 004/106] login screen implementation --- src/pages/signin/LoginForm.js | 12 ++++-------- src/pages/signin/PasswordForm.js | 13 ++++++------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index 7fe45e39933..f86288a6e56 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -1,9 +1,5 @@ import React from 'react'; -import { - Text, - TextInput, - View, -} from 'react-native'; +import {Text, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import _ from 'underscore'; @@ -17,6 +13,7 @@ import compose from '../../libs/compose'; import canFocusInputOnScreenFocus from '../../libs/canFocusInputOnScreenFocus'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import getEmailKeyboardType from '../../libs/getEmailKeyboardType'; +import ExpensiTextInput from '../../libs/ExpensiTextInput'; const propTypes = { /* Onyx Props */ @@ -75,9 +72,8 @@ class LoginForm extends React.Component { return ( <> - {this.props.translate('loginForm.enterYourPhoneOrEmail')} - - {this.props.translate('common.password')} - {this.props.account.requiresTwoFactorAuth && ( - {this.props.translate('passwordForm.twoFactorCode')} - Date: Fri, 25 Jun 2021 10:41:47 +0500 Subject: [PATCH 005/106] payment page implementation --- src/libs/ExpensiTextInput.js | 53 ++++++++++++++----------- src/pages/settings/PaymentsPage.js | 4 ++ src/pages/workspace/NewWorkspacePage.js | 5 +-- src/styles/styles.js | 5 ++- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/libs/ExpensiTextInput.js b/src/libs/ExpensiTextInput.js index 9f8c8549af9..34a4649a76b 100644 --- a/src/libs/ExpensiTextInput.js +++ b/src/libs/ExpensiTextInput.js @@ -105,16 +105,22 @@ class ExpensiTextInput extends Component { const hasLabel = !!label.length; return ( - this.input.focus()}> - - {hasLabel > 0 && ( + + this.input.focus()}> + + {hasLabel > 0 && ( {label} - )} - this.input = ref} - value={value} - onFocus={this.onFocus} - onBlur={this.onBlur} - placeholder={isFocused || !label ? placeholder : null} - placeholderTextColor={themeColors.placeholderText} - // eslint-disable-next-line react/jsx-props-no-spreading - {...inputProps} - /> - - + )} + this.input = ref} + value={value} + onFocus={this.onFocus} + onBlur={this.onBlur} + placeholder={isFocused || !label ? placeholder : null} + placeholderTextColor={themeColors.placeholderText} + // eslint-disable-next-line react/jsx-props-no-spreading + {...inputProps} + /> + + + ); } } diff --git a/src/pages/settings/PaymentsPage.js b/src/pages/settings/PaymentsPage.js index 0a967101712..0f0d231e94a 100755 --- a/src/pages/settings/PaymentsPage.js +++ b/src/pages/settings/PaymentsPage.js @@ -18,6 +18,7 @@ import Button from '../../components/Button'; import KeyboardAvoidingView from '../../components/KeyboardAvoidingView'; import FixedFooter from '../../components/FixedFooter'; import Growl from '../../libs/Growl'; +import ExpensiTextInput from '../../libs/ExpensiTextInput'; const propTypes = { /** Username for PayPal.Me */ @@ -78,6 +79,9 @@ class PaymentsPage extends React.Component { {this.props.translate('paymentsPage.payPalMe')} + {/* */} - this.setState({name})} /> {this.props.translate('workspace.new.helpText')} -