@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
216 lines (214 loc) • 8.77 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 React from 'react';
import { FormattedMessage } from 'react-intl';
import { useStyles } from './styles';
import PathNavigatorHeader from './PathNavigatorHeader';
import Breadcrumbs from './PathNavigatorBreadcrumbs';
import PathNavigatorItem from './PathNavigatorItem';
import PathNavigatorList from './PathNavigatorList';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import { lookupItemByPath } from '../../utils/content';
import RefreshRounded from '@mui/icons-material/RefreshRounded';
import PathNavigatorSkeletonList from './PathNavigatorSkeletonList';
import { ErrorState } from '../ErrorState';
import { renderErrorState } from '../ErrorState/util';
import { Pagination } from '../Pagination';
import Box from '@mui/material/Box';
export function PathNavigatorUI(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const { classes, cx: clsx } = useStyles();
// region consts {...} = props
const {
state,
itemsByPath,
icon,
container,
title,
onChangeCollapsed,
onHeaderButtonClick,
onCurrentParentMenu,
siteLocales,
onSearch,
keyword,
onBreadcrumbSelected,
onSelectItem,
onPathSelected,
onPreview,
onOpenItemMenu,
onItemClicked,
onPageChanged,
computeActiveItems,
onRowsPerPageChange
} = props;
// endregion
const items =
(_b =
(_a = state.itemsInPath) === null || _a === void 0
? void 0
: _a.flatMap((path) => {
var _a;
return (_a = itemsByPath[path]) !== null && _a !== void 0 ? _a : [];
})) !== null && _b !== void 0
? _b
: [];
const levelDescriptor = itemsByPath[state.levelDescriptor];
return React.createElement(
Accordion,
{
square: true,
disableGutters: true,
elevation: 0,
TransitionProps: { unmountOnExit: true },
expanded: !state.collapsed,
onChange: () => onChangeCollapsed(!state.collapsed),
className: clsx(
classes.accordion,
(_c = props.classes) === null || _c === void 0 ? void 0 : _c.root,
container === null || container === void 0 ? void 0 : container.baseClass,
container ? (state.collapsed ? container.collapsedClass : container.expandedClass) : void 0
),
style: Object.assign(
Object.assign({}, container === null || container === void 0 ? void 0 : container.baseStyle),
container ? (state.collapsed ? container.collapsedStyle : container.expandedStyle) : void 0
)
},
React.createElement(PathNavigatorHeader, {
icon: icon,
title: title,
locale: state.localeCode,
// @see https://github.com/craftercms/craftercms/issues/5360
menuButtonIcon: React.createElement(RefreshRounded, null),
onMenuButtonClick: onHeaderButtonClick ? (anchor) => onHeaderButtonClick(anchor, 'options') : null,
onLanguageMenu:
onHeaderButtonClick &&
((_d = siteLocales === null || siteLocales === void 0 ? void 0 : siteLocales.localeCodes) === null ||
_d === void 0
? void 0
: _d.length)
? (anchor) => onHeaderButtonClick(anchor, 'language')
: null,
collapsed: state.collapsed
}),
React.createElement(
AccordionDetails,
{ className: clsx(classes.accordionDetails, (_e = props.classes) === null || _e === void 0 ? void 0 : _e.body) },
state.isRootPathMissing
? React.createElement(ErrorState, {
styles: { image: { display: 'none' } },
title: React.createElement(FormattedMessage, {
id: 'pathNavigatorTree.missingRootPath',
defaultMessage: `The path "{path}" doesn't exist`,
values: { path: state.rootPath }
})
})
: React.createElement(
React.Fragment,
null,
React.createElement(Breadcrumbs, {
keyword: keyword,
breadcrumb: state.breadcrumb.map((path) => lookupItemByPath(path, itemsByPath)).filter(Boolean),
onSearch: onSearch,
onCrumbSelected: onBreadcrumbSelected,
classes: {
root: (_f = props.classes) === null || _f === void 0 ? void 0 : _f.breadcrumbsRoot,
searchRoot: (_g = props.classes) === null || _g === void 0 ? void 0 : _g.breadcrumbsSearch
}
}),
lookupItemByPath(state.currentPath, itemsByPath) &&
React.createElement(PathNavigatorItem, {
item: lookupItemByPath(state.currentPath, itemsByPath),
locale: state.localeCode,
isLevelDescriptor: false,
onOpenItemMenu: onCurrentParentMenu,
onItemClicked: onItemClicked,
showItemNavigateToButton: false,
isCurrentPath: true
}),
state.isFetching
? React.createElement(PathNavigatorSkeletonList, {
numOfItems:
((_h = state.itemsInPath) === null || _h === void 0 ? void 0 : _h.length) > 0
? state.itemsInPath.length
: state.limit
})
: state.error
? renderErrorState(state.error, { imageUrl: null })
: state.itemsInPath.length === 0 && !Boolean(levelDescriptor)
? React.createElement(
Box,
{ display: 'flex', justifyContent: 'center', m: 1 },
React.createElement(FormattedMessage, {
id: 'pathNavigator.noItemsAtLocation',
defaultMessage: 'No items at this location'
})
)
: React.createElement(
React.Fragment,
null,
levelDescriptor &&
React.createElement(PathNavigatorItem, {
item: levelDescriptor,
locale: state.localeCode,
isLevelDescriptor: true,
onOpenItemMenu: onOpenItemMenu,
onItemClicked: onItemClicked
}),
React.createElement(PathNavigatorList, {
classes: { root: classes.childrenList },
isSelectMode: false,
locale: state.localeCode,
items: items,
onSelectItem: onSelectItem,
onPathSelected: onPathSelected,
onPreview: onPreview,
onOpenItemMenu: onOpenItemMenu,
onItemClicked: onItemClicked,
computeActiveItems: computeActiveItems
})
),
state.total !== null &&
state.total > 0 &&
React.createElement(Pagination, {
showBottomBorder: true,
classes: { root: (_j = props.classes) === null || _j === void 0 ? void 0 : _j.paginationRoot },
count: state.total,
rowsPerPage: state.limit,
page: state && Math.ceil(state.offset / state.limit),
onRowsPerPageChange: onRowsPerPageChange,
onPageChange: (e, page) => onPageChanged(page)
})
)
)
);
}
export default PathNavigatorUI;