ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 08:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't spin on scroll

Browse Source
This commit is contained in:
Milan Paunovic
2024-12-18 17:37:00 +01:00
parent 8aca8e46db
commit 1903e4072c
1 changed files with 72 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/pages/calendar/DetailedCalendar.tsx
View File

@ -1,4 +1,4 @@
import React, {useCallback, useEffect, useMemo, useRef} from "react"; import React, {useCallback, useMemo, useRef} from "react";
import {useAuthContext} from "@/contexts/AuthContext"; import {useAuthContext} from "@/contexts/AuthContext";
import {useAtomValue} from "jotai"; import {useAtomValue} from "jotai";
import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms"; import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
@ -21,11 +21,14 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
const selectedDate = useAtomValue(selectedDateAtom); const selectedDate = useAtomValue(selectedDateAtom);
const mode = useAtomValue(modeAtom); const mode = useAtomValue(modeAtom);
const {data: familyMembers} = useGetFamilyMembers(); const {data: familyMembers} = useGetFamilyMembers();
const calendarRef = useRef<CalendarKitHandle>(null); const personalCalendarRef = useRef<CalendarKitHandle>(null);
const familyCalendarRef = useRef<CalendarKitHandle>(null);
const {data: events} = useGetEvents(); const {data: events} = useGetEvents();
const selectedUser = useAtomValue(selectedUserAtom); const selectedUser = useAtomValue(selectedUserAtom);
const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser); const {data: personalEvents} = useFormattedEvents(events ?? [], selectedDate, profileData?.uid);
const {data: familyEvents} = useFormattedEvents(events ?? [], selectedDate, null);
const { const {
handlePressEvent, handlePressEvent,
handlePressCell, handlePressCell,
@ -59,47 +62,82 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
}), [selectedDate]); }), [selectedDate]);
const renderEvent = useCallback((event: any) => { const renderEvent = useCallback((event: any) => {
const attendees = useMemo(() => const eventAttendees = familyMembers?.filter(member =>
familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [], event?.attendees?.includes(member?.uid!)
[familyMembers, event.attendees] ) || [];
);
return ( return (
<EventCell <EventCell
key={event.id}
event={event} event={event}
onPress={handlePressEvent} onPress={handlePressEvent}
attendees={attendees} attendees={eventAttendees}
/> />
); );
}, [familyMembers, handlePressEvent]); }, [familyMembers, handlePressEvent]);
useEffect(() => {
if (selectedDate && isToday(selectedDate)) {
calendarRef?.current?.goToDate({date: selectedDate});
}
}, [selectedDate]);
return ( return (
<CalendarContainer <View style={{ position: 'relative', width: calendarWidth, height: calendarHeight }}>
ref={calendarRef} <View
{...containerProps} style={{
numberOfDays={numberOfDays} position: 'absolute',
calendarWidth={calendarWidth} width: '100%',
height: '100%',
onDateChanged={debouncedOnDateChanged} opacity: selectedUser?.uid === profileData?.uid ? 1 : 0,
firstDay={firstDay} pointerEvents: selectedUser?.uid === profileData?.uid ? 'auto' : 'none',
events={formattedEvents ?? []} // transition: 'opacity 0.2s ease-in-out'
onPressEvent={handlePressEvent} }}
onPressBackground={handlePressCell} >
> <CalendarContainer
<CalendarHeader {...headerProps} /> ref={personalCalendarRef}
<CalendarBody {...containerProps}
{...bodyProps} numberOfDays={numberOfDays}
renderEvent={renderEvent} calendarWidth={calendarWidth}
/> onDateChanged={debouncedOnDateChanged}
<View marginB-45/> firstDay={firstDay}
</CalendarContainer> events={personalEvents ?? []}
onPressEvent={handlePressEvent}
onPressBackground={handlePressCell}
>
<CalendarHeader {...headerProps} />
<CalendarBody
{...bodyProps}
renderEvent={renderEvent}
/>
<View marginB-45/>
</CalendarContainer>
</View>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
opacity: selectedUser?.uid === profileData?.uid ? 0 : 1,
pointerEvents: selectedUser?.uid === profileData?.uid ? 'none' : 'auto',
// transition: 'opacity 0.2s ease-in-out'
}}
>
<CalendarContainer
ref={familyCalendarRef}
{...containerProps}
numberOfDays={numberOfDays}
calendarWidth={calendarWidth}
onDateChanged={debouncedOnDateChanged}
firstDay={firstDay}
events={familyEvents ?? []}
onPressEvent={handlePressEvent}
onPressBackground={handlePressCell}
>
<CalendarHeader {...headerProps} />
<CalendarBody
{...bodyProps}
renderEvent={renderEvent}
/>
<View marginB-45/>
</CalendarContainer>
</View>
</View>
); );
}; };
export default DetailedCalendar;