Skip to content
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: drawer handle component #182

Merged
merged 18 commits into from
May 7, 2024

Conversation

rortan134
Copy link
Contributor

An optional complementary component. Implements Apple's grabber practices:

<Drawer.Handle />

  • Tapping on the handle cycles through the snap points if present, if not it closes it.
  • Double tapping on the handle immediately closes the drawer.

I added some style defaults but let me know if it's better without

Copy link

vercel bot commented Dec 10, 2023

@rortan134 is attempting to deploy a commit to the emil Team on Vercel.

A member of the Team first needs to authorize it.

if (snapPointsOffset && newIndex && typeof snapPointsOffset[newIndex] === 'number') {
snapToPoint(snapPointsOffset[newIndex] as number);
}
}
}, [activeSnapPointProp, snapPoints, snapPointsOffset, snapToPoint]);
}, [activeSnapPoint, activeSnapPointProp, snapPoints, snapPointsOffset, snapToPoint]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed in order to setActiveSnapPoint updates to sync

src/index.tsx Outdated Show resolved Hide resolved
@mlshv
Copy link

mlshv commented Jan 4, 2024

After attempting to integrate the drawer with my scrollable content, I've realized there are issues I'd prefer not to handle. The handle component addresses these by clearly separating content scrolling from drawer drag gestures.

Can you update this handle component to allow the drawer to be dragged exclusively by the handle?

@rortan134
Copy link
Contributor Author

Can you update this handle component to allow the drawer to be dragged exclusively by the handle?

I think that's alright as long as @emilkowalski is fine with it

@mlshv
Copy link

mlshv commented Jan 8, 2024

@emilkowalski

image

@emilkowalski
Copy link
Owner

@rortan134 This is so cool, could you update it based on @mlshv suggestions? We can also update the readme

@mlshv
Copy link

mlshv commented Jan 19, 2024

@rortan134 hey, do you need help with this? I am very interested in this being shipped, would be glad to assist 😌

@rortan134
Copy link
Contributor Author

I think a more composable approach would be to have a drawer.header that would handle the gestures and let the handle have its own interactions (tapping, etc.). This is fine though

chrome_shflXiBmiA chrome_gowIFhAq2I

@emilkowalski

@devjmetivier
Copy link

devjmetivier commented Jan 24, 2024

@rortan134 Great PR! I was just browsing the repo to see if I could contribute this.

I love your thoughts about on the more composable approach. If I could make one suggestion in referring to it as a "handle" instead of a "header". In the same way that Drawer.Trigger describes the utility of the trigger, I believe Drawer.Handle would do the same.

Edit: I re-read the code and your PR comment and you are calling it Drawer.Handle, lol

Let me know if I can help getting this across the finish line!

@emilkowalski
Copy link
Owner

@rortan134 I don't fully get your commen,t but the video on the right where the whole header is draggable makes more sense to me. Is this PR ready?

@rortan134
Copy link
Contributor Author

Should be, although the first vid is the default

@emilkowalski
Copy link
Owner

Hmm... seems like some tests are failing. @rortan134 Could you take a look please?

@JE-lee
Copy link

JE-lee commented Feb 27, 2024

It looks good. I hope to have this feature soon.

@emilkowalski
Copy link
Owner

Can we fix merge conflicts? Looks good otherwise!

@fabiodinota
Copy link

Don't wanna rush but would really love this feature so if I can do anything to help get this shipped, please let me know.

@emilkowalski emilkowalski merged commit e2cfd4d into emilkowalski:main May 7, 2024
1 of 2 checks passed
@arunavo4
Copy link

I would like to use this drawer below the content, can't seem to get it to work since my drawer direction is top.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants