From 717dacb21b76ef25b2bb4a09df2b8add2dde3364 Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Sun, 4 Aug 2024 02:37:27 +0530
Subject: [PATCH 1/2] feat(action): share

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/ResponsiveDataTable.tsx | 69 ++++++++++++++++++++++++------
 1 file changed, 56 insertions(+), 13 deletions(-)

diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
index 8b79738e..aa7b6fcd 100644
--- a/src/custom/ResponsiveDataTable.tsx
+++ b/src/custom/ResponsiveDataTable.tsx
@@ -1,7 +1,8 @@
 import { Theme, ThemeProvider, createTheme, styled, useTheme } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
-import { ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
+import { Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
+import { ShareIcon } from '../icons';
 import { EllipsisIcon } from '../icons/Ellipsis';
 import TooltipIcon from './TooltipIcon';
 
@@ -18,14 +19,28 @@ export const DataTableEllipsisMenu: React.FC<{
   actionsList: NonNullable<Column['options']>['actionsList'];
 }> = ({ actionsList }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
+  const theme = useTheme();
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
+    setIsSocialShareOpen(false);
   };
 
-  const theme = useTheme();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleActionClick = (action: any) => {
+    if (action.type === 'share-social') {
+      setIsSocialShareOpen(!isSocialShareOpen);
+    } else {
+      if (action.onClick) {
+        action.onClick();
+      }
+      handleClose();
+    }
+  };
 
   return (
     <>
@@ -43,17 +58,43 @@ export const DataTableEllipsisMenu: React.FC<{
       >
         {actionsList &&
           actionsList.map((action, index) => (
-            <IconWrapper key={index} disabled={action.disabled}>
-              <MenuItem
-                sx={{ width: '-webkit-fill-available' }}
-                key={index}
-                onClick={action.onClick}
-                disabled={action.disabled}
-              >
-                <ListItemIcon>{action.icon}</ListItemIcon>
-                <ListItemText>{action.title}</ListItemText>
-              </MenuItem>
-            </IconWrapper>
+            <React.Fragment key={index}>
+              {action.type === 'share-social' ? (
+                <>
+                  <MenuItem
+                    sx={{
+                      width: '-webkit-fill-available',
+                      background: theme.palette.background.surfaces
+                    }}
+                    onClick={() => handleActionClick(action)}
+                    disabled={action.disabled}
+                  >
+                    <ListItemIcon>
+                      <ShareIcon width={24} height={24} />
+                    </ListItemIcon>
+                    <ListItemText>{action.title}</ListItemText>
+                  </MenuItem>
+                  <Collapse in={isSocialShareOpen}>{action.customComponent}</Collapse>
+                </>
+              ) : (
+                <>
+                  <IconWrapper key={index} disabled={action.disabled}>
+                    <MenuItem
+                      sx={{
+                        width: '-webkit-fill-available',
+                        background: theme.palette.background.surfaces
+                      }}
+                      key={index}
+                      onClick={() => handleActionClick(action)}
+                      disabled={action.disabled}
+                    >
+                      <ListItemIcon>{action.icon}</ListItemIcon>
+                      <ListItemText>{action.title}</ListItemText>
+                    </MenuItem>
+                  </IconWrapper>
+                </>
+              )}
+            </React.Fragment>
           ))}
       </Menu>
     </>
@@ -201,6 +242,8 @@ export interface Column {
       icon: JSX.Element;
       onClick: () => void;
       disabled?: boolean;
+      customComponent?: JSX.Element;
+      type?: string;
     }[];
   };
 }

From a966aa800037d4f76c29c72919fdbafd3d2c2f6b Mon Sep 17 00:00:00 2001
From: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
Date: Sun, 4 Aug 2024 03:36:17 +0530
Subject: [PATCH 2/2] fix(styles): remove

Signed-off-by: Sudhanshu Dasgupta <dasguptashivam23@gmail.com>
---
 src/custom/ResponsiveDataTable.tsx | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/custom/ResponsiveDataTable.tsx b/src/custom/ResponsiveDataTable.tsx
index aa7b6fcd..b9d8bdd7 100644
--- a/src/custom/ResponsiveDataTable.tsx
+++ b/src/custom/ResponsiveDataTable.tsx
@@ -1,4 +1,4 @@
-import { Theme, ThemeProvider, createTheme, styled, useTheme } from '@mui/material';
+import { Theme, ThemeProvider, createTheme, styled } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
 import { Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
@@ -20,7 +20,6 @@ export const DataTableEllipsisMenu: React.FC<{
 }> = ({ actionsList }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
-  const theme = useTheme();
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -45,17 +44,7 @@ export const DataTableEllipsisMenu: React.FC<{
   return (
     <>
       <TooltipIcon title="View Actions" onClick={handleClick} icon={<EllipsisIcon />} arrow />
-      <Menu
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-        sx={{
-          ' .MuiPaper-root': {
-            background: theme.palette.background.surfaces
-          }
-        }}
-      >
+      <Menu id="basic-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
         {actionsList &&
           actionsList.map((action, index) => (
             <React.Fragment key={index}>
@@ -63,8 +52,8 @@ export const DataTableEllipsisMenu: React.FC<{
                 <>
                   <MenuItem
                     sx={{
-                      width: '-webkit-fill-available',
-                      background: theme.palette.background.surfaces
+                      width: '-webkit-fill-available'
+                      // background: theme.palette.background.surfaces
                     }}
                     onClick={() => handleActionClick(action)}
                     disabled={action.disabled}
@@ -74,15 +63,17 @@ export const DataTableEllipsisMenu: React.FC<{
                     </ListItemIcon>
                     <ListItemText>{action.title}</ListItemText>
                   </MenuItem>
-                  <Collapse in={isSocialShareOpen}>{action.customComponent}</Collapse>
+                  <Collapse variant="submenu" in={isSocialShareOpen} unmountOnExit>
+                    {action.customComponent}
+                  </Collapse>
                 </>
               ) : (
                 <>
                   <IconWrapper key={index} disabled={action.disabled}>
                     <MenuItem
                       sx={{
-                        width: '-webkit-fill-available',
-                        background: theme.palette.background.surfaces
+                        width: '-webkit-fill-available'
+                        // background: theme.palette.background.surfaces
                       }}
                       key={index}
                       onClick={() => handleActionClick(action)}