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.
48 lines
1.2 KiB
JavaScript
48 lines
1.2 KiB
JavaScript
import { Select, Flex } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
import Flag from './Flag'
|
|
import countries from '../../../database/Countries'
|
|
import ElipsisText from './ElipsisText'
|
|
|
|
const CountrySelect = ({
|
|
value,
|
|
onChange,
|
|
style,
|
|
placeholder = 'Select country'
|
|
}) => {
|
|
return (
|
|
<Select
|
|
showSearch
|
|
style={{ width: '100%', ...style }}
|
|
placeholder={placeholder}
|
|
optionFilterProp='children'
|
|
value={value}
|
|
onChange={onChange}
|
|
filterOption={(input, option) =>
|
|
option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
}
|
|
options={countries
|
|
.sort((a, b) => a.name.localeCompare(b.name))
|
|
.map((country) => ({
|
|
value: country.code,
|
|
name: country.name,
|
|
label: (
|
|
<Flex gap='small' align='center' className='country-display'>
|
|
<Flag code={country.code} size='small' borderRadius={3} />
|
|
<ElipsisText>{country.name}</ElipsisText>
|
|
</Flex>
|
|
)
|
|
}))}
|
|
/>
|
|
)
|
|
}
|
|
|
|
CountrySelect.propTypes = {
|
|
value: PropTypes.string,
|
|
onChange: PropTypes.func,
|
|
style: PropTypes.object,
|
|
placeholder: PropTypes.string
|
|
}
|
|
|
|
export default CountrySelect
|