72 lines
1.7 KiB
TypeScript
72 lines
1.7 KiB
TypeScript
import React, { useCallback } from 'react';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* The target language code, or null for the "off" option.
|
|
*/
|
|
code: string | null;
|
|
|
|
/**
|
|
* The label to display.
|
|
*/
|
|
label: string;
|
|
|
|
/**
|
|
* Called with this item's code when it is selected.
|
|
*/
|
|
onSelect: (code: string | null) => void;
|
|
|
|
/**
|
|
* Whether this item is the currently-selected option.
|
|
*/
|
|
selected: boolean;
|
|
}
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
item: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
padding: '12px 16px',
|
|
cursor: 'pointer',
|
|
border: 'none',
|
|
background: 'none',
|
|
textAlign: 'left',
|
|
fontSize: '0.875rem',
|
|
color: theme.palette.text01,
|
|
borderRadius: `${theme.shape.borderRadius}px`,
|
|
'&:hover': {
|
|
backgroundColor: theme.palette.ui02
|
|
}
|
|
},
|
|
selected: {
|
|
fontWeight: 700,
|
|
color: theme.palette.link01
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* A single selectable language row in the audio-translation dialog.
|
|
*
|
|
* @param {IProps} props - The component's props.
|
|
* @returns {ReactElement}
|
|
*/
|
|
const AudioTranslationLanguageItem = ({ code, label, onSelect, selected }: IProps) => {
|
|
const { classes: styles, cx } = useStyles();
|
|
const onClick = useCallback(() => onSelect(code), [ code, onSelect ]);
|
|
|
|
return (
|
|
<button
|
|
className = { cx(styles.item, selected && styles.selected) }
|
|
onClick = { onClick }
|
|
type = 'button'>
|
|
{ label }
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default AudioTranslationLanguageItem;
|