All files / src FadeLoader.tsx

100% Statements 49/49
100% Branches 27/27
100% Functions 12/12
100% Lines 29/29

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122  1x 1x   1x   1x               1x         5x 1x 5x 5x   5x 32x   32x                         5x 4x                   5x         5x           5x           5x           5x         5x           5x           5x             1x 5x   5x                         1x   1x     1x 1x  
/** @jsx jsx */
import * as React from "react";
import { keyframes, css, jsx } from "@emotion/core";
import { Keyframes } from "@emotion/serialize";
import onlyUpdateForKeys from "recompose/onlyUpdateForKeys";
 
import { heightWidthRadiusKeys, heightWidthRadiusDefaults } from "./helpers";
import {
  StyleFunction,
  PrecompiledCss,
  LoaderHeightWidthRadiusProps,
  StyleFunctionWithIndex
} from "./interfaces";
 
const fade: Keyframes = keyframes`
  50% {opacity: 0.3}
  100% {opacity: 1}
`;
 
class Loader extends React.PureComponent<LoaderHeightWidthRadiusProps> {
  public static defaultProps: LoaderHeightWidthRadiusProps = heightWidthRadiusDefaults(15, 5, 2);
  public radius: number = 20;
  public quarter: number = this.radius / 2 + this.radius / 5.5;
 
  public style: StyleFunctionWithIndex = (i: number): PrecompiledCss => {
    const { height, width, margin, color, radius, widthUnit, heightUnit, radiusUnit } = this.props;
 
    return css`
      position: absolute;
      width: ${`${width}${widthUnit}`};
      height: ${`${height}${heightUnit}`};
      margin: ${margin};
      background-color: ${color};
      border-radius: ${`${radius}${radiusUnit}`};
      transition: 2s;
      animation-fill-mode: "both";
      animation: ${fade} 1.2s ${i * 0.12}s infinite ease-in-out;
    `;
  };
 
  public wrapper: StyleFunction = (): PrecompiledCss => {
    return css`
      position: relative;
      font-size: 0;
      top: ${this.radius}px;
      left: ${this.radius}px;
      width: ${this.radius * 3}px;
      height: ${this.radius * 3}px;
    `;
  };
 
  public a: StyleFunction = (): PrecompiledCss => css`
    ${this.style(1)};
    top: ${this.radius}px;
    left: 0;
  `;
  public b: StyleFunction = (): PrecompiledCss => css`
    ${this.style(2)};
    top: ${this.quarter}px;
    left: ${this.quarter}px;
    transform: rotate(-45deg);
  `;
  public c: StyleFunction = (): PrecompiledCss => css`
    ${this.style(3)};
    top: 0;
    left: ${this.radius}px;
    transform: rotate(90deg);
  `;
  public d: StyleFunction = (): PrecompiledCss => css`
    ${this.style(4)};
    top: ${-this.quarter}px;
    left: ${this.quarter}px;
    transform: rotate(45deg);
  `;
  public e: StyleFunction = (): PrecompiledCss => css`
    ${this.style(5)};
    top: ${-this.radius}px;
    left: 0;
  `;
  public f: StyleFunction = (): PrecompiledCss => css`
    ${this.style(6)};
    top: ${-this.quarter}px;
    left: ${-this.quarter}px;
    transform: rotate(-45deg);
  `;
  public g: StyleFunction = (): PrecompiledCss => css`
    ${this.style(7)};
    top: 0;
    left: ${-this.radius}px;
    transform: rotate(90deg);
  `;
  public h: StyleFunction = (): PrecompiledCss => css`
    ${this.style(8)};
    top: ${this.quarter}px;
    left: ${-this.quarter}px;
    transform: rotate(45deg);
  `;
 
  public render(): JSX.Element | null {
    const { loading, css } = this.props;
 
    return loading ? (
      <div css={[this.wrapper(), css]}>
        <div css={this.a()} />
        <div css={this.b()} />
        <div css={this.c()} />
        <div css={this.d()} />
        <div css={this.e()} />
        <div css={this.f()} />
        <div css={this.g()} />
        <div css={this.h()} />
      </div>
    ) : null;
  }
}
 
const Component: React.ComponentClass<LoaderHeightWidthRadiusProps> = onlyUpdateForKeys(
  heightWidthRadiusKeys
)(Loader);
Component.defaultProps = Loader.defaultProps;
export default Component;