@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
115 lines (113 loc) • 4.21 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 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';
import { SystemIcon } from '../SystemIcon';
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,
...menuProps
} = props;
return React.createElement(
Menu,
{ ...menuProps, classes: propClasses },
isLoading
? React.createElement(
'div',
{ className: cx(classes.loadingRoot, 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?.emptyRoot) },
React.createElement(ErrorOutlineOutlinedIcon, { fontSize: 'small' }),
React.createElement(
Typography,
{ variant: 'caption', display: 'block' },
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?.menuItem
},
React.createElement(Typography, { variant: 'body2' }, option.label),
option.icon && React.createElement(SystemIcon, { icon: option.icon, sx: { ml: 1 } })
)
)
)
);
}
export default ContextMenu;