101 lines
3.8 KiB
JavaScript
101 lines
3.8 KiB
JavaScript
import React from 'react'
|
|
import { Select, Flex } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const countries = [
|
|
{ code: 'US', name: 'United States', flag: '🇺🇸' },
|
|
{ code: 'GB', name: 'United Kingdom', flag: '🇬🇧' },
|
|
{ code: 'CA', name: 'Canada', flag: '🇨🇦' },
|
|
{ code: 'AU', name: 'Australia', flag: '🇦🇺' },
|
|
{ code: 'DE', name: 'Germany', flag: '🇩🇪' },
|
|
{ code: 'FR', name: 'France', flag: '🇫🇷' },
|
|
{ code: 'IT', name: 'Italy', flag: '🇮🇹' },
|
|
{ code: 'ES', name: 'Spain', flag: '🇪🇸' },
|
|
{ code: 'JP', name: 'Japan', flag: '🇯🇵' },
|
|
{ code: 'CN', name: 'China', flag: '🇨🇳' },
|
|
{ code: 'BR', name: 'Brazil', flag: '🇧🇷' },
|
|
{ code: 'IN', name: 'India', flag: '🇮🇳' },
|
|
{ code: 'RU', name: 'Russia', flag: '🇷🇺' },
|
|
{ code: 'ZA', name: 'South Africa', flag: '🇿🇦' },
|
|
{ code: 'MX', name: 'Mexico', flag: '🇲🇽' },
|
|
{ code: 'AR', name: 'Argentina', flag: '🇦🇷' },
|
|
{ code: 'AT', name: 'Austria', flag: '🇦🇹' },
|
|
{ code: 'BE', name: 'Belgium', flag: '🇧🇪' },
|
|
{ code: 'BG', name: 'Bulgaria', flag: '🇧🇬' },
|
|
{ code: 'CL', name: 'Chile', flag: '🇨🇱' },
|
|
{ code: 'CY', name: 'Cyprus', flag: '🇨🇾' },
|
|
{ code: 'CZ', name: 'Czech Republic', flag: '🇨🇿' },
|
|
{ code: 'CO', name: 'Colombia', flag: '🇨🇴' },
|
|
{ code: 'DK', name: 'Denmark', flag: '🇩🇰' },
|
|
{ code: 'EG', name: 'Egypt', flag: '🇪🇬' },
|
|
{ code: 'FI', name: 'Finland', flag: '🇫🇮' },
|
|
{ code: 'GR', name: 'Greece', flag: '🇬🇷' },
|
|
{ code: 'HR', name: 'Croatia', flag: '🇭🇷' },
|
|
{ code: 'HK', name: 'Hong Kong', flag: '🇭🇰' },
|
|
{ code: 'HU', name: 'Hungary', flag: '🇭🇺' },
|
|
{ code: 'ID', name: 'Indonesia', flag: '🇮🇩' },
|
|
{ code: 'IE', name: 'Ireland', flag: '🇮🇪' },
|
|
{ code: 'IS', name: 'Iceland', flag: '🇮🇸' },
|
|
{ code: 'IL', name: 'Israel', flag: '🇮🇱' },
|
|
{ code: 'KR', name: 'South Korea', flag: '🇰🇷' },
|
|
{ code: 'MY', name: 'Malaysia', flag: '🇲🇾' },
|
|
{ code: 'MT', name: 'Malta', flag: '🇲🇹' },
|
|
{ code: 'NL', name: 'Netherlands', flag: '🇳🇱' },
|
|
{ code: 'NZ', name: 'New Zealand', flag: '🇳🇿' },
|
|
{ code: 'NO', name: 'Norway', flag: '🇳🇴' },
|
|
{ code: 'PE', name: 'Peru', flag: '🇵🇪' },
|
|
{ code: 'PH', name: 'Philippines', flag: '🇵🇭' },
|
|
{ code: 'PL', name: 'Poland', flag: '🇵🇱' },
|
|
{ code: 'PT', name: 'Portugal', flag: '🇵🇹' },
|
|
{ code: 'RO', name: 'Romania', flag: '🇷🇴' },
|
|
{ code: 'SA', name: 'Saudi Arabia', flag: '🇸🇦' },
|
|
{ code: 'SG', name: 'Singapore', flag: '🇸🇬' },
|
|
{ code: 'SI', name: 'Slovenia', flag: '🇸🇮' },
|
|
{ code: 'SK', name: 'Slovakia', flag: '🇸🇰' },
|
|
{ code: 'SE', name: 'Sweden', flag: '🇸🇪' },
|
|
{ code: 'CH', name: 'Switzerland', flag: '🇨🇭' },
|
|
{ code: 'TH', name: 'Thailand', flag: '🇹🇭' },
|
|
{ code: 'TR', name: 'Turkey', flag: '🇹🇷' },
|
|
{ code: 'AE', name: 'United Arab Emirates', flag: '🇦🇪' },
|
|
{ code: 'VN', name: 'Vietnam', flag: '🇻🇳' }
|
|
]
|
|
|
|
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.map((country) => ({
|
|
value: country.code,
|
|
name: country.name,
|
|
label: (
|
|
<Flex gap='middle'>
|
|
{country.flag} {country.name}
|
|
</Flex>
|
|
)
|
|
}))}
|
|
/>
|
|
)
|
|
}
|
|
|
|
CountrySelect.propTypes = {
|
|
value: PropTypes.string,
|
|
onChange: PropTypes.func,
|
|
style: PropTypes.object,
|
|
placeholder: PropTypes.string
|
|
}
|
|
|
|
export default CountrySelect
|