105 lines
2.7 KiB
TypeScript
Vendored
105 lines
2.7 KiB
TypeScript
Vendored
/*
|
|
Copyright (C) 2023-2026 QuantumNous
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
*/
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/components/ui/popover'
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type LongTextProps = {
|
|
children: React.ReactNode
|
|
className?: string
|
|
contentClassName?: string
|
|
}
|
|
|
|
export function LongText({
|
|
children,
|
|
className = '',
|
|
contentClassName = '',
|
|
}: LongTextProps) {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const [isOverflown, setIsOverflown] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (checkOverflow(ref.current)) {
|
|
setIsOverflown(true)
|
|
return
|
|
}
|
|
|
|
setIsOverflown(false)
|
|
}, [])
|
|
|
|
if (!isOverflown)
|
|
return (
|
|
<div ref={ref} className={cn('truncate', className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<div className='hidden sm:block'>
|
|
<TooltipProvider delay={0}>
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={<div ref={ref} className={cn('truncate', className)} />}
|
|
>
|
|
{children}
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p className={contentClassName}>{children}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
<div className='sm:hidden'>
|
|
<Popover>
|
|
<PopoverTrigger
|
|
render={<div ref={ref} className={cn('truncate', className)} />}
|
|
>
|
|
{children}
|
|
</PopoverTrigger>
|
|
<PopoverContent className={cn('w-fit', contentClassName)}>
|
|
<p>{children}</p>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const checkOverflow = (textContainer: HTMLDivElement | null) => {
|
|
if (textContainer) {
|
|
return (
|
|
textContainer.offsetHeight < textContainer.scrollHeight ||
|
|
textContainer.offsetWidth < textContainer.scrollWidth
|
|
)
|
|
}
|
|
return false
|
|
}
|