jiti-meet/react/features/prejoin/components/web/country-picker/CountrySelector.js

49 lines
1.1 KiB
JavaScript

// @flow
import React, { useCallback } from 'react';
import { Icon, IconArrowDown } from '../../../../base/icons';
type Props = {
/**
* Country object of the entry.
*/
country: { name: string, dialCode: string, code: string },
/**
* Click handler for the selector.
*/
onClick: Function,
};
/**
* This component displays the country selector with the flag.
*
* @returns {ReactElement}
*/
function CountrySelector({ country: { code, dialCode }, onClick }: Props) {
const onKeyPressHandler = useCallback(e => {
if (onClick && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
onClick();
}
}, [ onClick ]);
return (
<div
className = 'cpick-selector'
onClick = { onClick }
onKeyPress = { onKeyPressHandler }>
<div className = { `prejoin-dialog-flag iti-flag ${code}` } />
<span>{`+${dialCode}`}</span>
<Icon
className = 'cpick-icon'
size = { 16 }
src = { IconArrowDown } />
</div>
);
}
export default CountrySelector;