@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
131 lines (129 loc) • 4.72 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 * 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 } = props,
other = __rest(props, ['actions', 'classes', 'className', 'max', 'spacing', 'onActionClicked']);
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',
Object.assign(
{ className: cx(propClasses === null || propClasses === void 0 ? void 0 : propClasses.root, className) },
other,
{ ref: ref }
),
actions
.slice(0, actions.length - extraActions)
.map((child, index) =>
React.createElement(
Button,
{
key: child.id,
onClick: (e) =>
onActionClicked === null || onActionClicked === void 0 ? void 0 : onActionClicked(child.id, e),
style: { marginLeft: index === 0 ? undefined : marginLeft },
className: cx(classes.action, propClasses === null || propClasses === void 0 ? void 0 : 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 === null || propClasses === void 0 ? void 0 : 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 === null || onActionClicked === void 0 ? void 0 : onActionClicked(child.id, e);
}
},
child.label
)
)
)
);
});
export default ActionsGroup;