components.common.Loader.tsx Maven / Gradle / Ivy

import { Box, CircularProgress, SxProps, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';

export type LoaderSize = "large" | "medium" | "small" | "tiny" | "micro"

const Loader = ({size = 'medium'}: {size?: LoaderSize}) => {

  const style = getLoaderStyle(size)
  const content = (
    
      
    
  )
  
	return ()
};

function getLoaderStyle(size: LoaderSize) {

	const theme = useTheme();
  const sizes = { 
    large : 60,
    medium: 50,
    small : 30,
    tiny  : 25,
    micro : 20
  }

  const padding = {
    large : {
      pt: '17px',
      pl: '10px'
    },
    medium: {
      pt: '14px',
      pl: '8px'
    },
    small:  {
      pt: '8px',
      pl: '5px'
    },
    tiny  : {
      pt: '4.3px',
      pl: '4px'
    },
    micro  : {
      pt: '1px',
      pl: '3.5px'
    }
  }

  const selectedSize = sizes.hasOwnProperty(size) ? size : 'medium' 
  const pxSize       = sizes[selectedSize]
  const factor       = 0.65
 	const loaderColor  = theme.palette.primary.main ? theme.palette.primary.main : '#5664d2';

  const style        = {
    spinner: {
      height: pxSize + 'px',
      width:  pxSize + 'px'
    }, 
    icon: {
      width: pxSize * factor + 'px',
      color: loaderColor
    },
    iconContainer: {
      ...padding[selectedSize]  
    }
  }

  return style
}

/* add content to the center of the loaded */
function CircularProgressWithContent({color, content, style}: {color?: React.CSSProperties['color'], style: React.CSSProperties, content: JSX.Element}) {
  return (
    
      
      
        
          {content}
        
      
    
	);
}

/* this is the XLRIT icon */
const Icon = (props: any) => (
  
)

export default Loader;