@hackoregon/component-library/dist/ChartContainer/ChartContainer.js

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _emotion = require("emotion");

var _ChartTitle = _interopRequireDefault(require("../ChartTitle"));

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

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    max-width: 900px;\n    width: 100%;\n    ", ";\n  "]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n    margin: 0;\n  "]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  background: #fdd;\n  height: 100%;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  background: #eee;\n  height: 100%;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var chartLoading = (0, _emotion.css)(_templateObject());
var chartError = (0, _emotion.css)(_templateObject2());

var ChartContainer = function ChartContainer(_ref) {
  var title = _ref.title,
      error = _ref.error,
      loading = _ref.loading,
      subtitle = _ref.subtitle,
      children = _ref.children,
      className = _ref.className;
  var figureWrapper = (0, _emotion.css)(_templateObject3());
  var wrapperStyle = (0, _emotion.css)(_templateObject4(), className);

  var content = _react["default"].createElement("figure", {
    className: figureWrapper
  }, _react["default"].createElement(_ChartTitle["default"], {
    title: title,
    subtitle: subtitle
  }), _react["default"].createElement("div", {
    className: wrapperStyle
  }, children));

  if (loading) {
    content = _react["default"].createElement("div", {
      className: chartLoading
    }, "Loading...");
  } else if (error) {
    content = _react["default"].createElement("div", {
      className: chartError
    }, error);
  }

  return content;
};

ChartContainer.propTypes = {
  title: _propTypes["default"].string,
  error: _propTypes["default"].string,
  loading: _propTypes["default"].bool,
  children: _propTypes["default"].node,
  subtitle: _propTypes["default"].string,
  className: _propTypes["default"].string
};
ChartContainer.defaultProps = {};
var _default = ChartContainer;
exports["default"] = _default;