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.
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import { useState } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { Typography, Button } from 'antd'
|
|
import Tooltip from './Tooltip'
|
|
import CopyButton from './CopyButton'
|
|
import EyeIcon from '../../Icons/EyeIcon'
|
|
import EyeSlashIcon from '../../Icons/EyeSlashIcon'
|
|
|
|
const { Text } = Typography
|
|
|
|
const SecretDisplay = ({ value, reveal = false }) => {
|
|
const [visible, setVisible] = useState(false)
|
|
|
|
if (!value) {
|
|
return <Text type='secondary'>n/a</Text>
|
|
}
|
|
|
|
const masked = '•'.repeat(Math.max(8, value.length))
|
|
|
|
return (
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
|
<Text code>{reveal && visible ? value : masked}</Text>
|
|
{reveal && (
|
|
<Tooltip title={visible ? 'Hide' : 'Show'}>
|
|
<Button
|
|
type='text'
|
|
icon={visible ? <EyeSlashIcon /> : <EyeIcon />}
|
|
onClick={() => setVisible((v) => !v)}
|
|
size='small'
|
|
aria-label={visible ? 'Hide secret' : 'Show secret'}
|
|
/>
|
|
</Tooltip>
|
|
)}
|
|
{reveal && value && (
|
|
<CopyButton
|
|
text={value}
|
|
tooltip='Copy Secret'
|
|
style={{ marginLeft: 0 }}
|
|
iconStyle={{ fontSize: '14px' }}
|
|
/>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
SecretDisplay.propTypes = {
|
|
value: PropTypes.string,
|
|
reveal: PropTypes.bool
|
|
}
|
|
|
|
export default SecretDisplay
|