feat(calendar): add custom cell content to Calendar #3554
Conversation
… annotations for clarity
🦋 Changeset detectedLatest commit: 448ab55 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@1amageek is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe recent updates enhance the Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
|
#3313 was closed and the PR was remade. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (12)
- .changeset/popular-seals-appear.md (1 hunks)
- packages/components/calendar/tests/calendar.test.tsx (1 hunks)
- packages/components/calendar/tests/range-calendar.test.tsx (1 hunks)
- packages/components/calendar/src/calendar-base.tsx (4 hunks)
- packages/components/calendar/src/calendar-cell.tsx (5 hunks)
- packages/components/calendar/src/calendar-month.tsx (2 hunks)
- packages/components/calendar/src/calendar.tsx (2 hunks)
- packages/components/calendar/src/range-calendar.tsx (2 hunks)
- packages/components/calendar/src/use-calendar.ts (3 hunks)
- packages/components/calendar/src/use-range-calendar.ts (3 hunks)
- packages/components/calendar/stories/calendar.stories.tsx (2 hunks)
- packages/components/calendar/stories/range-calendar.stories.tsx (2 hunks)
Additional comments not posted (28)
.changeset/popular-seals-appear.md (1)
1-5: LGTM!The changeset correctly summarizes the new feature and updates made in the PR.
packages/components/calendar/src/calendar.tsx (2)
1-1: Import statement update looks good.The import statement now includes
CalendarDate, which is necessary for the newrenderCellContentprop.
10-12: Props interface update looks good.The
Propsinterface now includes the optionalrenderCellContentprop, allowing for custom cell content rendering.packages/components/calendar/src/range-calendar.tsx (2)
1-1: Import statement update looks good.The import statement now includes
CalendarDate, which is necessary for the newrenderCellContentprop.
17-19: Props interface update looks good.The
Propsinterface now includes the optionalrenderCellContentprop, allowing for custom cell content rendering.packages/components/calendar/src/use-range-calendar.ts (3)
20-22: LGTM!The addition of the
renderCellContentproperty to thePropsinterface is correct and aligns with the PR objectives.
27-28: LGTM!The updated function signature for
useRangeCalendarcorrectly integrates therenderCellContentproperty.
92-92: LGTM!The
renderCellContentproperty is correctly passed to thegetBaseCalendarPropsfunction, ensuring it is used within the calendar component.packages/components/calendar/src/calendar-month.tsx (3)
17-17: LGTM!The addition of the
renderCellContentproperty to theCalendarMonthPropsinterface is correct and aligns with the PR objectives.
21-21: LGTM!The updated function signature for
CalendarMonthcorrectly integrates therenderCellContentproperty.
58-58: LGTM!The
renderCellContentproperty is correctly passed to theCalendarCellcomponent, ensuring it is used within the calendar cells.packages/components/calendar/src/use-calendar.ts (3)
21-21: LGTM!The addition of the
renderCellContentproperty to thePropsinterface is correct and aligns with the PR objectives.
29-29: LGTM!The updated function signature for
useCalendarcorrectly integrates therenderCellContentproperty.
100-100: LGTM!The
renderCellContentproperty is correctly passed to thegetBaseCalendarPropsfunction, ensuring it is used within the calendar component.packages/components/calendar/src/calendar-cell.tsx (5)
20-20: Prop addition approved.The
renderCellContentprop is a valuable addition, enhancing the flexibility of theCalendarCellcomponent.
24-31: Destructuring approved.The destructuring of
originalPropsto includerenderCellContentis correctly implemented.
47-48: Usage ofotherPropsapproved.Forwarding
otherPropstouseCalendarCellensures that all remaining props are handled correctly.
54-72: Usage ofotherProps.dateapproved.Using
otherProps.datemaintains consistency with the destructured props and ensures correct determination of cell states.
101-101: Rendering logic approved.The rendering logic correctly uses
renderCellContentif provided, and falls back to the default formatted date otherwise.packages/components/calendar/src/calendar-base.tsx (3)
36-36: Prop addition approved.The
renderCellContentprop is a valuable addition, enhancing the flexibility of theCalendarBasecomponent.
52-52: Destructuring approved.The destructuring of
propsto includerenderCellContentis correctly implemented.
104-104: Usage ofrenderCellContentapproved.Passing the
renderCellContentprop toCalendarMonthensures that custom cell content rendering is propagated correctly.packages/components/calendar/stories/calendar.stories.tsx (2)
260-287: Template function approved.The
CustomCellTemplatefunction enhances the flexibility of the calendar display by allowing for distinct styling and width settings.
408-419: New export approved.The
CustomCellContentexport expands the functionality of the calendar component by providing more options for rendering and styling.packages/components/calendar/stories/range-calendar.stories.tsx (2)
291-318: Verify consistency and maintainability of styles and class names.Ensure that the inline styles and class names used in the
RangeCalendarcomponents are consistent with the rest of the application and maintainable in the long term.
441-452: LGTM! Verify the correctness of therenderCellContentfunction.The code changes are approved.
However, ensure that the
renderCellContentfunction correctly formats the date and integrates well with the rest of the application.packages/components/calendar/__tests__/calendar.test.tsx (1)
467-489: LGTM! The test logic is clear and effective.The test suite correctly verifies that the
Calendarcomponent can render custom content in its cells.packages/components/calendar/__tests__/range-calendar.test.tsx (1)
752-777: LGTM! The test logic is clear and effective.The test suite correctly verifies that the
RangeCalendarcomponent can render custom content in its cells.
There was a problem hiding this comment.
Thanks for the PR. Sorry for the late review. Overall it looks good and it could be much cleaner. Here's my comments.
- in
use-calendar.ts, please includerenderCellContentincontextso that you can retrieve from it instead of passing it from different places. - please add
renderCellContentinuse-calendar-base.ts. - since you've introduced a new prop, please also update the documentation.
- I think we may also show the dot when a cell is selected to make it look better
If you have any questions, free feel to ping me at discord. My ID is same as my github one.
| @@ -464,4 +464,27 @@ describe("Calendar", () => { | |||
| expect(year).toHaveAttribute("data-value", "2567"); | |||
| }); | |||
| }); | |||
| describe("Custom cell content", () => { | |||
| @@ -18,13 +18,15 @@ interface Props extends UseCalendarBaseProps { | |||
| * Props for the button picker, which is used to select the month, year and expand the header. | |||
| */ | |||
| buttonPickerProps?: ButtonProps; | |||
| renderCellContent?: (date: CalendarDate) => React.ReactNode; | |||
There was a problem hiding this comment.
remove this line and retrieve renderCellContent from useCalendarBase
| } | ||
|
|
||
| export type UseCalendarProps<T extends DateValue> = Props & AriaCalendarProps<T>; | ||
|
|
||
| export function useCalendar<T extends DateValue>({ | ||
| buttonPickerProps: buttonPickerPropsProp, | ||
| className, | ||
| renderCellContent, |
There was a problem hiding this comment.
remove this line and retrieve renderCellContent from useCalendarBase
| @@ -14,10 +14,11 @@ export interface CalendarMonthProps extends HTMLNextUIProps<"table">, CalendarPr | |||
| startDate: CalendarDate; | |||
| currentMonth: number; | |||
| direction: number; | |||
| renderCellContent?: (date: CalendarDate) => React.ReactNode; | |||
There was a problem hiding this comment.
remove this line. see comment in L58
| } | ||
|
|
||
| export function CalendarMonth(props: CalendarMonthProps) { | ||
| const {startDate, direction, currentMonth} = props; | ||
| const {startDate, direction, currentMonth, renderCellContent} = props; |
There was a problem hiding this comment.
undo this line - see comment in L58
| @@ -98,6 +101,7 @@ export function CalendarBase(props: CalendarBaseProps) { | |||
| key={`calendar-month-${i}`} | |||
| currentMonth={currentMonth.month} | |||
| direction={direction} | |||
| renderCellContent={renderCellContent} | |||
There was a problem hiding this comment.
you can directly retrieve renderCellContent from context in calendar-cell.tsx. therefore, there is no need to pass it all the way from base.
| @@ -3,6 +3,7 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system"; | |||
| import type {ButtonProps} from "@nextui-org/button"; | |||
| import type {HTMLAttributes, ReactNode, RefObject} from "react"; | |||
|
|
|||
| import {CalendarDate} from "@internationalized/date"; | |||
There was a problem hiding this comment.
remove this line. see comment in L104.
| @@ -54,6 +55,7 @@ export function CalendarMonth(props: CalendarMonthProps) { | |||
| currentMonth={startDate} | |||
| date={date} | |||
| isPickerVisible={isHeaderExpanded} | |||
| renderCellContent={renderCellContent} | |||
There was a problem hiding this comment.
you can directly retrieve renderCellContent from context in calendar-cell.tsx. therefore, there is no need to pass it from here.
| interface Props<T extends DateValue> extends Omit<UseCalendarProps<T>, "isHeaderWrapperExpanded"> { | ||
| renderCellContent?: (date: CalendarDate) => React.ReactNode; | ||
| } |
| @@ -95,6 +97,7 @@ export function useCalendar<T extends DateValue>({ | |||
| errorMessageProps: getErrorMessageProps(errorMessageProps), | |||
| className: slots.base({class: baseStyles}), | |||
| errorMessage, | |||
| renderCellContent, | |||
There was a problem hiding this comment.
remove this line - no need to pass to base. we retrieve from context instead.
📝 Description
This PR adds the ability to render custom content in calendar cells. It introduces a new
renderCellContentprop that allows developers to specify custom content for each calendar cell.⛳️ Current behavior (updates)
Currently, the calendar cells render only the default formatted date content, and there is no way to customize the content within each cell.
🚀 New behavior
With this PR, developers can pass a
renderCellContentfunction as a prop to theCalendarcomponent. This function receives the date of the cell and allows custom content to be rendered within the cell. IfrenderCellContentis not provided, the cell will fall back to rendering the default formatted date.💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
This update enhances the flexibility and customizability of the calendar component, allowing for a wide range of use cases where specific content needs to be displayed within calendar cells.
Summary by CodeRabbit
Summary by CodeRabbit
New Features
renderCellContentprop in bothCalendarandRangeCalendarcomponents, allowing for customized rendering of calendar cell content.Documentation
renderCellContentfeature with different configurations.