react-ions/lib/components/Spinner/Spinner.js

An open source set of React components that implement Ambassador's Design and UX patterns.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledSpan = undefined;

var _templateObject = _taggedTemplateLiteral(['', ''], ['', '']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _styles = require('./styles.css');

var _styles2 = _interopRequireDefault(_styles);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var StyledSpan = exports.StyledSpan = _styledComponents2.default.span(_templateObject, function (props) {
  return props.css;
});

var Spinner = function (_React$Component) {
  _inherits(Spinner, _React$Component);

  function Spinner(props) {
    _classCallCheck(this, Spinner);

    var _this = _possibleConstructorReturn(this, (Spinner.__proto__ || Object.getPrototypeOf(Spinner)).call(this, props));

    _initialiseProps.call(_this);

    if (props.optClass && process.env.NODE_ENV !== 'production') {
      console.warn('Dropdown: Use of optClass will be deprecated as of react-ions 6.0.0, please use `className` instead');
    }
    return _this;
  }

  return Spinner;
}(_react2.default.Component);

Spinner.propTypes = {
  /**
   * Delay before showing spinner (in milliseconds)
   */
  delay: _propTypes2.default.number,
  /**
   * Whether the spinner is displayed
   */
  loading: _propTypes2.default.bool,
  /**
   * CSS positioning options for the loader. By default, the spinner will be positioned
   * in the center of any element with relative positioning.
   */
  position: _propTypes2.default.oneOf(['fixed', 'inline']),
  /**
   * The type of loader you want to display.
   */
  type: _propTypes2.default.oneOf(['spinner-dots', 'spinner-bounce', 'spinner-circular']).isRequired,
  /**
   * The hex code of the background color.
   */
  backgroundColor: _propTypes2.default.string,
  /**
   * The hex code of the loader color.
   */
  color: _propTypes2.default.string,
  /**
   * Optional styles to add to the spinner.
   */
  optClass: _propTypes2.default.string,
  /**
   * A class name to be used for local styles or integrations (required to support styled-components)
   */
  className: _propTypes2.default.string,
  /**
   * The size of the spinner.
   */
  size: _propTypes2.default.string
};

var _initialiseProps = function _initialiseProps() {
  var _this2 = this;

  this.state = {
    loading: false
  };

  this.componentWillMount = function () {
    _this2.getLoadingState(_this2.props);
  };

  this.componentWillReceiveProps = function (nextProps) {
    _this2.getLoadingState(nextProps);
  };

  this.shouldComponentUpdate = function (nextProps, nextState) {
    return nextState.loading !== _this2.state.loading;
  };

  this.getLoadingState = function (props) {
    if (props.loading && props.delay) {
      _this2.timeout = setTimeout(function () {
        _this2.setState({ loading: true });
      }, props.delay);
    } else {
      clearTimeout(_this2.timeout);
      _this2.setState({ loading: props.loading || false });
    }
  };

  this.innerHtml = function () {
    if (_this2.props.type === 'spinner-dots') {
      return _react2.default.createElement(
        'span',
        null,
        _react2.default.createElement('span', { className: 'dot1' }),
        _react2.default.createElement('span', { className: 'dot2' })
      );
    }

    if (_this2.props.type === 'spinner-circular') {
      return _react2.default.createElement(
        'div',
        { className: 'sc-inner' },
        _react2.default.createElement(
          'div',
          { className: 'sc-inner-animation' },
          _react2.default.createElement(
            'svg',
            { width: _this2.props.size || '20', height: _this2.props.size || '20', strokeWidth: '16.00', viewBox: '-3.00 -3.00 106.00 106.00' },
            _react2.default.createElement('path', {
              className: 'sc-inner-track',
              d: 'M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90' }),
            _react2.default.createElement('path', {
              className: 'sc-inner-head',
              d: 'M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90',
              pathLength: '280',
              strokeDasharray: '280 280',
              strokeDashoffset: '210' })
          )
        )
      );
    }

    return _react2.default.createElement(
      'span',
      null,
      _react2.default.createElement('span', { className: 'bounce1' }),
      _react2.default.createElement('span', { className: 'bounce2' }),
      _react2.default.createElement('span', { className: 'bounce3' })
    );
  };

  this.render = function () {
    var _props = _this2.props,
        backgroundColor = _props.backgroundColor,
        className = _props.className,
        color = _props.color,
        optClass = _props.optClass,
        position = _props.position,
        size = _props.size,
        type = _props.type;
    var loading = _this2.state.loading;


    return _react2.default.createElement(
      StyledSpan,
      {
        css: (0, _styles2.default)({ loading: loading, hidden: !loading, position: position || 'absolute', color: color, size: size, backgroundColor: backgroundColor }),
        className: [optClass, className].join(' ').trim()
      },
      _react2.default.createElement(
        'span',
        { className: type },
        _this2.innerHtml()
      )
    );
  };
};

exports.default = Spinner;