@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
155 lines (153 loc) • 5 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 ArrowDown from '@mui/icons-material/ArrowDropDownRounded';
import Button from '@mui/material/Button';
import React, { useMemo } from 'react';
import Menu, { menuClasses } from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
function getStyles(sx) {
return {
button: Object.assign({}, sx === null || sx === void 0 ? void 0 : sx.button),
menuPaper: Object.assign(
{
maxWidth: '250px',
'& ul': {
padding: 0
},
'& li': {
borderTop: '1px solid #dedede',
paddingTop: '10px',
paddingBottom: '10px'
}
},
sx === null || sx === void 0 ? void 0 : sx.menuPaper
),
helperText: Object.assign({ padding: '10px 16px 10px 16px' }, sx === null || sx === void 0 ? void 0 : sx.helperText)
};
}
export function ConfirmDropdown(props) {
var _a, _b, _c;
const [anchorEl, setAnchorEl] = React.useState(null);
const sx = getStyles(props.sx);
const {
onConfirm,
onCancel,
text,
cancelText,
confirmText,
confirmHelperText,
disabled = false,
buttonVariant = 'outlined',
icon: Icon,
iconColor,
iconTooltip,
size = 'medium'
} = props;
const handleClose = () => {
setAnchorEl(null);
};
const handleConfirm = () => {
handleClose();
onConfirm();
};
const handleCancel = () => {
handleClose();
onCancel === null || onCancel === void 0 ? void 0 : onCancel();
};
// Not memorizing causes the menu to get misplaced upon opening.
const iconButton = useMemo(
() =>
Icon
? React.createElement(
IconButton,
{ color: iconColor, onClick: (e) => setAnchorEl(e.currentTarget), size: size, disabled: disabled },
React.createElement(Icon, null)
)
: null,
[Icon, disabled, iconColor, size]
);
return React.createElement(
React.Fragment,
null,
Icon
? iconTooltip
? React.createElement(Tooltip, { title: disabled ? '' : iconTooltip }, iconButton)
: iconButton
: React.createElement(
Button,
{
className: (_a = props.classes) === null || _a === void 0 ? void 0 : _a.button,
sx: sx.button,
variant: buttonVariant,
onClick: (e) => setAnchorEl(e.currentTarget),
disabled: disabled,
endIcon: React.createElement(ArrowDown, null)
},
text
),
React.createElement(
Menu,
{
anchorEl: anchorEl,
classes: { paper: (_b = props.classes) === null || _b === void 0 ? void 0 : _b.menuPaper },
sx: {
[`& .${menuClasses['paper']}`]: Object.assign({}, sx.menuPaper)
},
open: Boolean(anchorEl),
onClose: handleClose,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'right'
},
transformOrigin: {
vertical: 'top',
horizontal: 'right'
}
},
confirmHelperText &&
React.createElement(
Typography,
{
variant: 'body1',
sx: sx.helperText,
className: (_c = props.classes) === null || _c === void 0 ? void 0 : _c.helperText
},
confirmHelperText
),
React.createElement(MenuItem, { onClick: handleCancel }, cancelText),
React.createElement(MenuItem, { onClick: handleConfirm }, confirmText)
)
);
}
export default ConfirmDropdown;