adui/components/_util/hooks/use-active.ts

<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>

import { useRef } from "react"

export function useActive({ ref, delay = 200 }: { ref?: any; delay?: number }) {
  const activeTimeOutRef = useRef(0)

  const handleWindowMouseUp = () => {
    window.clearTimeout(activeTimeOutRef.current)
    window.removeEventListener("mouseup", handleWindowMouseUp)
  }

  const handleMouseDown = () => {
    window.addEventListener("mouseup", handleWindowMouseUp)

    if (ref && "current" in ref && ref.current) {
      delete ref.current.dataset.actived
    }

    activeTimeOutRef.current = window.setTimeout(() => {
      if (ref && "current" in ref && ref.current) {
        ref.current.dataset.actived = "true"
      }
    }, delay)
  }

  return {
    handleMouseDown,
  }
}