78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import { CaptionDropdowns } from 'components/CaptionDropdowns';
|
|
import { CaptionLabel } from 'components/CaptionLabel';
|
|
import { CaptionNavigation } from 'components/CaptionNavigation';
|
|
import { useDayPicker } from 'contexts/DayPicker';
|
|
|
|
/** Represent the props of the {@link Caption} component. */
|
|
export interface CaptionProps {
|
|
/** 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;
|
|
}
|
|
|
|
/**
|
|
* The layout of the caption:
|
|
*
|
|
* - `dropdown`: display dropdowns for choosing the month and the year.
|
|
* - `buttons`: display previous month / next month buttons.
|
|
* - `dropdown-buttons`: display both month / year dropdowns and previous month / next month buttons.
|
|
*/
|
|
export type CaptionLayout = 'dropdown' | 'buttons' | 'dropdown-buttons';
|
|
|
|
/**
|
|
* Render the caption of a month. The caption has a different layout when
|
|
* setting the {@link DayPickerBase.captionLayout} prop.
|
|
*/
|
|
export function Caption(props: CaptionProps): JSX.Element {
|
|
const { classNames, disableNavigation, styles, captionLayout, components } =
|
|
useDayPicker();
|
|
|
|
const CaptionLabelComponent = components?.CaptionLabel ?? CaptionLabel;
|
|
|
|
let caption: JSX.Element;
|
|
if (disableNavigation) {
|
|
caption = (
|
|
<CaptionLabelComponent id={props.id} displayMonth={props.displayMonth} />
|
|
);
|
|
} else if (captionLayout === 'dropdown') {
|
|
caption = (
|
|
<CaptionDropdowns displayMonth={props.displayMonth} id={props.id} />
|
|
);
|
|
} else if (captionLayout === 'dropdown-buttons') {
|
|
caption = (
|
|
<>
|
|
<CaptionDropdowns
|
|
displayMonth={props.displayMonth}
|
|
displayIndex={props.displayIndex}
|
|
id={props.id}
|
|
/>
|
|
<CaptionNavigation
|
|
displayMonth={props.displayMonth}
|
|
displayIndex={props.displayIndex}
|
|
id={props.id}
|
|
/>
|
|
</>
|
|
);
|
|
} else {
|
|
caption = (
|
|
<>
|
|
<CaptionLabelComponent
|
|
id={props.id}
|
|
displayMonth={props.displayMonth}
|
|
displayIndex={props.displayIndex}
|
|
/>
|
|
<CaptionNavigation displayMonth={props.displayMonth} id={props.id} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={classNames.caption} style={styles.caption}>
|
|
{caption}
|
|
</div>
|
|
);
|
|
}
|