mirror of
https://github.com/urosran/cally.git
synced 2025-07-09 22:57:16 +00:00
132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
import React, { memo } from "react";
|
|
import {
|
|
Button,
|
|
Picker,
|
|
PickerModes,
|
|
SegmentedControl,
|
|
Text,
|
|
View,
|
|
} from "react-native-ui-lib";
|
|
import { MaterialIcons } from "@expo/vector-icons";
|
|
import { modeMap, months } from "./constants";
|
|
import { StyleSheet } from "react-native";
|
|
import { useAtom } from "jotai";
|
|
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
|
|
import { format, isSameDay } from "date-fns";
|
|
import { useAuthContext } from "@/contexts/AuthContext";
|
|
import {useIsMutating} from "react-query";
|
|
|
|
export const CalendarHeader = memo(() => {
|
|
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
|
|
const [mode, setMode] = useAtom(modeAtom);
|
|
const { profileData } = useAuthContext();
|
|
|
|
const handleSegmentChange = (index: number) => {
|
|
const selectedMode = modeMap.get(index);
|
|
if (selectedMode) {
|
|
setTimeout(() => {
|
|
setMode(selectedMode as "day" | "week" | "month");
|
|
}, 150);
|
|
}
|
|
};
|
|
|
|
const handleMonthChange = (month: string) => {
|
|
const currentDay = selectedDate.getDate();
|
|
const currentYear = selectedDate.getFullYear();
|
|
const newMonthIndex = months.indexOf(month);
|
|
|
|
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
|
|
setSelectedDate(updatedDate);
|
|
};
|
|
|
|
const isSelectedDateToday = isSameDay(selectedDate, new Date());
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 8,
|
|
borderRadius: 20,
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
backgroundColor: "white",
|
|
marginBottom: 10,
|
|
}}
|
|
>
|
|
<View row centerV gap-3>
|
|
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
|
|
{selectedDate.getFullYear()}
|
|
</Text>
|
|
<Picker
|
|
value={months[selectedDate.getMonth()]}
|
|
placeholder={"Select Month"}
|
|
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
|
|
mode={PickerModes.SINGLE}
|
|
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
|
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
|
|
topBarProps={{
|
|
title: selectedDate.getFullYear().toString(),
|
|
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
|
|
}}
|
|
>
|
|
{months.map((month) => (
|
|
<Picker.Item key={month} label={month} value={month} />
|
|
))}
|
|
</Picker>
|
|
</View>
|
|
|
|
<View row centerV>
|
|
{!isSelectedDateToday && (
|
|
<Button
|
|
size={"xSmall"}
|
|
marginR-0
|
|
avoidInnerPadding
|
|
style={{
|
|
borderRadius: 50,
|
|
backgroundColor: "white",
|
|
borderWidth: 0.7,
|
|
borderColor: "#dadce0",
|
|
height: 30,
|
|
paddingHorizontal: 10,
|
|
}}
|
|
labelStyle={{
|
|
fontSize: 12,
|
|
color: "black",
|
|
fontFamily: "Manrope_500Medium",
|
|
}}
|
|
label={format(new Date(), "dd/MM/yyyy")}
|
|
onPress={() => {
|
|
setSelectedDate(new Date());
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<View>
|
|
<SegmentedControl
|
|
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
|
|
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>
|
|
);
|
|
});
|
|
|
|
const styles = StyleSheet.create({
|
|
segmentslblStyle: {
|
|
fontSize: 12,
|
|
fontFamily: "Manrope_600SemiBold",
|
|
},
|
|
});
|