optimizely-oui/module/js/components/EmptyDashboard/index.js

Optimizely's Component Library.

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
/**
 *
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */

var EmptyDashboard = function EmptyDashboard(_ref) {
  var button = _ref.button,
      className = _ref.className,
      imageHeight = _ref.imageHeight,
      imagePath = _ref.imagePath,
      imageWidth = _ref.imageWidth,
      headline = _ref.headline,
      description = _ref.description,
      descriptionMaxWidth = _ref.descriptionMaxWidth,
      showButtonBelow = _ref.showButtonBelow,
      testSection = _ref.testSection,
      props = _objectWithoutProperties(_ref, ["button", "className", "imageHeight", "imagePath", "imageWidth", "headline", "description", "descriptionMaxWidth", "showButtonBelow", "testSection"]);

  return React.createElement("div", _extends({
    "data-oui-component": true,
    className: classNames("flex flex--column overflow-y--auto flex--1", className),
    "data-test-section": "empty-state"
  }, props), button && !showButtonBelow && React.createElement("div", {
    className: "flex push-quad--sides oui-empty-dashboard__button-row flex-justified--end"
  }, button), React.createElement("div", {
    className: "anchor--middle height--1-1 flex flex--row flex-align--center"
  }, React.createElement("div", {
    "data-oui-component": true,
    className: "text--center soft-quad",
    "data-test-section": testSection
  }, imagePath && React.createElement("div", {
    className: "push-double--bottom"
  }, React.createElement("img", {
    src: imagePath,
    className: "svg--non-scaling-stroke display--inline",
    style: {
      maxWidth: "450px",
      maxHeight: "290px",
      height: imageHeight,
      width: imageWidth
    },
    "data-test-section": testSection && "".concat(testSection, "-image"),
    alt: ""
  })), headline && React.createElement("h1", {
    className: "alpha push--bottom",
    "data-test-section": testSection && "".concat(testSection, "-headline")
  }, headline), description && React.createElement("div", {
    className: "muted push--bottom anchor--middle",
    style: {
      maxWidth: descriptionMaxWidth
    },
    "data-test-section": testSection && "".concat(testSection, "-description")
  }, description), button && showButtonBelow && React.createElement("div", {
    className: "push-double--top"
  }, button))));
};

EmptyDashboard.propTypes = {
  /** A button, link, or other element that is actionable */
  button: PropTypes.node,

  /** CSS class names. */
  className: PropTypes.string,

  /** A string or `div` containing longer text that describes the empty state */
  description: PropTypes.element,

  /** Max width of description. Accepts any valid CSS width value. */
  descriptionMaxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** Short text about the empty state */
  headline: PropTypes.string.isRequired,

  /** String to set the max image height */
  imageHeight: PropTypes.string,

  /** Path to an image representing the empty state */
  imagePath: PropTypes.string,

  /** String to set the max image width */
  imageWidth: PropTypes.string,

  /**
   * Boolean used to show the button below the image
   * instead of top right corner of the empty state
   */
  showButtonBelow: PropTypes.bool,

  /** Identifier used to create data-test-section attributes for testing */
  testSection: PropTypes.string
};
EmptyDashboard.getDefaultProps = {
  descriptionMaxWidth: "450px",
  imageHeight: "inherit",
  imageWidth: "inherit",
  showButtonBelow: false,
  testSection: "empty-hello"
};
export default EmptyDashboard;