{"size": 1965, "ext": "js", "max_stars_repo_path": "packages/react-ui-core/src/Gmap/spinners/BounceLoader.js", "max_stars_repo_name": "rentpath/react-ui", "max_stars_repo_stars_event_min_datetime": "2017-07-25T14:26:31.000Z", "max_stars_repo_stars_event_max_datetime": "2019-05-13T14:00:03.000Z", "max_issues_repo_path": "packages/react-ui-core/src/Gmap/spinners/BounceLoader.js", "max_issues_repo_name": "rentpath/react-ui", "max_issues_repo_issues_event_min_datetime": "2017-07-19T17:43:11.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T17:28:02.000Z", "max_forks_repo_path": "packages/react-ui-core/src/Gmap/spinners/BounceLoader.js", "max_forks_repo_name": "rentpath/react-ui", "max_forks_repo_forks_event_min_datetime": "2017-07-28T02:28:04.000Z", "max_forks_repo_forks_event_max_datetime": "2018-11-20T05:58:59.000Z"}
{"max_stars_count": 4, "max_issues_count": 259, "max_forks_count": 2, "avg_line_length": 21.8333333333, "max_line_length": 95, "alphanum_fraction": 0.5083969466}
import React, { Component } from 'react'
import PropTypes from 'prop-types'

const defaultAnimation = i => `BOUNCELOADER 2.1s ${i === 1 ? '1s' : '0s'} infinite ease-in-out`

class Loader extends Component {
  static propTypes = {
    loading: PropTypes.bool,
    color: PropTypes.string,
    size: PropTypes.number,
    sizeUnit: PropTypes.string,
    className: PropTypes.string,
    animation: PropTypes.func,
  };

  static defaultProps = {
    loading: true,
    color: '#000000',
    size: 60,
    sizeUnit: 'px',
    className: '',
    animation: defaultAnimation,
  };

  style(scale) {
    const {
      size,
      color,
      sizeUnit,
      animation,
    } = this.props

    return {
      position: 'absolute',
      height: `${size}${sizeUnit}`,
      width: `${size}${sizeUnit}`,
      backgroundColor: `${color}`,
      borderRadius: '100%',
      opacity: 0.6,
      top: 0,
      left: 0,
      animationFillMode: 'both',
      animation: animation(scale),
    }
  }

  wrapperStyles() {
    const { size, sizeUnit } = this.props

    return {
      position: 'relative',
      width: `${size}${sizeUnit}`,
      height: `${size}${sizeUnit}`,
    }
  }

  render() {
    const { loading, className } = this.props

    return loading ? (
      <div className={className}>
        <div style={this.style(0)} />
        <div style={this.style(1)} />
        {/* eslint-disable-next-line */}
        <style dangerouslySetInnerHTML={{
          __html: `
            @keyframes BOUNCELOADER {
              0% {
                transform: scale(0);
                -webkit-transform: scale(0);
              }
              50% {
                transform: scale(1);
                -webkit-transform: scale(1);
              }
              100% {
                transform: scale(0);
                -webkit-transform: scale(0);
              }
            }
          `,
        }}
        />
      </div>
    ) : null
  }
}

export default Loader
