PhoneNumbersForm.js

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;