-
-
Notifications
You must be signed in to change notification settings - Fork 720
/
CaptionLabel.tsx
32 lines (29 loc) · 881 Bytes
/
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
import React from 'react';
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;
}
/** 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>
);
}