@craftercms/studio-ui/components/PathNavigator/PathNavigatorHeader.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 React from 'react';
import { useStyles } from './styles';
import LanguageRounded from '@mui/icons-material/LanguageRounded';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVertRounded';
import AccordionSummary from '@mui/material/AccordionSummary';
import SystemIcon from '../SystemIcon';
// PathNavigatorHeader
export function PathNavigatorHeader(props) {
  const { classes, cx } = useStyles();
  const {
    title,
    icon,
    locale,
    onLanguageMenu,
    onMenuButtonClick,
    menuButtonIcon = React.createElement(MoreVertIcon, null),
    collapsed = false,
    className
  } = props;
  const currentFlag = (locale) => React.createElement(LanguageRounded, null);
  return React.createElement(
    AccordionSummary,
    {
      classes: {
        root: cx(className, props.classes?.root),
        content: cx(classes.accordionSummaryContent, props.classes?.content)
      }
    },
    React.createElement(
      'div',
      { className: classes.accordionSummaryTitle },
      icon &&
        React.createElement(SystemIcon, {
          icon: icon,
          className: classes.headerIcon,
          sx: { color: (theme) => theme.palette.action.active },
          style: icon[collapsed ? 'collapsedStyle' : 'expandedStyle']
        }),
      React.createElement(Typography, {
        variant: 'body1',
        component: 'h6',
        className: classes.headerTitle,
        children: title
      })
    ),
    React.createElement(
      'div',
      { className: classes.accordionSummaryActions },
      onLanguageMenu &&
        React.createElement(
          IconButton,
          {
            'aria-label': 'language select',
            onClick: (e) => {
              e.stopPropagation();
              onLanguageMenu(e.currentTarget);
            },
            size: 'small'
          },
          currentFlag(locale)
        ),
      onMenuButtonClick &&
        React.createElement(
          IconButton,
          {
            'aria-label': 'options',
            onClick: (e) => {
              e.stopPropagation();
              onMenuButtonClick(e.currentTarget);
            },
            size: 'small'
          },
          menuButtonIcon
        )
    )
  );
}
export default PathNavigatorHeader;