Improve ripple for touch device (#9)

* Improve ripple for touch device

* Update patch for npm deploy

Author: sage1991

.changeset/silly-onions-deliver.md

@@ -0,0 +1,5 @@
+---
+"@crayon-ui/crayon": patch
+---
+
+Improve ripple for touch device

packages/crayon/src/components/Ripple/Ripple.styled.ts

@@ -15,49 +15,27 @@ interface RippleEffectProps {
   radius: number
   cx: number
   cy: number
-  mount?: boolean
+  timeout: number
 }
 
 export const RippleEffect = styled("span")<RippleEffectProps>(
-  ({ theme, color, radius, cx, cy, mount = true }) => css`
+  ({ theme, color, radius, cx, cy, timeout }) => css`
     position: absolute;
     left: ${cx - radius}px;
     top: ${cy - radius}px;
     background-color: ${theme.palette[color].light};
     border-radius: ${radius}px;
     width: ${radius * 2}px;
     height: ${radius * 2}px;
-    animation: ${scaleOut} 500ms ease-in-out, ${mount ? fadeIn : fadeOut} 500ms ease-in-out;
-    animation-fill-mode: forwards;
+    animation: ${scaleOut} ${timeout}ms ease-in-out;
   `
 )
 
 const scaleOut = keyframes`
   0% {
     transform: scale(0);
   }
-
   100% {
     transform: scale(1);
   }
 `
-
-const fadeIn = keyframes`
-  0% {
-    opacity: 0.2;
-  }
-
-  100% {
-    opacity: 0.4;
-  }
-`
-
-export const fadeOut = keyframes`
-  0% {
-    opacity: 0.4;
-  }
-
-  100% {
-    opacity: 0;
-  }
-`

packages/crayon/src/components/Ripple/Ripple.tsx

@@ -12,10 +12,10 @@ interface Props {
 }
 
 export const Ripple: FC<Props> = memo(({ children, ...props }) => {
-  const { bind, ripples } = useRipple(props)
+  const { bind, ripple } = useRipple(props)
   return (
     <RippleRoot {...bind()}>
-      {ripples}
+      {ripple}
       {children}
     </RippleRoot>
   )

packages/crayon/src/components/Ripple/useRipple.tsx

@@ -1,9 +1,51 @@
 import { distance } from "@crayon-ui/utils"
-import { AnimationEvent, PointerEvent, useCallback, useRef, useState } from "react"
+import {
+  createRef,
+  DragEventHandler,
+  FocusEvent,
+  FocusEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  Ref,
+  TouchEvent,
+  TouchEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react"
+import { TransitionGroup } from "react-transition-group"
 
 import { useMeasure } from "../../hooks"
 import { ColorVariant } from "../../theme"
-import { fadeOut, RippleEffect } from "./Ripple.styled"
+import { TweenTransition } from "../Transition"
+import { RippleEffect } from "./Ripple.styled"
+
+const delay = 80
+const timeout = 300
+const animation = {
+  timeout,
+  transition: `opacity ${timeout}ms ease-in-out`,
+  begin: {
+    opacity: 0
+  },
+  end: {
+    opacity: 0.4
+  }
+}
+
+interface BindRippleHandlers {
+  ref: Ref<HTMLElement>
+  onBlur: FocusEventHandler
+  onContextMenu: MouseEventHandler
+  onDragLeave: DragEventHandler
+  onMouseDown: MouseEventHandler
+  onMouseLeave: MouseEventHandler
+  onMouseUp: MouseEventHandler
+  onTouchEnd: TouchEventHandler
+  onTouchMove: TouchEventHandler
+  onTouchStart: TouchEventHandler
+}
 
 interface Props {
   color?: ColorVariant
@@ -12,76 +54,79 @@ interface Props {
 }
 
 export const useRipple = ({ color = "primary", center = false, disabled = false }: Props) => {
-  const rippleKey = useRef<string | null>()
-  const { measure, rect } = useMeasure<HTMLSpanElement>()
+  const { measure, rect } = useMeasure<HTMLElement>()
   const [ripples, setRipples] = useState<JSX.Element[]>([])
+  const isIgnoreMouseDown = useRef<boolean>(false)
+  const timer = useRef<NodeJS.Timeout>()
 
-  const removeRippleByKey = useCallback(
-    (key: string) => (e: AnimationEvent) => {
-      if (e.animationName === fadeOut.name) {
-        setRipples((prev) => prev.filter((effect) => effect.key !== key))
-      }
+  useEffect(
+    () => () => {
+      timer.current && clearTimeout(timer.current)
     },
     []
   )
 
-  const hide = useCallback(() => {
-    if (!rippleKey.current) {
-      return
+  const commit = useCallback((radius: number, cx: number, cy: number) => {
+    const ref = createRef<HTMLElement>()
+    setRipples((prev) => [
+      ...prev,
+      <TweenTransition {...animation} key={`${performance.now()}`}>
+        <RippleEffect ref={ref} color={color} radius={radius} cx={cx} cy={cy} timeout={timeout} />
+      </TweenTransition>
+    ])
+  }, [])
+
+  const stop = useCallback((e: FocusEvent | MouseEvent | TouchEvent) => {
+    if (e.type === "touchmove") {
+      timer.current && clearTimeout(timer.current)
     }
-    const key = rippleKey.current
-    rippleKey.current = null
-    setRipples((prev) =>
-      prev.map((ripple) => {
-        if (ripple.key !== key) {
-          return ripple
-        }
-        return (
-          <RippleEffect
-            key={key}
-            {...ripple.props}
-            mount={false}
-            onAnimationEnd={removeRippleByKey(key)}
-          />
-        )
-      })
-    )
-  }, [removeRippleByKey])
+    setRipples((prev) => (prev.length > 0 ? prev.slice(1) : prev))
+  }, [])
 
-  const show = useCallback(
-    ({ clientX, clientY }: PointerEvent<HTMLSpanElement>) => {
-      if (rippleKey.current) {
-        hide()
+  const start = useCallback(
+    (event: TouchEvent | MouseEvent) => {
+      const isTouchEvent = "touches" in event && event.touches.length > 0
+      if (!isTouchEvent && isIgnoreMouseDown.current) {
+        isIgnoreMouseDown.current = false
+        return
       }
+      isIgnoreMouseDown.current = isTouchEvent
+
       const { left, top, width, height } = rect()
+      const { clientX, clientY } = isTouchEvent ? event.touches[0] : (event as MouseEvent)
       const cx = center ? width / 2 : clientX - left
       const cy = center ? height / 2 : clientY - top
       const radius = distance([0, 0], [Math.max(cx, width - cx), Math.max(cy, height - cy)])
-      const key = `${performance.now()}`
-      rippleKey.current = key
-      setRipples((prev) => [
-        ...prev,
-        <RippleEffect key={key} color={color} radius={radius} cx={cx} cy={cy} />
-      ])
+      if (isTouchEvent) {
+        timer.current = setTimeout(() => commit(radius, cx, cy), delay)
+        return
+      }
+      commit(radius, cx, cy)
     },
-    [hide]
+    [stop]
   )
 
-  const bind = useCallback(() => {
+  const bind = useCallback((): Partial<BindRippleHandlers> => {
     if (disabled) {
       return measure()
     }
 
     return {
       ...measure(),
-      onPointerDown: show,
-      onPointerMove: hide,
-      onPointerUp: hide
+      onBlur: stop,
+      onContextMenu: stop,
+      onDragLeave: stop,
+      onMouseDown: start,
+      onMouseUp: stop,
+      onMouseLeave: stop,
+      onTouchStart: start,
+      onTouchMove: stop,
+      onTouchEnd: stop
     }
-  }, [measure, show, hide, disabled])
+  }, [measure, start, stop, disabled])
 
   return {
     bind,
-    ripples
+    ripple: <TransitionGroup component={null}>{ripples}</TransitionGroup>
   }
 }