-
-
Notifications
You must be signed in to change notification settings - Fork 697
/
CaptionLabel.tsx
41 lines (39 loc) · 1.01 KB
/
CaptionLabel.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
import { useDayPicker } from "../contexts/DayPicker";
/** The props for the {@link CaptionLabel} component. */
export interface CaptionLabelProps {
/**
* The ID for the heading element. Must be the same as the labelled-by in
* Table.
*/
id?: string;
/** The month where the caption is displayed. */
displayMonth: Date;
/**
* The index of the month where the caption is displayed. Older custom
* components may miss this prop.
*/
displayIndex?: number | undefined;
}
/**
* Render the caption for the displayed month. This component is used when
* `captionLayout="buttons"`.
*/
export function CaptionLabel(props: CaptionLabelProps): JSX.Element {
const {
locale,
classNames,
styles,
formatters: { formatCaption }
} = useDayPicker();
return (
<div
className={classNames.caption_label}
style={styles.caption_label}
aria-live="polite"
role="presentation"
id={props.id}
>
{formatCaption(props.displayMonth, { locale })}
</div>
);
}