@craftercms/studio-ui/components/PathNavigator/PathNavigatorBreadcrumbs.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 { useStyles } from './styles';
import React, { useState } from 'react';
import SearchBar from '../SearchBar/SearchBar';
import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
import NavigateNextIcon from '@mui/icons-material/NavigateNextRounded';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
import CloseIconRounded from '@mui/icons-material/CloseRounded';
import { defineMessages, useIntl } from 'react-intl';
import Box from '@mui/material/Box';
const messages = defineMessages({
  filter: { id: 'pathNavigator.pathFilterInputPlaceholder', defaultMessage: 'Filter children of {name}...' }
});
// PathBreadcrumbs + PathOptions + (Path)Search
function PathNavigatorBreadcrumbs(props) {
  const { classes, cx: clsx } = useStyles();
  const { formatMessage } = useIntl();
  const { breadcrumb, onCrumbSelected, keyword, onSearch } = props;
  const [showSearch, setShowSearch] = useState(Boolean(keyword));
  const onChange = (keyword) => onSearch(keyword);
  const maxIndex = breadcrumb.length - 1;
  const forceSearch = breadcrumb.length <= 1;
  return React.createElement(
    React.Fragment,
    null,
    breadcrumb &&
      breadcrumb.length > 1 &&
      React.createElement(
        'section',
        { className: clsx(classes.breadcrumbs, classes.widgetSection, props.classes?.root) },
        React.createElement(
          MuiBreadcrumbs,
          {
            'aria-label': 'Breadcrumbs',
            separator: React.createElement(NavigateNextIcon, { fontSize: 'small' }),
            classes: {
              ol: classes.breadcrumbsList,
              separator: classes.breadcrumbsSeparator
            }
          },
          breadcrumb.map((item, i) =>
            maxIndex !== i
              ? React.createElement(Link, {
                  key: item.id,
                  color: 'inherit',
                  component: 'button',
                  variant: 'subtitle2',
                  underline: 'always',
                  TypographyClasses: {
                    root: clsx(classes.breadcrumbsTypography, maxIndex === i && classes.breadcrumbLast)
                  },
                  onClick: (e) => onCrumbSelected(item, e),
                  children: item.label
                })
              : React.createElement(Typography, {
                  key: item.id,
                  variant: 'subtitle2',
                  className: classes.breadcrumbsTypography,
                  children: item.label
                })
          )
        ),
        React.createElement(
          'div',
          { className: clsx(classes.breadcrumbActionsWrapper) },
          onSearch &&
            React.createElement(
              IconButton,
              { size: 'small', 'aria-label': 'search', onClick: () => setShowSearch(true) },
              React.createElement(SearchRoundedIcon, null)
            )
        )
      ),
    (((Boolean(keyword) || showSearch) && onSearch) || forceSearch) &&
      React.createElement(
        Box,
        { component: 'section', className: classes.widgetSection, sx: { display: 'flex' } },
        React.createElement(SearchBar, {
          autoFocus: !forceSearch,
          onChange: onChange,
          keyword: keyword,
          placeholder: formatMessage(messages.filter, { name: breadcrumb[breadcrumb.length - 1]?.label }),
          showActionButton: Boolean(keyword),
          classes: {
            root: clsx(classes.searchRoot, props.classes?.searchRoot),
            inputInput: clsx(classes.searchInput, props.classes?.searchInput),
            actionIcon: clsx(classes.searchCloseIcon, props.classes?.searchCleanButton)
          }
        }),
        !forceSearch &&
          React.createElement(
            IconButton,
            {
              size: 'small',
              onClick: () => {
                onSearch('');
                setShowSearch(false);
              },
              className: clsx(classes.searchCloseButton, props.classes?.searchCloseButton),
              sx: { marginTop: '5px', marginBottom: '5px' }
            },
            React.createElement(CloseIconRounded, null)
          )
      )
  );
}
export default PathNavigatorBreadcrumbs;