From 432e5974fc9e486bbdb6184071168df19be8e8b4 Mon Sep 17 00:00:00 2001 From: emilkowalski Date: Wed, 6 Sep 2023 14:07:49 +0200 Subject: [PATCH 1/2] Minimze the amount of getBoundingClientRect calls, optimize shouldDrag function --- src/index.tsx | 14 ++-- website/src/app/components/hero.tsx | 114 ++++++++-------------------- 2 files changed, 38 insertions(+), 90 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 792ea2c1..839e12f0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -92,6 +92,7 @@ function Root({ const keyboardIsOpen = React.useRef(false); const previousDiffFromInitial = React.useRef(0); const drawerRef = React.useRef(null); + const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0); const { onDrag: changeThemeColorOnDrag, onRelease: themeTransitionOnRelease } = useSafariThemeColor( drawerRef, overlayRef, @@ -130,7 +131,7 @@ function Root({ if (!dismissible) return; if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) return; - + drawerHeightRef.current = drawerRef.current?.getBoundingClientRect().height || 0; setIsDragging(true); dragStartTime.current = new Date(); @@ -146,6 +147,10 @@ function Root({ const highlightedText = window.getSelection()?.toString(); const swipeAmount = drawerRef.current ? getTranslateY(drawerRef.current) : null; + if (swipeAmount > 0) { + return true; + } + // Don't drag if there's highlighted text if (highlightedText && highlightedText.length > 0) { return false; @@ -175,7 +180,7 @@ function Root({ return false; } - if (isDraggingDown && element !== document.body && !swipeAmount && swipeAmount !== 0) { + if (isDraggingDown && element !== document.body && !swipeAmount && swipeAmount >= 0) { lastTimeDragPrevented.current = new Date(); // Element is scrolled to the top, but we are dragging down so we should allow scrolling @@ -199,8 +204,6 @@ function Root({ if (!shouldDrag(event.target, isDraggingDown)) return; - const drawerHeight = drawerRef.current?.getBoundingClientRect().height || 0; - set(drawerRef.current, { transition: 'none', }); @@ -216,7 +219,6 @@ function Root({ // Run this only if snapPoints are not defined or if we are at the last snap point (highest one) if (draggedDistance > 0 && !snapPoints) { const dampenedDraggedDistance = dampenValue(draggedDistance); - console.log(Math.min(dampenedDraggedDistance * -1, 0), 0); set(drawerRef.current, { transform: `translate3d(0, ${Math.min(dampenedDraggedDistance * -1, 0)}px, 0)`, @@ -228,7 +230,7 @@ function Root({ const absDraggedDistance = Math.abs(draggedDistance); const wrapper = document.querySelector('[vaul-drawer-wrapper]'); - let percentageDragged = absDraggedDistance / drawerHeight; + let percentageDragged = absDraggedDistance / drawerHeightRef.current; const snapPointPercentageDragged = getSnapPointsPercentageDragged(absDraggedDistance, isDraggingDown); if (snapPointPercentageDragged !== null) { diff --git a/website/src/app/components/hero.tsx b/website/src/app/components/hero.tsx index 77342c82..7cd1275f 100644 --- a/website/src/app/components/hero.tsx +++ b/website/src/app/components/hero.tsx @@ -51,90 +51,36 @@ export function Hero() { - -
-
-
- Drawer for React. -

- This component can be used as a Dialog replacement on mobile and tablet devices. -

-

- It comes unstyled, has gesture-driven animations, and is made by{' '} - - Emil Kowalski - - . -

-

- It uses{' '} - - Radix's Dialog primitive - {' '} - under the hood and is inspired by{' '} - - this tweet. - -

-
-
-
- + +
+ +

+ But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was + born and I will give you a complete account of the system, and expound the actual teachings of the + great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or + avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue + pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who + loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally + circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial + example, which of us ever undertakes laborious physical exercise, except to obtain some advantage + from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no + annoying consequences, or one who avoids a pain that produces no resultant pleasure? +

+ +

+ On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and + demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee + the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their + duty through weakness of will, which is the same as saying through shrinking from toil and pain. + These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice + is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is + to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty + or the obligations of business it will frequently occur that pleasures have to be repudiated and + annoyances accepted. The wise man therefore always holds in these matters to this principle of + selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid + worse pains. +

+
From 4cbe7dabd3274be922a96874f99792ce56925ab0 Mon Sep 17 00:00:00 2001 From: emilkowalski Date: Wed, 6 Sep 2023 16:35:57 +0200 Subject: [PATCH 2/2] Revert hero changes --- website/src/app/components/hero.tsx | 114 ++++++++++++++++++++-------- 1 file changed, 84 insertions(+), 30 deletions(-) diff --git a/website/src/app/components/hero.tsx b/website/src/app/components/hero.tsx index 7cd1275f..77342c82 100644 --- a/website/src/app/components/hero.tsx +++ b/website/src/app/components/hero.tsx @@ -51,36 +51,90 @@ export function Hero() { - -
- -

- But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was - born and I will give you a complete account of the system, and expound the actual teachings of the - great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or - avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue - pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who - loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally - circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial - example, which of us ever undertakes laborious physical exercise, except to obtain some advantage - from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no - annoying consequences, or one who avoids a pain that produces no resultant pleasure? -

- -

- On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and - demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee - the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their - duty through weakness of will, which is the same as saying through shrinking from toil and pain. - These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice - is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is - to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty - or the obligations of business it will frequently occur that pleasures have to be repudiated and - annoyances accepted. The wise man therefore always holds in these matters to this principle of - selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid - worse pains. -

- + +
+
+
+ Drawer for React. +

+ This component can be used as a Dialog replacement on mobile and tablet devices. +

+

+ It comes unstyled, has gesture-driven animations, and is made by{' '} + + Emil Kowalski + + . +

+

+ It uses{' '} + + Radix's Dialog primitive + {' '} + under the hood and is inspired by{' '} + + this tweet. + +

+
+
+