- Added todo completed animation when child completes a todo

This commit is contained in:
Dejan
2024-12-17 11:31:50 +01:00
parent 3564edadf2
commit 32a718953b
2 changed files with 49 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -19,6 +19,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { format } from "date-fns";
import { Image } from "react-native";
const ToDoItem = (props: {
item: IToDo;
@ -29,7 +30,9 @@ const ToDoItem = (props: {
const { data: members } = useGetFamilyMembers();
const { profileData } = useAuthContext();
const isParent = profileData?.userType === ProfileType.PARENT;
const isChild = profileData?.userType === ProfileType.CHILD;
const [showAnimation, setShowAnimation] = useState(false);
const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@ -66,6 +69,15 @@ const ToDoItem = (props: {
isTodoEditable = props.item.creatorId === profileData?.uid;
}
const handleTodoClickAnimation = () => {
setShowAnimation(true);
// Optionally hide animation after 2 seconds
setTimeout(() => {
setShowAnimation(false);
}, 2000);
};
return (
<View
key={props.item.id}
@ -78,6 +90,17 @@ const ToDoItem = (props: {
backgroundColor: "white",
}}
>
{showAnimation && (
<View style={styles.animationContainer}>
<View style={styles.animationOverlay}>
<Image
source={require("@/assets/animations/todoCompletedAnimation.gif")}
style={styles.animation}
resizeMode="contain"
/>
</View>
</View>
)}
{visible && (
<AddChoreDialog
isVisible={visible}
@ -107,8 +130,11 @@ const ToDoItem = (props: {
size={26.64}
borderRadius={50}
color="#fd1575"
onValueChange={(value) => {
onValueChange={() => {
updateToDo({ id: props.item.id, done: !props.item.done });
if (!props.item.done && isChild) {
handleTodoClickAnimation();
}
}}
/>
</View>
@ -303,4 +329,26 @@ const styles = StyleSheet.create({
checked: {
borderRadius: 50,
},
animation: {
width: 100,
height: 100,
marginTop: 10,
},
animationContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#FFF",
},
animationOverlay: {
position: "absolute", // Overlay on top of everything
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background
zIndex: 10,
},
});