mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
Fix day circle rendering
This commit is contained in:
Milan Paunovic
@ -1,211 +1,254 @@
|
|||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||||
import { Calendar } from "react-native-big-calendar";
|
import {Calendar} from "react-native-big-calendar";
|
||||||
import { ActivityIndicator, StyleSheet, View } from "react-native";
|
import {ActivityIndicator, StyleSheet, View, ViewStyle} from "react-native";
|
||||||
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
|
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
|
||||||
import { useAtom, useSetAtom } from "jotai";
|
import {useAtom, useSetAtom} from "jotai";
|
||||||
import {
|
import {
|
||||||
editVisibleAtom,
|
editVisibleAtom,
|
||||||
eventForEditAtom,
|
eventForEditAtom,
|
||||||
modeAtom,
|
modeAtom,
|
||||||
selectedDateAtom,
|
selectedDateAtom,
|
||||||
selectedNewEventDateAtom,
|
selectedNewEventDateAtom,
|
||||||
} from "@/components/pages/calendar/atoms";
|
} from "@/components/pages/calendar/atoms";
|
||||||
import { useAuthContext } from "@/contexts/AuthContext";
|
import {useAuthContext} from "@/contexts/AuthContext";
|
||||||
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
|
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
|
||||||
import { act } from "react-test-renderer";
|
import {Text} from "react-native-ui-lib";
|
||||||
|
|
||||||
interface EventCalendarProps {
|
interface EventCalendarProps {
|
||||||
calendarHeight: number;
|
calendarHeight: number;
|
||||||
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
|
||||||
calendarWidth: number;
|
calendarWidth: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const getTotalMinutes = () => {
|
const getTotalMinutes = () => {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
|
||||||
({ calendarHeight }) => {
|
({calendarHeight}) => {
|
||||||
const { data: events, isLoading } = useGetEvents();
|
const {data: events, isLoading} = useGetEvents();
|
||||||
const { profileData } = useAuthContext();
|
const {profileData} = useAuthContext();
|
||||||
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
||||||
const [activeDate, setActiveDate] = useState<Date>(new Date());
|
const [mode, setMode] = useAtom(modeAtom);
|
||||||
const [mode, setMode] = useAtom(modeAtom);
|
|
||||||
|
|
||||||
const setEditVisible = useSetAtom(editVisibleAtom);
|
const setEditVisible = useSetAtom(editVisibleAtom);
|
||||||
const setEventForEdit = useSetAtom(eventForEditAtom);
|
const setEventForEdit = useSetAtom(eventForEditAtom);
|
||||||
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
|
||||||
|
|
||||||
const [isRendering, setIsRendering] = useState(true);
|
const [isRendering, setIsRendering] = useState(true);
|
||||||
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
|
||||||
|
|
||||||
useEffect(() => {
|
const todaysDate = new Date()
|
||||||
if (events && mode) {
|
|
||||||
setIsRendering(true);
|
|
||||||
const timeout = setTimeout(() => {
|
|
||||||
setIsRendering(false);
|
|
||||||
}, 300);
|
|
||||||
return () => clearTimeout(timeout);
|
|
||||||
}
|
|
||||||
}, [events, mode]);
|
|
||||||
|
|
||||||
const handlePressEvent = useCallback(
|
useEffect(() => {
|
||||||
(event: CalendarEvent) => {
|
if (events && mode) {
|
||||||
if (mode === "day" || mode === "week") {
|
setIsRendering(true);
|
||||||
setEditVisible(true);
|
const timeout = setTimeout(() => {
|
||||||
console.log({ event });
|
setIsRendering(false);
|
||||||
setEventForEdit(event);
|
}, 300);
|
||||||
} else {
|
return () => clearTimeout(timeout);
|
||||||
setMode("day");
|
}
|
||||||
setSelectedDate(event.start);
|
}, [events, mode]);
|
||||||
|
|
||||||
|
const handlePressEvent = useCallback(
|
||||||
|
(event: CalendarEvent) => {
|
||||||
|
if (mode === "day" || mode === "week") {
|
||||||
|
setEditVisible(true);
|
||||||
|
console.log({event});
|
||||||
|
setEventForEdit(event);
|
||||||
|
} else {
|
||||||
|
setMode("day");
|
||||||
|
setSelectedDate(event.start);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setEditVisible, setEventForEdit, mode]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handlePressCell = useCallback(
|
||||||
|
(date: Date) => {
|
||||||
|
if (mode === "day" || mode === "week") {
|
||||||
|
setSelectedNewEndDate(date);
|
||||||
|
} else {
|
||||||
|
setMode("day");
|
||||||
|
setSelectedDate(date);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSwipeEnd = useCallback(
|
||||||
|
(date: Date) => {
|
||||||
|
setSelectedDate(date);
|
||||||
|
},
|
||||||
|
[setSelectedDate]
|
||||||
|
);
|
||||||
|
|
||||||
|
const memoizedEventCellStyle = useCallback(
|
||||||
|
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const memoizedWeekStartsOn = useMemo(
|
||||||
|
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
||||||
|
[profileData]
|
||||||
|
);
|
||||||
|
|
||||||
|
const isSameDate = useCallback((date1: Date, date2: Date) => {
|
||||||
|
return (
|
||||||
|
date1.getDate() === date2.getDate() &&
|
||||||
|
date1.getMonth() === date2.getMonth() &&
|
||||||
|
date1.getFullYear() === date2.getFullYear()
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const dayHeaderColor = useMemo(() => {
|
||||||
|
return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d";
|
||||||
|
}, [selectedDate, mode]);
|
||||||
|
|
||||||
|
const dateStyle = useMemo(() => {
|
||||||
|
return isSameDate(todaysDate, selectedDate) && mode === "day"
|
||||||
|
? styles.dayHeader
|
||||||
|
: styles.otherDayHeader;
|
||||||
|
}, [selectedDate, mode]);
|
||||||
|
|
||||||
|
const memoizedHeaderContentStyle = useMemo(() => {
|
||||||
|
if (mode === "day") {
|
||||||
|
return styles.dayModeHeader;
|
||||||
|
} else if (mode === "week") {
|
||||||
|
return styles.weekModeHeader;
|
||||||
|
} else if (mode === "month") {
|
||||||
|
return styles.monthModeHeader;
|
||||||
|
} else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}, [mode]);
|
||||||
|
|
||||||
|
const memoizedEvents = useMemo(() => events ?? [], [events]);
|
||||||
|
|
||||||
|
const renderCustomDateForMonth = (date: Date) => {
|
||||||
|
const circleStyle = useMemo<ViewStyle>(
|
||||||
|
() => ({
|
||||||
|
position: "absolute",
|
||||||
|
width: 30,
|
||||||
|
height: 30,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
borderRadius: 15,
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const defaultStyle = useMemo<ViewStyle>(
|
||||||
|
() => ({
|
||||||
|
...circleStyle,
|
||||||
|
}),
|
||||||
|
[circleStyle]
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentDateStyle = useMemo<ViewStyle>(
|
||||||
|
() => ({
|
||||||
|
...circleStyle,
|
||||||
|
backgroundColor: "#4184f2",
|
||||||
|
}),
|
||||||
|
[circleStyle]
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderDate = useCallback(
|
||||||
|
(date: Date) => {
|
||||||
|
const isCurrentDate = isSameDate(todaysDate, date);
|
||||||
|
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{alignItems: "center"}}>
|
||||||
|
<View style={appliedStyle}>
|
||||||
|
<Text style={{color: isCurrentDate ? "white" : "black"}}>
|
||||||
|
{date.getDate()}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[todaysDate, currentDateStyle, defaultStyle] // dependencies
|
||||||
|
);
|
||||||
|
|
||||||
|
return renderDate(date);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setOffsetMinutes(getTotalMinutes());
|
||||||
|
}, [events, mode]);
|
||||||
|
|
||||||
|
if (isLoading || isRendering) {
|
||||||
|
return (
|
||||||
|
<View style={styles.loadingContainer}>
|
||||||
|
<ActivityIndicator size="large" color="#0000ff"/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
},
|
|
||||||
[setEditVisible, setEventForEdit, mode]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handlePressCell = useCallback(
|
return (
|
||||||
(date: Date) => {
|
<Calendar
|
||||||
if (mode === "day" || mode === "week") {
|
bodyContainerStyle={styles.calHeader}
|
||||||
setSelectedNewEndDate(date);
|
swipeEnabled
|
||||||
} else {
|
enableEnrichedEvents
|
||||||
setMode("day");
|
mode={mode}
|
||||||
setSelectedDate(date);
|
events={memoizedEvents}
|
||||||
}
|
eventCellStyle={memoizedEventCellStyle}
|
||||||
},
|
onPressEvent={handlePressEvent}
|
||||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
weekStartsOn={memoizedWeekStartsOn}
|
||||||
);
|
height={calendarHeight}
|
||||||
|
activeDate={todaysDate}
|
||||||
const handleSwipeEnd = useCallback(
|
date={selectedDate}
|
||||||
(date: Date) => {
|
onPressCell={handlePressCell}
|
||||||
setSelectedDate(date);
|
headerContentStyle={memoizedHeaderContentStyle}
|
||||||
},
|
onSwipeEnd={handleSwipeEnd}
|
||||||
[setSelectedDate]
|
scrollOffsetMinutes={offsetMinutes}
|
||||||
);
|
dayHeaderStyle={dateStyle}
|
||||||
|
dayHeaderHighlightColor={dayHeaderColor}
|
||||||
const memoizedEventCellStyle = useCallback(
|
renderCustomDateForMonth={renderCustomDateForMonth}
|
||||||
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
|
showAdjacentMonths
|
||||||
[]
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
const memoizedWeekStartsOn = useMemo(
|
|
||||||
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
|
|
||||||
[profileData]
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setActiveDate(new Date());
|
|
||||||
|
|
||||||
const interval = setInterval(() => setActiveDate(new Date()), 60000);
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const dayHeaderColor = useMemo(() => {
|
|
||||||
const isSameDate =
|
|
||||||
activeDate.getDate() === selectedDate.getDate() &&
|
|
||||||
activeDate.getMonth() === selectedDate.getMonth() &&
|
|
||||||
activeDate.getFullYear() === selectedDate.getFullYear();
|
|
||||||
|
|
||||||
return isSameDate && mode === "day" ? "white" : "#4d4d4d";
|
|
||||||
}, [selectedDate, mode, activeDate]);
|
|
||||||
|
|
||||||
const dateStyle = useMemo(() => {
|
|
||||||
const isSameDate =
|
|
||||||
activeDate.getDate() === selectedDate.getDate() &&
|
|
||||||
activeDate.getMonth() === selectedDate.getMonth() &&
|
|
||||||
activeDate.getFullYear() === selectedDate.getFullYear();
|
|
||||||
|
|
||||||
return isSameDate && mode === "day"
|
|
||||||
? styles.dayHeader
|
|
||||||
: styles.otherDayHeader;
|
|
||||||
}, [selectedDate, mode, activeDate]);
|
|
||||||
|
|
||||||
const memoizedHeaderContentStyle = useMemo(() => {
|
|
||||||
if (mode === "day") {
|
|
||||||
return styles.dayModeHeader;
|
|
||||||
} else if (mode === "week") {
|
|
||||||
return styles.weekModeHeader;
|
|
||||||
} else if (mode === "month") {
|
|
||||||
return styles.monthModeHeader;
|
|
||||||
} else {
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}, [mode]);
|
|
||||||
|
|
||||||
const memoizedEvents = useMemo(() => events ?? [], [events]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setOffsetMinutes(getTotalMinutes());
|
|
||||||
}, [events, mode]);
|
|
||||||
|
|
||||||
if (isLoading || isRendering) {
|
|
||||||
return (
|
|
||||||
<View style={styles.loadingContainer}>
|
|
||||||
<ActivityIndicator size="large" color="#0000ff" />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
|
||||||
<Calendar
|
|
||||||
bodyContainerStyle={styles.calHeader}
|
|
||||||
swipeEnabled
|
|
||||||
enableEnrichedEvents
|
|
||||||
mode={mode}
|
|
||||||
events={memoizedEvents}
|
|
||||||
eventCellStyle={memoizedEventCellStyle}
|
|
||||||
onPressEvent={handlePressEvent}
|
|
||||||
weekStartsOn={memoizedWeekStartsOn}
|
|
||||||
height={calendarHeight}
|
|
||||||
activeDate={activeDate}
|
|
||||||
date={selectedDate}
|
|
||||||
onPressCell={handlePressCell}
|
|
||||||
headerContentStyle={memoizedHeaderContentStyle}
|
|
||||||
onSwipeEnd={handleSwipeEnd}
|
|
||||||
scrollOffsetMinutes={offsetMinutes}
|
|
||||||
dayHeaderStyle={dateStyle}
|
|
||||||
dayHeaderHighlightColor={dayHeaderColor}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
segmentslblStyle: {
|
segmentslblStyle: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
fontFamily: "Manrope_600SemiBold",
|
fontFamily: "Manrope_600SemiBold",
|
||||||
},
|
},
|
||||||
calHeader: {
|
calHeader: {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
},
|
},
|
||||||
dayModeHeader: {
|
dayModeHeader: {
|
||||||
alignSelf: "flex-start",
|
alignSelf: "flex-start",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
width: 38,
|
width: 38,
|
||||||
right: 42,
|
right: 42,
|
||||||
height: 13,
|
height: 13,
|
||||||
},
|
},
|
||||||
weekModeHeader: {},
|
weekModeHeader: {},
|
||||||
monthModeHeader: {},
|
monthModeHeader: {},
|
||||||
loadingContainer: {
|
loadingContainer: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
},
|
},
|
||||||
dayHeader: {
|
dayHeader: {
|
||||||
backgroundColor: "#4184f2",
|
backgroundColor: "#4184f2",
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
borderRadius: 100,
|
borderRadius: 100,
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
},
|
},
|
||||||
otherDayHeader: {
|
otherDayHeader: {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: "transparent",
|
||||||
color: "#919191",
|
color: "#919191",
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
borderRadius: 100,
|
borderRadius: 100,
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -118,6 +118,7 @@
|
|||||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||||
|
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
|
||||||
</array>
|
</array>
|
||||||
<key>UILaunchStoryboardName</key>
|
<key>UILaunchStoryboardName</key>
|
||||||
<string>SplashScreen</string>
|
<string>SplashScreen</string>
|
||||||
|
|||||||
Reference in New Issue
Block a user