@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
195 lines (193 loc) • 7.59 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 useStyles from './styles';
import ResizeableDrawer from '../ResizeableDrawer/ResizeableDrawer';
import React from 'react';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { FormattedMessage, useIntl } from 'react-intl';
import SystemIcon from '../SystemIcon';
import EmptyState from '../EmptyState/EmptyState';
import CrafterCMSLogo from '../../icons/CrafterCMSLogo';
import { getPossibleTranslation } from '../../utils/i18n';
import Widget from '../Widget';
import IconButton from '@mui/material/IconButton';
import KeyboardArrowLeftRoundedIcon from '@mui/icons-material/KeyboardArrowLeftRounded';
import SiteSwitcherSelect from '../SiteSwitcherSelect';
import Tooltip from '@mui/material/Tooltip';
import Paper from '@mui/material/Paper';
import Suspencified from '../Suspencified/Suspencified';
import LauncherOpenerButton from '../LauncherOpenerButton';
import useSelection from '../../hooks/useSelection';
export function SiteTools(props) {
const {
site,
activeToolId,
hideSidebarSiteSwitcher = false,
hideSidebarLogo = false,
sidebarBelowToolbar = false,
mountMode = 'dialog',
footerHtml,
onBackClick,
openSidebar,
sidebarWidth,
onWidthChange,
tools,
onNavItemClick,
showAppsButton,
onSubmittingAndOrPendingChange,
onMinimize
} = props;
const { classes, cx: clsx } = useStyles();
const { formatMessage } = useIntl();
const baseUrl = useSelection((state) => state.env.authoringBase);
const tool = tools?.find((tool) => tool.url === activeToolId)?.widget;
return React.createElement(
Paper,
{ className: clsx(classes.root, props.classes?.root), elevation: 0 },
React.createElement(
ResizeableDrawer,
{
classes: { drawerPaper: classes.drawerPaper, drawerBody: classes.drawerBody },
open: openSidebar,
width: sidebarWidth,
belowToolbar: sidebarBelowToolbar,
onWidthChange: onWidthChange
},
React.createElement(
'section',
null,
React.createElement(
Box,
{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' },
onBackClick &&
React.createElement(
Tooltip,
{ title: React.createElement(FormattedMessage, { id: 'words.preview', defaultMessage: 'Preview' }) },
React.createElement(
IconButton,
{ onClick: onBackClick, size: 'large' },
React.createElement(KeyboardArrowLeftRoundedIcon, null)
)
),
!hideSidebarSiteSwitcher && React.createElement(SiteSwitcherSelect, { site: site, fullWidth: true })
),
React.createElement(
MenuList,
{ disablePadding: true, className: classes.nav },
tools
? tools.map((tool) =>
React.createElement(
MenuItem,
{ onClick: () => onNavItemClick(tool.url), key: tool.url, selected: `/${tool.url}` === activeToolId },
React.createElement(SystemIcon, {
className: classes.icon,
icon: tool.icon,
svgIconProps: { fontSize: 'small', color: 'action' }
}),
React.createElement(Typography, null, getPossibleTranslation(tool.title, formatMessage))
)
)
: React.createElement(EmptyState, {
title: React.createElement(FormattedMessage, {
id: 'siteTools.toolListingNotConfigured',
defaultMessage: 'The project tools list has not been set'
}),
subtitle: React.createElement(FormattedMessage, {
id: 'siteTools.toolListingNotConfiguredSubtitle',
defaultMessage: 'Please set the craftercms.siteTools reference on the ui.xml'
})
})
)
),
React.createElement(
'footer',
{ className: classes.footer },
!hideSidebarLogo && React.createElement(CrafterCMSLogo, { width: 100, className: classes.logo }),
footerHtml &&
React.createElement(Typography, {
component: 'p',
variant: 'caption',
className: classes.footerDescription,
dangerouslySetInnerHTML: { __html: footerHtml }
})
)
),
React.createElement(
Box,
{ className: classes.wrapper, height: '100%', width: '100%', paddingLeft: openSidebar ? `${sidebarWidth}px` : 0 },
activeToolId
? tool
? React.createElement(
Suspencified,
null,
React.createElement(Widget, {
...tool,
overrideProps: {
embedded: false,
mountMode,
showAppsButton,
onSubmittingAndOrPendingChange,
onMinimize
}
})
)
: React.createElement(
Box,
{ display: 'flex', flexDirection: 'column', height: '100%' },
React.createElement(
'section',
{ className: classes.launcher },
React.createElement(LauncherOpenerButton, null)
),
React.createElement(EmptyState, {
styles: { root: { height: '100%', margin: 0 } },
title: '404',
subtitle: React.createElement(FormattedMessage, {
id: 'siteTools.toolNotFound',
defaultMessage: 'Tool not found'
})
})
)
: React.createElement(EmptyState, {
styles: { root: { height: '100%', margin: 0 } },
title: React.createElement(FormattedMessage, {
id: 'siteTools.selectTool',
defaultMessage: 'Please choose a tool from the left.'
}),
image: `${baseUrl}/static-assets/images/choose_option.svg`
})
)
);
}
export default SiteTools;