Skip to content

Commit

Permalink
feat: add PreviousMonthButton and NextMonthButton to custom components (
Browse files Browse the repository at this point in the history 
#2437)

feat: added PreviousMonthButton and NextMonthButton to custom components
  • Loading branch information
@gpbl
gpbl authored Sep 8, 2024
1 parent 80e1b21 commit cb39214
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 28 deletions.
8 changes: 4 additions & 4 deletions src/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function Nav(

return (
<nav {...navProps}>
<components.Button
<components.PreviousMonthButton
type="button"
className={classNames[UI.ButtonPrevious]}
tabIndex={previousMonth ? undefined : -1}
Expand All @@ -46,8 +46,8 @@ export function Nav(
className={classNames[UI.Chevron]}
orientation="left"
/>
</components.Button>
<components.Button
</components.PreviousMonthButton>
<components.NextMonthButton
type="button"
className={classNames[UI.ButtonNext]}
tabIndex={nextMonth ? undefined : -1}
Expand All @@ -60,7 +60,7 @@ export function Nav(
orientation="right"
className={classNames[UI.Chevron]}
/>
</components.Button>
</components.NextMonthButton>
</nav>
);
}
Expand Down
13 changes: 13 additions & 0 deletions src/components/NextMonthButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from "react";

/**
* Render the next month button element in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export function NextMonthButton(props: JSX.IntrinsicElements["button"]) {
return <button {...props} />;
}

export type NextMonthButtonProps = Parameters<typeof NextMonthButton>[0];
15 changes: 15 additions & 0 deletions src/components/PreviousMonthButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";

/**
* Render the previous month button element in the calendar.
*
* @group Components
* @see https://daypicker.dev/guides/custom-components
*/
export function PreviousMonthButton(props: JSX.IntrinsicElements["button"]) {
return <button {...props} />;
}

export type PreviousMonthButtonProps = Parameters<
typeof PreviousMonthButton
>[0];
2 changes: 2 additions & 0 deletions src/components/custom-components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
export * from "./Button.js";
export * from "./PreviousMonthButton.js";
export * from "./NextMonthButton.js";
export * from "./Chevron.js";
export * from "./CaptionLabel.js";
export * from "./Day.js";
Expand Down
4 changes: 4 additions & 0 deletions src/types/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ export type CustomComponents = {
Nav: typeof components.Nav;
/** Render the `<option>` HTML element in the dropdown. */
Option: typeof components.Option;
/** Render the previous month button element in the navigation. */
PreviousMonthButton: typeof components.PreviousMonthButton;
/** Render the next month button element in the navigation. */
NextMonthButton: typeof components.NextMonthButton;
/** Render the root element of the calendar. */
Root: typeof components.Root;
/** Render the select element in the dropdowns. */
Expand Down
50 changes: 26 additions & 24 deletions website/docs/guides/custom-components.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,30 +43,32 @@ Pass the components you want to customize to the `components` prop. This prop ac
<details>
<summary>List of Customizable Components</summary>

| Function | Description |
| ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`Button`](../api/functions/Button.md) | Render the button elements in the calendar. |
| [`CaptionLabel`](../api/functions/CaptionLabel.md) | Render the label in the month caption. |
| [`Chevron`](../api/functions/Chevron.md) | Render the chevron icon used in the navigation buttons and dropdowns. |
| [`Day`](../api/functions/Day.md) | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |
| [`DayButton`](../api/functions/DayButton.md) | Render the button for a day in the calendar. |
| [`Dropdown`](../api/functions/Dropdown.md) | Render a dropdown component to use in the navigation bar. |
| [`DropdownNav`](../api/functions/DropdownNav.md) | Render the the navigation dropdowns. |
| [`Footer`](../api/functions/Footer.md) | Component wrapping the footer. |
| [`Month`](../api/functions/Month.md) | Render the grid with the weekday header row and the weeks for the given month. |
| [`MonthCaption`](../api/functions/MonthCaption.md) | Render the caption of a month in the calendar. |
| [`MonthGrid`](../api/functions/MonthGrid.md) | Render the grid of days in a month. |
| [`Months`](../api/functions/Months.md) | Component wrapping the month grids. |
| [`Nav`](../api/functions/Nav.md) | Render the toolbar with the navigation button. |
| [`Option`](../api/functions/Option.md) | Render the `option` element. |
| [`Root`](../api/functions/Root.md) | Render the root element. |
| [`Select`](../api/functions/Select.md) | Render the `select` element. |
| [`Week`](../api/functions/Week.md) | Render a row in the calendar, with the days and the week number. |
| [`WeekNumber`](../api/functions/WeekNumber.md) | Render the cell with the number of the week. |
| [`WeekNumberHeader`](../api/functions/WeekNumberHeader.md) | Render the column header for the week numbers. |
| [`Weekday`](../api/functions/Weekday.md) | Render the column header with the weekday name (e.g. "Mo", "Tu", etc.). |
| [`Weekdays`](../api/functions/Weekdays.md) | Render the row with the weekday names. |
| [`Weeks`](../api/functions/Weeks.md) | Render the weeks in the month grid. |
| Function | Description |
| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| [`Button`](../api/functions/Button.md) | Render the button elements in the calendar. |
| [`CaptionLabel`](../api/functions/CaptionLabel.md) | Render the label in the month caption. |
| [`Chevron`](../api/functions/Chevron.md) | Render the chevron icon used in the navigation buttons and dropdowns. |
| [`Day`](../api/functions/Day.md) | Render the gridcell of a day in the calendar and handle the interaction and the focus with they day. |
| [`DayButton`](../api/functions/DayButton.md) | Render the button for a day in the calendar. |
| [`Dropdown`](../api/functions/Dropdown.md) | Render a dropdown component to use in the navigation bar. |
| [`DropdownNav`](../api/functions/DropdownNav.md) | Render the the navigation dropdowns. |
| [`Footer`](../api/functions/Footer.md) | Component wrapping the footer. |
| [`Month`](../api/functions/Month.md) | Render the grid with the weekday header row and the weeks for the given month. |
| [`MonthCaption`](../api/functions/MonthCaption.md) | Render the caption of a month in the calendar. |
| [`MonthGrid`](../api/functions/MonthGrid.md) | Render the grid of days in a month. |
| [`Months`](../api/functions/Months.md) | Component wrapping the month grids. |
| [`Nav`](../api/functions/Nav.md) | Render the toolbar with the navigation button. |
| [`NextMonthButton`](../api/functions/NextMonthButton.md) | Render the button to navigate to the next month. |
| [`Option`](../api/functions/Option.md) | Render the `option` element. |
| [`PreviousMonthButton`](../api/functions/PreviousMonthButton.md) | Render the button to navigate to the previous month. |
| [`Root`](../api/functions/Root.md) | Render the root element. |
| [`Select`](../api/functions/Select.md) | Render the `select` element. |
| [`Week`](../api/functions/Week.md) | Render a row in the calendar, with the days and the week number. |
| [`WeekNumber`](../api/functions/WeekNumber.md) | Render the cell with the number of the week. |
| [`WeekNumberHeader`](../api/functions/WeekNumberHeader.md) | Render the column header for the week numbers. |
| [`Weekday`](../api/functions/Weekday.md) | Render the column header with the weekday name (e.g. "Mo", "Tu", etc.). |
| [`Weekdays`](../api/functions/Weekdays.md) | Render the row with the weekday names. |
| [`Weeks`](../api/functions/Weeks.md) | Render the weeks in the month grid. |

</details>

Expand Down

0 comments on commit cb39214

Please sign in to comment.