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

Added today button

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-20 13:39:39 +02:00
parent f715a77661
commit 3424f06816
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,10 +1,11 @@
import React, {memo} from 'react'; import React, {memo} from 'react';
import {Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib"; import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons"; import {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from './constants'; import {modeMap, months} from './constants';
import {StyleSheet} from "react-native"; import {StyleSheet} from "react-native";
import {useAtom} from "jotai"; import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms"; import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {isSameDay} from "date-fns";
export const CalendarHeader = memo(() => { export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@ -28,6 +29,8 @@ export const CalendarHeader = memo(() => {
setSelectedDate(updatedDate); setSelectedDate(updatedDate);
}; };
const isSelectedDateToday = isSameDay(selectedDate, new Date())
return ( return (
<View <View
style={{ style={{
@ -65,22 +68,32 @@ export const CalendarHeader = memo(() => {
</Picker> </Picker>
</View> </View>
<View> <View row>
<SegmentedControl {!isSelectedDateToday && (
segments={[{label: "D"}, {label: "W"}, {label: "M"}]} <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
backgroundColor="#ececec" setSelectedDate(new Date())
inactiveColor="#919191" setMode("day")
activeBackgroundColor="#ea156c" }}/>
activeColor="white" )}
outlineColor="white"
outlineWidth={3} <View>
segmentLabelStyle={styles.segmentslblStyle} <SegmentedControl
onChangeIndex={handleSegmentChange} segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2} backgroundColor="#ececec"
/> inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
</View> </View>
</View> </View>
); )
;
}); });
const styles = StyleSheet.create({ const styles = StyleSheet.create({

27
components/pages/calendar/EventCalendar.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useMemo, useState, useEffect } 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 { StyleSheet, View, ActivityIndicator } from "react-native"; import {ActivityIndicator, StyleSheet, View} from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents"; import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import { useAtom, useAtomValue, useSetAtom } from "jotai"; import {useAtom, useSetAtom} from "jotai";
import { import {
editVisibleAtom, editVisibleAtom,
eventForEditAtom, eventForEditAtom,
@ -10,18 +10,18 @@ import {
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";
interface EventCalendarProps { interface EventCalendarProps {
calendarHeight: number; calendarHeight: number;
} }
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calendarHeight }) => { export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({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 mode = useAtomValue(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);
@ -48,6 +48,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
if (mode === "day") { if (mode === "day") {
setSelectedNewEndDate(date); setSelectedNewEndDate(date);
} else { } else {
setMode("day")
setSelectedDate(date); setSelectedDate(date);
} }
}, },
@ -59,7 +60,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
}, [setSelectedDate]); }, [setSelectedDate]);
const memoizedEventCellStyle = useCallback( const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }), (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[] []
); );
@ -78,7 +79,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({ calenda
if (isLoading || isRendering) { if (isLoading || isRendering) {
return ( return (
<View style={styles.loadingContainer}> <View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" /> <ActivityIndicator size="large" color="#0000ff"/>
</View> </View>
); );
} }