-
-
Notifications
You must be signed in to change notification settings - Fork 697
/
WeekNumber.tsx
57 lines (48 loc) · 1.33 KB
/
WeekNumber.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
49
50
51
52
53
54
55
56
57
import { MouseEventHandler } from "react";
import { useDayPicker } from "../contexts/DayPicker";
import { Button } from "./Button";
/** The props for the {@link WeekNumber} component. */
export interface WeekNumberProps {
/** The number of the week. */
number: number;
/** The dates in the week. */
dates: Date[];
}
/**
* Render the week number element. If `onWeekNumberClick` is passed to
* DayPicker, it renders a button, otherwise a span element.
*/
export function WeekNumber(props: WeekNumberProps): JSX.Element {
const { number: weekNumber, dates } = props;
const {
onWeekNumberClick,
styles,
classNames,
locale,
labels: { labelWeekNumber },
formatters: { formatWeekNumber }
} = useDayPicker();
const content = formatWeekNumber(Number(weekNumber), { locale });
if (!onWeekNumberClick) {
return (
<span className={classNames.weeknumber} style={styles.weeknumber}>
{content}
</span>
);
}
const label = labelWeekNumber(Number(weekNumber), { locale });
const handleClick: MouseEventHandler = function (e) {
onWeekNumberClick(weekNumber, dates, e);
};
return (
<Button
name="week-number"
aria-label={label}
className={classNames.weeknumber}
style={styles.weeknumber}
onClick={handleClick}
>
{content}
</Button>
);
}