LyAhn
827e1a8ecf
Mechanical one-shot pass of pnpm format over src/, tests/, tools/, and root configs. No functional changes; build and type-check verified.
35 lines
871 B
TypeScript
35 lines
871 B
TypeScript
import { useLayoutEffect, useRef, useState } from 'react'
|
|
import { Tooltip } from '../Tooltip'
|
|
|
|
export function TruncatedFilename({ filename }: { filename: string }) {
|
|
const textRef = useRef<HTMLParagraphElement>(null)
|
|
const [isTruncated, setIsTruncated] = useState(false)
|
|
|
|
useLayoutEffect(() => {
|
|
const text = textRef.current
|
|
if (!text) return
|
|
|
|
const update = () => {
|
|
setIsTruncated(text.scrollWidth > text.clientWidth)
|
|
}
|
|
|
|
update()
|
|
|
|
const observer = new ResizeObserver(update)
|
|
observer.observe(text)
|
|
return () => observer.disconnect()
|
|
}, [filename])
|
|
|
|
const label = (
|
|
<p ref={textRef} className="truncate text-[12px] leading-tight font-medium text-white">
|
|
{filename}
|
|
</p>
|
|
)
|
|
|
|
return (
|
|
<Tooltip label={filename} delay={500} block followCursor disabled={!isTruncated}>
|
|
{label}
|
|
</Tooltip>
|
|
)
|
|
}
|