@applica-software-guru/react-admin 1.0.42 → 1.0.44

package/src/components/@extended/Breadcrumbs.jsx

@@ -1,16 +1,16 @@
-import { ApartmentOutlined, HomeFilled, HomeOutlined } from '@ant-design/icons'
-import { Divider, Grid, Typography } from '@mui/material'
-import { Link, useLocation } from 'react-router-dom'
-import { useEffect, useState } from 'react'
+import { ApartmentOutlined, HomeFilled, HomeOutlined } from '@ant-design/icons';
+import { Divider, Grid, Typography } from '@mui/material';
+import { Link, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 
-import MainCard from '../MainCard'
-import { MenuPropTypes } from '../../contexts'
-import MuiBreadcrumbs from '@mui/material/Breadcrumbs'
-import PropTypes from 'prop-types'
-import { useTheme } from '@mui/material/styles'
+import MainCard from '../MainCard';
+import { MenuPropTypes } from '../../contexts';
+import MuiBreadcrumbs from '@mui/material/Breadcrumbs';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 
 const renderBreadcrumb = ({ id, title, icon, url, last }) => {
-  const Icon = icon ? icon : ApartmentOutlined
+  const Icon = icon ? icon : ApartmentOutlined;
   return (
     <Typography
       key={id}
@@ -18,15 +18,15 @@ const renderBreadcrumb = ({ id, title, icon, url, last }) => {
       to={url}
       variant={last ? 'subtitle1' : 'h6'}
       sx={{
-        textDecoration: 'none',
+        textDecoration: 'none'
       }}
       color="textSecondary"
     >
       {icon && <Icon style={{ marginRight: 8 }} />}
       {title}
     </Typography>
-  )
-}
+  );
+};
 
 const Breadcrumbs = ({
   home,
@@ -45,65 +45,61 @@ const Breadcrumbs = ({
   mode,
   ...others
 }) => {
-  const theme = useTheme()
-  const location = useLocation()
-  const [main, setMain] = useState()
-  const [item, setItem] = useState()
+  const theme = useTheme();
+  const location = useLocation();
+  const [main, setMain] = useState();
+  const [item, setItem] = useState();
 
-  let currentPath = location.pathname
+  let currentPath = location.pathname;
 
   const iconSX = {
     marginRight: theme.spacing(0.75),
     marginTop: `-${theme.spacing(0.25)}`,
     width: '1rem',
     height: '1rem',
-    color: theme.palette.secondary.main,
-  }
+    color: theme.palette.secondary.main
+  };
 
   // set active item state
   const getCollapse = (menu) => {
     if (menu.children) {
       menu.children.filter((collapse) => {
         if (collapse.type && collapse.type === 'collapse') {
-          getCollapse(collapse)
+          getCollapse(collapse);
           if (collapse.url === currentPath) {
-            setMain(collapse)
-            setItem(collapse)
+            setMain(collapse);
+            setItem(collapse);
           }
         } else if (collapse.type && collapse.type === 'item') {
           if (currentPath.includes(collapse.url)) {
-            setMain(menu)
-            setItem(collapse)
+            setMain(menu);
+            setItem(collapse);
           }
         }
-        return false
-      })
+        return false;
+      });
     }
-  }
+  };
 
   useEffect(() => {
     navigation?.items?.map((menu) => {
       if (menu.type && menu.type === 'group') {
-        getCollapse(menu)
+        getCollapse(menu);
       }
-      return false
-    })
-  })
+      return false;
+    });
+  });
 
   // item separator
-  const SeparatorIcon = separator
-  const separatorIcon = separator ? (
-    <SeparatorIcon style={{ fontSize: '0.75rem', marginTop: 2 }} />
-  ) : (
-    '/'
-  )
+  const SeparatorIcon = separator;
+  const separatorIcon = separator ? <SeparatorIcon style={{ fontSize: '0.75rem', marginTop: 2 }} /> : '/';
 
-  let mainContent
-  let itemContent
-  let breadcrumbContent = <Typography />
-  let itemTitle = ''
-  let CollapseIcon
-  let ItemIcon
+  let mainContent;
+  let itemContent;
+  let breadcrumbContent = <Typography />;
+  let itemTitle = '';
+  let CollapseIcon;
+  let ItemIcon;
   if (mode === 'breadcrumbs') {
     return (
       <MainCard
@@ -126,19 +122,9 @@ const Breadcrumbs = ({
             </Grid>
           )}
           <Grid item>
-            <MuiBreadcrumbs
-              aria-label="breadcrumb"
-              maxItems={maxItems || 8}
-              separator={separatorIcon}
-            >
+            <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
               {home !== false && (
-                <Typography
-                  component={Link}
-                  to="/"
-                  color="textSecondary"
-                  variant="h6"
-                  sx={{ textDecoration: 'none' }}
-                >
+                <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
                   {icons && <HomeOutlined style={iconSX} />}
                   {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
                   {(!icon || icons) && home}
@@ -155,11 +141,11 @@ const Breadcrumbs = ({
         </Grid>
         {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
       </MainCard>
-    )
+    );
   }
   // collapse item
   if (main && main.type === 'collapse' && main.breadcrumbs === true) {
-    CollapseIcon = main.icon ? main.icon : ApartmentOutlined
+    CollapseIcon = main.icon ? main.icon : ApartmentOutlined;
     mainContent = (
       <Typography
         component={Link}
@@ -171,7 +157,7 @@ const Breadcrumbs = ({
         {icons && <CollapseIcon style={iconSX} />}
         {main.title}
       </Typography>
-    )
+    );
     breadcrumbContent = (
       <MainCard
         border={card}
@@ -188,19 +174,9 @@ const Breadcrumbs = ({
           spacing={1}
         >
           <Grid item>
-            <MuiBreadcrumbs
-              aria-label="breadcrumb"
-              maxItems={maxItems || 8}
-              separator={separatorIcon}
-            >
+            <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
               {home !== false && (
-                <Typography
-                  component={Link}
-                  to="/"
-                  color="textSecondary"
-                  variant="h6"
-                  sx={{ textDecoration: 'none' }}
-                >
+                <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
                   {icons && <HomeOutlined style={iconSX} />}
                   {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
                   {(!icon || icons) && home}
@@ -217,14 +193,14 @@ const Breadcrumbs = ({
         </Grid>
         {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
       </MainCard>
-    )
+    );
   }
 
   // items
   if (item && item.type === 'item') {
-    itemTitle = item.title
+    itemTitle = item.title;
 
-    ItemIcon = item.icon ? item.icon : ApartmentOutlined
+    ItemIcon = item.icon ? item.icon : ApartmentOutlined;
     itemContent = (
       <Typography
         variant="subtitle1"
@@ -232,13 +208,13 @@ const Breadcrumbs = ({
         component={Link}
         to={item.url}
         sx={{
-          textDecoration: 'none',
+          textDecoration: 'none'
         }}
       >
         {icons && <ItemIcon style={iconSX} />}
         {itemTitle}
       </Typography>
-    )
+    );
 
     // main
     if (item.breadcrumbs !== false) {
@@ -263,19 +239,9 @@ const Breadcrumbs = ({
               </Grid>
             )}
             <Grid item>
-              <MuiBreadcrumbs
-                aria-label="breadcrumb"
-                maxItems={maxItems || 8}
-                separator={separatorIcon}
-              >
+              <MuiBreadcrumbs aria-label="breadcrumb" maxItems={maxItems || 8} separator={separatorIcon}>
                 {home !== false && (
-                  <Typography
-                    component={Link}
-                    to="/"
-                    color="textSecondary"
-                    variant="h6"
-                    sx={{ textDecoration: 'none' }}
-                  >
+                  <Typography component={Link} to="/" color="textSecondary" variant="h6" sx={{ textDecoration: 'none' }}>
                     {icons && <HomeOutlined style={iconSX} />}
                     {icon && !icons && <HomeFilled style={{ ...iconSX, marginRight: 0 }} />}
                     {(!icon || icons) && home}
@@ -293,16 +259,16 @@ const Breadcrumbs = ({
           </Grid>
           {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
         </MainCard>
-      )
+      );
     }
   }
 
-  return breadcrumbContent
-}
+  return breadcrumbContent;
+};
 Breadcrumbs.defaultProps = {
   home: 'Home',
-  mode: 'navigation',
-}
+  mode: 'navigation'
+};
 
 Breadcrumbs.propTypes = {
   home: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -318,7 +284,7 @@ Breadcrumbs.propTypes = {
   titleBottom: PropTypes.bool,
   sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   breadcrumbs: PropTypes.arrayOf(MenuPropTypes),
-  mode: PropTypes.oneOf(['navigation', 'breadcrumbs']),
-}
+  mode: PropTypes.oneOf(['navigation', 'breadcrumbs'])
+};
 
-export default Breadcrumbs
+export default Breadcrumbs;

package/src/components/@extended/Dot.jsx

@@ -1,12 +1,12 @@
-import { Box } from '@mui/material'
-import PropTypes from 'prop-types'
-import getColors from '../../themes/getColors'
-import { useTheme } from '@mui/material/styles'
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+import getColors from '../../themes/getColors';
+import { useTheme } from '@mui/material/styles';
 
 const Dot = ({ color, size, variant, sx }) => {
-  const theme = useTheme()
-  const colors = getColors(theme, color || 'primary')
-  const { main } = colors
+  const theme = useTheme();
+  const colors = getColors(theme, color || 'primary');
+  const { main } = colors;
 
   return (
     <Box
@@ -17,19 +17,19 @@ const Dot = ({ color, size, variant, sx }) => {
         borderRadius: '50%',
         bgcolor: variant === 'outlined' ? '' : main,
         ...(variant === 'outlined' && {
-          border: `1px solid ${main}`,
+          border: `1px solid ${main}`
         }),
-        ...sx,
+        ...sx
       }}
     />
-  )
-}
+  );
+};
 
 Dot.propTypes = {
   color: PropTypes.string,
   size: PropTypes.number,
   variant: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-}
+  sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
 
-export default Dot
+export default Dot;

package/src/components/@extended/IconButton.jsx

@@ -1,30 +1,30 @@
-import { alpha, styled, useTheme } from '@mui/material/styles'
+import { alpha, styled, useTheme } from '@mui/material/styles';
 
-import MuiIconButton from '@mui/material/IconButton'
-import PropTypes from 'prop-types'
-import { forwardRef } from 'react'
-import getColors from '../../themes/getColors'
-import getShadow from '../../themes/getShadow'
+import MuiIconButton from '@mui/material/IconButton';
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+import getColors from '../../themes/getColors';
+import getShadow from '../../themes/getShadow';
 
 function getColorStyle({ variant, theme, color }) {
-  const colors = getColors(theme, color)
-  const { lighter, light, dark, main, contrastText } = colors
+  const colors = getColors(theme, color);
+  const { lighter, light, dark, main, contrastText } = colors;
 
-  const buttonShadow = `${color}Button`
-  const shadows = getShadow(theme, buttonShadow)
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
 
   const commonShadow = {
     '&::after': {
-      boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`,
+      boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`
     },
     '&:active::after': {
-      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`,
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`
     },
     '&:focus-visible': {
       outline: `2px solid ${dark}`,
-      outlineOffset: 2,
-    },
-  }
+      outlineOffset: 2
+    }
+  };
 
   switch (variant) {
     case 'contained':
@@ -32,19 +32,19 @@ function getColorStyle({ variant, theme, color }) {
         color: contrastText,
         backgroundColor: main,
         '&:hover': {
-          backgroundColor: dark,
+          backgroundColor: dark
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'light':
       return {
         color: main,
         backgroundColor: lighter,
         '&:hover': {
-          backgroundColor: light,
+          backgroundColor: light
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'shadow':
       return {
         boxShadow: shadows,
@@ -52,44 +52,44 @@ function getColorStyle({ variant, theme, color }) {
         backgroundColor: main,
         '&:hover': {
           boxShadow: 'none',
-          backgroundColor: dark,
+          backgroundColor: dark
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'outlined':
       return {
         '&:hover': {
           backgroundColor: 'transparent',
           color: dark,
-          borderColor: dark,
+          borderColor: dark
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'dashed':
       return {
         backgroundColor: lighter,
         '&:hover': {
           color: dark,
-          borderColor: dark,
+          borderColor: dark
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'text':
     default:
       return {
         '&:hover': {
           color: dark,
-          backgroundColor: lighter,
+          backgroundColor: lighter
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
   }
 }
 
 // ==============================|| STYLED - ICON BUTTON ||============================== //
 
 const IconButtonStyle = styled(MuiIconButton, {
-  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape',
+  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape'
 })(({ theme, variant, shape, color }) => ({
   position: 'relative',
   '::after': {
@@ -102,7 +102,7 @@ const IconButtonStyle = styled(MuiIconButton, {
     height: '100%',
     borderRadius: shape === 'rounded' ? '50%' : 4,
     opacity: 0,
-    transition: 'all 0.5s',
+    transition: 'all 0.5s'
   },
 
   ':active::after': {
@@ -111,56 +111,46 @@ const IconButtonStyle = styled(MuiIconButton, {
     left: 0,
     top: 0,
     opacity: 1,
-    transition: '0s',
+    transition: '0s'
   },
   ...(shape === 'rounded' && {
-    borderRadius: '50%',
+    borderRadius: '50%'
   }),
   ...(variant === 'outlined' && {
     border: '1px solid',
-    borderColor: 'inherit',
+    borderColor: 'inherit'
   }),
   ...(variant === 'dashed' && {
     border: '1px dashed',
-    borderColor: 'inherit',
+    borderColor: 'inherit'
   }),
   ...(variant !== 'text' && {
     '&.Mui-disabled': {
-      backgroundColor: theme.palette.grey[200],
-    },
+      backgroundColor: theme.palette.grey[200]
+    }
   }),
-  ...getColorStyle({ variant, theme, color }),
-}))
+  ...getColorStyle({ variant, theme, color })
+}));
 
 // ==============================|| EXTENDED - ICON BUTTON ||============================== //
 
-const IconButton = forwardRef(
-  ({ variant = 'text', shape = 'square', children, color = 'primary', ...others }, ref) => {
-    const theme = useTheme()
+const IconButton = forwardRef(({ variant = 'text', shape = 'square', children, color = 'primary', ...others }, ref) => {
+  const theme = useTheme();
 
-    return (
-      <IconButtonStyle
-        ref={ref}
-        disableRipple
-        variant={variant}
-        shape={shape}
-        theme={theme}
-        color={color}
-        {...others}
-      >
-        {children}
-      </IconButtonStyle>
-    )
-  },
-)
+  return (
+    <IconButtonStyle ref={ref} disableRipple variant={variant} shape={shape} theme={theme} color={color} {...others}>
+      {children}
+    </IconButtonStyle>
+  );
+});
 
 IconButton.propTypes = {
   variant: PropTypes.string,
   shape: PropTypes.string,
   children: PropTypes.node,
-  color: PropTypes.string,
-}
+  color: PropTypes.string
+};
 
-IconButton.displayName = 'IconButton'
+IconButton.displayName = 'IconButton';
 
-export default IconButton
+export default IconButton;