bc518174
 王天杨
提交两个项目文件
|
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
49
|
import { MouseEventHandler } from 'react';
import { isSameMonth } from 'date-fns';
import { CaptionProps } from 'components/Caption/Caption';
import { Navigation } from 'components/Navigation';
import { useDayPicker } from 'contexts/DayPicker';
import { useNavigation } from 'contexts/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}
/>
);
}
|
