123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 |
- // @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;
|