tweaks

emilkowalski · Jan 15, 2025 · 37dff4c · 37dff4c
1 parent 0434498
commit 37dff4c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -9,6 +9,7 @@ import { toast, ToastState } from './state';
 import './styles.css';
 import {
   isAction,
+  SwipeDirection,
   type ExternalToast,
   type HeightT,
   type ToasterProps,
@@ -45,6 +46,25 @@ function cn(...classes: (string | undefined)[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+function getDefaultSwipeDirections(position: string): Array<SwipeDirection> {
+  const [y, x] = position.split('-');
+  const directions: Array<SwipeDirection> = [];
+
+  if (y === 'top') {
+    directions.push('top');
+  } else if (y === 'bottom') {
+    directions.push('bottom');
+  }
+
+  if (x === 'left') {
+    directions.push('left');
+  } else if (x === 'right') {
+    directions.push('right');
+  }
+
+  return directions;
+}
+
 const Toast = (props: ToastProps) => {
   const {
     invert: ToasterInvert,
@@ -315,16 +335,13 @@ const Toast = (props: ToastProps) => {
         );
         const timeTaken = new Date().getTime() - dragStartTime.current?.getTime();
 
-        // Calculate total swipe amount based on the locked direction
         const swipeAmount = swipeDirection === 'x' ? swipeAmountX : swipeAmountY;
         const velocity = Math.abs(swipeAmount) / timeTaken;
 
-        // Remove only if threshold is met
         if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
           setOffsetBeforeRemove(offset.current);
           toast.onDismiss?.(toast);
 
-          // Set the swipe out direction based on the movement
           if (swipeDirection === 'x') {
             setSwipeOutDirection(swipeAmountX > 0 ? 'right' : 'left');
           } else {
@@ -349,7 +366,7 @@ const Toast = (props: ToastProps) => {
         const yDelta = event.clientY - pointerStartRef.current.y;
         const xDelta = event.clientX - pointerStartRef.current.x;
 
-        const swipeDirections = props.swipeDirections ?? ['bottom', 'right'];
+        const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(position);
 
         // Determine swipe direction if not already locked
         if (!swipeDirection && (Math.abs(xDelta) > 5 || Math.abs(yDelta) > 5)) {
@@ -835,7 +852,6 @@ const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, re
                   expanded={expanded}
                   pauseWhenPageIsHidden={pauseWhenPageIsHidden}
                   swipeDirections={props.swipeDirections}
-                  y={props.y}
                 />
               ))}
           </ol>

diff --git a/src/styles.css b/src/styles.css
@@ -254,8 +254,8 @@
 :where([data-sonner-toast][data-swiping='true'])::before {
   content: '';
   position: absolute;
-  left: 0;
-  right: 0;
+  left: -50%;
+  right: -50%;
   height: 100%;
   z-index: -1;
 }

diff --git a/src/types.ts b/src/types.ts
@@ -130,6 +130,7 @@ export interface ToasterProps {
   offset?: Offset;
   mobileOffset?: Offset;
   dir?: 'rtl' | 'ltr' | 'auto';
+  swipeDirections?: SwipeDirection[];
   /**
    * @deprecated Please use the `icons` prop instead:
    * ```jsx
@@ -144,7 +145,7 @@ export interface ToasterProps {
   pauseWhenPageIsHidden?: boolean;
 }
 
-type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
+export type SwipeDirection = 'top' | 'right' | 'bottom' | 'left';
 
 export interface ToastProps {
   toast: ToastT;

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -20,7 +20,14 @@ export default function Home() {
   return (
     <div className="wrapper light">
       <Head />
-      <Toaster theme="light" richColors={richColors} closeButton={closeButton} expand={expand} position={position} />
+      <Toaster
+        theme="light"
+        richColors={richColors}
+        closeButton={closeButton}
+        expand={expand}
+        position={position}
+        swipeDirections={['bottom', 'left', 'right']}
+      />
       <main className="container">
         <Hero />
         <div className="content">