Refactor ElipsisText component to integrate Tooltip for truncated text

- Updated the ElipsisText component to conditionally wrap truncated text in a Tooltip, enhancing user experience by providing additional context on hover.
- Simplified the rendering logic by consolidating the content structure, improving code readability and maintainability.
This commit is contained in:
Tom Butcher 2026-08-20 21:03:32 +01:00
parent 88d6ef6f13
commit d52a8eb570

View File

@ -1,6 +1,7 @@
import { useLayoutEffect, useRef, useState } from 'react' import { useLayoutEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Typography } from 'antd' import { Typography } from 'antd'
import Tooltip from './Tooltip'
const { Text } = Typography const { Text } = Typography
@ -70,29 +71,32 @@ const ElipsisText = ({ children, style, className, title, code, ...rest }) => {
const showTruncated = truncated && Boolean(end) const showTruncated = truncated && Boolean(end)
const RootTag = code ? 'code' : 'span' const RootTag = code ? 'code' : 'span'
const content = (
<span
className={showTruncated ? 'elipsis-text is-truncated' : 'elipsis-text'}
ref={containerRef}
>
<RootTag className='elipsis-text-measure' ref={measureRef}>
{text}
</RootTag>
<RootTag className='elipsis-text-full'>{text}</RootTag>
<RootTag className='elipsis-text-truncated'>
<span className='elipsis-text-start'>{start}</span>
<span className='elipsis-text-dots'>...</span>
<span className='elipsis-text-end'>
<span className='elipsis-text-end-inner'>{end}</span>
</span>
</RootTag>
</span>
)
return ( return (
<Text <Text
{...rest} {...rest}
className={['elipsis-text-wrapper', className].filter(Boolean).join(' ')} className={['elipsis-text-wrapper', className].filter(Boolean).join(' ')}
title={title ?? text}
style={style} style={style}
> >
<span {truncated ? <Tooltip title={title ?? text}>{content}</Tooltip> : content}
className={showTruncated ? 'elipsis-text is-truncated' : 'elipsis-text'}
ref={containerRef}
>
<RootTag className='elipsis-text-measure' ref={measureRef}>
{text}
</RootTag>
<RootTag className='elipsis-text-full'>{text}</RootTag>
<RootTag className='elipsis-text-truncated'>
<span className='elipsis-text-start'>{start}</span>
<span className='elipsis-text-dots'>...</span>
<span className='elipsis-text-end'>
<span className='elipsis-text-end-inner'>{end}</span>
</span>
</RootTag>
</span>
</Text> </Text>
) )
} }