mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
- Added todo completed animation when child completes a todo
This commit is contained in:
BIN
assets/animations/todoCompletedAnimation.gif
Normal file
BIN
assets/animations/todoCompletedAnimation.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 19 KiB |
@ -19,6 +19,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
|||||||
import RepeatIcon from "@/assets/svgs/RepeatIcon";
|
import RepeatIcon from "@/assets/svgs/RepeatIcon";
|
||||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
|
import { Image } from "react-native";
|
||||||
|
|
||||||
const ToDoItem = (props: {
|
const ToDoItem = (props: {
|
||||||
item: IToDo;
|
item: IToDo;
|
||||||
@ -29,7 +30,9 @@ const ToDoItem = (props: {
|
|||||||
const { data: members } = useGetFamilyMembers();
|
const { data: members } = useGetFamilyMembers();
|
||||||
const { profileData } = useAuthContext();
|
const { profileData } = useAuthContext();
|
||||||
const isParent = profileData?.userType === ProfileType.PARENT;
|
const isParent = profileData?.userType === ProfileType.PARENT;
|
||||||
|
const isChild = profileData?.userType === ProfileType.CHILD;
|
||||||
|
|
||||||
|
const [showAnimation, setShowAnimation] = useState(false);
|
||||||
const [visible, setVisible] = useState<boolean>(false);
|
const [visible, setVisible] = useState<boolean>(false);
|
||||||
const [points, setPoints] = useState(props.item.points);
|
const [points, setPoints] = useState(props.item.points);
|
||||||
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
|
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
|
||||||
@ -66,6 +69,15 @@ const ToDoItem = (props: {
|
|||||||
isTodoEditable = props.item.creatorId === profileData?.uid;
|
isTodoEditable = props.item.creatorId === profileData?.uid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleTodoClickAnimation = () => {
|
||||||
|
setShowAnimation(true);
|
||||||
|
|
||||||
|
// Optionally hide animation after 2 seconds
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowAnimation(false);
|
||||||
|
}, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
key={props.item.id}
|
key={props.item.id}
|
||||||
@ -78,6 +90,17 @@ const ToDoItem = (props: {
|
|||||||
backgroundColor: "white",
|
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 && (
|
{visible && (
|
||||||
<AddChoreDialog
|
<AddChoreDialog
|
||||||
isVisible={visible}
|
isVisible={visible}
|
||||||
@ -107,8 +130,11 @@ const ToDoItem = (props: {
|
|||||||
size={26.64}
|
size={26.64}
|
||||||
borderRadius={50}
|
borderRadius={50}
|
||||||
color="#fd1575"
|
color="#fd1575"
|
||||||
onValueChange={(value) => {
|
onValueChange={() => {
|
||||||
updateToDo({ id: props.item.id, done: !props.item.done });
|
updateToDo({ id: props.item.id, done: !props.item.done });
|
||||||
|
if (!props.item.done && isChild) {
|
||||||
|
handleTodoClickAnimation();
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
@ -303,4 +329,26 @@ const styles = StyleSheet.create({
|
|||||||
checked: {
|
checked: {
|
||||||
borderRadius: 50,
|
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,
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
Reference in New Issue
Block a user