# All files / components/Loader index.js

100% Statements 22/22
100% Branches 6/6
100% Functions 3/3
100% Lines 22/22

    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

    5x
    5x

    5x
    13x
    13x
    12x

    13x
    13x
    13x
    13x

    5x
    5x

    5x
    5x
    13x

    5x

    5x

    7x

    7x

    7x

    5x

    5x

     import React from 'react';
    import PropTypes from 'prop-types';
    import classNames from 'classnames';

    // Stylesheet
    import './index.scss';

    const Loader = (props) => {
      const ballTypes = {
        'ball-beat': 3,
        'ball-pulse': 3,
        'ball-pulse-sync': 3,
        'single-ball-beat': 2,
        'ball-clip-rotate': 1,
      };

      const renderDiv = (n, color) => {
        const styles = {};
        if (props.type !== 'ball-clip-rotate') {
          styles.backgroundColor = color;
        }
        styles.borderTopColor = color;
        styles.borderRightColor = color;
        styles.borderLeftColor = color;
        return <div key={n} className="letstalk-ball-div" style={styles} />;
      };

      const {
        type, size, active, fullScreen, className, color,
      } = props;
      const classes = classNames({
        'letstalk-loader': true,
        'letstalk-loader-active-full-screen': active && fullScreen,
        'letstalk-loader-active': active,
        'letstalk-loader-hidden': !active,
      }, className);
      const balls = [];
      for (let i = 0; i < ballTypes[type]; i += 1) {
        balls.push(renderDiv(i, color));
      }
      return (
        <div className={classes}>
          <div className={`letstalk-loader-inner letstalk-${type} ${size}`}>
            {balls}
          </div>
        </div>
      );
    };

    Loader.propTypes = {
      /**
       * If true, show the loader otherwise hide it.
       */
      active: PropTypes.bool,
      /**
       * A space-delimited list of class names to pass along to the component.
       */
      className: PropTypes.string,
      /**
       * Hexadecimal color used for the balls on the loader.
       */
      color: (myprops, propName, componentName) => {
        /* istanbul ignore if  */
        if (!myprops[propName]) {
          // When no color specified default is false, let it pass validation
          return null;
        }
        /* istanbul ignore if  */
        if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(myprops[propName])) {
          return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. Validation failed.`);
        }
        return null;
      },
      /**
       * Loader size. xsmall(30px), small(35px), medium(40px), large(45px), xlarge (55px)
       */
      size: PropTypes.string,
      /**
       * If true show loader in fullScreen making the background opacity be 0.5
       */
      fullScreen: PropTypes.bool,
      /**
       * Type of the loader.
       * Currently ['ball-beat', 'ball-pulse', 'ball-pulse-sync', 'single-ball-beat'] availables
       */
      type: PropTypes.oneOf(['ball-beat', 'ball-pulse', 'ball-clip-rotate', 'ball-pulse-sync', 'single-ball-beat']),
    };

    Loader.defaultProps = {
      active: false,
      fullScreen: false,
      type: 'ball-pulse',
      color: '#ff5732',
      className: undefined,
    };

    Loader.displayName = 'Loader';

    export default Loader;