@attivio/suit/es/components/BusyIndicator.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp;

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; }

// @Flow
import React from 'react';

import DefaultImage from './DefaultImage';
import spinnyImage from '../img/spinner.gif';

/**
 * Component to indicate the app is busy with an animation and optional message.
 */
var BusyIndicator = (_temp = _class = function (_React$Component) {
  _inherits(BusyIndicator, _React$Component);

  // eslint-disable-line max-len
  function BusyIndicator(props) {
    _classCallCheck(this, BusyIndicator);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.renderBusySymbol = function () {
      var type = _this.props.type;
      var dotCount = _this.state.dotCount;


      switch (type) {
        case 'ellipsis':
          return '.'.repeat(dotCount);
        case 'spinny':
          return React.createElement(DefaultImage, { src: spinnyImage, style: { height: '1em' } });
        default:
          return null;
      }
    };

    _this.state = {
      dotCount: 3
    };
    _this.advance = _this.advance.bind(_this);
    return _this;
  }

  BusyIndicator.prototype.componentDidMount = function componentDidMount() {
    this.start();
  };

  BusyIndicator.prototype.componentDidUpdate = function componentDidUpdate(previousProps) {
    if (previousProps.show !== this.props.show) {
      if (this.props.show) {
        this.start();
      } else {
        this.stop();
      }
    }
  };

  BusyIndicator.prototype.componentWillUnmount = function componentWillUnmount() {
    this.stop();
  };

  BusyIndicator.prototype.stop = function stop() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = 0;
    }
  };

  BusyIndicator.prototype.start = function start() {
    this.stop();
    if (this.props.type === 'ellipsis') {
      this.timer = setInterval(this.advance, 500);
    }
  };

  BusyIndicator.prototype.advance = function advance() {
    this.setState(function (_ref) {
      var dotCount = _ref.dotCount;

      var incrementedCount = dotCount + 1;
      var newCount = incrementedCount > 3 ? 0 : incrementedCount;
      return {
        dotCount: newCount
      };
    });
  };

  BusyIndicator.prototype.render = function render() {
    var _props = this.props,
        message = _props.message,
        positionMessageRight = _props.positionMessageRight,
        messageStyle = _props.messageStyle,
        show = _props.show,
        style = _props.style,
        type = _props.type;


    if (show) {
      var _extends2;

      var containerStyle = _extends({
        display: 'flex',
        flexFlow: 'row nowrap',
        alignItems: 'center'
      }, style);

      var validRightPosition = type === 'spinny' && message && positionMessageRight;
      var messageMargin = validRightPosition ? 'marginLeft' : 'marginRight';

      var mergedMessageStyle = type === 'spinny' ? _extends((_extends2 = {}, _extends2[messageMargin] = '10px', _extends2), messageStyle) : messageStyle;

      var messageToShow = message ? React.createElement(
        'div',
        { style: mergedMessageStyle },
        message
      ) : '';

      var leftContents = validRightPosition ? this.renderBusySymbol() : messageToShow;

      var rightContents = validRightPosition ? messageToShow : this.renderBusySymbol();

      return React.createElement(
        'div',
        { style: containerStyle },
        leftContents,
        rightContents
      );
    }
    return null;
  };

  return BusyIndicator;
}(React.Component), _class.defaultProps = {
  message: '',
  positionMessageRight: false,
  style: {},
  type: 'ellipsis'
}, _class.displayName = 'BusyIndicator', _temp);
export { BusyIndicator as default };