Tom Butcher
d8c13426d1
- Introduced a new ElipsisText component to manage text overflow and truncation more effectively. - Replaced instances of the Text component with ElipsisText across various components including AddressDisplay, EmailDisplay, and FileList for consistent text handling. - Updated styles in multiple components to ensure proper layout and responsiveness when displaying long text.
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Typography, Flex, Button, Tooltip } from 'antd'
|
|
import NewMailIcon from '../../Icons/NewMailIcon'
|
|
// import CopyIcon from './CopyIcon'
|
|
import CopyButton from './CopyButton'
|
|
import ElipsisText from './ElipsisText'
|
|
|
|
const { Text, Link } = Typography
|
|
|
|
const EmailDisplay = ({ email, showCopy = true, showLink = false }) => {
|
|
if (!email) return <Text type='secondary'>n/a</Text>
|
|
|
|
return (
|
|
<>
|
|
<Flex style={{ minWidth: 0 }}>
|
|
{showLink ? (
|
|
<Link href={`mailto:${email}`} style={{ marginRight: 8 }}>
|
|
{email}
|
|
</Link>
|
|
) : (
|
|
<>
|
|
<ElipsisText style={{ marginRight: 8 }}>
|
|
{email}
|
|
</ElipsisText>
|
|
<Tooltip title='Email' arrow={false}>
|
|
<Button
|
|
icon={<NewMailIcon />}
|
|
type='text'
|
|
size='small'
|
|
style={{ minWidth: 25 }}
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
window.location.href = `mailto:${email}`
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
</>
|
|
)}
|
|
{showCopy && (
|
|
<CopyButton
|
|
text={email}
|
|
tooltip='Copy Email'
|
|
style={{ marginLeft: 0 }}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</>
|
|
)
|
|
}
|
|
|
|
EmailDisplay.propTypes = {
|
|
email: PropTypes.string,
|
|
showCopy: PropTypes.bool,
|
|
showLink: PropTypes.bool
|
|
}
|
|
|
|
export default EmailDisplay
|