@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
275 lines (273 loc) • 9.22 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/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
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: Object.assign(
{
margin: 0,
display: 'flex',
flex: '0 0 auto',
flexWrap: 'wrap',
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
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) {
var _a, _b, _c;
// 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, (_a = props.classes) === null || _a === void 0 ? void 0 : _a.root),
sx: sxs === null || sxs === void 0 ? void 0 : sxs.root
},
React.createElement(
Box,
{
component: 'section',
className: cx(classes.titleWrapper, (_b = props.classes) === null || _b === void 0 ? void 0 : _b.titleWrapper),
sx: sxs === null || sxs === void 0 ? void 0 : sxs.titleWrapper
},
(leftActions || onBack) &&
React.createElement(
Box,
{ className: classes.leftActions, sx: sxs === null || sxs === void 0 ? void 0 : sxs.leftActions },
onBack &&
React.createElement(
Tooltip,
{ title: disabled ? '' : formatMessage(translations.back) },
React.createElement(
IconButton,
{
'aria-label': 'close',
onClick: onBack,
className: classes.backIcon,
sx: sxs === null || sxs === void 0 ? void 0 : sxs.backIcon,
size: 'large',
disabled: disabled
},
React.createElement(BackIcon, null)
)
),
leftActions === null || leftActions === void 0
? void 0
: leftActions.map((_a, i) => {
var { icon, 'aria-label': tooltip } = _a,
rest = __rest(_a, ['icon', 'aria-label']);
return React.createElement(
Action,
Object.assign({ key: i, icon: icon, tooltip: tooltip, disabled: disabled }, rest)
);
})
),
React.createElement(
Typography,
Object.assign({ className: classes.title }, titleTypographyProps, {
sx: sxs === null || sxs === void 0 ? void 0 : sxs.title
}),
title
),
(rightActions || onCloseButtonClick || onMinimizeButtonClick || onFullScreenButtonClick) &&
React.createElement(
Box,
{ className: classes.rightActions, sx: sxs === null || sxs === void 0 ? void 0 : sxs.rightActions },
rightActions === null || rightActions === void 0
? void 0
: rightActions.map((_a, i) => {
var { icon, 'aria-label': tooltip } = _a,
rest = __rest(_a, ['icon', 'aria-label']);
return React.createElement(
Action,
Object.assign({ 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,
(_c = props.classes) === null || _c === void 0 ? void 0 : _c.subtitleWrapper
),
sx: sxs === null || sxs === void 0 ? void 0 : sxs.subtitleWrapper
},
subtitle &&
React.createElement(
Typography,
Object.assign({ className: classes.subtitle }, subtitleTypographyProps, {
sx: sxs === null || sxs === void 0 ? void 0 : sxs.subtitle
}),
subtitle
),
children
)
);
}
export default DialogHeader;