111 lines
3.7 KiB
JavaScript
111 lines
3.7 KiB
JavaScript
import { List } from 'immutable';
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import { Button, Picker, Text, TextInput, View } from 'react-native';
|
|
|
|
import { PHONE_TYPE_DEFAULT, PHONE_TYPES } from '../../../constants/constants.js';
|
|
|
|
import PhoneListItem from './PhoneListItem.js';
|
|
|
|
import styles from '../Profile.styles.js';
|
|
|
|
const defaultState = {
|
|
editingIndex: null,
|
|
isEditing: false,
|
|
newPhone: null,
|
|
newPhoneType: PHONE_TYPE_DEFAULT,
|
|
};
|
|
|
|
export default class PhoneListInput extends Component {
|
|
static get propTypes() {
|
|
return {
|
|
handleAdd: PropTypes.func.isRequired,
|
|
handleDelete: PropTypes.func.isRequired,
|
|
handleEdit: PropTypes.func,
|
|
phones: PropTypes.instanceOf(List).isRequired,
|
|
};
|
|
};
|
|
|
|
static get defaultProps() {
|
|
return {
|
|
handleEdit: null,
|
|
};
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { ...defaultState };
|
|
}
|
|
|
|
handleAdd() {
|
|
const { phones } = this.props;
|
|
const { newPhone, newPhoneType } = this.state;
|
|
this.props.handleAdd(phones.push({ number: newPhone, label: newPhoneType }));
|
|
this.setState(defaultState);
|
|
}
|
|
|
|
handleEdit(index) {
|
|
const { phones } = this.props;
|
|
const { newPhone, newPhoneType } = this.state;
|
|
this.props.handleEdit(phones.set(index, { number: newPhone, label: newPhoneType }));
|
|
this.setState(defaultState);
|
|
}
|
|
|
|
handleEditStart(index) {
|
|
const toBeEdited = this.props.phones.get(index);
|
|
this.setState({
|
|
editingIndex: index,
|
|
isEditing: true,
|
|
newPhone: toBeEdited.get('number'),
|
|
newPhoneType: toBeEdited.get('label'),
|
|
});
|
|
}
|
|
|
|
handleEditCancel(index) {
|
|
this.setState(defaultState);
|
|
}
|
|
|
|
render() {
|
|
const { phones } = this.props;
|
|
const { isEditing, newPhone, newPhoneType } = this.state;
|
|
const numbersTitle = 'Numbers';
|
|
|
|
return (
|
|
<View>
|
|
<Text style={[styles.groupHeading, styles.requiredLabel]}>{numbersTitle}</Text>
|
|
{phones !== null && phones.size > 0 && (
|
|
<View style={styles.phoneList}>
|
|
{phones.map((phone, index) =>
|
|
<PhoneListItem
|
|
index={index}
|
|
label={phone.get('label')}
|
|
number={phone.get('number')}
|
|
handleDelete={this.props.handleDelete}
|
|
handleEdit={this.props.handleEdit ? this.handleEdit : null}
|
|
handleEditStart={this.handleEditStart}
|
|
/>
|
|
)}
|
|
</View>
|
|
)}
|
|
<TextInput
|
|
onChangeText={(text) => this.setState({ editingPhone: text })}
|
|
placeholder="phone number"
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
value={this.state.newPhone}
|
|
/>
|
|
<Picker
|
|
onValueChange={(type, index) => this.setState({ newPhoneType: type })}
|
|
selectedValue={this.state.newPhoneType}
|
|
>
|
|
{PHONE_TYPES.map((type) => <Picker.Item label={type.label} value={type.value} />)}
|
|
</Picker>
|
|
<Button
|
|
disabled={!this.state.newPhone && !this.state.newPhoneType}
|
|
onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
|
|
title={isEditing ? 'update' : 'add number'}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
}
|