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

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

@@ -1,43 +1,43 @@
-import { alpha, styled, useTheme } from '@mui/material/styles'
+import { alpha, styled, useTheme } from '@mui/material/styles';
 
-import MuiLoadingButton from '@mui/lab/LoadingButton'
-import PropTypes from 'prop-types'
-import { forwardRef } from 'react'
-import getColors from '../../themes/getColors'
-import getShadow from '../../themes/getShadow'
+import MuiLoadingButton from '@mui/lab/LoadingButton';
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+import getColors from '../../themes/getColors';
+import getShadow from '../../themes/getShadow';
 
 function getColorStyle({ variant, theme, color, loadingPosition }) {
-  const colors = getColors(theme, color)
-  const { lighter, main, dark, contrastText } = colors
+  const colors = getColors(theme, color);
+  const { lighter, main, dark, contrastText } = colors;
 
-  const buttonShadow = `${color}Button`
-  const shadows = getShadow(theme, buttonShadow)
+  const buttonShadow = `${color}Button`;
+  const shadows = getShadow(theme, buttonShadow);
 
   const loadingIndicator = {
     '& .MuiLoadingButton-loadingIndicator': {
-      color: main,
-    },
-  }
+      color: main
+    }
+  };
 
   const loadingColor = {
     ...(loadingPosition &&
       loadingPosition !== 'center' && {
-        color: main,
-      }),
-  }
+        color: main
+      })
+  };
 
   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':
@@ -45,80 +45,80 @@ function getColorStyle({ variant, theme, color, loadingPosition }) {
         backgroundColor: main,
         ...(loadingPosition &&
           loadingPosition !== 'center' && {
-            color: contrastText,
+            color: contrastText
           }),
         '& .MuiLoadingButton-loadingIndicator': {
-          color: contrastText,
+          color: contrastText
         },
         '&:hover': {
           backgroundColor: dark,
-          color: contrastText,
+          color: contrastText
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'light':
       return {
         backgroundColor: main,
         ...(loadingPosition &&
           loadingPosition !== 'center' && {
-            color: contrastText,
+            color: contrastText
           }),
         '& .MuiLoadingButton-loadingIndicator': {
-          color: contrastText,
+          color: contrastText
         },
         '&:hover': {
           backgroundColor: dark,
-          color: contrastText,
+          color: contrastText
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'shadow':
       return {
         boxShadow: shadows,
         backgroundColor: main,
         ...(loadingPosition &&
           loadingPosition !== 'center' && {
-            color: contrastText,
+            color: contrastText
           }),
         '& .MuiLoadingButton-loadingIndicator': {
-          color: contrastText,
+          color: contrastText
         },
         '&:hover': {
           boxShadow: 'none',
           backgroundColor: dark,
-          color: contrastText,
+          color: contrastText
         },
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'outlined':
       return {
         backgroundColor: 'transparent',
         borderColor: main,
         ...loadingColor,
-        ...loadingIndicator,
-      }
+        ...loadingIndicator
+      };
     case 'dashed':
       return {
         backgroundColor: lighter,
         borderColor: main,
         ...loadingColor,
         ...loadingIndicator,
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
     case 'text':
     default:
       return {
         color: main,
         ...loadingIndicator,
-        ...commonShadow,
-      }
+        ...commonShadow
+      };
   }
 }
 
 // ==============================|| STYLED - LOADING BUTTON ||============================== //
 
 const LoadingButtonStyle = styled(MuiLoadingButton, {
-  shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant',
+  shouldForwardProp: (prop) => prop !== 'shape' && prop !== 'variant'
 })(({ theme, variant, shape, color, loading, loadingPosition }) => ({
   '::after': {
     content: '""',
@@ -130,7 +130,7 @@ const LoadingButtonStyle = styled(MuiLoadingButton, {
     height: '100%',
     borderRadius: shape === 'rounded' ? '50%' : 4,
     opacity: 0,
-    transition: 'all 0.5s',
+    transition: 'all 0.5s'
   },
 
   ':active::after': {
@@ -139,90 +139,88 @@ const LoadingButtonStyle = styled(MuiLoadingButton, {
     left: 0,
     top: 0,
     opacity: 1,
-    transition: '0s',
+    transition: '0s'
   },
   ...(variant === 'text' && {
     ...getColorStyle({ variant, theme, color, loadingPosition }),
     '&.MuiButton-sizeMedium': {
-      height: 36,
+      height: 36
     },
     '&.MuiButton-sizeSmall': {
-      height: 30,
+      height: 30
     },
     '&.MuiButton-sizeLarge': {
-      height: 44,
-    },
+      height: 44
+    }
   }),
   ...(shape && {
     minWidth: 0,
     '&.MuiButton-sizeMedium': {
       width: 36,
-      height: 36,
+      height: 36
     },
     '&.MuiButton-sizeSmall': {
       width: 30,
-      height: 30,
+      height: 30
     },
     '&.MuiButton-sizeLarge': {
       width: 44,
-      height: 44,
+      height: 44
     },
     ...(shape === 'rounded' && {
-      borderRadius: '50%',
-    }),
+      borderRadius: '50%'
+    })
   }),
 
   ...(variant === 'outlined' && {
-    border: '1px solid',
+    border: '1px solid'
   }),
   ...(variant === 'dashed' && {
-    border: '1px dashed',
+    border: '1px dashed'
   }),
   ...((variant === 'contained' || variant === 'shadow') &&
     !loading && {
-      color: '#fff',
+      color: '#fff'
     }),
   ...(variant !== 'text' && {
-    ...getColorStyle({ variant, theme, color, loadingPosition }),
+    ...getColorStyle({ variant, theme, color, loadingPosition })
   }),
 
   '&.Mui-disabled': {
     ...(variant !== 'text' && {
-      ...getColorStyle({ variant, theme, color, loadingPosition }),
-    }),
-  },
-}))
+      ...getColorStyle({ variant, theme, color, loadingPosition })
+    })
+  }
+}));
 
 // ==============================|| EXTENDED - LOADING BUTTON ||============================== //
 
-const LoadingButton = forwardRef(
-  ({ variant = 'text', shape, children, color = 'primary', ...others }, ref) => {
-    const theme = useTheme()
-
-    return (
-      <LoadingButtonStyle
-        ref={ref}
-        variant={variant}
-        shape={shape}
-        theme={theme}
-        loadingPosition={others.loadingPosition}
-        loading={others.loading}
-        color={color}
-        {...others}
-      >
-        {children}
-      </LoadingButtonStyle>
-    )
-  },
-)
+const LoadingButton = forwardRef(({ variant = 'text', shape, children, color = 'primary', ...others }, ref) => {
+  const theme = useTheme();
+
+  return (
+    <LoadingButtonStyle
+      ref={ref}
+      variant={variant}
+      shape={shape}
+      theme={theme}
+      loadingPosition={others.loadingPosition}
+      loading={others.loading}
+      color={color}
+      {...others}
+    >
+      {children}
+    </LoadingButtonStyle>
+  );
+});
 
 LoadingButton.propTypes = {
   variant: PropTypes.string,
   shape: PropTypes.string,
   children: PropTypes.node,
-  color: PropTypes.string,
-}
+  color: PropTypes.string
+};
 
-LoadingButton.displayName = 'LoadingButton'
+LoadingButton.displayName = 'LoadingButton';
 
-export default LoadingButton
+export default LoadingButton;

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

@@ -1,67 +1,64 @@
-import { Box, Tooltip as MuiTooltip, tooltipClasses } from '@mui/material'
-import { styled, useTheme } from '@mui/material/styles'
+import { Box, Tooltip as MuiTooltip, tooltipClasses } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 
-import PropTypes from 'prop-types'
-import getColors from '../../themes/getColors'
+import PropTypes from 'prop-types';
+import getColors from '../../themes/getColors';
 
 // ==============================|| TOOLTIP - VARIANT ||============================== //
 
 function getVariantStyle({ color, theme, labelColor }) {
-  const colors = getColors(theme, color)
-  const { main, contrastText } = colors
-  let colorValue = color ? color : ''
+  const colors = getColors(theme, color);
+  const { main, contrastText } = colors;
+  let colorValue = color ? color : '';
 
   if (['primary', 'secondary', 'info', 'success', 'warning', 'error'].includes(colorValue)) {
     return {
       [`& .${tooltipClasses.tooltip}`]: {
         backgroundColor: main,
-        color: labelColor ? labelColor : contrastText,
+        color: labelColor ? labelColor : contrastText
       },
       [`& .${tooltipClasses.arrow}`]: {
-        color: main,
-      },
-    }
+        color: main
+      }
+    };
   } else {
     return {
       [`& .${tooltipClasses.tooltip}`]: {
         backgroundColor: colorValue,
         color: labelColor ? labelColor : contrastText,
-        boxShadow: theme.shadows[1],
+        boxShadow: theme.shadows[1]
       },
       [`& .${tooltipClasses.arrow}`]: {
-        color: colorValue,
-      },
-    }
+        color: colorValue
+      }
+    };
   }
 }
 
 // ==============================|| STYLED - TOOLTIP COLOR ||============================== //
 
-const TooltipStyle = styled(
-  ({ className, ...props }) => <MuiTooltip {...props} classes={{ popper: className }} />,
-  {
-    shouldForwardProp: (prop) => prop !== 'color' && prop !== 'labelColor',
-  },
-)(({ theme, color, labelColor }) => ({
-  ...(color && getVariantStyle({ color, theme, labelColor })),
-}))
+const TooltipStyle = styled(({ className, ...props }) => <MuiTooltip {...props} classes={{ popper: className }} />, {
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'labelColor'
+})(({ theme, color, labelColor }) => ({
+  ...(color && getVariantStyle({ color, theme, labelColor }))
+}));
 
 // ==============================|| EXTENDED - TOOLTIP ||============================== //
 
 export default function CustomTooltip({ children, arrow, labelColor = '', ...rest }) {
-  const theme = useTheme()
+  const theme = useTheme();
   return (
     <Box display="flex">
       <TooltipStyle arrow={arrow} {...rest} theme={theme} labelColor={labelColor}>
         {children}
       </TooltipStyle>
     </Box>
-  )
+  );
 }
 
 CustomTooltip.propTypes = {
   children: PropTypes.element,
   arrow: PropTypes.bool,
   labelColor: PropTypes.string,
-  rest: PropTypes.array,
-}
+  rest: PropTypes.array
+};

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

@@ -1,125 +1,116 @@
-import PropTypes from 'prop-types'
-import { forwardRef } from 'react'
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
 
 // material-ui
-import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material'
+import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material';
 
 // ==============================|| TRANSITIONS ||============================== //
 
-const Transitions = forwardRef(
-  ({ children, position = 'top-left', type = 'grow', direction = 'up', ...others }, ref) => {
-    let positionSX = {
-      transformOrigin: '0 0 0',
-    }
+const Transitions = forwardRef(({ children, position = 'top-left', type = 'grow', direction = 'up', ...others }, ref) => {
+  let positionSX = {
+    transformOrigin: '0 0 0'
+  };
 
-    switch (position) {
-      case 'top-right':
-        positionSX = {
-          transformOrigin: 'top right',
-        }
-        break
-      case 'top':
-        positionSX = {
-          transformOrigin: 'top',
-        }
-        break
-      case 'bottom-left':
-        positionSX = {
-          transformOrigin: 'bottom left',
-        }
-        break
-      case 'bottom-right':
-        positionSX = {
-          transformOrigin: 'bottom right',
-        }
-        break
-      case 'bottom':
-        positionSX = {
-          transformOrigin: 'bottom',
-        }
-        break
-      case 'top-left':
-      default:
-        positionSX = {
-          transformOrigin: '0 0 0',
-        }
-        break
-    }
+  switch (position) {
+    case 'top-right':
+      positionSX = {
+        transformOrigin: 'top right'
+      };
+      break;
+    case 'top':
+      positionSX = {
+        transformOrigin: 'top'
+      };
+      break;
+    case 'bottom-left':
+      positionSX = {
+        transformOrigin: 'bottom left'
+      };
+      break;
+    case 'bottom-right':
+      positionSX = {
+        transformOrigin: 'bottom right'
+      };
+      break;
+    case 'bottom':
+      positionSX = {
+        transformOrigin: 'bottom'
+      };
+      break;
+    case 'top-left':
+    default:
+      positionSX = {
+        transformOrigin: '0 0 0'
+      };
+      break;
+  }
 
-    return (
-      <Box ref={ref}>
-        {type === 'grow' && (
-          <Grow
-            {...others}
-            timeout={{
-              appear: 0,
-              enter: 150,
-              exit: 150,
-            }}
-          >
-            <Box sx={positionSX}>{children}</Box>
-          </Grow>
-        )}
+  return (
+    <Box ref={ref}>
+      {type === 'grow' && (
+        <Grow
+          {...others}
+          timeout={{
+            appear: 0,
+            enter: 150,
+            exit: 150
+          }}
+        >
+          <Box sx={positionSX}>{children}</Box>
+        </Grow>
+      )}
 
-        {type === 'collapse' && (
-          <Collapse {...others} sx={positionSX}>
-            {children}
-          </Collapse>
-        )}
+      {type === 'collapse' && (
+        <Collapse {...others} sx={positionSX}>
+          {children}
+        </Collapse>
+      )}
 
-        {type === 'fade' && (
-          <Fade
-            {...others}
-            timeout={{
-              appear: 0,
-              enter: 300,
-              exit: 150,
-            }}
-          >
-            <Box sx={positionSX}>{children}</Box>
-          </Fade>
-        )}
+      {type === 'fade' && (
+        <Fade
+          {...others}
+          timeout={{
+            appear: 0,
+            enter: 300,
+            exit: 150
+          }}
+        >
+          <Box sx={positionSX}>{children}</Box>
+        </Fade>
+      )}
 
-        {type === 'slide' && (
-          <Slide
-            {...others}
-            timeout={{
-              appear: 0,
-              enter: 150,
-              exit: 150,
-            }}
-            direction={direction}
-          >
-            <Box sx={positionSX}>{children}</Box>
-          </Slide>
-        )}
+      {type === 'slide' && (
+        <Slide
+          {...others}
+          timeout={{
+            appear: 0,
+            enter: 150,
+            exit: 150
+          }}
+          direction={direction}
+        >
+          <Box sx={positionSX}>{children}</Box>
+        </Slide>
+      )}
 
-        {type === 'zoom' && (
-          <Zoom {...others}>
-            <Box sx={positionSX}>{children}</Box>
-          </Zoom>
-        )}
-      </Box>
-    )
-  },
-)
+      {type === 'zoom' && (
+        <Zoom {...others}>
+          <Box sx={positionSX}>{children}</Box>
+        </Zoom>
+      )}
+    </Box>
+  );
+});
 
 Transitions.propTypes = {
   children: PropTypes.node,
   type: PropTypes.oneOf(['grow', 'fade', 'collapse', 'slide', 'zoom']),
-  position: PropTypes.oneOf([
-    'top-left',
-    'top-right',
-    'top',
-    'bottom-left',
-    'bottom-right',
-    'bottom',
-  ]),
-  direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
-}
+  position: PropTypes.oneOf(['top-left', 'top-right', 'top', 'bottom-left', 'bottom-right', 'bottom']),
+  direction: PropTypes.oneOf(['up', 'down', 'left', 'right'])
+};
 
-export default Transitions
+export default Transitions;
 
 export const PopupTransition = forwardRef(function Transition(props, ref) {
-  return <Zoom ref={ref} timeout={200} {...props} />
-})
+  return <Zoom ref={ref} timeout={200} {...props} />;
+});

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

@@ -1,11 +1,11 @@
-import AnimateButton from './AnimateButton'
-import Avatar from './Avatar'
-import Breadcrumbs from './Breadcrumbs'
-import Dot from './Dot'
-import IconButton from './IconButton'
-import LoadingButton from './LoadingButton'
-import Tooltip from './Tooltip'
-import Transitions from './Transitions'
+import AnimateButton from './AnimateButton';
+import Avatar from './Avatar';
+import Breadcrumbs from './Breadcrumbs';
+import Dot from './Dot';
+import IconButton from './IconButton';
+import LoadingButton from './LoadingButton';
+import Tooltip from './Tooltip';
+import Transitions from './Transitions';
 
-export * from './progress'
-export { AnimateButton, Avatar, Breadcrumbs, Dot, IconButton, LoadingButton, Tooltip, Transitions }
+export * from './progress';
+export { AnimateButton, Avatar, Breadcrumbs, Dot, IconButton, LoadingButton, Tooltip, Transitions };