lucid-ui/lib/components/LoadingIndicator/examples/1.interactive.js

A UI component library from AppNexus.

import _random from "lodash/random";
import _map from "lodash/map";
import React from 'react';
import createClass from 'create-react-class';
import { BarChart, Button, LoadingIndicator } from '../../../index';
var dates = ['2015-01-01', '2015-01-02', '2015-01-03', '2015-01-04'];

var getData = function getData() {
  return _map(dates, function (date) {
    return {
      x: date,
      y: _random(1, 5)
    };
  });
};

export default createClass({
  getInitialState: function getInitialState() {
    return {
      isLoading: true,
      data: _map(dates, function (date) {
        return {
          x: date,
          y: 0
        };
      }),
      overlayKind: 'dark'
    };
  },
  handleKindClick: function handleKindClick() {
    this.setState({
      overlayKind: this.state.overlayKind === 'dark' ? 'light' : 'dark'
    });
  },
  componentDidMount: function componentDidMount() {
    var _this = this;

    setTimeout(function () {
      return _this.setState({
        isLoading: false,
        data: getData()
      });
    }, 1000);
  },
  render: function render() {
    var _this2 = this;

    var _this$state = this.state,
        data = _this$state.data,
        isLoading = _this$state.isLoading;
    return /*#__PURE__*/React.createElement(LoadingIndicator, {
      isLoading: isLoading,
      overlayKind: this.state.overlayKind
    }, /*#__PURE__*/React.createElement(Button, {
      style: {
        margin: 10
      },
      onClick: function onClick() {
        _this2.setState({
          isLoading: true
        });

        setTimeout(function () {
          return _this2.setState({
            isLoading: false,
            data: getData()
          });
        }, 2000);
      }
    }, "Get more data"), /*#__PURE__*/React.createElement(Button, {
      onClick: this.handleKindClick
    }, "Switch overlay color"), /*#__PURE__*/React.createElement(BarChart, {
      width: 750,
      data: data,
      yAxisTitle: "Revenue"
    }));
  }
});