diff options
| -rw-r--r-- | modern/src/common/components/SplitButton.js | 45 | ||||
| -rw-r--r-- | modern/src/reports/components/ReportFilter.js | 38 |
2 files changed, 61 insertions, 22 deletions
diff --git a/modern/src/common/components/SplitButton.js b/modern/src/common/components/SplitButton.js new file mode 100644 index 00000000..bdf12870 --- /dev/null +++ b/modern/src/common/components/SplitButton.js @@ -0,0 +1,45 @@ +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 }) => { + const anchorRef = useRef(); + const [menuAnchorEl, setMenuAnchorEl] = useState(null); + const [selected, setSelected] = useState(Object.keys(options)[0]); + + return ( + <> + <ButtonGroup fullWidth={fullWidth} variant={variant} color={color} disabled={disabled} ref={anchorRef}> + <Button 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; diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js index 804d0d4b..67ea3d2f 100644 --- a/modern/src/reports/components/ReportFilter.js +++ b/modern/src/reports/components/ReportFilter.js @@ -7,6 +7,7 @@ import moment from 'moment'; import { useTranslation } from '../../common/components/LocalizationProvider'; import useReportStyles from '../common/useReportStyles'; import { reportsActions } from '../../store'; +import SplitButton from '../../common/components/SplitButton'; const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDevice, includeGroups }) => { const classes = useReportStyles(); @@ -148,37 +149,30 @@ const ReportFilter = ({ children, handleSubmit, showOnly, ignoreDevice, multiDev </div> )} {children} - <div className={classes.filterButtons}> - <Button - onClick={() => handleClick('json')} - variant="outlined" - color="secondary" - className={classes.filterButton} - disabled={disabled} - > - {t('reportShow')} - </Button> - {!showOnly && ( + <div className={classes.filterItem}> + {showOnly ? ( <Button - onClick={() => handleClick('export')} + fullWidth variant="outlined" color="secondary" - className={classes.filterButton} disabled={disabled} + onClick={() => handleClick('json')} > - {t('reportExport')} + <Typography variant="button" noWrap>{t('reportShow')}</Typography> </Button> - )} - {!showOnly && ( - <Button - onClick={() => handleClick('mail')} + ) : ( + <SplitButton + fullWidth variant="outlined" color="secondary" - className={classes.filterButton} disabled={disabled} - > - <Typography variant="button" noWrap>{t('reportEmail')}</Typography> - </Button> + onClick={handleClick} + options={{ + json: t('reportShow'), + export: t('reportExport'), + mail: t('reportEmail'), + }} + /> )} </div> </div> |