@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
114 lines (112 loc) • 3.81 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 * as React from 'react';
import { forwardRef, useState } from 'react';
import { MenuItem } from '@mui/material';
import Fab from '@mui/material/Fab';
import Menu from '@mui/material/Menu';
import Button from '@mui/material/Button';
import { makeStyles } from 'tss-react/mui';
const SPACINGS = {
small: 5,
medium: 10
};
const useStyles = makeStyles()(() => ({
action: {
minWidth: '40px'
}
}));
const ActionsGroup = forwardRef(function ActionsGroup(props, ref) {
const { actions, classes: propClasses, className, max = 5, spacing, onActionClicked, ...other } = props;
const clampedMax = max < 2 ? 2 : max;
const extraActions = actions.length > clampedMax ? actions.length - clampedMax + 1 : 0;
const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : spacing;
const { classes, cx } = useStyles();
const [showMenu, setShowMenu] = useState();
return React.createElement(
'div',
{ className: cx(propClasses?.root, className), ...other, ref: ref },
actions
.slice(0, actions.length - extraActions)
.map((child, index) =>
React.createElement(
Button,
{
key: child.id,
onClick: (e) => onActionClicked?.(child.id, e),
style: { marginLeft: index === 0 ? undefined : marginLeft },
className: cx(classes.action, propClasses?.action),
color: 'primary',
variant: 'text',
size: 'small'
},
child.label
)
),
extraActions
? React.createElement(
Fab,
{
onClick: (e) => {
setShowMenu(e.target);
},
size: 'small',
variant: 'extended',
color: 'inherit',
className: propClasses?.more,
style: {
marginLeft
}
},
'+',
extraActions
)
: null,
React.createElement(
Menu,
{ open: Boolean(showMenu), anchorEl: showMenu, onClose: () => setShowMenu(void 0) },
actions.slice(actions.length - extraActions).map((child) =>
React.createElement(
MenuItem,
{
key: child.id,
onClick: (e) => {
setShowMenu(void 0);
onActionClicked?.(child.id, e);
}
},
child.label
)
)
)
);
});
export default ActionsGroup;