diff options
author | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:58:45 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2023-08-19 13:59:07 -0700 |
commit | d3c7705bedebd65c94f9eea691aaf2fe03b0cafe (patch) | |
tree | 5f98b3d9bbbd4fe8067b5a334e84aff008b8db22 /modern/src/common/components/SplitButton.jsx | |
parent | 0161ae449d4a7bd0781c0665d663353663ab0faf (diff) | |
download | trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.gz trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.tar.bz2 trackermap-web-d3c7705bedebd65c94f9eea691aaf2fe03b0cafe.zip |
Move to Vite
Diffstat (limited to 'modern/src/common/components/SplitButton.jsx')
-rw-r--r-- | modern/src/common/components/SplitButton.jsx | 48 |
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; |