@craftercms/studio-ui/components/GlobalAppToolbar/GlobalAppToolbar.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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 { makeStyles } from 'tss-react/mui';
import React from 'react';
import Typography from '@mui/material/Typography';
import LauncherOpenerButton from '../LauncherOpenerButton';
import LogoAndMenuBundleButton from '../LogoAndMenuBundleButton';
import { defineMessages, useIntl } from 'react-intl';
import ViewToolbar from '../ViewToolbar/ViewToolbar';
import { useGlobalAppState } from '../GlobalApp';
const translations = defineMessages({
  toggleSidebar: {
    id: 'globalAppToolbar.toggleSidebar',
    defaultMessage: 'Toggle Sidebar'
  }
});
const useStyles = makeStyles()((theme, { headings, subtitle, leftContent, rightContent } = {}) => ({
  appBar: {},
  toolbar: {},
  headings: Object.assign(
    {
      marginLeft: '10px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'flex-start!important',
      overflow: 'hidden'
    },
    headings
  ),
  subtitle: Object.assign({}, subtitle),
  leftContent: Object.assign(
    { marginLeft: '25px', display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' },
    leftContent
  ),
  rightContent: Object.assign(
    { marginLeft: 'auto', display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' },
    rightContent
  ),
  ellipsis: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  }
}));
export const GlobalAppToolbar = React.memo(function (props) {
  var _a, _b, _c, _d;
  const {
    title,
    subtitle,
    leftContent,
    rightContent,
    showHamburgerMenuButton = true,
    showAppsButton = true,
    startContent,
    styles
  } = props;
  const { classes, cx } = useStyles(styles);
  const { formatMessage } = useIntl();
  const [{ openSidebar }, setState] = useGlobalAppState();
  return React.createElement(
    ViewToolbar,
    { elevation: props.elevation, styles: styles, classes: props.classes },
    showHamburgerMenuButton &&
      Boolean(setState) &&
      React.createElement(LogoAndMenuBundleButton, {
        showCrafterIcon: showAppsButton,
        'aria-label': formatMessage(translations.toggleSidebar),
        onClick: () => setState({ openSidebar: !openSidebar })
      }),
    startContent,
    Boolean(title || subtitle) &&
      React.createElement(
        'section',
        { className: cx(classes.headings, (_a = props.classes) === null || _a === void 0 ? void 0 : _a.headings) },
        title &&
          React.createElement(Typography, { variant: 'h5', component: 'h1', className: classes.ellipsis }, title),
        subtitle &&
          React.createElement(
            Typography,
            {
              variant: 'body2',
              component: 'h2',
              color: 'textSecondary',
              className: cx(
                classes.ellipsis,
                classes.subtitle,
                (_b = props.classes) === null || _b === void 0 ? void 0 : _b.subtitle
              )
            },
            subtitle
          )
      ),
    React.createElement(
      'section',
      { className: cx(classes.leftContent, (_c = props.classes) === null || _c === void 0 ? void 0 : _c.leftContent) },
      leftContent
    ),
    React.createElement(
      'section',
      {
        className: cx(classes.rightContent, (_d = props.classes) === null || _d === void 0 ? void 0 : _d.rightContent)
      },
      rightContent
    ),
    showAppsButton && React.createElement(LauncherOpenerButton, null)
  );
});
export default GlobalAppToolbar;