Tom Butcher
8ac04ac0bc
- Introduced a new Tooltip component to standardize tooltip functionality across the application, improving consistency and usability. - Refactored existing components to utilize the new Tooltip implementation, enhancing user interactions with clearer feedback. - Added a CursorTooltip for dynamic tooltip positioning based on mouse movement, improving user experience. - Updated CSS styles for tooltips and related components to enhance visual clarity and responsiveness. - Integrated TooltipProvider to manage tooltip state and visibility, streamlining tooltip management across the application.
72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Typography, Flex, Button } from 'antd'
|
|
import Tooltip from './Tooltip'
|
|
import LinkIcon from '../../Icons/LinkIcon'
|
|
import CopyButton from './CopyButton'
|
|
import ElipsisText from './ElipsisText'
|
|
|
|
const { Text, Link } = Typography
|
|
|
|
const UrlDisplay = ({ url, showCopy = true, showLink = false }) => {
|
|
if (!url) return <Text type='secondary'>n/a</Text>
|
|
|
|
return (
|
|
<>
|
|
<Flex style={{ minWidth: 0 }}>
|
|
{showLink ? (
|
|
<Link
|
|
href={url}
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
style={{
|
|
marginRight: 8,
|
|
minWidth: 0,
|
|
flex: 1,
|
|
overflow: 'hidden',
|
|
width: 0
|
|
}}
|
|
>
|
|
<ElipsisText style={{ display: 'block' }}>
|
|
{url}
|
|
</ElipsisText>
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<ElipsisText style={{ marginRight: 8, minWidth: 0 }}>
|
|
{url}
|
|
</ElipsisText>
|
|
<Tooltip title='Open URL'>
|
|
<Button
|
|
icon={<LinkIcon />}
|
|
type='text'
|
|
size='small'
|
|
style={{ minWidth: 25, flexShrink: 0 }}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
window.open(url, '_blank', 'noopener,noreferrer')
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</>
|
|
)}
|
|
{showCopy && (
|
|
<CopyButton
|
|
text={url}
|
|
tooltip='Copy URL'
|
|
style={{ marginLeft: 0 }}
|
|
iconStyle={{ fontSize: '14px' }}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|
|
|
|
UrlDisplay.propTypes = {
|
|
url: PropTypes.string,
|
|
showCopy: PropTypes.bool,
|
|
showLink: PropTypes.bool
|
|
}
|
|
|
|
export default UrlDisplay
|