import React from "react"; import { Popover, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // icons import { ChevronLeft, ChevronRight } from "lucide-react"; // constants import { MONTHS_LIST } from "constants/calendar"; export const CalendarMonthsDropdown: React.FC = observer(() => { const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore(); const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month"; const { activeMonthDate } = calendarStore.calendarFilters; const getWeekLayoutHeader = (): string => { const allDaysOfActiveWeek = calendarStore.allDaysOfActiveWeek; if (!allDaysOfActiveWeek) return "Week view"; const daysList = Object.keys(allDaysOfActiveWeek); const firstDay = new Date(daysList[0]); const lastDay = new Date(daysList[daysList.length - 1]); if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear()) return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`; if (firstDay.getFullYear() !== lastDay.getFullYear()) { return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()} - ${ MONTHS_LIST[lastDay.getMonth() + 1].shortTitle } ${lastDay.getFullYear()}`; } else return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} - ${ MONTHS_LIST[lastDay.getMonth() + 1].shortTitle } ${lastDay.getFullYear()}`; }; const handleDateChange = (date: Date) => { calendarStore.updateCalendarFilters({ activeMonthDate: date, }); }; return ( {calendarLayout === "month" ? `${MONTHS_LIST[activeMonthDate.getMonth() + 1].title} ${activeMonthDate.getFullYear()}` : getWeekLayoutHeader()}
{activeMonthDate.getFullYear()}
{Object.values(MONTHS_LIST).map((month, index) => ( ))}
); });