-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(components): [modal] add draggable modal #2818
base: canary
Are you sure you want to change the base?
feat(components): [modal] add draggable modal #2818
Conversation
🦋 Changeset detectedLatest commit: 678d3e7 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 |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@wzc520pyfm is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
Warning Rate Limit Exceeded@wzc520pyfm has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 34 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughThe recent updates focus on enhancing modal components in a React application by introducing draggable functionality using Next.js UI. These changes encompass the addition of new hooks for dragging, updating modal components to support draggability, and improving documentation and examples to assist developers in effectively implementing and understanding the new features. Changes
Assessment against linked issues
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 Configration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- please lint your code
- please add changeset
- please show a video for demonstration
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good from the videos. Can you also add it in storybook and add some tests for it?
OK, I have finished. I added it in storybook and add three tests for draggable. Review pls. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please update pnpm-lock.yaml and make sure the build and tests can pass.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! I noticed that the dialog becomes immovable when the screen is resized to mobile dimensions. We'll need to address this behavior.
dialog-mobile-dimensions.mov
It looks like moveend is triggered in advance. I found that this seems to be caused by the conflict between modal's touchmove behavior and document.body's touchmove behavior. Maybe it can be solved by disabling the touchmove of document.body.🤔 |
@ryo-manba I have fixed it. Review pls. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The behavior looked good!
I just need a little more additional confirmation!
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- packages/hooks/use-draggable/src/index.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/hooks/use-draggable/src/index.ts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- packages/hooks/use-draggable/src/index.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/hooks/use-draggable/src/index.ts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!
@@ -0,0 +1,55 @@ | |||
{ | |||
"name": "@nextui-org/use-draggable", | |||
"version": "0.1.0", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jrgarciadev may confirm the initial version
Closes #2647
📝 Description
This pr adds dragging behavior to
modal
by providinguseDraggable
hook.⛳️ Current behavior (updates)
No
🚀 New behavior
This pr adds dragging behavior to
modal
by providinguseDraggable
hook.💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
No
👀Preview
Screen-2024-04-20-193626.mp4
Summary by CodeRabbit
New Features
DraggableTemplate
andDraggableOverflowTemplate
components for improved user interaction.Documentation
Tests