useClickableCard() — supabase Function Reference

Architecture documentation for the useClickableCard() function in useClickableCard.ts from the supabase codebase.

Function typescript UtilityLibrary UIUtils called by 1

Entity Profile

UtilityLibrary→ UIUtils→ useClickableCard() — supabase Function Reference

Dependency Diagram

graph TD
  b4347b35_9662_64c5_5d7f_6532cd5d96f4["useClickableCard()"]
  09cc6bbd_ff8a_4068_0620_55b8a8b82fa7["Card()"]
  09cc6bbd_ff8a_4068_0620_55b8a8b82fa7 -->|calls| b4347b35_9662_64c5_5d7f_6532cd5d96f4
  style b4347b35_9662_64c5_5d7f_6532cd5d96f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/cms/src/utilities/useClickableCard.ts lines 22–106

function useClickableCard<T extends HTMLElement>({
  external = false,
  newTab = false,
  scroll = true,
}: Props): UseClickableCardType<T> {
  const router = useRouter()
  const card = useRef<T>(null)
  const link = useRef<HTMLAnchorElement>(null)
  const timeDown = useRef<number>(0)
  const hasActiveParent = useRef<boolean>(false)
  const pressedButton = useRef<number>(0)

  const handleMouseDown = useCallback(
    (e: MouseEvent) => {
      if (e.target) {
        const target = e.target as Element

        const timeNow = +new Date()
        const parent = target?.closest('a')

        pressedButton.current = e.button

        if (!parent) {
          hasActiveParent.current = false
          timeDown.current = timeNow
        } else {
          hasActiveParent.current = true
        }
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [router, card, link, timeDown]
  )

  const handleMouseUp = useCallback(
    (e: MouseEvent) => {
      if (link.current?.href) {
        const timeNow = +new Date()
        const difference = timeNow - timeDown.current

        if (link.current?.href && difference <= 250) {
          if (!hasActiveParent.current && pressedButton.current === 0 && !e.ctrlKey) {
            if (external) {
              const target = newTab ? '_blank' : '_self'
              window.open(link.current.href, target)
            } else {
              router.push(link.current.href, { scroll })
            }
          }
        }
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [router, card, link, timeDown]
  )

  useEffect(() => {
    const cardNode = card.current

    const abortController = new AbortController()

    if (cardNode) {
      cardNode.addEventListener('mousedown', handleMouseDown, {
        signal: abortController.signal,
      })
      cardNode.addEventListener('mouseup', handleMouseUp, {
        signal: abortController.signal,
      })
    }

    return () => {
      abortController.abort()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [card, link, router])

  return {
    card: {
      ref: card,
    },
    link: {
      ref: link,
    },
  }
}