Reports split button

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>