diff --git a/packages/component/src/components/notification-center/index.css.ts b/packages/component/src/components/notification-center/index.css.ts index ab80885ce..dc7cc02d7 100644 --- a/packages/component/src/components/notification-center/index.css.ts +++ b/packages/component/src/components/notification-center/index.css.ts @@ -2,25 +2,7 @@ // License on the MIT // https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css -import { - globalStyle, - keyframes, - style, - styleVariants, -} from '@vanilla-extract/css'; - -const swipeOut = keyframes({ - '0%': { - transform: - 'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)))', - opacity: 1, - }, - '100%': { - transform: - 'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%))', - opacity: 0, - }, -}); +import { globalStyle, style, styleVariants } from '@vanilla-extract/css'; export const notificationCenterViewportStyle = style({ position: 'fixed', @@ -62,16 +44,7 @@ export const notificationStyle = style({ opacity: '0 !important', pointerEvents: 'none', }, - '&[data-swiping=true]::before': { - content: '""', - position: 'absolute', - left: '0', - right: '0', - top: '50%', - height: '100%', - transform: 'scaleY(3) translateY(-50%)', - }, - '&[data-swiping=false][data-removed=true]::before': { + '&[data-removed=true]::before': { content: '""', position: 'absolute', inset: '0', @@ -98,38 +71,29 @@ export const notificationStyle = style({ '--y': 'translateY(calc(var(--lift) * var(--offset)))', }, }, - '&[data-removed=true][data-front=true][data-swipe-out=false]': { + '&[data-removed=true][data-front=true]': { opacity: 0, vars: { '--y': 'translateY(calc(var(--lift) * -100%))', }, }, - '&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]': - { - opacity: 0, - vars: { - '--y': - 'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))', - }, + '&[data-removed=true][data-front=false][data-expanded=true]': { + opacity: 0, + vars: { + '--y': + 'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))', }, - '&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] ': - { - transition: 'transform 500ms, opacity 200ms', - opacity: 0, - vars: { - '--y': 'translateY(40%)', - }, + }, + '&[data-removed=true][data-front=false][data-expanded=false] ': { + transition: 'transform 500ms, opacity 200ms', + opacity: 0, + vars: { + '--y': 'translateY(40%)', }, + }, '&[data-removed=true][data-front=false]::before ': { height: 'calc(var(--initial-height) + 20%)', }, - '&[data-swiping=true]': { - transform: 'var(--y) translateY(var(--swipe-amount, 0px))', - transition: 'none', - }, - '&[data-swipe-out=true]': { - animation: `${swipeOut} 0.3s ease-in-out forwards`, - }, }, vars: { '--y': 'translateY(100%)', diff --git a/packages/component/src/components/notification-center/index.tsx b/packages/component/src/components/notification-center/index.tsx index 11e7ec9f7..1d56f5388 100644 --- a/packages/component/src/components/notification-center/index.tsx +++ b/packages/component/src/components/notification-center/index.tsx @@ -73,8 +73,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement { // const setNotificationRemoveAnimation = useSetAtom(notificationRemoveAnimationAtom); const [mounted, setMounted] = useState(false); const [removed, setRemoved] = useState(false); - const [swiping, setSwiping] = useState(false); - const [swipeOut, setSwipeOut] = useState(false); const [offsetBeforeRemove, setOffsetBeforeRemove] = useState(0); const [initialHeight, setInitialHeight] = useState(0); const [animationKey, setAnimationKey] = useState(0); @@ -93,7 +91,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement { ); const duration = notification.timeout || 3000; const offset = useRef(0); - const pointerStartYRef = useRef(null); const notificationsHeightBefore = useMemo(() => { return heights.reduce((prev, curr, reducerIndex) => { @@ -235,8 +232,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement { data-visible={isVisible} data-index={index} data-front={isFront} - data-swiping={swiping} - data-swipe-out={swipeOut} data-expanded={expand} onMouseEnter={() => { setExpand(true); @@ -247,6 +242,8 @@ function NotificationCard(props: NotificationCardProps): ReactElement { onMouseLeave={() => { setExpand(false); }} + onSwipeEnd={event => event.preventDefault()} + onSwipeMove={event => event.preventDefault()} style={ { '--index': index, @@ -254,49 +251,9 @@ function NotificationCard(props: NotificationCardProps): ReactElement { '--z-index': notifications.length - index, '--offset': `${removed ? offsetBeforeRemove : offset.current}px`, '--initial-height': `${initialHeight}px`, + userSelect: 'auto', } as React.CSSProperties } - onPointerDown={event => { - setOffsetBeforeRemove(offset.current); - (event.target as HTMLElement).setPointerCapture(event.pointerId); - if ((event.target as HTMLElement).tagName === 'BUTTON') return; - setSwiping(true); - pointerStartYRef.current = event.clientY; - }} - onPointerUp={() => { - if (swipeOut) return; - const swipeAmount = Number( - notificationRef.current?.style - .getPropertyValue('--swipe-amount') - .replace('px', '') || 0 - ); - if (Math.abs(swipeAmount) >= 20) { - setOffsetBeforeRemove(offset.current); - onClickRemove(); - setSwipeOut(true); - return; - } - - notificationRef.current?.style.setProperty('--swipe-amount', '0px'); - pointerStartYRef.current = null; - setSwiping(false); - }} - onPointerMove={event => { - if (!pointerStartYRef.current) return; - const yPosition = event.clientY - pointerStartYRef.current; - - const isAllowedToSwipe = yPosition > 0; - - if (!isAllowedToSwipe) { - notificationRef.current?.style.setProperty('--swipe-amount', '0px'); - return; - } - - notificationRef.current?.style.setProperty( - '--swipe-amount', - `${yPosition}px` - ); - }} >