@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,MAAM;CAEnD,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;AAErE,iBAAgB;AACd,MAAI,CAAC,oBAAqB;EAE1B,MAAM,sBAAsB;GAC1B,MAAM,UAAU,QAAQ;AACxB,OAAI,CAAC,QAAS;GAEd,MAAM,OAAO,OAAO,aAAa,WAAW,SAAS,OAAO;AAC5D,OAAI,QAAQ,OAAO,EACjB,eAAc,QAAQ,eAAe,QAAQ,aAAa;OAE1D,eAAc,QAAQ,cAAc,QAAQ,YAAY;;AAI5D,iBAAe;EAEf,MAAM,iBAAiB,IAAI,eAAe,cAAc;AACxD,MAAI,QAAQ,QACV,gBAAe,QAAQ,QAAQ,QAAQ;AAGzC,eAAa,eAAe,YAAY;IACvC;EAAC;EAAqB;EAAU;EAAU;EAAQ,CAAC;AAEtD,QAAO"}