@evg-b/evg-ui/dist/Loader/Loader.js

EVG-UI library inspired by Material Design.

import _extends from '@babel/runtime/helpers/extends';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import '@babel/runtime/helpers/slicedToArray';
import withStyles from '../styles/withStyles.js';
import '@babel/runtime/helpers/construct';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';

var styles = {
  base: {
    position: 'relative',
    display: 'inline-block',
    animation: "$base 2000ms linear infinite"
  },
  '@keyframes base': {
    '100%': {
      transform: 'rotate(1turn)'
    }
  },
  circle: {
    fill: 'none',
    stroke: function stroke(props) {
      return props.color === 'default' ? 'currentColor' : props.Color.Base();
    },
    animation: "$circle 1500ms ease-out infinite",
    transformOrigin: 'center'
  },
  '@keyframes circle': {
    '0%': {
      strokeDasharray: "calc(var(--evg-stroke-dasharray)*0.05),calc(var(--evg-stroke-dasharray))",
      strokeDashoffset: 0,
      transform: 'rotate(0deg)'
    },
    '10%': {
      strokeDasharray: "calc(var(--evg-stroke-dasharray)*0.05),calc(var(--evg-stroke-dasharray))",
      strokeDashoffset: 0
    },
    '50%': {
      strokeDasharray: "calc(var(--evg-stroke-dasharray)*0.7),calc(var(--evg-stroke-dasharray))",
      strokeDashoffset: "calc(var(--evg-stroke-dasharray)*-0.3)"
    },
    '90%': {
      strokeDasharray: "calc(var(--evg-stroke-dasharray)*0.7),calc(var(--evg-stroke-dasharray))",
      strokeDashoffset: "calc(var(--evg-stroke-dasharray)*-0.95)"
    },
    '100%': {
      strokeDasharray: "calc(var(--evg-stroke-dasharray)*0.7),calc(var(--evg-stroke-dasharray))",
      strokeDashoffset: "calc(var(--evg-stroke-dasharray)*-0.95)",
      transform: 'rotate(18deg)'
    }
  }
};
/**
 * Индикатор прогресса указывающий неопределенное время ожидания.
*/

var Loader = /*#__PURE__*/React.forwardRef(function Loader(props, ref) {
  var classes = props.classes,
      className = props.className;
      props.children;
      props.color;
      var size = props.size,
      depth = props.depth,
      otherProps = _objectWithoutProperties(props, ["classes", "className", "children", "color", "size", "depth"]);

  var Loader_ref = useRef();
  Loader_ref = ref || Loader_ref;
  useEffect(function () {
    var Loader_S = Loader_ref.current;
    var perimeter = 2 * Math.PI * (size / 2 - depth);
    Loader_S.style.setProperty('--evg-stroke-dasharray', "".concat(perimeter, "px"));
  }, [size, depth]);
  return /*#__PURE__*/React.createElement("svg", _extends({
    ref: Loader_ref,
    className: classNames(classes.base, className),
    style: {
      width: size,
      height: size
    }
  }, otherProps), /*#__PURE__*/React.createElement("circle", {
    cx: "50%",
    cy: "50%",
    r: size / 2 - depth,
    strokeWidth: depth,
    strokeLinecap: "round",
    className: classes.circle
  }));
});
Loader.propTypes = {
  /**
   * Объект содержит jss стили компонента.
  */
  classes: PropTypes.object,

  /**
   * Чтобы указать CSS классы, используйте этот атрибут.
  */
  className: PropTypes.string,

  /**
   * Это свойство не реализуется.
  */
  children: PropTypes.any,

  /**
   * Название цвета в разных форматах.
  */
  color: PropTypes.string,

  /**
   * Размер компонента.
  */
  size: PropTypes.number,

  /**
   * Толщина линии.
  */
  depth: PropTypes.number
};
Loader.defaultProps = {
  color: 'default',
  size: 48,
  depth: 3
};
Loader.displayName = 'LoaderEVG';
var Loader$1 = withStyles(styles)(Loader);

export default Loader$1;