@applica-software-guru/react-admin 1.0.41 → 1.0.43

package/src/components/Layout/Drawer/DrawerContent/Navigation/NavGroup.jsx

@@ -9,17 +9,17 @@ import {
   Popper,
   Typography,
   useMediaQuery
-} from '@mui/material'
-import { DownOutlined, RightOutlined } from '@ant-design/icons'
-import { Fragment, useEffect, useState } from 'react'
-import { styled, useTheme } from '@mui/material/styles'
-import { useMenuConfig, useThemeConfig } from '../../../../../hooks'
+} from '@mui/material';
+import { DownOutlined, RightOutlined } from '@ant-design/icons';
+import { Fragment, useEffect, useState } from 'react';
+import { styled, useTheme } from '@mui/material/styles';
+import { useMenuConfig, useThemeConfig } from '../../../../../hooks';
 
-import NavCollapse from './NavCollapse'
-import NavItem from './NavItem'
-import PropTypes from 'prop-types'
-import { Transitions } from '../../../../@extended'
-import { useTranslate } from 'react-admin'
+import NavCollapse from './NavCollapse';
+import NavItem from './NavItem';
+import PropTypes from 'prop-types';
+import { Transitions } from '../../../../@extended';
+import { useTranslate } from 'react-admin';
 
 const PopperStyled = styled(Popper)(({ theme }) => ({
   overflow: 'visible',
@@ -39,95 +39,85 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
     borderStyle: 'solid',
     borderColor: `${theme.palette.background.paper}  transparent transparent ${theme.palette.background.paper}`
   }
-}))
+}));
 
-const NavGroup = ({
-  item,
-  lastItem,
-  remItems,
-  lastItemId,
-  setSelectedItems,
-  selectedItems,
-  setSelectedLevel,
-  selectedLevel
-}) => {
-  const theme = useTheme()
-  const translate = useTranslate()
-  const { pathname } = { pathname: '' } // useLocation()
-  const { menuOrientation, isVerticalLayout } = useThemeConfig()
-  const menu = useMenuConfig()
-  const { drawerOpen, selectedID } = menu
-  const { activeID } = useMenuConfig()
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }) => {
+  const theme = useTheme();
+  const translate = useTranslate();
+  const { pathname } = { pathname: '' }; // useLocation()
+  const { menuOrientation, isVerticalLayout } = useThemeConfig();
+  const menu = useMenuConfig();
+  const { drawerOpen, selectedID } = menu;
+  const { activeID } = useMenuConfig();
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
-  const [anchorEl, setAnchorEl] = useState(null)
-  const [currentItem, setCurrentItem] = useState(item)
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [currentItem, setCurrentItem] = useState(item);
 
-  const openMini = Boolean(anchorEl)
+  const openMini = Boolean(anchorEl);
 
   useEffect(() => {
     if (lastItem) {
       if (item.id === lastItemId) {
-        const localItem = { ...item }
-        const elements = remItems.map((ele) => ele.elements)
-        localItem.children = elements.flat(1)
-        setCurrentItem(localItem)
+        const localItem = { ...item };
+        const elements = remItems.map((ele) => ele.elements);
+        localItem.children = elements.flat(1);
+        setCurrentItem(localItem);
       } else {
-        setCurrentItem(item)
+        setCurrentItem(item);
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item, lastItem, downLG])
+  }, [item, lastItem, downLG]);
 
   const checkOpenForParent = (child, id) => {
     child.forEach((ele) => {
       if (ele.children?.length) {
-        checkOpenForParent(ele.children, currentItem.id)
+        checkOpenForParent(ele.children, currentItem.id);
       }
       if (ele.url === pathname) {
-        activeID(id)
+        activeID(id);
       }
-    })
-  }
+    });
+  };
   const checkSelectedOnload = (data) => {
-    const childrens = data.children ? data.children : []
+    const childrens = data.children ? data.children : [];
     childrens.forEach((itemCheck) => {
       if (itemCheck.children?.length) {
-        checkOpenForParent(itemCheck.children, currentItem.id)
+        checkOpenForParent(itemCheck.children, currentItem.id);
       }
       if (itemCheck.url === pathname) {
-        activeID(currentItem.id)
+        activeID(currentItem.id);
       }
-    })
-  }
+    });
+  };
 
   useEffect(() => {
-    checkSelectedOnload(currentItem)
-    if (openMini) setAnchorEl(null)
+    checkSelectedOnload(currentItem);
+    if (openMini) setAnchorEl(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, currentItem])
+  }, [pathname, currentItem]);
 
   const handleClick = (event) => {
     if (!openMini) {
-      setAnchorEl(event?.currentTarget)
+      setAnchorEl(event?.currentTarget);
     }
-  }
+  };
 
   const handleClose = () => {
-    setAnchorEl(null)
-  }
+    setAnchorEl(null);
+  };
 
-  const Icon = currentItem?.icon
+  const Icon = currentItem?.icon;
   const itemIcon = currentItem?.icon ? (
     <Icon
       style={{
         fontSize: 20,
         stroke: '1.5',
-        color:
-          selectedID === currentItem.id ? theme.palette.primary.main : theme.palette.secondary.dark
+        color: selectedID === currentItem.id ? theme.palette.primary.main : theme.palette.secondary.dark
       }}
     />
-  ) : null
+  ) : null;
 
   const navCollapse = item.children?.map((menuItem) => {
     switch (menuItem.type) {
@@ -143,12 +133,12 @@ const NavGroup = ({
             level={1}
             parentId={currentItem.id}
           />
-        )
+        );
       case 'item':
-        return <NavItem key={menuItem.id} item={menuItem} level={1} />
+        return <NavItem key={menuItem.id} item={menuItem} level={1} />;
       default:
     }
-  })
+  });
 
   const moreItems = remItems.map((itemRem, i) => (
     <Fragment key={i}>
@@ -171,19 +161,19 @@ const NavGroup = ({
                 selectedLevel={selectedLevel}
                 selectedItems={selectedItems}
               />
-            )
+            );
           case 'item':
-            return <NavItem key={menu.id} item={menu} level={1} />
+            return <NavItem key={menu.id} item={menu} level={1} />;
           default:
             return (
               <Typography key={menu.id} variant="h6" color="error" align="center">
                 Menu Items Error
               </Typography>
-            )
+            );
         }
       })}
     </Fragment>
-  ))
+  ));
 
   // menu list collapse & items
   const items = currentItem.children?.map((menu) => {
@@ -200,19 +190,19 @@ const NavGroup = ({
             selectedLevel={selectedLevel}
             selectedItems={selectedItems}
           />
-        )
+        );
       case 'item':
-        return <NavItem key={menu.id} item={menu} level={1} />
+        return <NavItem key={menu.id} item={menu} level={1} />;
       default:
         return (
           <Typography key={menu.id} variant="h6" color="error" align="center">
             Menu Items Error
           </Typography>
-        )
+        );
     }
-  })
+  });
 
-  const popperId = openMini ? `group-pop-${item.id}` : undefined
+  const popperId = openMini ? `group-pop-${item.id}` : undefined;
 
   return (
     <>
@@ -222,10 +212,7 @@ const NavGroup = ({
             item.title &&
             drawerOpen && (
               <Box sx={{ pl: 3, mb: 1.5 }}>
-                <Typography
-                  variant="subtitle2"
-                  color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}
-                >
+                <Typography variant="subtitle2" color={theme.palette.mode === 'dark' ? 'textSecondary' : 'text.secondary'}>
                   {item.title}
                 </Typography>
                 {item.caption && (
@@ -262,11 +249,7 @@ const NavGroup = ({
           >
             {itemIcon && (
               <ListItemIcon sx={{ minWidth: 28 }}>
-                {currentItem.id === lastItemId ? (
-                  <DownOutlined style={{ fontSize: 20, stroke: '1.5' }} />
-                ) : (
-                  itemIcon
-                )}
+                {currentItem.id === lastItemId ? <DownOutlined style={{ fontSize: 20, stroke: '1.5' }} /> : itemIcon}
               </ListItemIcon>
             )}
             <ListItemText
@@ -274,11 +257,7 @@ const NavGroup = ({
               primary={
                 <Typography
                   variant="body1"
-                  color={
-                    selectedID === currentItem.id
-                      ? theme.palette.primary.main
-                      : theme.palette.secondary.dark
-                  }
+                  color={selectedID === currentItem.id ? theme.palette.primary.main : theme.palette.secondary.dark}
                 >
                   {currentItem.id === lastItemId ? translate('ra.actions.more') : currentItem.title}
                 </Typography>
@@ -342,8 +321,8 @@ const NavGroup = ({
         </List>
       )}
     </>
-  )
-}
+  );
+};
 
 NavGroup.propTypes = {
   item: PropTypes.object,
@@ -354,6 +333,6 @@ NavGroup.propTypes = {
   selectedItems: PropTypes.string,
   setSelectedLevel: PropTypes.func,
   selectedLevel: PropTypes.number
-}
+};
 
-export default NavGroup
+export default NavGroup;

package/src/components/Layout/Drawer/DrawerContent/Navigation/NavItem.jsx

@@ -1,62 +1,47 @@
-import {
-  Avatar,
-  Chip,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-  useMediaQuery,
-} from '@mui/material'
-import { Link, useLocation } from 'react-router-dom'
-import { forwardRef, useEffect } from 'react'
-import { useMenuConfig, useThemeConfig } from '../../../../../hooks'
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
+import { forwardRef, useEffect } from 'react';
+import { useMenuConfig, useThemeConfig } from '../../../../../hooks';
 
-import { Dot } from '../../../../@extended'
-import PropTypes from 'prop-types'
-import { useTheme } from '@mui/material/styles'
+import { Dot } from '../../../../@extended';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 
 const NavItem = ({ item, level }) => {
-  const theme = useTheme()
+  const theme = useTheme();
 
-  const { menuOrientation, isVerticalLayout } = useThemeConfig()
-  const { drawerOpen, openItem, activeItem, openDrawer } = useMenuConfig()
+  const { menuOrientation, isVerticalLayout } = useThemeConfig();
+  const { drawerOpen, openItem, activeItem, openDrawer } = useMenuConfig();
 
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
-  let itemTarget = '_self'
+  let itemTarget = '_self';
   if (item.target) {
-    itemTarget = '_blank'
+    itemTarget = '_blank';
   }
 
   let listItemProps = {
-    component: forwardRef((props, ref) => (
-      <Link {...props} to={item.url} target={itemTarget} ref={ref} />
-    )),
-  }
+    component: forwardRef((props, ref) => <Link {...props} to={item.url} target={itemTarget} ref={ref} />)
+  };
   if (item?.external) {
-    listItemProps = { component: 'a', href: item.url, target: itemTarget }
+    listItemProps = { component: 'a', href: item.url, target: itemTarget };
   }
 
-  const Icon = item.icon
-  const itemIcon = item.icon ? (
-    <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} />
-  ) : (
-    false
-  )
-  const isSelected = openItem.findIndex((id) => id === item.id) > -1
-  const { pathname } = useLocation()
+  const Icon = item.icon;
+  const itemIcon = item.icon ? <Icon style={{ fontSize: drawerOpen ? '1rem' : '1.25rem' }} /> : false;
+  const isSelected = openItem.findIndex((id) => id === item.id) > -1;
+  const { pathname } = useLocation();
 
   // active menu item on page load
   useEffect(() => {
     if (pathname.includes(item.url)) {
-      activeItem([item.id])
+      activeItem([item.id]);
     }
     // eslint-disable-next-line
-  }, [pathname])
+  }, [pathname]);
 
-  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary'
-  const iconSelectedColor =
-    theme.palette.mode === 'dark' && drawerOpen ? 'text.primary' : 'primary.main'
+  const textColor = theme.palette.mode === 'dark' ? 'grey.400' : 'text.primary';
+  const iconSelectedColor = theme.palette.mode === 'dark' && drawerOpen ? 'text.primary' : 'primary.main';
   return (
     <>
       {isVerticalLayout(menuOrientation) || downLG ? (
@@ -70,7 +55,7 @@ const NavItem = ({ item, level }) => {
             py: !drawerOpen && level === 1 ? 1.25 : 1,
             ...(drawerOpen && {
               '&:hover': {
-                bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
+                bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
               },
               '&.Mui-selected': {
                 bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
@@ -78,24 +63,24 @@ const NavItem = ({ item, level }) => {
                 color: iconSelectedColor,
                 '&:hover': {
                   color: iconSelectedColor,
-                  bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter',
-                },
-              },
+                  bgcolor: theme.palette.mode === 'dark' ? 'divider' : 'primary.lighter'
+                }
+              }
             }),
             ...(!drawerOpen && {
               '&:hover': {
-                bgcolor: 'transparent',
+                bgcolor: 'transparent'
               },
               '&.Mui-selected': {
                 '&:hover': {
-                  bgcolor: 'transparent',
+                  bgcolor: 'transparent'
                 },
-                bgcolor: 'transparent',
-              },
-            }),
+                bgcolor: 'transparent'
+              }
+            })
           }}
           {...(downLG && {
-            onClick: () => openDrawer(false),
+            onClick: () => openDrawer(false)
           })}
         >
           {itemIcon && (
@@ -110,17 +95,16 @@ const NavItem = ({ item, level }) => {
                   alignItems: 'center',
                   justifyContent: 'center',
                   '&:hover': {
-                    bgcolor:
-                      theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter',
-                  },
+                    bgcolor: theme.palette.mode === 'dark' ? 'secondary.light' : 'secondary.lighter'
+                  }
                 }),
                 ...(!drawerOpen &&
                   isSelected && {
                     bgcolor: theme.palette.mode === 'dark' ? 'primary.900' : 'primary.lighter',
                     '&:hover': {
-                      bgcolor: theme.palette.mode === 'dark' ? 'primary.darker' : 'primary.lighter',
-                    },
-                  }),
+                      bgcolor: theme.palette.mode === 'dark' ? 'primary.darker' : 'primary.lighter'
+                    }
+                  })
               }}
             >
               {itemIcon}
@@ -154,28 +138,28 @@ const NavItem = ({ item, level }) => {
             zIndex: 1201,
             ...(drawerOpen && {
               '&:hover': {
-                bgcolor: 'transparent',
+                bgcolor: 'transparent'
               },
               '&.Mui-selected': {
                 bgcolor: 'transparent',
                 color: iconSelectedColor,
                 '&:hover': {
                   color: iconSelectedColor,
-                  bgcolor: 'transparent',
-                },
-              },
+                  bgcolor: 'transparent'
+                }
+              }
             }),
             ...(!drawerOpen && {
               '&:hover': {
-                bgcolor: 'transparent',
+                bgcolor: 'transparent'
               },
               '&.Mui-selected': {
                 '&:hover': {
-                  bgcolor: 'transparent',
+                  bgcolor: 'transparent'
                 },
-                bgcolor: 'transparent',
-              },
-            }),
+                bgcolor: 'transparent'
+              }
+            })
           }}
         >
           {itemIcon && (
@@ -189,16 +173,16 @@ const NavItem = ({ item, level }) => {
                   alignItems: 'center',
                   justifyContent: 'flex-start',
                   '&:hover': {
-                    bgcolor: 'transparent',
-                  },
+                    bgcolor: 'transparent'
+                  }
                 }),
                 ...(!drawerOpen &&
                   isSelected && {
                     bgcolor: 'transparent',
                     '&:hover': {
-                      bgcolor: 'transparent',
-                    },
-                  }),
+                      bgcolor: 'transparent'
+                    }
+                  })
               }}
             >
               {itemIcon}
@@ -214,16 +198,16 @@ const NavItem = ({ item, level }) => {
                   alignItems: 'center',
                   justifyContent: 'flex-start',
                   '&:hover': {
-                    bgcolor: 'transparent',
-                  },
+                    bgcolor: 'transparent'
+                  }
                 }),
                 ...(!drawerOpen &&
                   isSelected && {
                     bgcolor: 'transparent',
                     '&:hover': {
-                      bgcolor: 'transparent',
-                    },
-                  }),
+                      bgcolor: 'transparent'
+                    }
+                  })
               }}
             >
               <Dot size={4} color={isSelected ? 'primary' : 'secondary'} />
@@ -248,12 +232,12 @@ const NavItem = ({ item, level }) => {
         </ListItemButton>
       )}
     </>
-  )
-}
+  );
+};
 
 NavItem.propTypes = {
   item: PropTypes.object,
-  level: PropTypes.number,
-}
+  level: PropTypes.number
+};
 
-export default NavItem
+export default NavItem;

package/src/components/Layout/Drawer/DrawerContent/Navigation/index.jsx

@@ -1,34 +1,34 @@
-import { Box, Typography, useMediaQuery } from '@mui/material'
-import { useMenu, useMenuConfig, useThemeConfig } from '../../../../../hooks'
+import { Box, Typography, useMediaQuery } from '@mui/material';
+import { useMenu, useMenuConfig, useThemeConfig } from '../../../../../hooks';
 
-import NavGroup from './NavGroup'
-import { useState } from 'react'
-import { useTheme } from '@mui/material/styles'
+import NavGroup from './NavGroup';
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
 
 const Navigation = () => {
-  const theme = useTheme()
-  const { menu, isLoading } = useMenu()
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'))
+  const theme = useTheme();
+  const { menu, isLoading } = useMenu();
+  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
 
-  const { menuOrientation, horizontalMaxItems, isHorizontalLayout } = useThemeConfig()
-  const { drawerOpen } = useMenuConfig()
-  const [selectedItems, setSelectedItems] = useState('')
-  const [selectedLevel, setSelectedLevel] = useState(0)
-  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG
-  const lastItem = isHorizontal ? horizontalMaxItems : null
+  const { menuOrientation, horizontalMaxItems, isHorizontalLayout } = useThemeConfig();
+  const { drawerOpen } = useMenuConfig();
+  const [selectedItems, setSelectedItems] = useState('');
+  const [selectedLevel, setSelectedLevel] = useState(0);
+  const isHorizontal = isHorizontalLayout(menuOrientation) && !downLG;
+  const lastItem = isHorizontal ? horizontalMaxItems : null;
 
-  let lastItemIndex = isLoading ? 0 : menu.length - 1
-  let remItems = []
-  let lastItemId
+  let lastItemIndex = isLoading ? 0 : menu.length - 1;
+  let remItems = [];
+  let lastItemId;
 
   if (!isLoading && lastItem && lastItem < menu.length) {
-    lastItemId = menu[lastItem - 1].id
-    lastItemIndex = lastItem - 1
+    lastItemId = menu[lastItem - 1].id;
+    lastItemIndex = lastItem - 1;
     remItems = menu.slice(lastItem - 1, menu.length).map((item) => ({
       title: item.title,
       elements: item.children,
-      icon: item.icon,
-    }))
+      icon: item.icon
+    }));
   }
 
   const navGroups = isLoading
@@ -48,26 +48,26 @@ const Navigation = () => {
                 lastItemId={lastItemId}
                 item={item}
               />
-            )
+            );
           default:
             return (
               <Typography key={item.id} variant="h6" color="error" align="center">
                 Fix - Navigation Group
               </Typography>
-            )
+            );
         }
-      })
+      });
   return (
     <Box
       sx={{
         pt: drawerOpen ? (isHorizontal ? 0 : 2) : 0,
         '& > ul:first-of-type': { mt: 0 },
-        display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block',
+        display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block'
       }}
     >
       {navGroups}
     </Box>
-  )
-}
+  );
+};
 
-export default Navigation
+export default Navigation;

package/src/components/Layout/Drawer/DrawerContent/index.jsx

@@ -1,5 +1,5 @@
-import Navigation from './Navigation'
-import { SimpleBar } from '../../../third-party'
+import Navigation from './Navigation';
+import { SimpleBar } from '../../../third-party';
 
 const DrawerContent = () => {
   return (
@@ -7,13 +7,13 @@ const DrawerContent = () => {
       sx={{
         '& .simplebar-content': {
           display: 'flex',
-          flexDirection: 'column',
-        },
+          flexDirection: 'column'
+        }
       }}
     >
       <Navigation />
     </SimpleBar>
-  )
-}
+  );
+};
 
-export default DrawerContent
+export default DrawerContent;