@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
124 lines (122 loc) • 4.24 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 ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import Grow from '@mui/material/Grow';
import Paper from '@mui/material/Paper';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import Popper from '@mui/material/Popper';
import LoadingButton from '@mui/lab/LoadingButton';
export function SplitButtonUI(props) {
const {
options,
disablePortal,
disabled,
anchorRef,
selectedIndex,
handleClick,
open,
handleToggle,
handleClose,
handleMenuItemClick,
loading
} = props;
return React.createElement(
React.Fragment,
null,
React.createElement(
ButtonGroup,
{ disabled: disabled, variant: 'contained', color: 'primary', ref: anchorRef, 'aria-label': 'split button' },
React.createElement(
LoadingButton,
{ color: 'primary', variant: 'contained', loading: loading, onClick: handleClick },
options[selectedIndex].label
),
options.length > 1 &&
React.createElement(
Button,
{
disabled: loading,
color: 'primary',
size: 'small',
'aria-controls': open ? 'split-button-menu' : undefined,
'aria-expanded': open ? 'true' : undefined,
'aria-label': 'select option',
'aria-haspopup': 'menu',
onClick: handleToggle
},
React.createElement(ArrowDropDownIcon, null)
)
),
React.createElement(
Popper,
{ open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: disablePortal },
({ TransitionProps, placement }) =>
React.createElement(
Grow,
{
...TransitionProps,
style: {
transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
}
},
React.createElement(
Paper,
null,
React.createElement(
ClickAwayListener,
{ onClickAway: handleClose },
React.createElement(
MenuList,
{ id: 'split-button-menu' },
options.map((option, index) =>
React.createElement(
MenuItem,
{
key: option.label,
selected: index === selectedIndex,
onClick: (event) => handleMenuItemClick(event, index)
},
option.label
)
)
)
)
)
)
)
);
}
export default SplitButtonUI;