@applica-software-guru/react-admin 1.1.93 → 1.1.95

package/src/components/Layout/Header/{HeaderContent/MobileSection.jsx → ResponsiveSection.tsx}

@@ -1,45 +1,38 @@
 import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
-import { IconButton, Transitions } from '../../../@extended';
-import { useEffect, useRef, useState } from 'react';
-
+import { IconButton, Transitions } from '../../@extended';
+import { useRef, useState, useCallback } from 'react';
 import { MoreOutlined } from '@ant-design/icons';
-import Profile from './Profile';
 import { useTheme } from '@mui/material/styles';
+import { useLayoutMediaState, useLayoutThemeState } from '../Provider';
 
-const MobileSection = () => {
-  const theme = useTheme();
-
-  const [open, setOpen] = useState(false);
-  const anchorRef = useRef(null);
-
-  const handleToggle = () => {
-    setOpen((prevOpen) => !prevOpen);
-  };
-
-  const handleClose = (event) => {
-    if (anchorRef.current && anchorRef.current.contains(event.target)) {
-      return;
-    }
-    setOpen(false);
-  };
-
-  const prevOpen = useRef(open);
-  useEffect(() => {
-    if (prevOpen.current === true && open === false) {
-      anchorRef.current.focus();
-    }
-
-    prevOpen.current = open;
-  }, [open]);
+type IResponsiveSectionProps = React.PropsWithChildren;
 
-  const iconBackColorOpen = theme.palette.mode === 'dark' ? 'grey.200' : 'grey.300';
-  const iconBackColor = theme.palette.mode === 'dark' ? 'background.default' : 'grey.100';
+const ResponsiveSection = (props: IResponsiveSectionProps) => {
+  const theme = useTheme(),
+    { downMd } = useLayoutMediaState(),
+    { iconColor, iconColorOpen } = useLayoutThemeState(),
+    [open, setOpen] = useState(false),
+    anchorRef = useRef(null),
+    handleToggle = useCallback(() => {
+      setOpen(!open);
+    }, [open]),
+    //@ts-ignore
+    handleClose = useCallback((event) => {
+      //@ts-ignore
+      if (anchorRef.current && anchorRef.current.contains(event.target)) {
+        return;
+      }
+      setOpen(false);
+    }, []);
 
-  return (
+  return !downMd ? (
+    <>{props.children}</>
+  ) : (
     <>
-      <Box sx={{ flexShrink: 0, ml: 0.75 }}>
+      <Box sx={{ flexShrink: 0 }}>
+        {/*@ts-ignore*/}
         <IconButton
-          sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
+          sx={{ color: 'text.primary', bgcolor: open ? iconColorOpen : iconColor }}
           aria-label="open more menu"
           ref={anchorRef}
           aria-controls={open ? 'menu-list-grow' : undefined}
@@ -71,13 +64,13 @@ const MobileSection = () => {
         }}
       >
         {({ TransitionProps }) => (
+          //@ts-ignore
           <Transitions type="fade" in={open} {...TransitionProps}>
+            {/*@ts-ignore*/}
             <Paper sx={{ boxShadow: theme.customShadows.z1 }}>
               <ClickAwayListener onClickAway={handleClose}>
                 <AppBar color="inherit">
-                  <Toolbar>
-                    <Profile />
-                  </Toolbar>
+                  <Toolbar>{props.children}</Toolbar>
                 </AppBar>
               </ClickAwayListener>
             </Paper>
@@ -88,4 +81,4 @@ const MobileSection = () => {
   );
 };
 
-export default MobileSection;
+export { ResponsiveSection };

package/src/components/Layout/Header/Spacer.tsx

@@ -0,0 +1,9 @@
+import { Box, BoxProps } from '@mui/material';
+
+type IHeaderSpacerProps = BoxProps;
+
+function HeaderSpacer(props: IHeaderSpacerProps) {
+  return <Box {...props} flex={1} />;
+}
+
+export { HeaderSpacer };

package/src/components/Layout/Header/index.ts

@@ -0,0 +1,7 @@
+export * from './AppBarStyled';
+export * from './DrawerToggle';
+export * from './Header';
+export * from './Notification';
+export * from './Profile';
+export * from './ResponsiveSection';
+export * from './Spacer';

package/src/components/Layout/HorizontalBar.tsx

@@ -0,0 +1,39 @@
+import { AppBar, Box, Container, useScrollTrigger, useTheme } from '@mui/material';
+import { useThemeConfig } from '../../hooks';
+
+type IHorizontalBarProps = React.PropsWithChildren;
+
+function HorizontalBar(props: IHorizontalBarProps) {
+  const theme = useTheme(),
+    trigger = useScrollTrigger({
+      disableHysteresis: true,
+      threshold: 0
+    }),
+    { container } = useThemeConfig();
+
+  //@ts-ignore
+  theme.shadows[4] = theme.customShadows.z1;
+
+  return (
+    <AppBar
+      elevation={trigger ? 4 : 0}
+      sx={{
+        top: 60,
+        bgcolor: theme.palette.background.paper,
+        width: '100%',
+        height: 62,
+        justifyContent: 'center',
+        borderTop: `1px solid ${theme.palette.divider}`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        zIndex: 1098,
+        color: theme.palette.grey[500]
+      }}
+    >
+      <Container maxWidth={container ? 'xl' : false}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>{props.children}</Box>
+      </Container>
+    </AppBar>
+  );
+}
+
+export { HorizontalBar };

package/src/components/Layout/Layout.tsx

@@ -0,0 +1,60 @@
+import { LoadingIndicator } from 'ra-ui-materialui';
+import { Header, HeaderNotification, HeaderProfile, HeaderSpacer, ResponsiveSection } from './Header';
+import { withLayoutProvider } from './Provider';
+import { LayoutWrapper } from './Wrapper';
+import { LayoutContent } from './Content';
+import { Footer } from './Footer';
+import { useBreadcrumbs } from '../../hooks';
+import { Breadcrumbs } from '../@extended';
+import { Outlet } from 'react-router-dom';
+import { NavMenu } from './NavMenu';
+import { Navigation } from './Navigation';
+
+type ILayoutProps = React.PropsWithChildren<{
+  name: string;
+  version: string;
+}>;
+
+const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
+  const { name, version } = props,
+    { isLoading, navigation, breadcrumbs } = useBreadcrumbs();
+
+  return (
+    <LayoutWrapper>
+      <Header>
+        <HeaderSpacer />
+        <LoadingIndicator />
+        <HeaderNotification />
+        <ResponsiveSection>
+          <HeaderProfile />
+        </ResponsiveSection>
+      </Header>
+      <NavMenu>
+        <Navigation />
+      </NavMenu>
+      <LayoutContent>
+        {!isLoading && (
+          //@ts-ignore
+          <Breadcrumbs
+            titleBottom
+            mode="breadcrumbs"
+            navigation={navigation}
+            breadcrumbs={breadcrumbs}
+            card={false}
+            divider={false}
+            icon
+            icons
+            home={false}
+          />
+        )}
+        {props.children}
+        <Outlet />
+        <Footer name={name} version={version} />
+      </LayoutContent>
+    </LayoutWrapper>
+  );
+});
+
+export type { ILayoutProps };
+
+export { Layout };

package/src/components/Layout/NavMenu.tsx

@@ -0,0 +1,12 @@
+import { Drawer } from './Drawer';
+import { HorizontalBar } from './HorizontalBar';
+import { useLayoutMediaState } from './Provider';
+
+type INavMenuProps = React.PropsWithChildren;
+
+function NavMenu(props: INavMenuProps) {
+  const { horizontal } = useLayoutMediaState();
+  return !horizontal ? <Drawer>{props.children}</Drawer> : <HorizontalBar>{props.children}</HorizontalBar>;
+}
+
+export { NavMenu };

package/src/components/Layout/{Drawer/DrawerContent/Navigation → Navigation}/NavCollapse.jsx

@@ -9,17 +9,17 @@ import {
   ListItemText,
   Paper,
   Popper,
-  Typography,
-  useMediaQuery
+  Typography
 } from '@mui/material';
-import { Dot, Transitions } from '../../../../@extended';
-import React, { useEffect, useMemo, useState } from 'react';
+import { Dot, Transitions } from '../../@extended';
+import { useEffect, useMemo, useState } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useMenuConfig, useThemeConfig } from '../../../../../hooks';
+import { useMenuConfig } from '../../../hooks';
 
 import NavItem from './NavItem';
 import PropTypes from 'prop-types';
+import { useLayoutMediaState } from '../Provider';
 
 const PopperStyled = styled(Popper)(({ theme }) => ({
   overflow: 'visible',
@@ -44,9 +44,8 @@ const PopperStyled = styled(Popper)(({ theme }) => ({
 const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }) => {
   const theme = useTheme();
   const { activeItem } = useMenuConfig();
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
+  const { horizontal } = useLayoutMediaState();
   const { drawerOpen } = useMenuConfig();
-  const { menuOrientation, isVerticalLayout } = useThemeConfig();
   const Navigation = useNavigate();
 
   const [open, setOpen] = useState(false);
@@ -182,7 +181,7 @@ const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, s
 
   return (
     <>
-      {isVerticalLayout(menuOrientation) || downLG ? (
+      {!horizontal ? (
         <>
           <ListItemButton
             disableRipple

package/src/components/Layout/{Drawer/DrawerContent/Navigation → Navigation}/NavGroup.jsx

@@ -1,25 +1,15 @@
-import {
-  Box,
-  ClickAwayListener,
-  List,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Paper,
-  Popper,
-  Typography,
-  useMediaQuery
-} from '@mui/material';
+import { Box, ClickAwayListener, List, ListItemButton, ListItemIcon, ListItemText, Paper, Popper, Typography } 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 { useMenuConfig } from '../../../hooks';
 
 import NavCollapse from './NavCollapse';
 import NavItem from './NavItem';
 import PropTypes from 'prop-types';
-import { Transitions } from '../../../../@extended';
+import { Transitions } from '../../@extended';
 import { useTranslate } from 'react-admin';
+import { useLayoutMediaState } from '../Provider';
 
 const PopperStyled = styled(Popper)(({ theme }) => ({
   overflow: 'visible',
@@ -45,11 +35,10 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
   const theme = useTheme();
   const translate = useTranslate();
   const { pathname } = { pathname: '' }; // useLocation()
-  const { menuOrientation, isVerticalLayout } = useThemeConfig();
+  const { horizontal, downLg } = useLayoutMediaState();
   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);
@@ -68,7 +57,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item, lastItem, downLG]);
+  }, [item, lastItem, downLg]);
 
   const checkOpenForParent = (child, id) => {
     child.forEach((ele) => {
@@ -206,7 +195,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
 
   return (
     <>
-      {isVerticalLayout(menuOrientation) || downLG ? (
+      {!horizontal ? (
         <List
           subheader={
             item.title &&
@@ -335,4 +324,4 @@ NavGroup.propTypes = {
   selectedLevel: PropTypes.number
 };
 
-export default NavGroup;
+export { NavGroup };

package/src/components/Layout/{Drawer/DrawerContent/Navigation → Navigation}/NavItem.jsx

@@ -1,20 +1,19 @@
-import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material';
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { forwardRef, useEffect } from 'react';
-import { useMenuConfig, useThemeConfig } from '../../../../../hooks';
+import { useMenuConfig } from '../../../hooks';
 
-import { Dot } from '../../../../@extended';
+import { Dot } from '../../@extended';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
+import { useLayoutMediaState } from '../Provider';
 
 const NavItem = ({ item, level }) => {
   const theme = useTheme();
 
-  const { menuOrientation, isVerticalLayout } = useThemeConfig();
+  const { horizontal, downLg } = useLayoutMediaState();
   const { drawerOpen, openItem, activeItem, openDrawer } = useMenuConfig();
 
-  const downLG = useMediaQuery(theme.breakpoints.down('lg'));
-
   let itemTarget = '_self';
   if (item.target) {
     itemTarget = '_blank';
@@ -44,7 +43,7 @@ const NavItem = ({ item, level }) => {
   const iconSelectedColor = theme.palette.mode === 'dark' && drawerOpen ? 'text.primary' : 'primary.main';
   return (
     <>
-      {isVerticalLayout(menuOrientation) || downLG ? (
+      {!horizontal ? (
         <ListItemButton
           {...listItemProps}
           disabled={item.disabled}
@@ -79,7 +78,7 @@ const NavItem = ({ item, level }) => {
               }
             })
           }}
-          {...(downLG && {
+          {...(downLg && {
             onClick: () => openDrawer(false)
           })}
         >

package/src/components/Layout/Navigation/Navigation.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import _ from 'lodash';
+import { Box, SxProps, Typography } from '@mui/material';
+import { useMenu, useSx, useThemeConfig } from '../../../hooks';
+import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
+import { NavGroup } from './NavGroup';
+
+type INavigationProps = {
+  sx?: SxProps;
+};
+
+type IItem = { title: any; elements: any; icon: any };
+
+function Navigation(props: INavigationProps) {
+  const { horizontal } = useLayoutMediaState(),
+    { open } = useLayoutDrawerState(),
+    { menu, isLoading } = useMenu(),
+    [selectedItems, setSelectedItems] = useState<string>(''),
+    [selectedLevel, setSelectedLevel] = useState<number>(0),
+    { horizontalMaxItems } = useThemeConfig(),
+    lastItem = horizontal ? horizontalMaxItems : null;
+
+  let lastItemIndex = isLoading ? 0 : (menu ?? []).length - 1,
+    remItems: Array<IItem> = [],
+    lastItemId: string;
+
+  if (!isLoading && lastItem && lastItem < (menu ?? []).length) {
+    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
+    }));
+  }
+
+  const sx = useSx(props, {
+    pt: open ? (horizontal ? 0 : 2) : 0,
+    '& > ul:first-of-type': { mt: 0 },
+    display: horizontal ? { xs: 'block', lg: 'flex' } : 'block'
+  });
+
+  return (
+    <Box sx={sx}>
+      {!isLoading &&
+        _.map((menu ?? []).slice(0, lastItemIndex + 1), (item) => {
+          const { type } = item;
+
+          switch (type) {
+            case 'group':
+              return (
+                <NavGroup
+                  key={item.id}
+                  item={item}
+                  setSelectedItems={setSelectedItems}
+                  setSelectedLevel={setSelectedLevel}
+                  selectedLevel={selectedLevel}
+                  selectedItems={selectedItems}
+                  lastItem={lastItem}
+                  remItems={remItems}
+                  lastItemId={lastItemId}
+                />
+              );
+            default:
+              return (
+                <Typography key={item.id} variant="h6" color="error" align="center">
+                  Fix - Navigation Group
+                </Typography>
+              );
+          }
+        })}
+    </Box>
+  );
+}
+
+export { Navigation };

package/src/components/Layout/Navigation/index.ts

@@ -0,0 +1 @@
+export * from './Navigation';