@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
228 lines (226 loc) • 7.54 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import { makeStyles } from 'tss-react/mui';
import CloseIconRounded from '@mui/icons-material/CloseRounded';
import MinimizeIconRounded from '@mui/icons-material/RemoveRounded';
import ArrowBack from '@mui/icons-material/ArrowBackIosRounded';
import React from 'react';
import Tooltip from '@mui/material/Tooltip';
import { defineMessages, useIntl } from 'react-intl';
import Action from '../DialogHeaderAction/DialogHeaderAction';
import OpenInFullIcon from '@mui/icons-material/OpenInFullRounded';
import Box from '@mui/material/Box';
const dialogTitleStyles = makeStyles()((theme) => ({
root: {
margin: 0,
display: 'flex',
flex: '0 0 auto',
flexWrap: 'wrap',
borderBottom: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(1),
background: theme.palette.background.paper,
...theme.mixins.toolbar
},
titleWrapper: {
display: 'flex',
width: '100%',
alignItems: 'center'
},
title: {
padding: `0 ${theme.spacing(1)}`,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
},
subtitle: {
fontSize: '14px',
lineHeight: '18px'
},
subtitleWrapper: {
padding: theme.spacing(1),
paddingTop: 0
},
leftActions: {
whiteSpace: 'nowrap'
},
rightActions: {
marginLeft: 'auto',
whiteSpace: 'nowrap'
},
backIcon: {}
}));
const translations = defineMessages({
back: {
id: 'words.back',
defaultMessage: 'Back'
},
dismiss: {
id: 'words.close',
defaultMessage: 'Close'
},
minimize: {
id: 'words.minimize',
defaultMessage: 'Minimize'
},
fullScreen: {
id: 'dialogHeader.toggleFullScreen',
defaultMessage: 'Toggle full screen'
}
});
export function DialogHeader(props) {
// region
const { classes, cx } = dialogTitleStyles();
const { formatMessage } = useIntl();
const {
id,
onCloseButtonClick,
onMinimizeButtonClick,
onFullScreenButtonClick,
disabled = false,
onBack,
title,
children,
subtitle,
leftActions,
rightActions,
closeIcon: CloseIcon = CloseIconRounded,
minimizeIcon: MinimizeIcon = MinimizeIconRounded,
fullScreenIcon: FullScreenIcon = OpenInFullIcon,
backIcon: BackIcon = ArrowBack,
titleTypographyProps = {
variant: 'h6',
component: 'h2'
},
subtitleTypographyProps = {
variant: 'subtitle1',
component: 'p'
},
className,
sxs
} = props;
// endregion
return React.createElement(
Box,
{ id: id, className: cx(className, classes.root, props.classes?.root), sx: sxs?.root },
React.createElement(
Box,
{ component: 'section', className: cx(classes.titleWrapper, props.classes?.titleWrapper), sx: sxs?.titleWrapper },
(leftActions || onBack) &&
React.createElement(
Box,
{ className: classes.leftActions, sx: sxs?.leftActions },
onBack &&
React.createElement(
Tooltip,
{ title: disabled ? '' : formatMessage(translations.back) },
React.createElement(
IconButton,
{
'aria-label': 'close',
onClick: onBack,
className: classes.backIcon,
sx: sxs?.backIcon,
size: 'large',
disabled: disabled
},
React.createElement(BackIcon, null)
)
),
leftActions?.map(({ icon, 'aria-label': tooltip, ...rest }, i) =>
React.createElement(Action, { key: i, icon: icon, tooltip: tooltip, disabled: disabled, ...rest })
)
),
React.createElement(Typography, { className: classes.title, ...titleTypographyProps, sx: sxs?.title }, title),
(rightActions || onCloseButtonClick || onMinimizeButtonClick || onFullScreenButtonClick) &&
React.createElement(
Box,
{ className: classes.rightActions, sx: sxs?.rightActions },
rightActions?.map(({ icon, 'aria-label': tooltip, ...rest }, i) =>
React.createElement(Action, { key: i, icon: icon, tooltip: tooltip, disabled: disabled, ...rest })
),
onMinimizeButtonClick &&
React.createElement(
Tooltip,
{ title: disabled ? '' : formatMessage(translations.minimize) },
React.createElement(
IconButton,
{ 'aria-label': 'close', onClick: onMinimizeButtonClick, disabled: disabled },
React.createElement(MinimizeIcon, null)
)
),
onFullScreenButtonClick &&
React.createElement(
Tooltip,
{ title: disabled ? '' : formatMessage(translations.fullScreen) },
React.createElement(
IconButton,
{ 'aria-label': 'close', onClick: onFullScreenButtonClick, disabled: disabled },
React.createElement(FullScreenIcon, null)
)
),
onCloseButtonClick &&
React.createElement(
Tooltip,
{ title: disabled ? '' : formatMessage(translations.dismiss) },
React.createElement(
IconButton,
{
'aria-label': 'close',
onClick: (event) => onCloseButtonClick(event, 'closeButton'),
disabled: disabled,
size: 'large'
},
React.createElement(CloseIcon, null)
)
)
)
),
(subtitle || children) &&
React.createElement(
Box,
{
component: 'section',
className: cx(classes.subtitleWrapper, props.classes?.subtitleWrapper),
sx: sxs?.subtitleWrapper
},
subtitle &&
React.createElement(
Typography,
{ className: classes.subtitle, ...subtitleTypographyProps, sx: sxs?.subtitle },
subtitle
),
children
)
);
}
export default DialogHeader;