mirror of
https://github.com/zadam/trilium.git
synced 2025-12-04 22:44:25 +01:00
refactor(react/launch_bar): extract calendar impl into single file
This commit is contained in:
Elian Doran
parent
62fd07258e
commit
e0aed26f63
175
apps/client/src/widgets/launch_bar/Calendar.tsx
Normal file
175
apps/client/src/widgets/launch_bar/Calendar.tsx
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
import { useTriliumOptionInt } from "../react/hooks";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import server from "../../services/server";
|
||||||
|
import { VNode } from "preact";
|
||||||
|
import { useEffect, useState } from "preact/hooks";
|
||||||
|
import { Dayjs } from "@triliumnext/commons";
|
||||||
|
import { t } from "../../services/i18n";
|
||||||
|
|
||||||
|
interface DateNotesForMonth {
|
||||||
|
[date: string]: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DAYS_OF_WEEK = [
|
||||||
|
t("calendar.sun"),
|
||||||
|
t("calendar.mon"),
|
||||||
|
t("calendar.tue"),
|
||||||
|
t("calendar.wed"),
|
||||||
|
t("calendar.thu"),
|
||||||
|
t("calendar.fri"),
|
||||||
|
t("calendar.sat")
|
||||||
|
];
|
||||||
|
|
||||||
|
interface DateRangeInfo {
|
||||||
|
weekNumbers: number[];
|
||||||
|
dates: Dayjs[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Calendar({ date }: { date: Dayjs }) {
|
||||||
|
const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
|
||||||
|
const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
|
||||||
|
|
||||||
|
const month = date.format('YYYY-MM');
|
||||||
|
const firstDay = date.startOf('month');
|
||||||
|
const firstDayISO = firstDay.isoWeekday();
|
||||||
|
const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
|
||||||
|
<div className="calendar-body" data-calendar-area="month">
|
||||||
|
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
|
||||||
|
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
|
||||||
|
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
|
||||||
|
let localeDaysOfWeek = [...DAYS_OF_WEEK];
|
||||||
|
const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
|
||||||
|
localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="calendar-week">
|
||||||
|
{localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
|
||||||
|
const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
|
||||||
|
const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
|
||||||
|
}, [ date ]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<CalendarWeek weekNumber={weekNumbers[0]} />
|
||||||
|
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
|
||||||
|
let dateCursor = date;
|
||||||
|
const currentMonth = date.month();
|
||||||
|
const items: VNode[] = [];
|
||||||
|
while (dateCursor.month() === currentMonth) {
|
||||||
|
const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
|
||||||
|
if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
|
||||||
|
items.push(<CalendarWeek weekNumber={weekNumber} />)
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
|
||||||
|
dateCursor = dateCursor.add(1, "day");
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
}
|
||||||
|
|
||||||
|
function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
|
||||||
|
const nextMonth = date.add(1, 'month').format('YYYY-MM');
|
||||||
|
const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
|
||||||
|
}, [ date ]);
|
||||||
|
|
||||||
|
return dates.map(date => (
|
||||||
|
<CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
className={clsx("calendar-date", className)}
|
||||||
|
data-calendar-date={date.local().format("YYYY-MM-DD")}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{date.date()}
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CalendarWeek({ weekNumber }: { weekNumber: number }) {
|
||||||
|
return (
|
||||||
|
<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
|
||||||
|
return {
|
||||||
|
prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
|
||||||
|
nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo {
|
||||||
|
const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
|
||||||
|
const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
|
||||||
|
const dates: Dayjs[] = [];
|
||||||
|
|
||||||
|
const firstDay = date.startOf('month');
|
||||||
|
const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
|
||||||
|
|
||||||
|
// Get dates from previous month
|
||||||
|
for (let i = daysToAdd - 1; i >= 0; i--) {
|
||||||
|
dates.push(prevMonthLastDay.subtract(i, 'day'));
|
||||||
|
}
|
||||||
|
|
||||||
|
return { weekNumbers: [ weekNumber ], dates };
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
|
||||||
|
const lastDayOfMonth = date.endOf('month');
|
||||||
|
const lastDayISO = lastDayOfMonth.isoWeekday();
|
||||||
|
const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
|
||||||
|
const nextMonthFirstDay = date.add(1, 'month').startOf('month');
|
||||||
|
const dates: Dayjs[] = [];
|
||||||
|
|
||||||
|
if (lastDayISO !== lastDayOfUserWeek) {
|
||||||
|
const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
|
||||||
|
|
||||||
|
for (let i = 0; i < daysToAdd; i++) {
|
||||||
|
dates.push(nextMonthFirstDay.add(i, 'day'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { weekNumbers: [], dates };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
|
||||||
|
const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
|
||||||
|
return weekStart.isoWeek();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
|
||||||
|
const currentISO = date.isoWeekday();
|
||||||
|
const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
|
||||||
|
return date.clone().subtract(diff, "day").startOf("day");
|
||||||
|
}
|
||||||
@ -3,25 +3,13 @@ import FNote from "../../entities/fnote";
|
|||||||
import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
|
import { LaunchBarDropdownButton, useLauncherIconAndTitle } from "./launch_bar_widgets";
|
||||||
import { Dayjs, dayjs } from "@triliumnext/commons";
|
import { Dayjs, dayjs } from "@triliumnext/commons";
|
||||||
import appContext from "../../components/app_context";
|
import appContext from "../../components/app_context";
|
||||||
import { useTriliumOptionInt } from "../react/hooks";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import "./CalendarWidget.css";
|
import "./CalendarWidget.css";
|
||||||
import server from "../../services/server";
|
import Calendar from "./Calendar";
|
||||||
import { DateRangeInfo, DAYS_OF_WEEK, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
|
|
||||||
import { VNode } from "preact";
|
|
||||||
|
|
||||||
interface DateNotesForMonth {
|
|
||||||
[date: string]: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
|
export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
|
||||||
const { title, icon } = useLauncherIconAndTitle(launcherNote);
|
const { title, icon } = useLauncherIconAndTitle(launcherNote);
|
||||||
const [ date, setDate ] = useState<Dayjs>();
|
const [ date, setDate ] = useState<Dayjs>();
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LaunchBarDropdownButton
|
<LaunchBarDropdownButton
|
||||||
icon={icon} title={title}
|
icon={icon} title={title}
|
||||||
@ -40,100 +28,4 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function Calendar({ date }: { date: Dayjs }) {
|
|
||||||
const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
|
|
||||||
const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
|
|
||||||
|
|
||||||
const month = date.format('YYYY-MM');
|
|
||||||
const firstDay = date.startOf('month');
|
|
||||||
const firstDayISO = firstDay.isoWeekday();
|
|
||||||
const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
|
|
||||||
<div className="calendar-body" data-calendar-area="month">
|
|
||||||
{firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
|
|
||||||
<CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
|
|
||||||
<NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
|
|
||||||
let localeDaysOfWeek = [...DAYS_OF_WEEK];
|
|
||||||
const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
|
|
||||||
localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="calendar-week">
|
|
||||||
{localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function PreviousMonthDays({ date, info: { dates, weekNumbers } }: { date: Dayjs, info: DateRangeInfo }) {
|
|
||||||
const prevMonth = date.subtract(1, 'month').format('YYYY-MM');
|
|
||||||
const [ dateNotesForPrevMonth, setDateNotesForPrevMonth ] = useState<DateNotesForMonth>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
server.get<DateNotesForMonth>(`special-notes/notes-for-month/${prevMonth}`).then(setDateNotesForPrevMonth);
|
|
||||||
}, [ date ]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<CalendarWeek weekNumber={weekNumbers[0]} />
|
|
||||||
{dates.map(date => <CalendarDay date={date} dateNotesForMonth={dateNotesForPrevMonth} className="calendar-date-prev-month" />)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CurrentMonthDays({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
|
|
||||||
let dateCursor = date;
|
|
||||||
const currentMonth = date.month();
|
|
||||||
const items: VNode[] = [];
|
|
||||||
while (dateCursor.month() === currentMonth) {
|
|
||||||
const weekNumber = getWeekNumber(dateCursor, firstDayOfWeekISO);
|
|
||||||
if (dateCursor.isoWeekday() === firstDayOfWeekISO) {
|
|
||||||
items.push(<CalendarWeek weekNumber={weekNumber} />)
|
|
||||||
}
|
|
||||||
|
|
||||||
items.push(<CalendarDay date={dateCursor} dateNotesForMonth={{}} />)
|
|
||||||
dateCursor = dateCursor.add(1, "day");
|
|
||||||
}
|
|
||||||
|
|
||||||
return items;
|
|
||||||
}
|
|
||||||
|
|
||||||
function NextMonthDays({ date, dates }: { date: Dayjs, dates: Dayjs[] }) {
|
|
||||||
const nextMonth = date.add(1, 'month').format('YYYY-MM');
|
|
||||||
const [ dateNotesForNextMonth, setDateNotesForNextMonth ] = useState<DateNotesForMonth>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
server.get<DateNotesForMonth>(`special-notes/notes-for-month/${nextMonth}`).then(setDateNotesForNextMonth);
|
|
||||||
}, [ date ]);
|
|
||||||
|
|
||||||
return dates.map(date => (
|
|
||||||
<CalendarDay date={date} dateNotesForMonth={dateNotesForNextMonth} className="calendar-date-next-month" />
|
|
||||||
));
|
|
||||||
}
|
|
||||||
|
|
||||||
function CalendarDay({ date, dateNotesForMonth, className }: { date: Dayjs, dateNotesForMonth?: DateNotesForMonth, className?: string }) {
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
className={clsx("calendar-date", className)}
|
|
||||||
data-calendar-date={date.local().format("YYYY-MM-DD")}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{date.date()}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function CalendarWeek({ weekNumber }: { weekNumber: number }) {
|
|
||||||
return (
|
|
||||||
<span className="calendar-week-number calendar-week-number-disabled">{weekNumber}</span>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,68 +0,0 @@
|
|||||||
import { Dayjs } from "@triliumnext/commons";
|
|
||||||
import { t } from "../../services/i18n";
|
|
||||||
|
|
||||||
export const DAYS_OF_WEEK = [
|
|
||||||
t("calendar.sun"),
|
|
||||||
t("calendar.mon"),
|
|
||||||
t("calendar.tue"),
|
|
||||||
t("calendar.wed"),
|
|
||||||
t("calendar.thu"),
|
|
||||||
t("calendar.fri"),
|
|
||||||
t("calendar.sat")
|
|
||||||
];
|
|
||||||
|
|
||||||
export interface DateRangeInfo {
|
|
||||||
weekNumbers: number[];
|
|
||||||
dates: Dayjs[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getMonthInformation(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number) {
|
|
||||||
return {
|
|
||||||
prevMonth: getPrevMonthDays(date, firstDayISO, firstDayOfWeekISO),
|
|
||||||
nextMonth: getNextMonthDays(date, firstDayOfWeekISO)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getPrevMonthDays(date: Dayjs, firstDayISO: number, firstDayOfWeekISO: number): DateRangeInfo {
|
|
||||||
const prevMonthLastDay = date.subtract(1, 'month').endOf('month');
|
|
||||||
const daysToAdd = (firstDayISO - firstDayOfWeekISO + 7) % 7;
|
|
||||||
const dates: Dayjs[] = [];
|
|
||||||
|
|
||||||
const firstDay = date.startOf('month');
|
|
||||||
const weekNumber = getWeekNumber(firstDay, firstDayOfWeekISO);
|
|
||||||
|
|
||||||
// Get dates from previous month
|
|
||||||
for (let i = daysToAdd - 1; i >= 0; i--) {
|
|
||||||
dates.push(prevMonthLastDay.subtract(i, 'day'));
|
|
||||||
}
|
|
||||||
|
|
||||||
return { weekNumbers: [ weekNumber ], dates };
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNextMonthDays(date: Dayjs, firstDayOfWeekISO: number): DateRangeInfo {
|
|
||||||
const lastDayOfMonth = date.endOf('month');
|
|
||||||
const lastDayISO = lastDayOfMonth.isoWeekday();
|
|
||||||
const lastDayOfUserWeek = ((firstDayOfWeekISO + 6 - 1) % 7) + 1;
|
|
||||||
const nextMonthFirstDay = date.add(1, 'month').startOf('month');
|
|
||||||
const dates: Dayjs[] = [];
|
|
||||||
|
|
||||||
if (lastDayISO !== lastDayOfUserWeek) {
|
|
||||||
const daysToAdd = (lastDayOfUserWeek - lastDayISO + 7) % 7;
|
|
||||||
|
|
||||||
for (let i = 0; i < daysToAdd; i++) {
|
|
||||||
dates.push(nextMonthFirstDay.add(i, 'day'));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return { weekNumbers: [], dates };
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getWeekNumber(date: Dayjs, firstDayOfWeekISO: number): number {
|
|
||||||
const weekStart = getWeekStartDate(date, firstDayOfWeekISO);
|
|
||||||
return weekStart.isoWeek();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getWeekStartDate(date: Dayjs, firstDayOfWeekISO: number): Dayjs {
|
|
||||||
const currentISO = date.isoWeekday();
|
|
||||||
const diff = (currentISO - firstDayOfWeekISO + 7) % 7;
|
|
||||||
return date.clone().subtract(diff, "day").startOf("day");
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user