jiti-meet/react/features/prejoin/components/DropdownButton.tsx

104 lines
2.1 KiB
TypeScript
Raw Normal View History

2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
import React from 'react';
import Icon from '../../base/icons/components/Icon';
type Props = {
/**
* The css classes generated from theme.
*/
classes: any;
/**
* Attribute used in automated testing.
*/
dataTestId: string;
/**
* The button's icon.
*/
icon: Function;
/**
* The button's label.
*/
label: string;
/**
* Function to be called when button is clicked.
*/
onButtonClick: (e?: React.MouseEvent) => void;
/**
* Function to be called on key pressed.
*/
onKeyPressed: (e?: React.KeyboardEvent) => void;
};
/**
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
2022-09-13 07:36:00 +00:00
const styles = (theme: Theme) => {
return {
prejoinPreviewDropdownBtn: {
alignItems: 'center',
color: '#1C2025',
cursor: 'pointer',
display: 'flex',
height: 40,
fontSize: 15,
lineHeight: '24px',
2022-09-13 07:36:00 +00:00
padding: '0 16px', // @ts-ignore
backgroundColor: theme.palette.field02,
2022-09-13 07:36:00 +00:00
'&:hover': { // @ts-ignore
backgroundColor: theme.palette.field02Hover
}
},
prejoinPreviewDropdownIcon: {
display: 'inline-block',
marginRight: 16,
'& > svg': {
fill: '#1C2025'
}
}
};
};
/**
* Buttons used for pre meeting actions.
*
* @returns {ReactElement}
*/
const DropdownButton = ({
classes,
dataTestId,
icon,
onButtonClick,
onKeyPressed,
label
}: Props) => (
<div
className = { classes.prejoinPreviewDropdownBtn }
data-testid = { dataTestId }
onClick = { onButtonClick }
onKeyPress = { onKeyPressed }
role = 'button'
tabIndex = { 0 }>
<Icon
className = { classes.prejoinPreviewDropdownIcon }
size = { 24 }
src = { icon } />
{label}
</div>
);
export default withStyles(styles)(DropdownButton);