Merge pull request #1037 from vr-varad/fix/mobile_filter_connection_table

Fix: Mobile View for Filter

Author: amitamrutiya

src/custom/UniversalFilter.tsx

@@ -1,3 +1,4 @@
+import { Drawer, styled, useMediaQuery } from '@mui/material';
 import { SelectChangeEvent } from '@mui/material/Select';
 import React from 'react';
 import { Button } from '../base/Button';
@@ -8,6 +9,7 @@ import { Paper } from '../base/Paper';
 import { Select } from '../base/Select';
 import { FilterIcon } from '../icons';
 import { useTheme } from '../theme';
+import { darkModalGradient, lightModalGradient } from '../theme/colors/colors';
 import PopperListener from './PopperListener';
 import { TooltipIcon } from './TooltipIconButton';
 
@@ -26,6 +28,16 @@ export interface UniversalFilterProps {
   id: string;
 }
 
+export const FilterHeader = styled('div')(({ theme }) => ({
+  background: theme.palette.mode === 'light' ? lightModalGradient.fotter : darkModalGradient.fotter,
+  padding: '0.75rem 1rem',
+  margin: '-1rem -1rem 1rem -1rem',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  color: theme.palette.text.primary
+}));
+
 function UniversalFilter({
   filters,
   selectedFilters,
@@ -37,11 +49,22 @@ function UniversalFilter({
 }: UniversalFilterProps): JSX.Element {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
+
   const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
 
   const handleFilterChange = (event: React.ChangeEvent<{ value: string }>, columnName: string) => {
     const value = event.target.value;
-
     setSelectedFilters((prevFilters) => ({
       ...prevFilters,
       [columnName]: value
@@ -53,98 +76,96 @@ function UniversalFilter({
     handleApplyFilter();
   };
 
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-    setOpen((previousOpen) => !previousOpen);
-  };
-
-  const canBeOpen = open && Boolean(anchorEl);
-  const idx = canBeOpen ? 'transition-popper' : undefined;
+  const renderFilterContent = () => (
+    <div>
+      <FilterHeader>
+        <h3>Filters: </h3>
+      </FilterHeader>
+      {Object.keys(filters).map((filterColumn) => {
+        const options = filters[filterColumn].options;
+        return (
+          <div key={filterColumn} role="presentation">
+            <InputLabel id={filters[filterColumn].name}>{filters[filterColumn].name}</InputLabel>
+            <Select
+              defaultValue="All"
+              key={filterColumn}
+              value={selectedFilters[filterColumn]}
+              variant={variant}
+              onChange={(e: SelectChangeEvent<unknown>) =>
+                handleFilterChange(e as React.ChangeEvent<{ value: string }>, filterColumn)
+              }
+              style={{
+                width: '20rem',
+                marginBottom: '1rem'
+              }}
+              inputProps={{ 'aria-label': 'Without label' }}
+              displayEmpty
+            >
+              {showAllOption && <MenuItem value="All">All</MenuItem>}
+              {options.map((option) => (
+                <MenuItem key={option.value} value={option.value}>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </div>
+        );
+      })}
 
-  const handleClose = () => {
-    setAnchorEl(null);
-    setOpen(false);
-  };
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Button variant="contained" onClick={handleApplyOnClick}>
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
 
   return (
-    <React.Fragment>
+    <>
       <div id={id}>
         <TooltipIcon
           title="Filter"
           onClick={handleClick}
           icon={<FilterIcon fill={theme.palette.icon.default} />}
           arrow
         />
-        <PopperListener
-          id={idx}
-          open={open}
-          anchorEl={anchorEl}
-          placement="bottom-end"
-          // transition
-        >
-          <div>
-            <ClickAwayListener
-              onClickAway={handleClose}
-              mouseEvent="onMouseDown"
-              touchEvent="onTouchStart"
-            >
-              <div>
-                <Paper
-                  sx={{
-                    padding: '1rem',
-                    paddingTop: '1.8rem',
-                    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
-                    backgroundColor: theme.palette.background.surfaces
-                  }}
-                >
-                  {Object.keys(filters).map((filterColumn) => {
-                    const options = filters[filterColumn].options;
-                    return (
-                      <div key={filterColumn} role="presentation">
-                        <InputLabel id={filters[filterColumn].name}>
-                          {filters[filterColumn].name}
-                        </InputLabel>
-                        <Select
-                          defaultValue="All"
-                          key={filterColumn}
-                          value={selectedFilters[filterColumn]}
-                          variant={variant}
-                          onChange={(e: SelectChangeEvent<unknown>) =>
-                            handleFilterChange(
-                              e as React.ChangeEvent<{ value: string }>,
-                              filterColumn
-                            )
-                          }
-                          style={{
-                            width: '15rem',
-                            marginBottom: '1rem'
-                          }}
-                          inputProps={{ 'aria-label': 'Without label' }}
-                          displayEmpty
-                        >
-                          {showAllOption && <MenuItem value="All">All</MenuItem>}
-                          {options.map((option) => (
-                            <MenuItem key={option.value} value={option.value}>
-                              {option.label}
-                            </MenuItem>
-                          ))}
-                        </Select>
-                      </div>
-                    );
-                  })}
-
-                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-                    <Button variant="contained" onClick={handleApplyOnClick}>
-                      Apply
-                    </Button>
-                  </div>
-                </Paper>
-              </div>
+        {!isMobile ? (
+          <PopperListener
+            id={open && anchorEl ? 'transition-popper' : undefined}
+            open={open}
+            anchorEl={anchorEl}
+            placement="bottom-end"
+          >
+            <ClickAwayListener onClickAway={handleClose}>
+              <Paper
+                sx={{
+                  padding: '1rem',
+                  paddingTop: '1.8rem',
+                  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+                  backgroundColor: theme.palette.background.surfaces
+                }}
+              >
+                {renderFilterContent()}
+              </Paper>
             </ClickAwayListener>
-          </div>
-        </PopperListener>
+          </PopperListener>
+        ) : (
+          <Drawer
+            anchor="bottom"
+            open={open}
+            onClose={handleClose}
+            PaperProps={{
+              style: {
+                padding: '0 1rem 1rem 1rem',
+                backgroundColor: theme.palette.background.surfaces
+              }
+            }}
+          >
+            {renderFilterContent()}
+          </Drawer>
+        )}
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default UniversalFilter;