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

Revert "Don't spin on scroll"

Browse Source 
This reverts commit 1903e4072c.
This commit is contained in:
Milan Paunovic
2024-12-18 17:37:29 +01:00
parent e86b2a5950
commit 63699d53f4
1 changed files with 34 additions and 72 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, useMemo, useRef} from "react";
import React, {useCallback, useEffect, useMemo, useRef} from "react";
import {useAuthContext} from "@/contexts/AuthContext";
import {useAtomValue} from "jotai";
import {modeAtom, selectedDateAtom, selectedUserAtom} from "@/components/pages/calendar/atoms";
@ -21,14 +21,11 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
const selectedDate = useAtomValue(selectedDateAtom);
const mode = useAtomValue(modeAtom);
const {data: familyMembers} = useGetFamilyMembers();
const personalCalendarRef = useRef<CalendarKitHandle>(null);
const familyCalendarRef = useRef<CalendarKitHandle>(null);
const calendarRef = useRef<CalendarKitHandle>(null);
const {data: events} = useGetEvents();
const selectedUser = useAtomValue(selectedUserAtom);
const {data: personalEvents} = useFormattedEvents(events ?? [], selectedDate, profileData?.uid);
const {data: familyEvents} = useFormattedEvents(events ?? [], selectedDate, null);
const {data: formattedEvents} = useFormattedEvents(events ?? [], selectedDate, selectedUser);
const {
handlePressEvent,
handlePressCell,
@ -62,82 +59,47 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
}), [selectedDate]);
const renderEvent = useCallback((event: any) => {
const eventAttendees = familyMembers?.filter(member =>
event?.attendees?.includes(member?.uid!)
) || [];
const attendees = useMemo(() =>
familyMembers?.filter(member => event?.attendees?.includes(member?.uid!)) || [],
[familyMembers, event.attendees]
);
return (
<EventCell
key={event.id}
event={event}
onPress={handlePressEvent}
attendees={eventAttendees}
attendees={attendees}
/>
);
}, [familyMembers, handlePressEvent]);
return (
<View style={{ position: 'relative', width: calendarWidth, height: calendarHeight }}>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
opacity: selectedUser?.uid === profileData?.uid ? 1 : 0,
pointerEvents: selectedUser?.uid === profileData?.uid ? 'auto' : 'none',
// transition: 'opacity 0.2s ease-in-out'
}}
>
<CalendarContainer
ref={personalCalendarRef}
{...containerProps}
numberOfDays={numberOfDays}
calendarWidth={calendarWidth}
onDateChanged={debouncedOnDateChanged}
firstDay={firstDay}
events={personalEvents ?? []}
onPressEvent={handlePressEvent}
onPressBackground={handlePressCell}
>
<CalendarHeader {...headerProps} />
<CalendarBody
{...bodyProps}
renderEvent={renderEvent}
/>
<View marginB-45/>
</CalendarContainer>
</View>
useEffect(() => {
if (selectedDate && isToday(selectedDate)) {
calendarRef?.current?.goToDate({date: selectedDate});
}
}, [selectedDate]);
<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>
return (
<CalendarContainer
ref={calendarRef}
{...containerProps}
numberOfDays={numberOfDays}
calendarWidth={calendarWidth}
onDateChanged={debouncedOnDateChanged}
firstDay={firstDay}
events={formattedEvents ?? []}
onPressEvent={handlePressEvent}
onPressBackground={handlePressCell}
>
<CalendarHeader {...headerProps} />
<CalendarBody
{...bodyProps}
renderEvent={renderEvent}
/>
<View marginB-45/>
</CalendarContainer>
);
};
export default DetailedCalendar;