ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-10 07:07:16 +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 = () => {
setGrocery(defaultGroceryItem);
closeEdit();
}
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()}`;
};
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 && (
<>