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:
parent
88d6ef6f13
commit
d52a8eb570
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user