All files / app/components SpinnerContainer.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63                          4x             4x                           4x 6x 6x               4x         6x 5x   1x 1x     1x            
import React from 'react';
import { style } from 'app/styles';
 
import { SpinnerImage } from 'app/components/SpinnerImage';
 
export interface SpinnerContainerProps {
  isSpinning: boolean;
  children: string | JSX.Element | JSX.Element[];
  spinnerImageSize?: number;
  opaque?: boolean;
  style?: string | object;
}
 
const containerStyle = {
  display: 'block',
  height: '100%',
  width: '100%',
  position: 'relative',
};
 
const backdropStyle = {
  position: 'absolute',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  top: 0,
  left: 0,
  height: '100%',
  width: '100%',
  zIndex: '5',
  backgroundColor: '@colors.background',
  opacity: 0.9,
};
 
export const SpinnerContainer = (props: SpinnerContainerProps): JSX.Element => {
  const { isSpinning, opaque, spinnerImageSize } = props;
  return (
    <div style={style(containerStyle, props.style)}>
      {renderSpinner(isSpinning, opaque, spinnerImageSize)}
      {!(isSpinning && opaque) && props.children}
    </div>
  );
};
 
const renderSpinner = (
  isSpinning: boolean,
  opaque: boolean,
  spinnerImageSize: number
) => {
  if (!isSpinning) {
    return null;
  }
  const s = backdropStyle;
  Iif (opaque) {
    s.opacity = 1;
  }
  return (
    <div style={style(backdropStyle)}>
      <SpinnerImage width={spinnerImageSize} height={spinnerImageSize} />
    </div>
  );
};