jiti-meet/react/features/base/dialog/components/web/ModalHeader.tsx

173 lines
4.5 KiB
TypeScript
Raw Normal View History

/* eslint-disable lines-around-comment */
2021-01-14 16:12:08 +00:00
/* eslint-disable react/no-multi-comp */
import ErrorIcon from '@atlaskit/icon/glyph/error';
import WarningIcon from '@atlaskit/icon/glyph/warning';
import {
Header,
Title,
TitleText,
titleIconWrapperStyles
// @ts-ignore
2021-01-14 16:12:08 +00:00
} from '@atlaskit/modal-dialog/dist/es2019/styled/Content';
2022-09-13 07:36:00 +00:00
import { Theme } from '@mui/material';
import { withStyles } from '@mui/styles';
2021-01-14 16:12:08 +00:00
import React from 'react';
import { WithTranslation } from 'react-i18next';
2021-01-14 16:12:08 +00:00
import { translate } from '../../../i18n/functions';
import { IconClose } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import Button from '../../../ui/components/web/Button';
import { BUTTON_TYPES } from '../../../ui/constants';
2021-01-14 16:12:08 +00:00
const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning'; }) => {
2021-01-14 16:12:08 +00:00
if (!appearance) {
return null;
}
const IconSymbol = appearance === 'danger' ? ErrorIcon : WarningIcon;
return (
<span css = { titleIconWrapperStyles(appearance) }>
<IconSymbol label = { `${appearance} icon` } />
</span>
);
};
interface Props extends WithTranslation {
appearance?: 'danger' | 'warning';
classes: any;
heading: string;
hideCloseIconButton: boolean;
id?: string;
isHeadingMultiline: boolean;
onClose: (e?: any) => void;
showKeyline: boolean;
testId?: string;
2021-01-14 16:12:08 +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 {
closeButton: {
borderRadius: theme.shape.borderRadius,
cursor: 'pointer',
padding: 13,
2022-09-13 07:36:00 +00:00
[theme.breakpoints.down(480)]: {
background: theme.palette.action02
},
'&:hover': {
background: theme.palette.ui04
}
},
header: {
boxShadow: 'none',
'& h4': {
...withPixelLineHeight(theme.typography.heading5),
color: theme.palette.text01
}
}
};
};
2021-01-14 16:12:08 +00:00
/**
2021-11-04 21:10:43 +00:00
* A default header for modal-dialog components.
2021-01-14 16:12:08 +00:00
*
* @class ModalHeader
2021-11-04 21:10:43 +00:00
* @augments {React.Component<Props>}
2021-01-14 16:12:08 +00:00
*/
class ModalHeader extends React.Component<Props> {
2021-01-14 16:12:08 +00:00
static defaultProps = {
isHeadingMultiline: true
};
/**
* Initializes a new {@code ModalHeader} instance.
*
* @param {*} props - The read-only properties with which the new instance
* is to be initialized.
*/
constructor(props: Props) {
super(props);
// Bind event handler so it is only bound once for every instance.
this._onKeyPress = this._onKeyPress.bind(this);
}
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onKeyPress(e: React.KeyboardEvent) {
if (this.props.onClose && (e.key === ' ' || e.key === 'Enter')) {
e.preventDefault();
this.props.onClose();
}
}
2021-01-14 16:12:08 +00:00
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
id,
appearance,
classes,
2021-01-14 16:12:08 +00:00
heading,
hideCloseIconButton,
2021-01-14 16:12:08 +00:00
onClose,
showKeyline,
isHeadingMultiline,
testId,
t
2021-01-14 16:12:08 +00:00
} = this.props;
if (!heading) {
return null;
}
return (
<Header
className = { classes.header }
showKeyline = { showKeyline }>
2021-01-14 16:12:08 +00:00
<Title>
<TitleIcon appearance = { appearance } />
<TitleText
data-testid = { testId && `${testId}-heading` }
id = { id }
isHeadingMultiline = { isHeadingMultiline }>
{heading}
</TitleText>
</Title>
{
!hideCloseIconButton && <Button
accessibilityLabel = { t('dialog.close') }
icon = { IconClose }
id = 'modal-header-close-button'
onClick = { onClose }
size = 'large'
type = { BUTTON_TYPES.TERTIARY } />
}
2021-01-14 16:12:08 +00:00
</Header>
);
}
}
export default translate(withStyles(styles)(ModalHeader));