@applica-software-guru/react-admin 1.0.32 → 1.0.34

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

@@ -0,0 +1,324 @@
+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'
+
+const renderBreadcrumb = ({ id, title, icon, url, last }) => {
+  const Icon = icon ? icon : ApartmentOutlined
+  return (
+    <Typography
+      key={id}
+      component={Link}
+      to={url}
+      variant={last ? 'subtitle1' : 'h6'}
+      sx={{
+        textDecoration: 'none',
+      }}
+      color="textSecondary"
+    >
+      {icon && <Icon style={{ marginRight: 8 }} />}
+      {title}
+    </Typography>
+  )
+}
+
+const Breadcrumbs = ({
+  home,
+  card,
+  divider = true,
+  icon,
+  icons,
+  maxItems,
+  navigation,
+  rightAlign,
+  separator,
+  title,
+  titleBottom,
+  sx,
+  breadcrumbs,
+  mode,
+  ...others
+}) => {
+  const theme = useTheme()
+  const location = useLocation()
+  const [main, setMain] = useState()
+  const [item, setItem] = useState()
+
+  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,
+  }
+
+  // set active item state
+  const getCollapse = (menu) => {
+    if (menu.children) {
+      menu.children.filter((collapse) => {
+        if (collapse.type && collapse.type === 'collapse') {
+          getCollapse(collapse)
+          if (collapse.url === currentPath) {
+            setMain(collapse)
+            setItem(collapse)
+          }
+        } else if (collapse.type && collapse.type === 'item') {
+          if (currentPath.includes(collapse.url)) {
+            setMain(menu)
+            setItem(collapse)
+          }
+        }
+        return false
+      })
+    }
+  }
+
+  useEffect(() => {
+    navigation?.items?.map((menu) => {
+      if (menu.type && menu.type === 'group') {
+        getCollapse(menu)
+      }
+      return false
+    })
+  })
+
+  // item separator
+  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
+  if (mode === 'breadcrumbs') {
+    return (
+      <MainCard
+        border={card}
+        sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
+        {...others}
+        content={card}
+        shadow="none"
+      >
+        <Grid
+          container
+          direction={rightAlign ? 'row' : 'column'}
+          justifyContent={rightAlign ? 'space-between' : 'flex-start'}
+          alignItems={rightAlign ? 'center' : 'flex-start'}
+          spacing={1}
+        >
+          {title && !titleBottom && (
+            <Grid item>
+              <Typography variant="h2">{item.title}</Typography>
+            </Grid>
+          )}
+          <Grid item>
+            <MuiBreadcrumbs
+              aria-label="breadcrumb"
+              maxItems={maxItems || 8}
+              separator={separatorIcon}
+            >
+              {home !== false && (
+                <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}
+                </Typography>
+              )}
+              {breadcrumbs.map(renderBreadcrumb)}
+            </MuiBreadcrumbs>
+          </Grid>
+          {title && titleBottom && (
+            <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
+              <Typography variant="h2">{item.title}</Typography>
+            </Grid>
+          )}
+        </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
+    mainContent = (
+      <Typography
+        component={Link}
+        to={item?.url || document.location.pathname}
+        variant="h6"
+        sx={{ textDecoration: 'none' }}
+        color="textSecondary"
+      >
+        {icons && <CollapseIcon style={iconSX} />}
+        {main.title}
+      </Typography>
+    )
+    breadcrumbContent = (
+      <MainCard
+        border={card}
+        sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
+        {...others}
+        content={card}
+        shadow="none"
+      >
+        <Grid
+          container
+          direction={rightAlign ? 'row' : 'column'}
+          justifyContent={rightAlign ? 'space-between' : 'flex-start'}
+          alignItems={rightAlign ? 'center' : 'flex-start'}
+          spacing={1}
+        >
+          <Grid item>
+            <MuiBreadcrumbs
+              aria-label="breadcrumb"
+              maxItems={maxItems || 8}
+              separator={separatorIcon}
+            >
+              {home !== false && (
+                <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}
+                </Typography>
+              )}
+              {mainContent}
+            </MuiBreadcrumbs>
+          </Grid>
+          {title && titleBottom && (
+            <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
+              <Typography variant="h2">{main.title}</Typography>
+            </Grid>
+          )}
+        </Grid>
+        {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
+      </MainCard>
+    )
+  }
+
+  // items
+  if (item && item.type === 'item') {
+    itemTitle = item.title
+
+    ItemIcon = item.icon ? item.icon : ApartmentOutlined
+    itemContent = (
+      <Typography
+        variant="subtitle1"
+        color="textPrimary"
+        component={Link}
+        to={item.url}
+        sx={{
+          textDecoration: 'none',
+        }}
+      >
+        {icons && <ItemIcon style={iconSX} />}
+        {itemTitle}
+      </Typography>
+    )
+
+    // main
+    if (item.breadcrumbs !== false) {
+      breadcrumbContent = (
+        <MainCard
+          border={card}
+          sx={card === false ? { mb: 3, bgcolor: 'transparent', ...sx } : { mb: 3, ...sx }}
+          {...others}
+          content={card}
+          shadow="none"
+        >
+          <Grid
+            container
+            direction={rightAlign ? 'row' : 'column'}
+            justifyContent={rightAlign ? 'space-between' : 'flex-start'}
+            alignItems={rightAlign ? 'center' : 'flex-start'}
+            spacing={1}
+          >
+            {title && !titleBottom && (
+              <Grid item>
+                <Typography variant="h2">{item.title}</Typography>
+              </Grid>
+            )}
+            <Grid item>
+              <MuiBreadcrumbs
+                aria-label="breadcrumb"
+                maxItems={maxItems || 8}
+                separator={separatorIcon}
+              >
+                {home !== false && (
+                  <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}
+                  </Typography>
+                )}
+                {mainContent}
+                {itemContent}
+              </MuiBreadcrumbs>
+            </Grid>
+            {title && titleBottom && (
+              <Grid item sx={{ mt: card === false ? 0.25 : 1 }}>
+                <Typography variant="h2">{item.title}</Typography>
+              </Grid>
+            )}
+          </Grid>
+          {card === false && divider !== false && <Divider sx={{ mt: 2 }} />}
+        </MainCard>
+      )
+    }
+  }
+
+  return breadcrumbContent
+}
+Breadcrumbs.defaultProps = {
+  home: 'Home',
+  mode: 'navigation',
+}
+
+Breadcrumbs.propTypes = {
+  home: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  card: PropTypes.bool,
+  divider: PropTypes.bool,
+  icon: PropTypes.bool,
+  icons: PropTypes.bool,
+  maxItems: PropTypes.number,
+  navigation: PropTypes.object,
+  rightAlign: PropTypes.bool,
+  separator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  title: PropTypes.bool,
+  titleBottom: PropTypes.bool,
+  sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  breadcrumbs: PropTypes.arrayOf(MenuPropTypes),
+  mode: PropTypes.oneOf(['navigation', 'breadcrumbs']),
+}
+
+export default Breadcrumbs

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

@@ -0,0 +1,35 @@
+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
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: size || 8,
+        height: size || 8,
+        borderRadius: '50%',
+        bgcolor: variant === 'outlined' ? '' : main,
+        ...(variant === 'outlined' && {
+          border: `1px solid ${main}`,
+        }),
+        ...sx,
+      }}
+    />
+  )
+}
+
+Dot.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.number,
+  variant: PropTypes.string,
+  sx: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+}
+
+export default Dot

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

@@ -0,0 +1,166 @@
+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'
+
+function getColorStyle({ variant, theme, color }) {
+  const colors = getColors(theme, color)
+  const { lighter, light, dark, main, contrastText } = colors
+
+  const buttonShadow = `${color}Button`
+  const shadows = getShadow(theme, buttonShadow)
+
+  const commonShadow = {
+    '&::after': {
+      boxShadow: `0 0 6px 6px ${alpha(main, 0.9)}`,
+    },
+    '&:active::after': {
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+    },
+  }
+
+  switch (variant) {
+    case 'contained':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        '&:hover': {
+          backgroundColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'light':
+      return {
+        color: main,
+        backgroundColor: lighter,
+        '&:hover': {
+          backgroundColor: light,
+        },
+        ...commonShadow,
+      }
+    case 'shadow':
+      return {
+        boxShadow: shadows,
+        color: contrastText,
+        backgroundColor: main,
+        '&:hover': {
+          boxShadow: 'none',
+          backgroundColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'outlined':
+      return {
+        '&:hover': {
+          backgroundColor: 'transparent',
+          color: dark,
+          borderColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'dashed':
+      return {
+        backgroundColor: lighter,
+        '&:hover': {
+          color: dark,
+          borderColor: dark,
+        },
+        ...commonShadow,
+      }
+    case 'text':
+    default:
+      return {
+        '&:hover': {
+          color: dark,
+          backgroundColor: lighter,
+        },
+        ...commonShadow,
+      }
+  }
+}
+
+// ==============================|| STYLED - ICON BUTTON ||============================== //
+
+const IconButtonStyle = styled(MuiIconButton, {
+  shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'shape',
+})(({ theme, variant, shape, color }) => ({
+  position: 'relative',
+  '::after': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: shape === 'rounded' ? '50%' : 4,
+    opacity: 0,
+    transition: 'all 0.5s',
+  },
+
+  ':active::after': {
+    position: 'absolute',
+    borderRadius: shape === 'rounded' ? '50%' : 4,
+    left: 0,
+    top: 0,
+    opacity: 1,
+    transition: '0s',
+  },
+  ...(shape === 'rounded' && {
+    borderRadius: '50%',
+  }),
+  ...(variant === 'outlined' && {
+    border: '1px solid',
+    borderColor: 'inherit',
+  }),
+  ...(variant === 'dashed' && {
+    border: '1px dashed',
+    borderColor: 'inherit',
+  }),
+  ...(variant !== 'text' && {
+    '&.Mui-disabled': {
+      backgroundColor: theme.palette.grey[200],
+    },
+  }),
+  ...getColorStyle({ variant, theme, color }),
+}))
+
+// ==============================|| EXTENDED - ICON BUTTON ||============================== //
+
+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>
+    )
+  },
+)
+
+IconButton.propTypes = {
+  variant: PropTypes.string,
+  shape: PropTypes.string,
+  children: PropTypes.node,
+  color: PropTypes.string,
+}
+
+IconButton.displayName = 'IconButton'
+
+export default IconButton