@lyra/components/lib/loading/Spinner.js

Basic UX components

'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _spinnerStyle = require('part:@lyra/components/loading/spinner-style');

var _spinnerStyle2 = _interopRequireDefault(_spinnerStyle);

var _spinnerIcon = require('part:@lyra/base/spinner-icon');

var _spinnerIcon2 = _interopRequireDefault(_spinnerIcon);

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

class Spinner extends _react2.default.Component {

  renderSvg() {
    return _react2.default.createElement(
      'svg',
      {
        width: '126px',
        height: '126px',
        xmlns: 'http://www.w3.org/2000/svg',
        viewBox: '0 0 100 100',
        preserveAspectRatio: 'xMidYMid'
      },
      _react2.default.createElement('rect', { x: '0', y: '0', width: '100', height: '100', fill: 'none' }),
      _react2.default.createElement(
        'circle',
        {
          cx: '50',
          cy: '50',
          r: '49.5',
          strokeDasharray: '202.1614872585032 108.85618544688634',
          stroke: 'currentColor',
          fill: 'none',
          strokeWidth: '1'
        },
        _react2.default.createElement('animateTransform', {
          attributeName: 'transform',
          type: 'rotate',
          values: '0 50 50;180 50 50;360 50 50;',
          keyTimes: '0;0.5;1',
          dur: '1s',
          repeatCount: 'indefinite',
          begin: '0s'
        })
      )
    );
  }

  render() {
    var _props = this.props;
    const inline = _props.inline,
          message = _props.message,
          fullscreen = _props.fullscreen,
          center = _props.center;

    return _react2.default.createElement(
      'div',
      {
        className: `
          ${inline ? _spinnerStyle2.default.inline : _spinnerStyle2.default.block}
          ${fullscreen ? _spinnerStyle2.default.fullscreen : ''}
          ${center ? _spinnerStyle2.default.center : ''}
        `
      },
      _react2.default.createElement(
        'div',
        { className: _spinnerStyle2.default.inner },
        fullscreen || center ? this.renderSvg() : _react2.default.createElement(_spinnerIcon2.default, { color: 'inherit' }),
        message && _react2.default.createElement(
          'div',
          { className: _spinnerStyle2.default.message },
          message
        )
      )
    );
  }
}
exports.default = Spinner;
Spinner.propTypes = {
  inline: _propTypes2.default.bool,
  message: _propTypes2.default.string,
  fullscreen: _propTypes2.default.bool,
  center: _propTypes2.default.bool
};