feat(components): [modal] add draggable modal #2818

wzc520pyfm · 2024-04-20T10:39:41Z

Closes #2647

📝 Description

Add a brief description

This pr adds dragging behavior to modal by providing useDraggable hook.

⛳️ Current behavior (updates)

Please describe the current behavior that you are modifying

No

🚀 New behavior

Please describe the behavior or changes this PR adds

This pr adds dragging behavior to modal by providing useDraggable hook.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

No

👀Preview

Screen-2024-04-20-193626.mp4

Summary by CodeRabbit

New Features
- Enhanced modal components with draggable header functionality and overflow handling.
- Introduced DraggableTemplate and DraggableOverflowTemplate components for improved user interaction.
Documentation
- Updated modal documentation with import adjustments and behavior descriptions for draggable features.
Tests
- Added tests to ensure the correct functionality of draggable modals and overflow handling.

changeset-bot · 2024-04-20T10:39:44Z

🦋 Changeset detected

Latest commit: 678d3e7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@nextui-org/modal	Minor
@nextui-org/use-draggable	Minor
@nextui-org/react	Patch

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

vercel · 2024-04-20T10:39:45Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 1:05pm

vercel · 2024-04-20T10:39:46Z

@wzc520pyfm is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2024-04-20T10:39:49Z

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 2aff343 and 678d3e7.

Walkthrough

The 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

File Path	Change Summary
`.../modal/index.ts` `.../modal/src/index.ts`	Added imports and exports related to draggable functionality.
`.../modal.mdx` `.../modal/draggable*.ts`	Enhanced modal components with draggable features and updated documentation.
`.../modal/package.json` `.../use-draggable/package.json`	Added new dependencies for draggable functionality.
`.../modal/src/modal-header.tsx` `.../modal/__tests__/modal.test.tsx`	Updated modal header props and tests for draggable modals.
`.../use-draggable/*`	Introduced new hooks and configurations for handling draggable functionality.

Assessment against linked issues

Objective	Addressed	Explanation
Make modal draggable and change position [#2647]	✅
Implement draggable modals with overflow handling	✅

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?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 2

packages/hooks/use-draggable/CHANGELOG.md

wingkwong

please lint your code
please add changeset
please show a video for demonstration

packages/hooks/use-draggable/README.md

packages/hooks/use-draggable/CHANGELOG.md

coderabbitai

Actionable comments posted: 1

.changeset/soft-apricots-sleep.md

wingkwong

Looks good from the videos. Can you also add it in storybook and add some tests for it?

wzc520pyfm · 2024-04-21T09:49:48Z

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.

wingkwong

please update pnpm-lock.yaml and make sure the build and tests can pass.

…move

ryo-manba

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

packages/hooks/use-draggable/src/index.ts

wzc520pyfm · 2024-04-29T15:09:21Z

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.🤔

…verflow

wzc520pyfm · 2024-05-04T10:29:55Z

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.

ryo-manba

The behavior looked good!
I just need a little more additional confirmation!

packages/hooks/use-draggable/src/index.ts

packages/components/modal/__tests__/modal.test.tsx

Co-authored-by: Ryo Matsukawa <[email protected]>

coderabbitai

Actionable comments posted: 0

Review Details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between b85e591 and cd96af7.

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

coderabbitai

Actionable comments posted: 0

Review Details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between cd96af7 and 2aff343.

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

wzc520pyfm added 3 commits April 20, 2024 18:24

feat(hooks): add use-draggable hook

03b0fc5

feat(components): [modal] export use-draggable

a19945f

docs(components): [modal] add draggable modal

24aa1ce

wzc520pyfm requested a review from jrgarciadev as a code owner April 20, 2024 10:39

vercel bot had a problem deploying to Preview – nextui-storybook-v2 April 20, 2024 10:40 Failure

coderabbitai bot reviewed Apr 20, 2024

View reviewed changes

packages/hooks/use-draggable/CHANGELOG.md Outdated Show resolved Hide resolved

wingkwong requested changes Apr 20, 2024

View reviewed changes

packages/hooks/use-draggable/README.md Outdated Show resolved Hide resolved

packages/hooks/use-draggable/CHANGELOG.md Outdated Show resolved Hide resolved

wingkwong added the 🚧 Status: Changes Requested label Apr 20, 2024

wzc520pyfm added 3 commits April 20, 2024 18:57

feat(components): [modal] add ref prop for modal-header

34e2f53

chore(components): [modal] add draggable modal for storybook

56d6cf3

chore: add changeset for draggable modal

bf9ca51

vercel bot had a problem deploying to Preview – nextui-storybook-v2 April 20, 2024 11:47 Failure

docs(hooks): [use-draggable] fix typo

9bb1a89

coderabbitai bot reviewed Apr 20, 2024

View reviewed changes

.changeset/soft-apricots-sleep.md Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview – nextui-storybook-v2 April 20, 2024 11:49 Failure

chore: upper changeset

2ba3742

vercel bot had a problem deploying to Preview – nextui-storybook-v2 April 20, 2024 11:53 Failure

wzc520pyfm requested a review from wingkwong April 20, 2024 11:54

wingkwong requested changes Apr 21, 2024

View reviewed changes

wzc520pyfm added 2 commits April 21, 2024 13:30

chore(components): [modal] add overflow draggable modal to sb

0e9caa6

test(components): [modal] add draggable modal tests

a64ec22

wzc520pyfm requested a review from wingkwong April 21, 2024 09:49

wingkwong removed the 🚧 Status: Changes Requested label Apr 21, 2024

wingkwong reviewed Apr 21, 2024

View reviewed changes

wingkwong added the 🚧 Status: Changes Requested label Apr 21, 2024

wzc520pyfm added 2 commits April 25, 2024 22:13

feat(hooks): [use-draggable] remove repeated user-select

a9e9cac

test(components): [modal] update test case to use-draggable base use-…

a0e2b98

…move

vercel bot deployed to Preview – nextui-storybook-v2 April 25, 2024 14:16 View deployment

wzc520pyfm requested review from ryo-manba and wingkwong April 25, 2024 14:27

docs(components): [modal] update draggable examples

f0bddfa

vercel bot deployed to Preview – nextui-storybook-v2 April 25, 2024 14:36 View deployment

ryo-manba requested changes Apr 28, 2024

View reviewed changes

packages/hooks/use-draggable/src/index.ts Outdated Show resolved Hide resolved

wingkwong changed the base branch from main to canary April 28, 2024 14:47

wingkwong added the 🚧 Status: Changes Requested label Apr 28, 2024

fix(hooks): [use-draggable] fix mobile device touchmove event conflict

663aec4

vercel bot deployed to Preview – nextui-storybook-v2 April 29, 2024 15:42 View deployment

wzc520pyfm added 4 commits May 4, 2024 17:54

refactor(hooks): [use-draggable] remove drag ref prop

b46fd73

refactor(hooks): [use-draggable] draggable2is-disabled overflow2can-o…

142b3ff

…verflow

test(components): [modal] add draggble disable test

28b114b

chore(hooks): [use-draggable] add commant for body touchmove

b85e591

vercel bot deployed to Preview – nextui-storybook-v2 May 4, 2024 10:20 View deployment

wzc520pyfm requested a review from ryo-manba May 4, 2024 10:30

wingkwong removed the 🚧 Status: Changes Requested label May 4, 2024

ryo-manba reviewed May 7, 2024

View reviewed changes

packages/hooks/use-draggable/src/index.ts Outdated Show resolved Hide resolved

packages/components/modal/__tests__/modal.test.tsx Show resolved Hide resolved

Update packages/hooks/use-draggable/src/index.ts

cd96af7

Co-authored-by: Ryo Matsukawa <[email protected]>

coderabbitai bot reviewed May 8, 2024

View reviewed changes

fix(hooks): [use-draggable] import use-callback

2aff343

coderabbitai bot reviewed May 8, 2024

View reviewed changes

vercel bot deployed to Preview – nextui-storybook-v2 May 8, 2024 13:00 View deployment

test(components): [modal] add mobile-sized test for draggable

678d3e7

vercel bot deployed to Preview – nextui-storybook-v2 May 8, 2024 13:05 View deployment

wzc520pyfm requested a review from ryo-manba May 8, 2024 13:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): [modal] add draggable modal #2818

feat(components): [modal] add draggable modal #2818

wzc520pyfm commented Apr 20, 2024 •

edited by coderabbitai bot

changeset-bot bot commented Apr 20, 2024 •

edited

vercel bot commented Apr 20, 2024 •

edited

vercel bot commented Apr 20, 2024

coderabbitai bot commented Apr 20, 2024 •

edited

Rate Limit Exceeded

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

wingkwong left a comment

coderabbitai bot left a comment

wingkwong left a comment

wzc520pyfm commented Apr 21, 2024

wingkwong left a comment

ryo-manba left a comment

wzc520pyfm commented Apr 29, 2024

wzc520pyfm commented May 4, 2024

ryo-manba left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

feat(components): [modal] add draggable modal #2818

Are you sure you want to change the base?

feat(components): [modal] add draggable modal #2818

Conversation

wzc520pyfm commented Apr 20, 2024 • edited by coderabbitai bot

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

👀Preview

Summary by CodeRabbit

changeset-bot bot commented Apr 20, 2024 • edited

🦋 Changeset detected

vercel bot commented Apr 20, 2024 • edited

vercel bot commented Apr 20, 2024

coderabbitai bot commented Apr 20, 2024 • edited

Rate Limit Exceeded

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

wingkwong left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

wingkwong left a comment

Choose a reason for hiding this comment

wzc520pyfm commented Apr 21, 2024

wingkwong left a comment

Choose a reason for hiding this comment

ryo-manba left a comment

Choose a reason for hiding this comment

wzc520pyfm commented Apr 29, 2024

wzc520pyfm commented May 4, 2024

ryo-manba left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

wzc520pyfm commented Apr 20, 2024 •

edited by coderabbitai bot

changeset-bot bot commented Apr 20, 2024 •

edited

vercel bot commented Apr 20, 2024 •

edited

coderabbitai bot commented Apr 20, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)