ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-14 17:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Moved the touching area on the whole grocery card not just on the text

Browse Source
This commit is contained in:
Dejan
2024-12-30 20:49:16 +01:00
parent 04d865cce9
commit 2a6357983f
2 changed files with 96 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/pages/grocery/EditGroceryItem.tsx
View File

@ -68,7 +68,7 @@ const EditGroceryItem = ({
); );
const handleClose = () => { const handleClose = () => {
setGrocery(defaultGroceryItem); closeEdit();
} }
const handleSubmit = () => { const handleSubmit = () => {

190
components/pages/grocery/GroceryItem.tsx
View File

@ -39,6 +39,7 @@ const GroceryItem = ({
return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`; return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
}; };
const isEditable = (isParent || isCaregiver) && item.approved && !item.bought;
return ( return (
<View <View
key={item.id} key={item.id}
@ -49,109 +50,108 @@ const GroceryItem = ({
overflow: "hidden", overflow: "hidden",
}} }}
> >
<View <TouchableOpacity onPress={isEditable ? () => setIsEditingTitle(true) : null}>
row <View
spread row
centerV spread
style={{ centerV
paddingHorizontal: isEditingTitle ? 0 : 13, style={{
paddingVertical: isEditingTitle ? 0 : 10, paddingHorizontal: isEditingTitle ? 0 : 13,
minHeight: 44.64, paddingVertical: isEditingTitle ? 0 : 10,
}} minHeight: 44.64,
> }}
<EditGroceryFrequency >
visible={openFreqEdit} <EditGroceryFrequency
key={item.id} visible={openFreqEdit}
item={item} key={item.id}
onClose={() => setOpenFreqEdit(false)} item={item}
/> onClose={() => setOpenFreqEdit(false)}
{isEditingTitle ? (
<EditGroceryItem
editGrocery={item}
onInputFocus={onInputFocus}
closeEdit={closeEdit}
/> />
) : ( {isEditingTitle ? (
<View flex> <EditGroceryItem
{(isParent || isCaregiver) && !item.bought ? ( editGrocery={item}
<TouchableOpacity onPress={() => setIsEditingTitle(true)}> 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 <Text
text70T text70T
style={[ style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
styles.title,
{
textDecorationLine: item.bought ? "line-through" : "none",
},
]}
> >
{item.title} {item.title}
</Text> </Text>
</TouchableOpacity> )}
) : ( </View>
<Text )}
text70T
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
>
{item.title}
</Text>
)}
</View>
)}
{!item.approved ? ( {!item.approved ? (
<View row centerV> <View row centerV>
{(isParent || isCaregiver) && ( {(isParent || isCaregiver) && (
<> <>
<AntDesign <AntDesign
name="check" name="check"
size={24} size={24}
style={{ color: "blue", marginRight: 15 }} style={{ color: "blue", marginRight: 15 }}
onPress={() => onPress={() =>
handleItemApproved(item.id, { approved: true }) 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)}
/>
} }
/> <Checkbox
<AntDesign value={item.bought}
name="close" containerStyle={[styles.checkbox, { borderRadius: 50 }]}
size={24} style={styles.checked}
style={{ color: "red" }} borderRadius={50}
onPress={() => { color="#fd1575"
handleItemApproved(item.id, { approved: false }); hitSlop={20}
deleteGrocery(item.id); 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>
!isEditingTitle && )
(isParent || isCaregiver) && ( )}
<View row> </View>
{item.bought && </TouchableOpacity>
<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>
{!item.approved && ( {!item.approved && (
<> <>