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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import { MouseEventHandler } from 'react';
import { IconLeft } from 'components/IconLeft';
import { IconRight } from 'components/IconRight';
import { useDayPicker } from 'contexts/DayPicker';
import { Button } from '../Button';
/** The props for the {@link Navigation} component. */
export interface NavigationProps {
/** The month where the caption is displayed. */
displayMonth: Date;
/** The previous month. */
previousMonth?: Date;
/** The next month. */
nextMonth?: Date;
/** Hide the previous button. */
hidePrevious: boolean;
/** Hide the next button. */
hideNext: boolean;
/** Event handler when the next button is clicked. */
onNextClick: MouseEventHandler<HTMLButtonElement>;
/** Event handler when the previous button is clicked. */
onPreviousClick: MouseEventHandler<HTMLButtonElement>;
}
/** A component rendering the navigation buttons or the drop-downs. */
export function Navigation(props: NavigationProps): JSX.Element {
const {
dir,
locale,
classNames,
styles,
labels: { labelPrevious, labelNext },
components
} = useDayPicker();
if (!props.nextMonth && !props.previousMonth) {
return <></>;
}
const previousLabel = labelPrevious(props.previousMonth, { locale });
const previousClassName = [
classNames.nav_button,
classNames.nav_button_previous
].join(' ');
const nextLabel = labelNext(props.nextMonth, { locale });
const nextClassName = [
classNames.nav_button,
classNames.nav_button_next
].join(' ');
const IconRightComponent = components?.IconRight ?? IconRight;
const IconLeftComponent = components?.IconLeft ?? IconLeft;
return (
<div className={classNames.nav} style={styles.nav}>
{!props.hidePrevious && (
<Button
name="previous-month"
aria-label={previousLabel}
className={previousClassName}
style={styles.nav_button_previous}
disabled={!props.previousMonth}
onClick={props.onPreviousClick}
>
{dir === 'rtl' ? (
<IconRightComponent
className={classNames.nav_icon}
style={styles.nav_icon}
/>
) : (
<IconLeftComponent
className={classNames.nav_icon}
style={styles.nav_icon}
/>
)}
</Button>
)}
{!props.hideNext && (
<Button
name="next-month"
aria-label={nextLabel}
className={nextClassName}
style={styles.nav_button_next}
disabled={!props.nextMonth}
onClick={props.onNextClick}
>
{dir === 'rtl' ? (
<IconLeftComponent
className={classNames.nav_icon}
style={styles.nav_icon}
/>
) : (
<IconRightComponent
className={classNames.nav_icon}
style={styles.nav_icon}
/>
)}
</Button>
)}
</div>
);
}
|
