@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
148 lines (146 loc) • 4.42 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: {
...sx?.button
},
menuPaper: {
maxWidth: '250px',
...sx?.menuPaper
},
helperText: {
py: 1,
px: 2,
...sx?.helperText
}
};
}
export function ConfirmDropdown(props) {
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?.();
};
// 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: props.classes?.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: props.classes?.menuPaper },
sx: {
[`& .${menuClasses['paper']}`]: {
...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: props.classes?.helperText },
confirmHelperText
),
React.createElement(MenuItem, { onClick: handleCancel }, cancelText),
React.createElement(MenuItem, { onClick: handleConfirm }, confirmText)
)
);
}
export default ConfirmDropdown;