feat(calendar): add CalendarPickerItem with auto-collapse on select #4021
Conversation
|
@ds-spec is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
|
WalkthroughThe pull request modifies the Changes
Possibly related PRs
Suggested reviewers
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
packages/components/calendar/src/calendar-picker-item.tsx(3 hunks)
🔇 Additional comments (2)
packages/components/calendar/src/calendar-picker-item.tsx (2)
12-13: LGTM: Clean import addition
The import is properly placed and necessary for the new functionality.
30-31: Verify CalendarProvider presence
The optional chaining on setIsHeaderExpanded suggests it might be undefined. Let's verify that this component is always used within a CalendarProvider context.
✅ Verification successful
Let me generate one more verification to check where CalendarPickerItem is being used within the component hierarchy.
CalendarPickerItem is properly wrapped within CalendarProvider
The verification shows that CalendarPickerItem is used within a proper context hierarchy:
- CalendarPickerItem is used inside CalendarPicker component
- CalendarPicker is rendered within CalendarBase
- CalendarBase is wrapped by CalendarProvider in both Calendar and RangeCalendar components
The optional chaining on setIsHeaderExpanded is just a defensive programming practice, not an indication of missing context. The component is properly integrated within the context hierarchy.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for CalendarProvider usage and CalendarPickerItem imports
echo "Checking CalendarProvider usage:"
rg -A 3 "CalendarProvider|CalendarContext.Provider"
echo -e "\nChecking CalendarPickerItem imports and usage:"
rg -A 3 "CalendarPickerItem"
Length of output: 5248
Script:
#!/bin/bash
# Check the calendar-picker.tsx implementation to see how CalendarPickerItem is used
echo "Checking calendar-picker.tsx implementation:"
cat packages/components/calendar/src/calendar-picker.tsx
# Check calendar-base.tsx to see how CalendarPicker is integrated
echo -e "\nChecking calendar-base.tsx implementation:"
cat packages/components/calendar/src/calendar-base.tsx
Length of output: 10041
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setIsHeaderExpanded?.(false); | ||
| }} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Preserve original onClick functionality
While the implementation achieves the auto-collapse objective, it overrides any existing onClick handler passed through props. Consider preserving the original functionality.
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- setIsHeaderExpanded?.(false);
- }}
+ onClick={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsHeaderExpanded?.(false);
+ otherProps.onClick?.(e);
+ }}Committable suggestion skipped: line range outside the PR's diff.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@wingkwong please review |
#4002
📝 Description
This pull request introduces an auto-collapse behavior to the CalendarPickerItem component within the DatePicker functionality. The new feature automatically collapses the header after a user selects either a month or year, streamlining the date selection process by reducing required user interactions.
⛳️ Current behavior (updates)
Currently, after selecting a year or month in the DatePicker:
The header remains expanded
Users need to manually collapse the header
Requires additional clicks to complete the date selection process
🚀 New behavior
With this enhancement:
Header automatically collapses after month selection
Header automatically collapses after year selection
Smoother transition between selection states
Reduced number of clicks needed to complete date selection
💣 Is this a breaking change (Yes/No):
No - This enhancement maintains backward compatibility while improving the user experience.
📝 Additional Information
Summary by CodeRabbit
New Features
CalendarPickerItemcomponent to control the expansion state of the calendar header through user interactions.Bug Fixes