@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
138 lines (136 loc) • 4.9 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/>.
*/
var __rest =
(this && this.__rest) ||
function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === 'function')
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
import { makeStyles } from 'tss-react/mui';
import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
import { rand } from '../PathNavigator/utils';
import Skeleton from '@mui/material/Skeleton';
const useStyles = makeStyles()(() => ({
emptyRoot: {
display: 'block',
padding: '10px',
textAlign: 'center'
},
loadingRoot: {
width: '135px',
padding: '0 15px'
}
}));
export function ContextMenu(props) {
const { classes, cx } = useStyles();
const {
options,
classes: propClasses,
onMenuItemClicked,
emptyState,
isLoading = false,
numOfLoaderItems = 5
} = props,
menuProps = __rest(props, [
'options',
'classes',
'onMenuItemClicked',
'emptyState',
'isLoading',
'numOfLoaderItems'
]);
return React.createElement(
Menu,
Object.assign({}, menuProps, { classes: propClasses }),
isLoading
? React.createElement(
'div',
{
className: cx(
classes.loadingRoot,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.loadingRoot
)
},
new Array(numOfLoaderItems)
.fill(null)
.map((value, i) =>
React.createElement(
Typography,
{ key: i, variant: 'body2', style: { width: `${rand(85, 100)}%`, padding: '6px 0' } },
React.createElement(Skeleton, { animation: 'wave', width: '100%' })
)
)
)
: options.flatMap((i) => i).length === 0
? React.createElement(
'div',
{
className: cx(
classes.emptyRoot,
propClasses === null || propClasses === void 0 ? void 0 : propClasses.emptyRoot
)
},
React.createElement(ErrorOutlineOutlinedIcon, { fontSize: 'small' }),
React.createElement(
Typography,
{ variant: 'caption', display: 'block' },
(emptyState === null || emptyState === void 0 ? void 0 : emptyState.message) ||
React.createElement(FormattedMessage, {
id: 'contextMenu.emptyOptionsMessage',
defaultMessage: 'No options available to display.'
})
)
)
: options.map((section, i) =>
section.map((option, y) =>
React.createElement(MenuItem, {
dense: true,
key: option.id,
divider: i !== options.length - 1 && y === section.length - 1,
onClick: (e) => onMenuItemClicked(option.id, e),
className: propClasses === null || propClasses === void 0 ? void 0 : propClasses.menuItem,
children: option.label
})
)
)
);
}
export default ContextMenu;