mirror of
https://github.com/urosran/cally.git
synced 2025-07-09 22:57:16 +00:00
- Moved the touching area on the whole grocery card not just on the text
This commit is contained in:
@ -68,7 +68,7 @@ const EditGroceryItem = ({
|
||||
);
|
||||
|
||||
const handleClose = () => {
|
||||
setGrocery(defaultGroceryItem);
|
||||
closeEdit();
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
|
@ -39,6 +39,7 @@ const GroceryItem = ({
|
||||
return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
|
||||
};
|
||||
|
||||
const isEditable = (isParent || isCaregiver) && item.approved && !item.bought;
|
||||
return (
|
||||
<View
|
||||
key={item.id}
|
||||
@ -49,109 +50,108 @@ const GroceryItem = ({
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
row
|
||||
spread
|
||||
centerV
|
||||
style={{
|
||||
paddingHorizontal: isEditingTitle ? 0 : 13,
|
||||
paddingVertical: isEditingTitle ? 0 : 10,
|
||||
minHeight: 44.64,
|
||||
}}
|
||||
>
|
||||
<EditGroceryFrequency
|
||||
visible={openFreqEdit}
|
||||
key={item.id}
|
||||
item={item}
|
||||
onClose={() => setOpenFreqEdit(false)}
|
||||
/>
|
||||
|
||||
{isEditingTitle ? (
|
||||
<EditGroceryItem
|
||||
editGrocery={item}
|
||||
onInputFocus={onInputFocus}
|
||||
closeEdit={closeEdit}
|
||||
<TouchableOpacity onPress={isEditable ? () => setIsEditingTitle(true) : null}>
|
||||
<View
|
||||
row
|
||||
spread
|
||||
centerV
|
||||
style={{
|
||||
paddingHorizontal: isEditingTitle ? 0 : 13,
|
||||
paddingVertical: isEditingTitle ? 0 : 10,
|
||||
minHeight: 44.64,
|
||||
}}
|
||||
>
|
||||
<EditGroceryFrequency
|
||||
visible={openFreqEdit}
|
||||
key={item.id}
|
||||
item={item}
|
||||
onClose={() => setOpenFreqEdit(false)}
|
||||
/>
|
||||
) : (
|
||||
<View flex>
|
||||
{(isParent || isCaregiver) && !item.bought ? (
|
||||
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
|
||||
{isEditingTitle ? (
|
||||
<EditGroceryItem
|
||||
editGrocery={item}
|
||||
onInputFocus={onInputFocus}
|
||||
closeEdit={closeEdit}
|
||||
/>
|
||||
) : (
|
||||
<View flex>
|
||||
{(isParent || isCaregiver) && !item.bought ? (
|
||||
<Text
|
||||
text70T
|
||||
style={[
|
||||
styles.title,
|
||||
{
|
||||
textDecorationLine: item.bought ? "line-through" : "none",
|
||||
},
|
||||
]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
) : (
|
||||
<Text
|
||||
text70T
|
||||
style={[
|
||||
styles.title,
|
||||
{
|
||||
textDecorationLine: item.bought ? "line-through" : "none",
|
||||
},
|
||||
]}
|
||||
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<Text
|
||||
text70T
|
||||
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
|
||||
>
|
||||
{item.title}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!item.approved ? (
|
||||
<View row centerV>
|
||||
{(isParent || isCaregiver) && (
|
||||
<>
|
||||
<AntDesign
|
||||
name="check"
|
||||
size={24}
|
||||
style={{ color: "blue", marginRight: 15 }}
|
||||
onPress={() =>
|
||||
handleItemApproved(item.id, { approved: true })
|
||||
{!item.approved ? (
|
||||
<View row centerV>
|
||||
{(isParent || isCaregiver) && (
|
||||
<>
|
||||
<AntDesign
|
||||
name="check"
|
||||
size={24}
|
||||
style={{ color: "blue", marginRight: 15 }}
|
||||
onPress={() =>
|
||||
handleItemApproved(item.id, { approved: true })
|
||||
}
|
||||
/>
|
||||
<AntDesign
|
||||
name="close"
|
||||
size={24}
|
||||
style={{ color: "red" }}
|
||||
onPress={() => {
|
||||
handleItemApproved(item.id, { approved: false });
|
||||
deleteGrocery(item.id);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
!isEditingTitle &&
|
||||
(isParent || isCaregiver) && (
|
||||
<View row>
|
||||
{item.bought &&
|
||||
<AntDesign
|
||||
name="close"
|
||||
size={24}
|
||||
style={{ color: "grey", marginRight: 10 }}
|
||||
onPress={() => deleteGrocery(item.id)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<AntDesign
|
||||
name="close"
|
||||
size={24}
|
||||
style={{ color: "red" }}
|
||||
onPress={() => {
|
||||
handleItemApproved(item.id, { approved: false });
|
||||
deleteGrocery(item.id);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
) : (
|
||||
!isEditingTitle &&
|
||||
(isParent || isCaregiver) && (
|
||||
<View row>
|
||||
{item.bought &&
|
||||
<AntDesign
|
||||
name="close"
|
||||
size={24}
|
||||
style={{ color: "grey", marginRight: 10 }}
|
||||
onPress={() => deleteGrocery(item.id)}
|
||||
/>
|
||||
}
|
||||
<Checkbox
|
||||
value={item.bought}
|
||||
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
|
||||
style={styles.checked}
|
||||
borderRadius={50}
|
||||
color="#fd1575"
|
||||
hitSlop={20}
|
||||
onValueChange={() => {
|
||||
const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
|
||||
setApprovedGroceries(updatedApprovedGroceries);
|
||||
updateGroceryItem({ id: item.id, bought: !item.bought })
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
<Checkbox
|
||||
value={item.bought}
|
||||
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
|
||||
style={styles.checked}
|
||||
borderRadius={50}
|
||||
color="#fd1575"
|
||||
hitSlop={20}
|
||||
onValueChange={() => {
|
||||
const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
|
||||
setApprovedGroceries(updatedApprovedGroceries);
|
||||
updateGroceryItem({ id: item.id, bought: !item.bought })
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
|
||||
{!item.approved && (
|
||||
<>
|
||||
|
Reference in New Issue
Block a user