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.
39 lines
852 B
JavaScript
39 lines
852 B
JavaScript
import PropTypes from 'prop-types'
|
|
import { Flex } from 'antd'
|
|
import Flag from './Flag'
|
|
import countries from '../../../database/Countries'
|
|
import ElipsisText from './ElipsisText'
|
|
|
|
const CountryDisplay = ({ countryCode }) => {
|
|
const country = countries.find((c) => c.code === countryCode)
|
|
|
|
if (!country) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<Flex
|
|
gap={'small'}
|
|
align='center'
|
|
className='country-display'
|
|
style={{ minWidth: 0, width: '100%' }}
|
|
>
|
|
<Flag
|
|
code={country.code}
|
|
size='middle'
|
|
hasBorder={true}
|
|
borderRadius={5}
|
|
/>
|
|
<div style={{ minWidth: 0, flex: 1, overflow: 'hidden' }}>
|
|
<ElipsisText>{country.name}</ElipsisText>
|
|
</div>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
CountryDisplay.propTypes = {
|
|
countryCode: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default CountryDisplay
|