File size: 2,554 Bytes
cf86710 | 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 | import React, {
type HTMLAttributes,
type MouseEventHandler,
useCallback,
} from "react";
import { UI } from "../UI.js";
import { useDayPicker } from "../useDayPicker.js";
/**
* Render the navigation toolbar with buttons to navigate between months.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export function Nav(
props: {
/** Handler for the previous month button click. */
onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
/** Handler for the next month button click. */
onNextClick?: MouseEventHandler<HTMLButtonElement>;
/** The date of the previous month, if available. */
previousMonth?: Date | undefined;
/** The date of the next month, if available. */
nextMonth?: Date | undefined;
} & HTMLAttributes<HTMLElement>,
) {
const {
onPreviousClick,
onNextClick,
previousMonth,
nextMonth,
...navProps
} = props;
const {
components,
classNames,
labels: { labelPrevious, labelNext },
} = useDayPicker();
const handleNextClick = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
if (nextMonth) {
onNextClick?.(e);
}
},
[nextMonth, onNextClick],
);
const handlePreviousClick = useCallback(
(e: React.MouseEvent<HTMLButtonElement>) => {
if (previousMonth) {
onPreviousClick?.(e);
}
},
[previousMonth, onPreviousClick],
);
return (
<nav {...navProps}>
<components.PreviousMonthButton
type="button"
className={classNames[UI.PreviousMonthButton]}
tabIndex={previousMonth ? undefined : -1}
aria-disabled={previousMonth ? undefined : true}
aria-label={labelPrevious(previousMonth)}
onClick={handlePreviousClick}
>
<components.Chevron
disabled={previousMonth ? undefined : true}
className={classNames[UI.Chevron]}
orientation="left"
/>
</components.PreviousMonthButton>
<components.NextMonthButton
type="button"
className={classNames[UI.NextMonthButton]}
tabIndex={nextMonth ? undefined : -1}
aria-disabled={nextMonth ? undefined : true}
aria-label={labelNext(nextMonth)}
onClick={handleNextClick}
>
<components.Chevron
disabled={nextMonth ? undefined : true}
orientation="right"
className={classNames[UI.Chevron]}
/>
</components.NextMonthButton>
</nav>
);
}
export type NavProps = Parameters<typeof Nav>[0];
|