@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
108 lines (106 loc) • 4.46 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 LauncherTile from '../LauncherTile';
import { getSimplifiedVersion } from '../../utils/string';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'react-intl';
import { LauncherSectionUI } from '../LauncherSection';
import { getLauncherSectionLink, urlMapping } from '../LauncherSection/utils';
import { messages } from '../LauncherSection/utils';
import { closeLauncher } from '../../state/actions/dialogs';
import { useDispatch } from 'react-redux';
import ApiResponseErrorState from '../ApiResponseErrorState';
import { globalMenuMessages } from '../../env/i18n-legacy';
import Skeleton from '@mui/material/Skeleton';
import { useEnv } from '../../hooks/useEnv';
import { useSystemVersion } from '../../hooks/useSystemVersion';
import { useGlobalNavigation } from '../../hooks/useGlobalNavigation';
function LauncherGlobalNav(props) {
var _a, _b, _c;
const dispatch = useDispatch();
const { formatMessage } = useIntl();
const { authoringBase } = useEnv();
const version = useSystemVersion();
const onTileClicked = (_a = props.onTileClicked) !== null && _a !== void 0 ? _a : () => dispatch(closeLauncher());
const { items, error } = useGlobalNavigation();
const [activeItemId, setActiveItemId] = useState('');
useEffect(() => {
const idLookup = {};
Object.entries(urlMapping).forEach(([id, hash]) => (idLookup[hash] = id));
function hashchange() {
const hash = window.location.hash;
setActiveItemId(idLookup[hash]);
}
hashchange();
window.addEventListener('hashchange', hashchange, false);
}, []);
if (!error && !items) {
const style = { margin: 5, width: 120, height: 100, display: 'inline-flex' };
return React.createElement(
React.Fragment,
null,
React.createElement(Skeleton, { style: style }),
React.createElement(Skeleton, { style: style }),
React.createElement(Skeleton, { style: style }),
React.createElement(Skeleton, { style: style })
);
} else if (error) {
return React.createElement(ApiResponseErrorState, {
error: (_b = error.response) !== null && _b !== void 0 ? _b : error
});
}
return React.createElement(
LauncherSectionUI,
{
styles: props.sectionStyles,
title: (_c = props.title) !== null && _c !== void 0 ? _c : formatMessage(messages.global)
},
items.map((item) =>
React.createElement(LauncherTile, {
key: item.id,
active: activeItemId === item.id,
title: globalMenuMessages[item.id] ? formatMessage(globalMenuMessages[item.id]) : item.id,
icon: item.icon,
link: getLauncherSectionLink(item.id, authoringBase),
onClick: (e) => onTileClicked(e, item.id, item.label),
styles: props.tileStyles
})
),
React.createElement(LauncherTile, {
title: formatMessage(messages.docs),
icon: { id: 'craftercms.icons.Docs' },
link: `https://docs.craftercms.org/en/${getSimplifiedVersion(version)}/index.html`,
target: '_blank',
styles: props.tileStyles
})
);
}
export default LauncherGlobalNav;