diff --git a/src/index.tsx b/src/index.tsx index a751067..993b5cb 100644 --- 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 { + const [y, x] = position.split('-'); + const directions: Array = []; + + 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(function Toaster(props, re expanded={expanded} pauseWhenPageIsHidden={pauseWhenPageIsHidden} swipeDirections={props.swipeDirections} - y={props.y} /> ))} diff --git a/src/styles.css b/src/styles.css index de73e3f..034a253 100644 --- 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 index eb2434f..b1b06fe 100644 --- 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 index f74f8d9..6b3e645 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -20,7 +20,14 @@ export default function Home() { return (
- +