aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/common/components/SplitButton.js45
-rw-r--r--modern/src/reports/components/ReportFilter.js38
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>