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

Go to download
import Loader from 'components/common/Loader';
import React from 'react';

import { SvgIconComponent } from '@mui/icons-material';
import { Box, IconButton, SxProps, Tooltip, TooltipProps } from '@mui/material';

type IconSize ='inherit' | 'large' | 'medium' | 'small' | undefined

type IconLoadingSize       = "micro" | "tiny" | "small" | "medium" | "large"
type IconButtonSize = 'small' | 'medium' | 'large'

type IconProps = Partial<{
  iconButtonSize: IconButtonSize,
  iconSize: IconSize
  sx: SxProps,
  loaderSize: IconLoadingSize,
}>

interface LoadingIconProps {
  icon: SvgIconComponent,
  iconProps?: IconProps
  tooltipProps?: LoadingTooltipProps,

  onClick: (e: React.SyntheticEvent) => void,
  loading?: boolean
}

interface LoadingTooltipProps {
  title: TooltipProps['title']
}

interface MaybeTooltip {
  children: React.ReactElement,
  tooltipProps?: LoadingTooltipProps
}

const LoadingIcon = ({icon: Icon, iconProps, tooltipProps, loading, onClick}: LoadingIconProps): JSX.Element => {
  const iconSize       = iconProps?.iconSize       || "small"
  const iconButtonSize = iconProps?.iconButtonSize || "medium"
  const loaderSize     = iconProps?.loaderSize     || "micro"

  return (
    
      
        
        { loading 
          ?  
              
            
          : null 
        }
      
    
  )
} 

const MaybeTooltip = ({children, tooltipProps}: MaybeTooltip): JSX.Element => {
  return tooltipProps
    ? ( 
      
        
          {children}
        
      
    )
    : children
}

export default LoadingIcon