From 8e9b60dc817488aa47f3156e0ed3c61fad0162d4 Mon Sep 17 00:00:00 2001 From: Mahendra Liya Date: Tue, 14 Jun 2022 12:05:02 +0530 Subject: [PATCH 01/65] fixed closing of keyboard on changing text field on profile page --- src/ONYXKEYS.js | 1 + src/libs/actions/PersonalDetails.js | 4 + src/pages/settings/Profile/ProfilePage.js | 132 ++++++++++++++-------- 3 files changed, 88 insertions(+), 49 deletions(-) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index 9e198d07aad7..6c032f30f881 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -194,5 +194,6 @@ export default { // List of Form ids FORMS: { ADD_DEBIT_CARD_FORM: 'addDebitCardForm', + PROFILE_FORM: 'profileForm', }, }; diff --git a/src/libs/actions/PersonalDetails.js b/src/libs/actions/PersonalDetails.js index cc7add84320e..d3504316b061 100644 --- a/src/libs/actions/PersonalDetails.js +++ b/src/libs/actions/PersonalDetails.js @@ -292,6 +292,10 @@ function setPersonalDetails(details, shouldGrowl) { } else { console.debug('Error while setting personal details', response); } + + Onyx.merge(ONYXKEYS.FORMS.PROFILE_FORM, { + isSubmitting: false, + }); }); } diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js index fbeb7b69b16c..5d4da0f43740 100755 --- a/src/pages/settings/Profile/ProfilePage.js +++ b/src/pages/settings/Profile/ProfilePage.js @@ -2,7 +2,7 @@ import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; -import {View, ScrollView} from 'react-native'; +import {View} from 'react-native'; import Str from 'expensify-common/lib/str'; import moment from 'moment-timezone'; import _ from 'underscore'; @@ -18,17 +18,15 @@ import Text from '../../../components/Text'; import LoginField from './LoginField'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import compose from '../../../libs/compose'; -import Button from '../../../components/Button'; import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; -import FixedFooter from '../../../components/FixedFooter'; import TextInput from '../../../components/TextInput'; import Picker from '../../../components/Picker'; -import FullNameInputRow from '../../../components/FullNameInputRow'; import CheckboxWithLabel from '../../../components/CheckboxWithLabel'; import AvatarWithImagePicker from '../../../components/AvatarWithImagePicker'; import currentUserPersonalDetailsPropsTypes from './currentUserPersonalDetailsPropsTypes'; import * as ValidationUtils from '../../../libs/ValidationUtils'; import * as ReportUtils from '../../../libs/ReportUtils'; +import Form from '../../../components/Form'; const propTypes = { /* Onyx Props */ @@ -86,9 +84,9 @@ class ProfilePage extends Component { }; this.getLogins = this.getLogins.bind(this); + this.validate = this.validate.bind(this); this.setAutomaticTimezone = this.setAutomaticTimezone.bind(this); this.updatePersonalDetails = this.updatePersonalDetails.bind(this); - this.validateInputs = this.validateInputs.bind(this); this.updateAvatar = this.updateAvatar.bind(this); } @@ -162,10 +160,6 @@ class ProfilePage extends Component { * Submit form to update personal details */ updatePersonalDetails() { - if (!this.validateInputs()) { - return; - } - // Check if the user has modified their avatar if ((this.props.myPersonalDetails.avatar !== this.state.avatar.uri) && this.state.isAvatarChanged) { // If the user removed their profile photo, replace it accordingly with the default avatar @@ -190,17 +184,40 @@ class ProfilePage extends Component { }, true); } - validateInputs() { - const [hasFirstNameError, hasLastNameError, hasPronounError] = ValidationUtils.doesFailCharacterLimit( - 50, - [this.state.firstName.trim(), this.state.lastName.trim(), this.state.pronouns.trim()], - ); - this.setState({ - hasFirstNameError, - hasLastNameError, - hasPronounError, - }); - return !hasFirstNameError && !hasLastNameError && !hasPronounError; + validate(values) { + const errors = {}; + + if (values.firstName) { + const [hasFirstNameError] = ValidationUtils.doesFailCharacterLimit( + 50, + [values.firstName.trim()], + ); + + this.setState({hasFirstNameError}); + errors.firstName = PersonalDetails.getMaxCharacterError(this.state.hasFirstNameError); + } + + if (values.lastName) { + const [hasLastNameError] = ValidationUtils.doesFailCharacterLimit( + 50, + [values.lastName.trim()], + ); + + this.setState({hasLastNameError}); + errors.lastName = PersonalDetails.getMaxCharacterError(this.state.hasLastNameError); + } + + if (values.pronouns) { + const [hasPronounError] = ValidationUtils.doesFailCharacterLimit( + 50, + [values.pronouns.trim()], + ); + + this.setState({hasPronounError}); + errors.pronouns = PersonalDetails.getMaxCharacterError(this.state.hasPronounError); + } + + return errors; } render() { @@ -209,14 +226,6 @@ class ProfilePage extends Component { value: `${CONST.PRONOUNS.PREFIX}${key}`, })); - // Disables button if none of the form values have changed - const isButtonDisabled = (this.props.myPersonalDetails.firstName === this.state.firstName.trim()) - && (this.props.myPersonalDetails.lastName === this.state.lastName.trim()) - && (this.props.myPersonalDetails.timezone.selected === this.state.selectedTimezone) - && (this.props.myPersonalDetails.timezone.automatic === this.state.isAutomaticTimezone) - && (this.props.myPersonalDetails.pronouns === this.state.pronouns.trim()) - && (!this.state.isAvatarChanged || this.props.myPersonalDetails.avatarUploading); - const pronounsPickerValue = this.state.hasSelfSelectedPronouns ? CONST.PRONOUNS.SELF_SELECT : this.state.pronouns; return ( @@ -228,8 +237,15 @@ class ProfilePage extends Component { onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS)} onCloseButtonPress={() => Navigation.dismissModal(true)} /> - +
{this.props.translate('profilePage.tellUsAboutYourself')} - this.setState({firstName})} - onChangeLastName={lastName => this.setState({lastName})} - style={[styles.mt4, styles.mb4]} - /> + + + + this.setState({firstName})} + placeholder={this.props.translate('profilePage.john')} + /> + + + this.setState({lastName})} + placeholder={this.props.translate('profilePage.doe')} + /> + + { const hasSelfSelectedPronouns = pronouns === CONST.PRONOUNS.SELF_SELECT; @@ -266,53 +301,52 @@ class ProfilePage extends Component { label: this.props.translate('profilePage.selectYourPronouns'), }} value={pronounsPickerValue} + shouldSaveDraft /> {this.state.hasSelfSelectedPronouns && ( this.setState({pronouns})} placeholder={this.props.translate('profilePage.selfSelectYourPronoun')} + hasError={this.state.hasPronounError} errorText={PersonalDetails.getMaxCharacterError(this.state.hasPronounError)} /> )} this.setState({selectedTimezone})} items={timezones} isDisabled={this.state.isAutomaticTimezone} value={this.state.selectedTimezone} + shouldSaveDraft /> - - -