theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import Icon from '../../../../base/icons/components/Icon';
|
|
import { IconArrowDown } from '../../../../base/icons/svg';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* Country object of the entry.
|
|
*/
|
|
country: { code: string; dialCode: string; name: string; };
|
|
|
|
/**
|
|
* Click handler for the selector.
|
|
*/
|
|
onClick: () => void;
|
|
}
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
container: {
|
|
padding: '8px 10px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
cursor: 'pointer',
|
|
backgroundColor: theme.palette.ui01,
|
|
borderRight: `1px solid ${theme.palette.ui03}`,
|
|
color: theme.palette.text01,
|
|
...theme.typography.bodyShortRegular,
|
|
position: 'relative',
|
|
width: '88px',
|
|
borderTopLeftRadius: theme.shape.borderRadius,
|
|
borderBottomLeftRadius: theme.shape.borderRadius
|
|
},
|
|
|
|
text: {
|
|
flexGrow: 1
|
|
},
|
|
|
|
flag: {
|
|
marginRight: theme.spacing(2)
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* This component displays the country selector with the flag.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function CountrySelector({ country: { code, dialCode }, onClick }: IProps) {
|
|
const { classes, cx } = useStyles();
|
|
|
|
const onKeyPressHandler = useCallback(e => {
|
|
if (onClick && (e.key === ' ' || e.key === 'Enter')) {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
}, [ onClick ]);
|
|
|
|
return (
|
|
<div
|
|
className = { classes.container }
|
|
onClick = { onClick }
|
|
onKeyPress = { onKeyPressHandler }>
|
|
<div className = { cx(classes.flag, 'iti-flag', code) } />
|
|
<span className = { classes.text }>{`+${dialCode}`}</span>
|
|
<Icon
|
|
size = { 16 }
|
|
src = { IconArrowDown } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CountrySelector;
|