59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { makeStyles } from 'tss-react/mui';
|
|
|
|
import DialogPortal from './DialogPortal';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* The component(s) to be displayed within the drawer portal.
|
|
*/
|
|
children: ReactNode;
|
|
|
|
/**
|
|
* Class name used to add custom styles to the portal.
|
|
*/
|
|
className?: string;
|
|
}
|
|
|
|
const useStyles = makeStyles()(theme => {
|
|
return {
|
|
portal: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 351,
|
|
borderRadius: '16px 16px 0 0',
|
|
|
|
'&.notification-portal': {
|
|
zIndex: 901
|
|
},
|
|
|
|
'&::after': {
|
|
content: '""',
|
|
backgroundColor: theme.palette.toolboxBackground,
|
|
marginBottom: 'env(safe-area-inset-bottom, 0)'
|
|
}
|
|
}
|
|
};
|
|
});
|
|
|
|
/**
|
|
* Component meant to render a drawer at the bottom of the screen,
|
|
* by creating a portal containing the component's children.
|
|
*
|
|
* @returns {ReactElement}
|
|
*/
|
|
function JitsiPortal({ children, className }: IProps) {
|
|
const { classes, cx } = useStyles();
|
|
|
|
return (
|
|
<DialogPortal className = { cx(classes.portal, className) }>
|
|
{ children }
|
|
</DialogPortal>
|
|
);
|
|
}
|
|
|
|
export default JitsiPortal;
|