@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
82 lines (80 loc) • 3.19 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 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';
const useStyles = makeStyles()((theme) => ({
panelHeader: Object.assign(
Object.assign({ 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(
'section',
{ className: classes === null || classes === void 0 ? void 0 : classes.body },
props.children
)
);
}
export default ToolPanel;