- Wiring up nom and phone registration bits

- Added guided registration
This commit is contained in:
Mike Fitzpatrick
2019-08-14 11:18:21 -04:00
parent cf07ab1c2e
commit c146884636
11 changed files with 190 additions and 118 deletions

View File

@@ -34,7 +34,12 @@ export default class PhoneListInput extends Component {
constructor(props) {
super(props);
this.state = { ...defaultState };
this.handleAdd = this.handleAdd.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleEditCancel = this.handleEditCancel.bind(this);
}
handleAdd() {
@@ -78,8 +83,8 @@ export default class PhoneListInput extends Component {
{phones.map((phone, index) =>
<PhoneListItem
index={index}
label={phone.get('label')}
number={phone.get('number')}
label={phone.label}
number={phone.number}
handleDelete={this.props.handleDelete}
handleEdit={this.props.handleEdit ? this.handleEdit : null}
handleEditStart={this.handleEditStart}
@@ -88,7 +93,7 @@ export default class PhoneListInput extends Component {
</View>
)}
<TextInput
onChangeText={(text) => this.setState({ editingPhone: text })}
onChangeText={(text) => this.setState({ newPhone: text })}
placeholder="phone number"
style={[styles.textInput, styles.requiredInput]}
value={this.state.newPhone}
@@ -97,13 +102,19 @@ export default class PhoneListInput extends Component {
onValueChange={(type, index) => this.setState({ newPhoneType: type })}
selectedValue={this.state.newPhoneType}
>
{PHONE_TYPES.map((type) => <Picker.Item label={type.label} value={type.value} />)}
{PHONE_TYPES.map((type) => <Picker.Item key={type.value} {...type} />)}
</Picker>
<Button
disabled={!this.state.newPhone && !this.state.newPhoneType}
onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
title={isEditing ? 'update' : 'add number'}
/>
{isEditing && (
<Button
onPress={this.handleEditCancel}
title="cancel"
/>
)}
</View>
);
}

View File

@@ -9,12 +9,12 @@ export default function PhoneListItem({ index, label, number, handleDelete, hand
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>
<Text style={styles.value}>{number}</Text>
<Text style={styles.label}>{label}</Text>
</View>
<View style={styles.listActions}>
{handleEdit !== null && <Button title={`Edit`} onPress={() => this.handleEditStart(index)} />}
<Button title={`X`} onPress={() => this.props.handleDelete(index)} />
{handleEdit !== null && <Button title={`Edit`} onPress={() => handleEditStart(index)} />}
<Button title={`X`} onPress={() => handleDelete(index)} />
</View>
</View>
);