Created
November 15, 2019 17:56
-
-
Save ldco2016/6de85a2d4719d4d32bba713017a4048b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import {View, Text, TouchableOpacity, SafeAreaView} from 'react-native'; | |
import Icon from 'react-native-vector-icons/MaterialIcons'; | |
import {ScaledSheet} from 'react-native-size-matters'; | |
import { | |
v2Colors, | |
v2Fonts, | |
v2InputsPropertiesBlack, | |
v2ButtonStyles, | |
} from 'theme'; | |
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'; | |
import {Divider} from 'common-components'; | |
import {TextField} from 'react-native-material-textfield'; | |
import {TextButton} from 'react-native-material-buttons'; | |
import PropTypes from 'prop-types'; | |
const propTypes = { | |
addressLine1: PropTypes.string, | |
city: PropTypes.string, | |
handleChangeAddressPress: PropTypes.func.isRequired, | |
handleSubmit: PropTypes.func.isRequired, | |
homePhone: PropTypes.string, | |
homePhoneChanged: PropTypes.func.isRequired, | |
mobilePhone: PropTypes.string, | |
mobilePhoneChanged: PropTypes.func.isRequired, | |
postalCode: PropTypes.string, | |
stateCode: PropTypes.string, | |
userAddressValid: PropTypes.bool, | |
validationErrors: PropTypes.object, | |
}; | |
const PhoneNumbersForm = ({ | |
addressLine1, | |
city, | |
handleChangeAddressPress, | |
handleSubmit, | |
homePhone, | |
homePhoneChanged, | |
mobilePhone, | |
mobilePhoneChanged, | |
postalCode, | |
stateCode, | |
userAddressValid, | |
validationErrors, | |
}) => ( | |
<SafeAreaView style={styles.container}> | |
<KeyboardAwareScrollView | |
showsVerticalScrollIndicator={false} | |
enableOnAndroid={true} | |
extraHeight={90} | |
> | |
<View style={styles.titleContainer}> | |
<Text style={styles.title}>{'Home Address'}</Text> | |
</View> | |
<View style={styles.addressContainer}> | |
<Icon | |
name="home" | |
size={20} | |
color={v2Colors[userAddressValid ? 'charcoalDarkest' : 'red']} | |
/> | |
<View style={styles.pushLeft}> | |
{(addressLine1 || '').length > 0 && ( | |
<Text style={styles.streetName}>{addressLine1}</Text> | |
)} | |
<Text style={[styles.streetName, styles.location]}> | |
{`${city ? city + ',' : ''} ${stateCode || ''} ${postalCode || ''}`} | |
</Text> | |
<TextButton | |
title={'CHANGE ADDRESS'} | |
color={v2Colors.green} | |
titleColor={v2Colors.white} | |
titleStyle={v2ButtonStyles.titleStyle} | |
onPress={handleChangeAddressPress} | |
/> | |
</View> | |
</View> | |
<Divider style={{marginVertical: 8}} /> | |
<View style={styles.titleContainer}> | |
<Text style={styles.title}>{'Home Contact'}</Text> | |
</View> | |
<View style={styles.inputContainer}> | |
<View style={styles.icon}> | |
<Icon name="phone" size={20} color={v2Colors.charcoalDarkest} /> | |
</View> | |
<View style={[styles.pushLeft, {flex: 1}]}> | |
<TextField | |
{...v2InputsPropertiesBlack} | |
label="Home Phone" | |
value={homePhone} | |
onChangeText={homePhoneChanged} | |
error={validationErrors.homePhone} | |
keyboardType="phone-pad" | |
maxLength={14} | |
ref={input => { | |
this.homeRef = input; | |
}} | |
returnKeyType={'next'} | |
onSubmitEditing={() => { | |
this.mobileRef.focus(); | |
}} | |
/> | |
</View> | |
</View> | |
<View style={styles.inputContainer}> | |
<View style={styles.icon}> | |
<Icon | |
name="phone-android" | |
size={20} | |
color={v2Colors.charcoalDarkest} | |
/> | |
</View> | |
<View style={[styles.pushLeft, {flex: 1}]}> | |
<TextField | |
{...v2InputsPropertiesBlack} | |
label="Mobile Phone" | |
value={mobilePhone} | |
onChangeText={mobilePhoneChanged} | |
error={validationErrors.mobilePhone} | |
keyboardType="phone-pad" | |
maxLength={14} | |
ref={input => { | |
this.mobileRef = input; | |
}} | |
/> | |
</View> | |
</View> | |
</KeyboardAwareScrollView> | |
<TouchableOpacity style={styles.footer} onPress={handleSubmit}> | |
<Text style={styles.whiteText}>{'SAVE CHANGES'}</Text> | |
</TouchableOpacity> | |
</SafeAreaView> | |
); | |
const styles = ScaledSheet.create({ | |
inputContainer: { | |
flexDirection: 'row', | |
paddingHorizontal: '16@ms6', | |
height: '72@ms0.2', | |
alignItems: 'center', | |
}, | |
pushLeft: { | |
marginLeft: '15@ms0.2', | |
}, | |
addressContainer: { | |
flexDirection: 'row', | |
paddingHorizontal: '16@ms6', | |
paddingVertical: '16@ms0.2', | |
}, | |
streetName: { | |
fontSize: '14@ms0.2', | |
lineHeight: '20@ms0.2', | |
color: v2Colors.charcoalDarkest, | |
...v2Fonts.OpenSansRegular, | |
}, | |
location: { | |
marginBottom: '15@ms0.2', | |
}, | |
container: { | |
flex: 1, | |
backgroundColor: v2Colors.white, | |
}, | |
titleContainer: { | |
height: '48@ms0.2', | |
alignSelf: 'stretch', | |
justifyContent: 'center', | |
paddingHorizontal: '16@ms6', | |
}, | |
title: { | |
fontSize: '12@ms0.2', | |
lineHeight: '16@ms0.2', | |
color: v2Colors.charcoalDarkest, | |
...v2Fonts.OpenSansRegular, | |
}, | |
footer: { | |
height: '48@ms0.2', | |
bottom: 0, | |
left: 0, | |
right: 0, | |
backgroundColor: v2Colors.green, | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
whiteText: { | |
color: v2Colors.white, | |
fontSize: '14@ms0.2', | |
lineHeight: '16@ms0.2', | |
...v2Fonts.GothamRegular, | |
fontWeight: '500', | |
}, | |
icon: { | |
position: 'relative', | |
top: '15@ms0.2', | |
}, | |
}); | |
PhoneNumbersForm.propTypes = propTypes; | |
export default PhoneNumbersForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment