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

258 lines
6.0 KiB
JavaScript
Raw Normal View History

2020-05-20 08:25:31 +00:00
// @flow
import { withStyles } from '@material-ui/styles';
import clsx from 'clsx';
import React, { useCallback } from 'react';
2020-05-20 08:25:31 +00:00
import { Icon, IconArrowDown } from '../../../icons';
import { withPixelLineHeight } from '../../../styles/functions.web';
2020-05-20 08:25:31 +00:00
type Props = {
/**
* Text of the button.
*/
children: React$Node,
/**
* An object containing the CSS classes.
*/
classes: Object,
2020-05-20 08:25:31 +00:00
/**
* Text css class of the button.
*/
className?: string,
/**
* If the button is disabled or not.
*/
disabled?: boolean,
/**
* If the button has options.
*/
hasOptions?: boolean,
2020-09-29 11:00:30 +00:00
/**
* Icon to display in the options section.
*/
OptionsIcon?: React$Node,
/**
* TestId of the button. Can be used to locate element when testing UI.
*/
testId?: string,
2020-05-20 08:25:31 +00:00
/**
* The type of th button: primary, secondary, text.
*/
type: string,
/**
* OnClick button handler.
*/
onClick: Function,
2020-05-20 08:25:31 +00:00
/**
* Click handler for options.
*/
onOptionsClick?: Function,
/**
2021-11-04 21:10:43 +00:00
* To navigate with the keyboard.
*/
tabIndex?: number,
/**
2021-11-04 21:10:43 +00:00
* To give a role to the icon.
*/
role?: string,
/**
2021-11-04 21:10:43 +00:00
* To give a aria-pressed to the icon.
*/
ariaPressed?: boolean,
/**
2021-11-04 21:10:43 +00:00
* The Label of the current element.
*/
ariaLabel?: string,
/**
2021-11-04 21:10:43 +00:00
* The Label of the child element.
*/
ariaDropDownLabel?: string
2020-05-20 08:25:31 +00:00
};
/**
* Creates the styles for the component.
*
* @param {Object} theme - The current UI theme.
*
* @returns {Object}
*/
const styles = 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',
position: 'relative',
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'
}
}
},
[theme.breakpoints.down('400')]: {
fontSize: 16,
marginBottom: 8,
padding: '11px 16px'
}
},
options: {
borderRadius: theme.shape.borderRadius / 2,
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
position: 'absolute',
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);