jiti-meet/react/features/base/premeeting/components/web/ActionButton.tsx

258 lines
6.2 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 clsx from 'clsx';
import React, { ReactNode, useCallback } from 'react';
2020-05-20 08:25:31 +00:00
import Icon from '../../../icons/components/Icon';
import { IconArrowDown } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
2020-05-20 08:25:31 +00:00
type Props = {
/**
* Icon to display in the options section.
2020-05-20 08:25:31 +00:00
*/
OptionsIcon?: Function;
2020-05-20 08:25:31 +00:00
/**
* The Label of the child element.
*/
ariaDropDownLabel?: string;
2020-05-20 08:25:31 +00:00
/**
* The Label of the current element.
2020-05-20 08:25:31 +00:00
*/
ariaLabel?: string;
2020-05-20 08:25:31 +00:00
/**
* To give a aria-pressed to the icon.
2020-05-20 08:25:31 +00:00
*/
ariaPressed?: boolean;
2020-05-20 08:25:31 +00:00
/**
* Text of the button.
2020-05-20 08:25:31 +00:00
*/
children: ReactNode;
2020-05-20 08:25:31 +00:00
2020-09-29 11:00:30 +00:00
/**
* Text css class of the button.
2020-09-29 11:00:30 +00:00
*/
className?: string;
2020-09-29 11:00:30 +00:00
/**
* An object containing the CSS classes.
*/
classes: any;
2020-05-20 08:25:31 +00:00
/**
* If the button is disabled or not.
2020-05-20 08:25:31 +00:00
*/
disabled?: boolean;
2020-05-20 08:25:31 +00:00
/**
* If the button has options.
2020-05-20 08:25:31 +00:00
*/
hasOptions?: boolean;
2020-05-20 08:25:31 +00:00
2020-05-20 08:25:31 +00:00
/**
* OnClick button handler.
2020-05-20 08:25:31 +00:00
*/
onClick?: (e?: React.MouseEvent) => void;
/**
* Click handler for options.
*/
onOptionsClick?: (e?: React.KeyboardEvent | React.MouseEvent) => void;
/**
2021-11-04 21:10:43 +00:00
* To give a role to the icon.
*/
role?: string;
/**
* To navigate with the keyboard.
*/
tabIndex?: number;
/**
* TestId of the button. Can be used to locate element when testing UI.
*/
testId?: string;
/**
* The type of th button: primary, secondary, text.
*/
type: string;
2020-05-20 08:25:31 +00:00
};
/**
* 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 {
actionButton: {
...withPixelLineHeight(theme.typography.bodyLongBold),
borderRadius: theme.shape.borderRadius,
boxSizing: 'border-box',
color: theme.palette.text01,
cursor: 'pointer',
display: 'inline-block',
marginBottom: '16px',
padding: '7px 16px',
2022-09-13 07:36:00 +00:00
position: 'relative' as const,
textAlign: 'center',
width: '100%',
2022-07-18 08:40:16 +00:00
border: 0,
'&.primary': {
background: theme.palette.action01,
2022-07-18 08:40:16 +00:00
color: theme.palette.text01,
'&:hover': {
backgroundColor: theme.palette.action01Hover
}
},
'&.secondary': {
background: theme.palette.action02,
2022-07-18 08:40:16 +00:00
color: theme.palette.text04,
'&:hover': {
backgroundColor: theme.palette.action02Hover
}
},
'&.text': {
width: 'auto',
fontSize: '13px',
margin: '0',
padding: '0'
},
'&.disabled': {
background: theme.palette.disabled01,
border: '1px solid #5E6D7A',
color: '#AFB6BC',
cursor: 'initial',
'.icon': {
'& > svg': {
fill: '#AFB6BC'
}
}
},
2022-09-13 07:36:00 +00:00
[theme.breakpoints.down(400)]: {
fontSize: 16,
marginBottom: 8,
padding: '11px 16px'
}
},
options: {
2022-09-13 07:36:00 +00:00
borderRadius: Number(theme.shape.borderRadius) / 2,
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
2022-09-13 07:36:00 +00:00
position: 'absolute' as const,
right: 0,
top: 0,
width: 36,
'&:hover': {
backgroundColor: '#0262B6'
},
'& svg': {
pointerEvents: 'none'
}
}
};
};
2020-05-20 08:25:31 +00:00
/**
* Button used for pre meeting actions.
*
* @returns {ReactElement}
*/
function ActionButton({
children,
classes,
2020-05-20 08:25:31 +00:00
className = '',
disabled,
hasOptions,
2020-09-29 11:00:30 +00:00
OptionsIcon = IconArrowDown,
testId,
2020-05-20 08:25:31 +00:00
type = 'primary',
onClick,
onOptionsClick,
tabIndex,
role,
ariaPressed,
ariaLabel,
ariaDropDownLabel
2020-05-20 08:25:31 +00:00
}: Props) {
const onKeyPressHandler = useCallback(e => {
if (onClick && !disabled && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
onClick(e);
}
}, [ onClick, disabled ]);
const onOptionsKeyPressHandler = useCallback(e => {
if (onOptionsClick && !disabled && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
e.stopPropagation();
onOptionsClick(e);
}
}, [ onOptionsClick, disabled ]);
const containerClasses = clsx(
classes.actionButton,
className && className,
type,
disabled && 'disabled'
);
2020-05-20 08:25:31 +00:00
return (
<div
aria-disabled = { disabled }
aria-label = { ariaLabel }
className = { containerClasses }
data-testid = { testId ? testId : undefined }
onClick = { disabled ? undefined : onClick }
onKeyPress = { onKeyPressHandler }
role = 'button'
tabIndex = { 0 } >
2020-05-20 08:25:31 +00:00
{children}
{ hasOptions
&& <div
aria-disabled = { disabled }
aria-haspopup = 'true'
aria-label = { ariaDropDownLabel }
aria-pressed = { ariaPressed }
className = { classes.options }
data-testid = 'prejoin.joinOptions'
onClick = { disabled ? undefined : onOptionsClick }
onKeyPress = { onOptionsKeyPressHandler }
role = { role }
tabIndex = { tabIndex }>
<Icon
className = 'icon'
size = { 14 }
src = { OptionsIcon } />
</div>
2020-05-20 08:25:31 +00:00
}
</div>
);
}
export default withStyles(styles)(ActionButton);