refactor: add content to be selectable and remove swipe gesture (#3923)

Co-authored-by: JimmFly <yangjinfei001@gmail.com>

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 {
+import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
-  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,
-  },
-});
 
 export const notificationCenterViewportStyle = style({
   position: 'fixed',
@@ -62,16 +44,7 @@ export const notificationStyle = style({
       opacity: '0 !important',
       pointerEvents: 'none',
     },
-    '&[data-swiping=true]::before': {
+    '&[data-removed=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': {
       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]':
+    '&[data-removed=true][data-front=false][data-expanded=true]': {
-      {
+      opacity: 0,
-        opacity: 0,
+      vars: {
-        vars: {
+        '--y':
-          '--y':
+          'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))',
-            'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))',
-        },
       },
-    '&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] ':
+    },
-      {
+    '&[data-removed=true][data-front=false][data-expanded=false] ': {
-        transition: 'transform 500ms, opacity 200ms',
+      transition: 'transform 500ms, opacity 200ms',
-        opacity: 0,
+      opacity: 0,
-        vars: {
+      vars: {
-          '--y': 'translateY(40%)',
+        '--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%)',

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<boolean>(false);
   const [removed, setRemoved] = useState<boolean>(false);
-  const [swiping, setSwiping] = useState<boolean>(false);
-  const [swipeOut, setSwipeOut] = useState<boolean>(false);
   const [offsetBeforeRemove, setOffsetBeforeRemove] = useState<number>(0);
   const [initialHeight, setInitialHeight] = useState<number>(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<number | null>(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`
-        );
-      }}
     >
       <div
         className={clsx({