Skip to content

Commit

Permalink
make button fixed & add disable
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maftalion
Maftalion committed Mar 20, 2021
1 parent 75c5549 commit 5b50712
Showing 1 changed file with 100 additions and 83 deletions.
183 changes: 100 additions & 83 deletions src/pages/settings/ProfilePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import {
View,
TextInput,
Pressable,
} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
import Str from 'expensify-common/lib/str';
Expand Down Expand Up @@ -129,6 +130,13 @@ class ProfilePage extends Component {
}

render() {
const isButtonDisabled = (this.props.myPersonalDetails.firstName === this.state.firstName)
&& (this.props.myPersonalDetails.lastName === this.state.lastName)
&& (this.props.myPersonalDetails.timezone.selected === this.state.selectedTimezone)
&& (this.props.myPersonalDetails.timezone.automatic === this.state.isAutomaticTimezone)
&& (this.props.myPersonalDetails.pronouns === this.state.pronouns
|| this.props.myPersonalDetails.pronouns === this.state.selfSelectedPronouns);
console.log(this.props.myPersonalDetails.pronouns === this.state.selfSelectedPronouns)
return (
<ScreenWrapper>
<HeaderWithCloseButton
Expand All @@ -138,106 +146,115 @@ class ProfilePage extends Component {
onCloseButtonPress={Navigation.dismissModal}
/>
<View style={[styles.p5, styles.flex1, styles.overflowScroll]}>
<View style={styles.flexGrow1}>
<Avatar
style={[styles.avatarLarge, styles.alignSelfCenter]}
source={this.props.myPersonalDetails.avatar}
/>
<Text style={[styles.mt6, styles.mb6, styles.textP]}>
Tell us about yourself, we would love to get to know you!
</Text>
<View style={[styles.flexRow, styles.mb6]}>
<View style={styles.flex1}>
<Text style={[styles.mb1, styles.formLabel]}>First Name</Text>
<TextInput
style={styles.textInput}
value={this.state.firstName}
onChangeText={firstName => this.setState({firstName})}
placeholder="John"
placeholderTextColor={themeColors.placeholderText}
/>
</View>
<View style={[styles.flex1, styles.ml2]}>
<Text style={[styles.mb1, styles.formLabel]}>Last Name</Text>
<TextInput
style={styles.textInput}
value={this.state.lastName}
onChangeText={lastName => this.setState({lastName})}
placeholder="Doe"
placeholderTextColor={themeColors.placeholderText}
/>
</View>
</View>
<View style={styles.mb6}>
<Text style={[styles.mb1, styles.formLabel]}>Preferred Pronouns</Text>
<View style={styles.mb1}>
<RNPickerSelect
onValueChange={pronouns => this.setState({pronouns, selfSelectedPronouns: ''})}
items={this.pronounDropdownValues}
style={styles.picker}
useNativeAndroidPickerStyle={false}
placeholder={{
value: '',
label: 'Select your pronouns',
}}
value={this.state.pronouns}
Icon={() => <Icon src={DownArrow} />}
/>
</View>
{this.state.pronouns === CONST.PRONOUNS.SELF_SELECT && (
<Avatar
style={[styles.avatarLarge, styles.alignSelfCenter]}
source={this.props.myPersonalDetails.avatar}
/>
<Text style={[styles.mt6, styles.mb6, styles.textP]}>
Tell us about yourself, we would love to get to know you!
</Text>
<View style={[styles.flexRow, styles.mb6]}>
<View style={styles.flex1}>
<Text style={[styles.mb1, styles.formLabel]}>First Name</Text>
<TextInput
style={styles.textInput}
value={this.state.selfSelectedPronouns}
onChangeText={selfSelectedPronouns => this.setState({selfSelectedPronouns})}
placeholder="Self-select your pronoun"
value={this.state.firstName}
onChangeText={firstName => this.setState({firstName})}
placeholder="John"
placeholderTextColor={themeColors.placeholderText}
/>
)}
</View>
<View style={styles.mb6}>
<Text style={[styles.mb1, styles.formLabel]}>
{Str.isSMSLogin(this.props.myPersonalDetails.login)
? 'Phone Number' : 'Email Address'}
</Text>
<View style={[styles.flex1, styles.ml2]}>
<Text style={[styles.mb1, styles.formLabel]}>Last Name</Text>
<TextInput
style={[styles.textInput, styles.disabledTextInput]}
value={Str.isSMSLogin(this.props.myPersonalDetails.login)
? Str.removeSMSDomain(this.props.myPersonalDetails.login)
: this.props.myPersonalDetails.login}
editable={false}
style={styles.textInput}
value={this.state.lastName}
onChangeText={lastName => this.setState({lastName})}
placeholder="Doe"
placeholderTextColor={themeColors.placeholderText}
/>
</View>
<View style={styles.mb3}>
<Text style={[styles.mb1, styles.formLabel]}>Timezone</Text>
</View>
<View style={styles.mb6}>
<Text style={[styles.mb1, styles.formLabel]}>Preferred Pronouns</Text>
<View style={styles.mb1}>
<RNPickerSelect
onValueChange={selectedTimezone => this.setState({selectedTimezone})}
items={timezones}
style={this.state.isAutomaticTimezone ? {
...styles.picker,
inputIOS: [styles.picker.inputIOS, styles.textInput, styles.disabledTextInput],
inputAndroid: [
styles.picker.inputAndroid, styles.textInput, styles.disabledTextInput,
],
inputWeb: [styles.picker.inputWeb, styles.textInput, styles.disabledTextInput],
} : styles.picker}
onValueChange={pronouns => this.setState({pronouns, selfSelectedPronouns: ''})}
items={this.pronounDropdownValues}
style={styles.picker}
useNativeAndroidPickerStyle={false}
value={this.state.selectedTimezone}
placeholder={{
value: '',
label: 'Select your pronouns',
}}
value={this.state.pronouns}
Icon={() => <Icon src={DownArrow} />}
disabled={this.state.isAutomaticTimezone}
/>
</View>
<Checkbox
label="Set my timezone automatically"
isChecked={this.state.isAutomaticTimezone}
onCheckboxClick={this.setAutomaticTimezone}
{this.state.pronouns === CONST.PRONOUNS.SELF_SELECT && (
<TextInput
style={styles.textInput}
value={this.state.selfSelectedPronouns}
onChangeText={selfSelectedPronouns => this.setState({selfSelectedPronouns})}
placeholder="Self-select your pronoun"
placeholderTextColor={themeColors.placeholderText}
/>
)}
</View>
<View style={[styles.flexGrow0, styles.mt5]}>
<ButtonWithLoader
text="Save"
onClick={this.updatePersonalDetails}
<View style={styles.mb6}>
<Text style={[styles.mb1, styles.formLabel]}>
{Str.isSMSLogin(this.props.myPersonalDetails.login)
? 'Phone Number' : 'Email Address'}
</Text>
<TextInput
style={[styles.textInput, styles.disabledTextInput]}
value={Str.isSMSLogin(this.props.myPersonalDetails.login)
? Str.removeSMSDomain(this.props.myPersonalDetails.login)
: this.props.myPersonalDetails.login}
editable={false}
/>
</View>
<View style={styles.mb3}>
<Text style={[styles.mb1, styles.formLabel]}>Timezone</Text>
<RNPickerSelect
onValueChange={selectedTimezone => this.setState({selectedTimezone})}
items={timezones}
style={this.state.isAutomaticTimezone ? {
...styles.picker,
inputIOS: [styles.picker.inputIOS, styles.textInput, styles.disabledTextInput],
inputAndroid: [
styles.picker.inputAndroid, styles.textInput, styles.disabledTextInput,
],
inputWeb: [styles.picker.inputWeb, styles.textInput, styles.disabledTextInput],
} : styles.picker}
useNativeAndroidPickerStyle={false}
value={this.state.selectedTimezone}
Icon={() => <Icon src={DownArrow} />}
disabled={this.state.isAutomaticTimezone}
/>
</View>
<Checkbox
label="Set my timezone automatically"
isChecked={this.state.isAutomaticTimezone}
onCheckboxClick={this.setAutomaticTimezone}
/>
</View>
<View style={[styles.ph5, styles.pb5]}>
<Pressable
disabled={isButtonDisabled}
onPress={this.updatePersonalDetails}
style={({hovered}) => [
styles.button,
styles.buttonSuccess,
styles.w100,
hovered && styles.buttonSuccessHovered,
isButtonDisabled && styles.buttonDisable,
]}
>
<Text style={[styles.buttonText, styles.buttonSuccessText]}>
Save
</Text>
</Pressable>
</View>
</ScreenWrapper>
);
Expand Down

0 comments on commit 5b50712

Please sign in to comment.