@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
156 lines (154 loc) • 6.14 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 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';
const messages = defineMessages({
filter: { id: 'pathNavigator.pathFilterInputPlaceholder', defaultMessage: 'Filter children of {name}...' }
});
// PathBreadcrumbs + PathOptions + (Path)Search
function PathNavigatorBreadcrumbs(props) {
var _a, _b, _c, _d, _e, _f;
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(
'section',
{
className: clsx(
classes.breadcrumbs,
classes.widgetSection,
(_a = props.classes) === null || _a === void 0 ? void 0 : _a.root
)
},
(showSearch && onSearch) || forceSearch
? React.createElement(
React.Fragment,
null,
React.createElement(SearchBar, {
autoFocus: !forceSearch,
onChange: onChange,
keyword: keyword,
placeholder: formatMessage(messages.filter, {
name: (_b = breadcrumb[breadcrumb.length - 1]) === null || _b === void 0 ? void 0 : _b.label
}),
showActionButton: Boolean(keyword),
classes: {
root: clsx(classes.searchRoot, (_c = props.classes) === null || _c === void 0 ? void 0 : _c.searchRoot),
inputInput: clsx(
classes.searchInput,
(_d = props.classes) === null || _d === void 0 ? void 0 : _d.searchInput
),
actionIcon: clsx(
classes.searchCloseIcon,
(_e = props.classes) === null || _e === void 0 ? void 0 : _e.searchCleanButton
)
}
}),
!forceSearch &&
React.createElement(
IconButton,
{
size: 'small',
onClick: () => {
onSearch('');
setShowSearch(false);
},
className: clsx(
classes.searchCloseButton,
(_f = props.classes) === null || _f === void 0 ? void 0 : _f.searchCloseButton
)
},
React.createElement(CloseIconRounded, null)
)
)
: React.createElement(
React.Fragment,
null,
React.createElement(
MuiBreadcrumbs,
{
maxItems: 2,
'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)
)
)
)
);
}
export default PathNavigatorBreadcrumbs;