選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

CountrySelector.js 1.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. // @flow
  2. import React, { useCallback } from 'react';
  3. import { Icon, IconArrowDown } from '../../../../base/icons';
  4. type Props = {
  5. /**
  6. * Country object of the entry.
  7. */
  8. country: { name: string, dialCode: string, code: string },
  9. /**
  10. * Click handler for the selector.
  11. */
  12. onClick: Function,
  13. };
  14. /**
  15. * This component displays the country selector with the flag.
  16. *
  17. * @returns {ReactElement}
  18. */
  19. function CountrySelector({ country: { code, dialCode }, onClick }: Props) {
  20. const onKeyPressHandler = useCallback(e => {
  21. if (onClick && (e.key === ' ' || e.key === 'Enter')) {
  22. e.preventDefault();
  23. onClick();
  24. }
  25. }, [ onClick ]);
  26. return (
  27. <div
  28. className = 'cpick-selector'
  29. onClick = { onClick }
  30. onKeyPress = { onKeyPressHandler }>
  31. <div className = { `prejoin-dialog-flag iti-flag ${code}` } />
  32. <span>{`+${dialCode}`}</span>
  33. <Icon
  34. className = 'cpick-icon'
  35. size = { 16 }
  36. src = { IconArrowDown } />
  37. </div>
  38. );
  39. }
  40. export default CountrySelector;