77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Button } from 'react-native-elements';
|
|
import { Alert, Text, View } from 'react-native';
|
|
|
|
import styles from '../Profile.styles.js';
|
|
|
|
export default function PhoneListItem({
|
|
hideDelete,
|
|
index,
|
|
label,
|
|
number,
|
|
handleDelete,
|
|
handleEdit,
|
|
handleEditStart,
|
|
}) {
|
|
|
|
const _onLongPressDelete = () => {
|
|
handleDelete(index);
|
|
};
|
|
|
|
const _onPressDelete = (isLongPress = false) => () => {
|
|
if (isLongPress) {
|
|
handleDelete(index);
|
|
return;
|
|
}
|
|
|
|
Alert.alert(
|
|
'Delete this number?',
|
|
'Are you sure you want to delete this number?',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{ text: 'OK', onPress: () => handleDelete(index) },
|
|
],
|
|
{ cancelable: true },
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.listItem}>
|
|
<View style={styles.listValue}>
|
|
<Text style={styles.value}>{number}</Text>
|
|
<Text style={styles.label}>{label}</Text>
|
|
</View>
|
|
<View style={styles.listActions}>
|
|
{handleEdit !== null && <Button accessibilityLabel={`Edit`} onPress={() => handleEditStart()} />}
|
|
{!hideDelete && (
|
|
<Button
|
|
accessibilityLabel={`Delete`}
|
|
onLongPress={_onPressDelete(true)}
|
|
onPress={_onPressDelete()}
|
|
/>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
PhoneListItem.propTypes = {
|
|
hideDelete: PropTypes.bool,
|
|
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 = {
|
|
hideDelete: false,
|
|
handleEdit: null,
|
|
};
|
|
|
|
|
|
|