aboutsummaryrefslogtreecommitdiff
path: root/modern/src/common/components/SplitButton.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/common/components/SplitButton.jsx')
-rw-r--r--modern/src/common/components/SplitButton.jsx48
1 files changed, 48 insertions, 0 deletions
diff --git a/modern/src/common/components/SplitButton.jsx b/modern/src/common/components/SplitButton.jsx
new file mode 100644
index 00000000..84876f15
--- /dev/null
+++ b/modern/src/common/components/SplitButton.jsx
@@ -0,0 +1,48 @@
+import React, { useRef, useState } from 'react';
+import {
+ Button, ButtonGroup, Menu, MenuItem, Typography,
+} from '@mui/material';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+const SplitButton = ({
+ fullWidth, variant, color, disabled, onClick, options, selected, setSelected,
+}) => {
+ const anchorRef = useRef();
+ const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+
+ return (
+ <>
+ <ButtonGroup fullWidth={fullWidth} variant={variant} color={color} ref={anchorRef}>
+ <Button disabled={disabled} onClick={() => onClick(selected)}>
+ <Typography variant="button" noWrap>{options[selected]}</Typography>
+ </Button>
+ <Button fullWidth={false} size="small" onClick={() => setMenuAnchorEl(anchorRef.current)}>
+ <ArrowDropDownIcon />
+ </Button>
+ </ButtonGroup>
+ <Menu
+ open={!!menuAnchorEl}
+ anchorEl={menuAnchorEl}
+ onClose={() => setMenuAnchorEl(null)}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'right',
+ }}
+ >
+ {Object.entries(options).map(([key, value]) => (
+ <MenuItem
+ key={key}
+ onClick={() => {
+ setSelected(key);
+ setMenuAnchorEl(null);
+ }}
+ >
+ {value}
+ </MenuItem>
+ ))}
+ </Menu>
+ </>
+ );
+};
+
+export default SplitButton;