@grafana/ui/dist/esm/components/Text/TruncatedText.mjs.map

Grafana Components Library

{"version":3,"file":"TruncatedText.mjs","sources":["../../../../src/components/Text/TruncatedText.tsx"],"sourcesContent":["import { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport * as React from 'react';\nimport ReactDOMServer from 'react-dom/server';\n\nimport { Tooltip } from '../Tooltip/Tooltip';\n\ninterface TruncatedTextProps {\n  childElement: (ref: React.ForwardedRef<HTMLElement> | undefined) => React.ReactElement;\n  children: NonNullable<React.ReactNode>;\n}\n\nexport const TruncatedText = React.forwardRef<HTMLElement, TruncatedTextProps>(({ childElement, children }, ref) => {\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const internalRef = useRef<HTMLElement>(null);\n\n  // Wire up the forwarded ref to the internal ref\n  useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => internalRef.current);\n\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          if (entry.target.clientWidth && entry.target.scrollWidth) {\n            if (entry.target.scrollWidth > entry.target.clientWidth) {\n              setIsOverflowing(true);\n            }\n            if (entry.target.scrollWidth <= entry.target.clientWidth) {\n              setIsOverflowing(false);\n            }\n          }\n        }\n      }),\n    []\n  );\n\n  useEffect(() => {\n    const { current } = internalRef;\n    if (current) {\n      resizeObserver.observe(current);\n    }\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [setIsOverflowing, resizeObserver]);\n\n  const getTooltipText = (children: NonNullable<React.ReactNode>) => {\n    if (typeof children === 'string') {\n      return children;\n    }\n    const html = ReactDOMServer.renderToStaticMarkup(<>{children}</>);\n    return html.replace(/(<([^>]+)>)/gi, '');\n  };\n\n  if (isOverflowing) {\n    return (\n      <Tooltip ref={internalRef} content={getTooltipText(children)}>\n        {childElement(undefined)}\n      </Tooltip>\n    );\n  } else {\n    return childElement(internalRef);\n  }\n});\n\nTruncatedText.displayName = 'TruncatedText';\n"],"names":["children"],"mappings":";;;;;;AAWa,MAAA,aAAA,GAAgB,MAAM,UAA4C,CAAA,CAAC,EAAE,YAAc,EAAA,QAAA,IAAY,GAAQ,KAAA;AAClH,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,WAAA,GAAc,OAAoB,IAAI,CAAA;AAG5C,EAA4D,mBAAA,CAAA,GAAA,EAAK,MAAM,WAAA,CAAY,OAAO,CAAA;AAE1F,EAAA,MAAM,cAAiB,GAAA,OAAA;AAAA,IACrB,MACE,IAAI,cAAe,CAAA,CAAC,OAAY,KAAA;AAC9B,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,IAAI,KAAM,CAAA,MAAA,CAAO,WAAe,IAAA,KAAA,CAAM,OAAO,WAAa,EAAA;AACxD,UAAA,IAAI,KAAM,CAAA,MAAA,CAAO,WAAc,GAAA,KAAA,CAAM,OAAO,WAAa,EAAA;AACvD,YAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA;AAEvB,UAAA,IAAI,KAAM,CAAA,MAAA,CAAO,WAAe,IAAA,KAAA,CAAM,OAAO,WAAa,EAAA;AACxD,YAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AACxB;AACF;AACF,KACD,CAAA;AAAA,IACH;AAAC,GACH;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,EAAE,SAAY,GAAA,WAAA;AACpB,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAAA;AAEhC,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,UAAW,EAAA;AAAA,KAC5B;AAAA,GACC,EAAA,CAAC,gBAAkB,EAAA,cAAc,CAAC,CAAA;AAErC,EAAM,MAAA,cAAA,GAAiB,CAACA,SAA2C,KAAA;AACjE,IAAI,IAAA,OAAOA,cAAa,QAAU,EAAA;AAChC,MAAOA,OAAAA,SAAAA;AAAA;AAET,IAAA,MAAM,OAAO,cAAe,CAAA,oBAAA,iBAAwB,GAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAAA,WAAS,CAAG,CAAA;AAChE,IAAO,OAAA,IAAA,CAAK,OAAQ,CAAA,eAAA,EAAiB,EAAE,CAAA;AAAA,GACzC;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IACE,uBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,GAAA,EAAK,WAAa,EAAA,OAAA,EAAS,eAAe,QAAQ,CAAA,EACxD,QAAa,EAAA,YAAA,CAAA,KAAA,CAAS,CACzB,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAO,aAAa,WAAW,CAAA;AAAA;AAEnC,CAAC;AAED,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}