Skip to content

Commit

Permalink
chore: add threshold to start swipe (#72)
Browse files Browse the repository at this point in the history
Co-authored-by: Emil Kowalski <36730035+emilkowalski@users.noreply.github.com>
Co-authored-by: emilkowalski <e@emilkowal.ski>
  • Loading branch information
3 people committed May 24, 2023
1 parent 42e3112 commit 5cb703e
Showing 1 changed file with 19 additions and 14 deletions.
33 changes: 19 additions & 14 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const Toast = (props: ToastProps) => {
const offset = React.useRef(0);
const closeTimerRemainingTimeRef = React.useRef(duration);
const lastCloseTimerStartTimeRef = React.useRef(0);
const pointerStartYRef = React.useRef<number | null>(null);
const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
const [y, x] = position.split('-');
const toastsHeightBefore = React.useMemo(() => {
return heights.reduce((prev, curr, reducerIndex) => {
Expand Down Expand Up @@ -286,7 +286,7 @@ const Toast = (props: ToastProps) => {
(event.target as HTMLElement).setPointerCapture(event.pointerId);
if ((event.target as HTMLElement).tagName === 'BUTTON') return;
setSwiping(true);
pointerStartYRef.current = event.clientY;
pointerStartRef.current = { x: event.clientX, y: event.clientY };
}}
onPointerUp={() => {
if (swipeOut) return;
Expand All @@ -302,22 +302,27 @@ const Toast = (props: ToastProps) => {
}

toastRef.current?.style.setProperty('--swipe-amount', '0px');
pointerStartYRef.current = null;
pointerStartRef.current = null;
setSwiping(false);
}}
onPointerMove={(event) => {
if (!pointerStartYRef.current) return;

const yPosition = event.clientY - pointerStartYRef.current;

const isAllowedToSwipe = y === 'top' ? yPosition < 0 : yPosition > 0;
// We don't want to swipe to the left and vice versa depending on toast position
if (!isAllowedToSwipe) {
toastRef.current?.style.setProperty('--swipe-amount', '0px');
return;
if (!pointerStartRef.current) return;

const yPosition = event.clientY - pointerStartRef.current.y;
const xPosition = event.clientX - pointerStartRef.current.x;

const clamp = y === 'top' ? Math.min : Math.max;
const clampedY = clamp(0, yPosition);
const swipeStartThreshold = event.pointerType === 'touch' ? 10 : 2;
const isAllowedToSwipe = clampedY > swipeStartThreshold;

if (isAllowedToSwipe) {
toastRef.current?.style.setProperty('--swipe-amount', `${yPosition}px`);
} else if (Math.abs(xPosition) > swipeStartThreshold) {
// User is swiping in wrong direction so we disable swipe gesture
// for the current pointer down interaction
pointerStartRef.current = null;
}

toastRef.current?.style.setProperty('--swipe-amount', `${yPosition}px`);
}}
>
{closeButton && !toast.jsx ? (
Expand Down

0 comments on commit 5cb703e

Please sign in to comment.