feat(datatable): common enlarge and close btn #1494

packages/.eslintrc

@@ -63,6 +63,7 @@
     "react/jsx-props-no-spreading": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-unresolved": "off",
+    "react/require-default-props": "warn",
     "no-restricted-imports": [
       "error",
       {

packages/geoview-core/src/core/components/common/close-button.tsx

@@ -0,0 +1,42 @@
+import { SetStateAction, Dispatch } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/ui';
+import { getSxClasses } from './enlarge-button-style';
+
+interface CloseButtonProps {
+  isLayersPanelVisible: boolean;
+  setIsLayersPanelVisible: Dispatch<SetStateAction<boolean>>;
+}
+
+/**
+ * Create close button
+ * @param {boolean} isLayersPanelVisible show/hide the list in left panel
+ * @param {function} setIsLayersPanelVisible dispatch function to update isLayersPanelVisible
+ * @returns JSX.element
+ */
+export function CloseButton({ isLayersPanelVisible, setIsLayersPanelVisible }: CloseButtonProps) {
+  const { t } = useTranslation<string>();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  return (
+    <Button
+      type="text"
+      size="small"
+      sx={{
+        ...sxClasses.enlargeBtn,
+        marginLeft: '1rem',
+        [theme.breakpoints.up('md')]: { display: 'none' },
+        [theme.breakpoints.between('sm', 'md')]: { display: !isLayersPanelVisible ? 'block' : 'none' },
+        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'block' : 'none' },
+      }}
+      onClick={() => setIsLayersPanelVisible(true)}
+      tooltip={t('dataTable.close') ?? ''}
+      tooltipPlacement="top"
+    >
+      {t('dataTable.close')}
+    </Button>
+  );
+}

packages/geoview-core/src/core/components/common/enlarge-button-style.tsx

@@ -0,0 +1,31 @@
+import { Theme } from '@mui/material';
+
+export const getSxClasses = (theme: Theme) => ({
+  enlargeBtn: {
+    width: '7rem !important',
+    height: '2.5rem !important',
+    borderRadius: '1.5rem',
+    boxShadow: '0px 3px 6px #00000029',
+    marginTop: '0.25rem',
+    background: '#F4F5FF !important',
+    '>div': {
+      color: `${theme.palette.primary.main} !important`,
+    },
+    '& svg': {
+      marginRight: '0.25rem',
+    },
+    ':hover': {
+      backgroundColor: `${theme.palette.primary.main} !important`,
+      '> div': {
+        color: `${theme.palette.common.white} !important`,
+      },
+      '& svg': {
+        color: `${theme.palette.common.white} !important`,
+      },
+    },
+    [theme.breakpoints.down('md')]: { display: 'none' },
+  },
+  enlargeBtnIcon: {
+    color: theme.palette.primary.main,
+  },
+});

packages/geoview-core/src/core/components/common/enlarge-button.tsx

@@ -0,0 +1,37 @@
+import { Dispatch } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { ArrowBackIcon, ArrowForwardIcon, Button } from '@/ui';
+import { getSxClasses } from './enlarge-button-style';
+
+interface EnlargeButtonProps {
+  isEnlargeDataTable: boolean;
+  setIsEnlargeDataTable: Dispatch<boolean>;
+}
+
+/**
+ * Create enlarge button
+ * @param {boolean} isEnlargeDataTable
+ * @param {function} setIsEnlargeDataTable
+ * @returns JSX.element
+ */
+export function EnlargeButton({ isEnlargeDataTable, setIsEnlargeDataTable }: EnlargeButtonProps) {
+  const { t } = useTranslation<string>();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  return (
+    <Button
+      type="text"
+      size="small"
+      sx={sxClasses.enlargeBtn}
+      onClick={() => setIsEnlargeDataTable(!isEnlargeDataTable)}
+      tooltip={isEnlargeDataTable ? t('dataTable.reduceBtn')! : t('dataTable.enlargeBtn')!}
+      tooltipPlacement="top"
+    >
+      {isEnlargeDataTable ? <ArrowForwardIcon sx={sxClasses.enlargeBtnIcon} /> : <ArrowBackIcon sx={sxClasses.enlargeBtnIcon} />}
+      {isEnlargeDataTable ? t('dataTable.reduceBtn') : t('dataTable.enlargeBtn')}
+    </Button>
+  );
+}

packages/geoview-core/src/core/components/common/index.ts

@@ -0,0 +1,5 @@
+export * from './close-button';
+export * from './enlarge-button';
+export * from './responsive-grid';
+export * from './layer-list';
+export * from './layer-title';

packages/geoview-core/src/core/components/common/layer-list-style.ts

@@ -0,0 +1,77 @@
+import { Theme } from '@mui/material';
+
+export const getSxClasses = (theme: Theme) => ({
+  list: {
+    color: 'text.primary',
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      paddingRight: '1rem',
+    },
+    [theme.breakpoints.up('xl')]: {
+      paddingRight: '2rem',
+    },
+    '& .MuiListItemText-primary': {
+      font: theme.footerPanel.layerTitleFont,
+    },
+
+    '& .MuiListItem-root': {
+      height: '100%',
+      '& .MuiListItemButton-root': {
+        padding: '0 0 0 16px',
+        height: '100%',
+      },
+    },
+    '& .MuiListItemButton-root': {
+      minHeight: '73px',
+    },
+    '& .MuiListItemIcon-root': {
+      minWidth: '2rem',
+    },
+    '& .MuiListItemText-root': {
+      '>span': {
+        fontSize: '1rem',
+      },
+      '> p': {
+        fontSize: '0.875rem',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+    },
+  },
+  listPrimaryText: {
+    minWidth: '0',
+    marginTop: '0.5rem',
+    marginBottom: '0.5rem',
+    marginLeft: '10px',
+    flex: '1 1 auto',
+    display: 'flex',
+    flexDirection: 'column',
+    '& p': {
+      fontSize: '1rem',
+      font: '600 18px / 24px Roboto, Helvetica, Arial, sans-serif;',
+      fontWeight: 400,
+      lineHeight: 1.5,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+    },
+    '>div': {
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: '4px',
+      '>p': {
+        fontSize: '0.875rem !important',
+        color: theme.palette.text.secondary,
+      },
+      ' svg': {
+        width: '0.75em',
+        height: '0.75em',
+      },
+    },
+  },
+  paper: { marginBottom: '1rem' },
+  borderWithIndex: `2px solid ${theme.palette.primary.main}`,
+  borderNone: 'none',
+  headline: { fontSize: '1.125rem', fontWeight: 'bold' },
+});

packages/geoview-core/src/core/components/common/layer-list.tsx

@@ -0,0 +1,89 @@
+import { ReactNode } from 'react';
+import { useTheme } from '@mui/material/styles';
+import { Box, ChevronRightIcon, IconButton, List, ListItem, ListItemButton, ListItemIcon, Paper, Tooltip, Typography } from '@/ui';
+import { getSxClasses } from './layer-list-style';
+import { IconStack } from '@/app';
+
+export interface LayerListEntry {
+  layerName: string;
+  layerPath: string;
+  layerFeatures?: ReactNode | undefined;
+  mapFilteredIcon?: ReactNode | undefined;
+  tooltip?: ReactNode | undefined;
+}
+
+interface LayerListProps {
+  isEnlargeDataTable: boolean;
+  layerList: LayerListEntry[];
+  selectedLayerIndex: number;
+  handleListItemClick: (layer: LayerListEntry, index: number) => void;
+}
+
+/**
+ * Create a list of layers
+ * @param {LayerListEntry} layerList  Array of layer list entries.
+ * @param {boolean} isEnlargeDataTable  Boolean value if right panel is enlarged or not.
+ * @param {number} selectedLayerIndex  Current index of list item selected.
+ * @param {Function} handleListItemClick  Callback function excecuted when list item is clicked.
+ * @returns
+ */
+export function LayerList({ layerList, isEnlargeDataTable, selectedLayerIndex, handleListItemClick }: LayerListProps) {
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  return (
+    <List sx={sxClasses.list}>
+      {layerList.map((layer, index) => (
+        <Paper
+          sx={{ ...sxClasses.paper, border: selectedLayerIndex === index ? sxClasses.borderWithIndex : sxClasses.borderNone }}
+          key={layer.layerPath}
+        >
+          <Tooltip title={layer.tooltip} placement="top" arrow>
+            <Box>
+              <ListItem disablePadding>
+                <ListItemButton selected={selectedLayerIndex === index} onClick={() => handleListItemClick(layer, index)}>
+                  <ListItemIcon>
+                    <IconStack layerPath={layer.layerPath} />
+                  </ListItemIcon>
+                  <Box sx={sxClasses.listPrimaryText}>
+                    <Typography component="p">{layer.layerName}</Typography>
+                    {!!layer?.layerFeatures && (
+                      <Box sx={{ display: 'flex', alignContent: 'center' }}>
+                        <Typography component="p" variant="subtitle1" noWrap>
+                          {layer.layerFeatures}
+                        </Typography>
+
+                        {!!layer.mapFilteredIcon && layer.mapFilteredIcon}
+                      </Box>
+                    )}
+                  </Box>
+                  <Box
+                    sx={{
+                      padding: isEnlargeDataTable ? '0.25rem' : '1rem',
+                      paddingRight: isEnlargeDataTable ? '0.25rem' : '1rem',
+                      [theme.breakpoints.down('xl')]: {
+                        display: isEnlargeDataTable ? 'none !important' : 'block',
+                      },
+                      [theme.breakpoints.down('sm')]: {
+                        display: 'none',
+                      },
+                    }}
+                  >
+                    <IconButton
+                      disabled
+                      edge="end"
+                      size="small"
+                      sx={{ color: `${theme.palette.primary.main} !important`, background: `${theme.palette.grey.A100} !important` }}
+                    >
+                      <ChevronRightIcon />
+                    </IconButton>
+                  </Box>
+                </ListItemButton>
+              </ListItem>
+            </Box>
+          </Tooltip>
+        </Paper>
+      ))}
+    </List>
+  );
+}

packages/geoview-core/src/core/components/common/layer-title.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@/ui';
+import { useTheme } from '@mui/material';
+
+interface LayerTitleProp {
+  children: React.ReactNode;
+}
+
+/**
+ * Create Layer Title.
+ * @param {string} children the name of the layer.
+ * @returns JSX.Element
+ */
+export function LayerTitle({ children }: LayerTitleProp) {
+  const theme = useTheme();
+
+  return (
+    <Typography
+      sx={{ font: theme.footerPanel.layerTitleFont, marginTop: '12px', [theme.breakpoints.up('md')]: { display: 'none' } }}
+      component="span"
+    >
+      {children}
+    </Typography>
+  );
+}

packages/geoview-core/src/core/components/responsive-grid/responsive-grid.tsx → packages/geoview-core/src/core/components/common/responsive-grid.tsx

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
-import { GridProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { Grid } from '@/ui';
+import { Grid, GridProps, SxProps } from '@/ui';
 
 interface ResponsiveGridProps extends GridProps {
   children: ReactNode;
@@ -10,6 +9,7 @@
 interface ResponsiveGridPanelProps extends GridProps {
   children: ReactNode;
   isLayersPanelVisible: boolean;
+  sxProps?: SxProps | undefined;
 }
 
 /**
@@ -37,6 +37,7 @@
   return (
     <Grid
       item
+      xs={isLayersPanelVisible ? 12 : 0}
       sx={{
         [theme.breakpoints.down('md')]: { display: isLayersPanelVisible ? 'block' : 'none' },
       }}
@@ -53,15 +54,17 @@
  * @param {boolean} isLayersPanelVisible panel visibility
  * @returns JSX.Element
  */
-function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, ...rest }: ResponsiveGridPanelProps) {
+function ResponsiveGridRightPanel({ children, isLayersPanelVisible = false, sxProps = {}, ...rest }: ResponsiveGridPanelProps) {
   const theme = useTheme();
   return (
     <Grid
       item
+      xs={!isLayersPanelVisible ? 12 : 0}
       sx={{
         position: 'relative',
         [theme.breakpoints.up('md')]: { paddingLeft: '1rem' },
-        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'block' : 'none', minHeight: '250px' },
+        [theme.breakpoints.down('md')]: { display: !isLayersPanelVisible ? 'block' : 'none' },
+        ...sxProps,
       }}
       {...rest}
     >