- more

app/components/Profile/PhoneInput/PhoneListInput.js

@@ -0,0 +1,110 @@
+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>
+        );
+    }
+}

app/components/Profile/PhoneInput/PhoneListItem.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Text, View } from 'react-native';
+
+import styles from '../Profile.styles.js';
+
+export default function PhoneListItem({ index, label, number, handleDelete, handleEdit, handleEditStart }) {
+    return (
+        <View style={styles.listItem}>
+            <View style={styles.listValue}>
+                <Text style={styles.value}>{phone.get('number')}</Text>
+                <Text style={styles.label}>{phone.get('label')}</Text>
+            </View>
+            <View style={styles.listActions}>
+                {handleEdit !== null && <Button title={`Edit`} onPress={() => this.handleEditStart(index)} />}
+                <Button title={`X`} onPress={() => this.props.handleDelete(index)} />
+            </View>
+        </View>
+    );
+}
+
+PhoneListItem.propTypes = {
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    handleDelete: PropTypes.func.isRequired,
+    handleEdit: PropTypes.func,
+    handleEditStart: PropTypes.func.isRequired,
+};
+
+PhoneListItem.defaultProps = {
+    handleEdit: null,
+};
+
+
+