@lobehub/ui/es/hooks/useTextOverflow.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"useTextOverflow.mjs","names":[],"sources":["../../src/hooks/useTextOverflow.ts"],"sourcesContent":["import { type ReactNode, type RefObject, useEffect, useState } from 'react';\n\ninterface EllipsisConfig {\n  rows?: number;\n  tooltipWhenOverflow?: boolean;\n}\n\nexport const useTextOverflow = <T extends HTMLElement = HTMLElement>(\n  textRef: RefObject<T | null>,\n  ellipsis: boolean | EllipsisConfig | undefined,\n  children: ReactNode,\n) => {\n  const [isOverflow, setIsOverflow] = useState(false);\n\n  const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n  useEffect(() => {\n    if (!tooltipWhenOverflow) return;\n\n    const checkOverflow = () => {\n      const element = textRef.current;\n      if (!element) return;\n\n      const rows = typeof ellipsis === 'object' ? ellipsis.rows : undefined;\n      if (rows && rows > 1) {\n        setIsOverflow(element.scrollHeight > element.clientHeight);\n      } else {\n        setIsOverflow(element.scrollWidth > element.clientWidth);\n      }\n    };\n\n    checkOverflow();\n\n    const resizeObserver = new ResizeObserver(checkOverflow);\n    if (textRef.current) {\n      resizeObserver.observe(textRef.current);\n    }\n\n    return () => resizeObserver.disconnect();\n  }, [tooltipWhenOverflow, ellipsis, children, textRef]);\n\n  return isOverflow;\n};\n"],"mappings":";;AAOA,MAAa,mBACX,SACA,UACA,aACG;CACH,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;CAErE,gBAAgB;EACd,IAAI,CAAC,qBAAqB;EAE1B,MAAM,sBAAsB;GAC1B,MAAM,UAAU,QAAQ;GACxB,IAAI,CAAC,SAAS;GAEd,MAAM,OAAO,OAAO,aAAa,WAAW,SAAS,OAAO,KAAA;GAC5D,IAAI,QAAQ,OAAO,GACjB,cAAc,QAAQ,eAAe,QAAQ,YAAY;QAEzD,cAAc,QAAQ,cAAc,QAAQ,WAAW;EAE3D;EAEA,cAAc;EAEd,MAAM,iBAAiB,IAAI,eAAe,aAAa;EACvD,IAAI,QAAQ,SACV,eAAe,QAAQ,QAAQ,OAAO;EAGxC,aAAa,eAAe,WAAW;CACzC,GAAG;EAAC;EAAqB;EAAU;EAAU;CAAO,CAAC;CAErD,OAAO;AACT"}