@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
90 lines (88 loc) • 3.29 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 { useIntl } from 'react-intl';
import React, { Suspense } from 'react';
import { makeStyles } from 'tss-react/mui';
import Typography from '@mui/material/Typography';
import ChevronLeftRounded from '@mui/icons-material/ChevronLeftRounded';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import { popToolsPanelPage } from '../../state/actions/preview';
import { useDispatch } from 'react-redux';
import { ErrorBoundary } from '../ErrorBoundary';
const useStyles = makeStyles()((theme) => ({
panelHeader: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing(0, 1),
...theme.mixins.toolbar,
justifyContent: 'flex-start'
}
}));
export const PanelHeader = (props) => {
const { classes } = useStyles();
const { title, BackIcon = ChevronLeftRounded, onBack } = props;
return React.createElement(
React.Fragment,
null,
React.createElement(
'header',
{ className: classes.panelHeader },
React.createElement(IconButton, { onClick: onBack, size: 'large' }, React.createElement(BackIcon, null)),
React.createElement(Typography, { component: 'h2', noWrap: true, title: title }, title)
),
React.createElement(Divider, null)
);
};
export function ToolPanel(props) {
const dispatch = useDispatch();
const { formatMessage } = useIntl();
const { title, BackIcon, onBack = () => dispatch(popToolsPanelPage()), classes } = props;
return React.createElement(
React.Fragment,
null,
React.createElement(PanelHeader, {
title: typeof title === 'object' ? formatMessage(title) : title,
BackIcon: BackIcon,
onBack: onBack
}),
React.createElement(
Suspense,
null,
React.createElement(
ErrorBoundary,
null,
React.createElement('section', { className: classes?.body }, props.children)
)
)
);
}
export default ToolPanel;