-
-
Notifications
You must be signed in to change notification settings - Fork 697
/
CaptionNavigation.tsx
48 lines (38 loc) · 1.37 KB
/
CaptionNavigation.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { MouseEventHandler } from "react";
import { isSameMonth } from "date-fns";
import { useDayPicker } from "../contexts/DayPicker";
import { useNavigation } from "../contexts/Navigation";
import { CaptionProps } from "./Caption";
import { Navigation } from "./Navigation";
/** Render a caption with a button-based navigation. */
export function CaptionNavigation(props: CaptionProps): JSX.Element {
const { numberOfMonths } = useDayPicker();
const { previousMonth, nextMonth, goToMonth, displayMonths } =
useNavigation();
const displayIndex = displayMonths.findIndex((month) =>
isSameMonth(props.displayMonth, month)
);
const isFirst = displayIndex === 0;
const isLast = displayIndex === displayMonths.length - 1;
const hideNext = numberOfMonths > 1 && (isFirst || !isLast);
const hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
const handlePreviousClick: MouseEventHandler = () => {
if (!previousMonth) return;
goToMonth(previousMonth);
};
const handleNextClick: MouseEventHandler = () => {
if (!nextMonth) return;
goToMonth(nextMonth);
};
return (
<Navigation
displayMonth={props.displayMonth}
hideNext={hideNext}
hidePrevious={hidePrevious}
nextMonth={nextMonth}
previousMonth={previousMonth}
onPreviousClick={handlePreviousClick}
onNextClick={handleNextClick}
/>
);
}