wix-style-react/dist/src/EmptyState/EmptyState.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

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

var _EmptyStateSt = require("./EmptyState.st.css");

var _Heading = _interopRequireDefault(require("../Heading"));

var _Text = _interopRequireDefault(require("../Text"));

var _context = require("../FontUpgrade/context");

/**
 * Representing a state of an empty page, section, table, etc.
 */
var EmptyState = function EmptyState(_ref) {
  var theme = _ref.theme,
      title = _ref.title,
      subtitle = _ref.subtitle,
      image = _ref.image,
      classNamesProp = _ref.classNames,
      children = _ref.children,
      dataHook = _ref.dataHook,
      align = _ref.align;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.root, {
      theme: theme,
      align: align
    }),
    "data-hook": dataHook,
    "data-theme": theme,
    "data-align": align
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: _EmptyStateSt.classes.container
  }, image && /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.imageContainer, {}, classNamesProp && classNamesProp.imageContainer || ''),
    "data-hook": "empty-state-image-container"
  }, typeof image === 'string' ? /*#__PURE__*/_react["default"].createElement("img", {
    className: _EmptyStateSt.classes.imageElement,
    src: image,
    "data-hook": "image-element"
  }) : /*#__PURE__*/_react["default"].cloneElement(image, {
    'data-hook': 'image-node'
  })), title && /*#__PURE__*/_react["default"].createElement("div", {
    className: _EmptyStateSt.classes.titleContainer,
    "data-hook": "empty-state-title-container"
  }, theme === 'section' ? /*#__PURE__*/_react["default"].createElement(_context.FontUpgradeContext.Consumer, null, function (_ref2) {
    var active = _ref2.active;
    return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
      weight: active ? 'bold' : 'normal',
      className: _EmptyStateSt.classes.sectionTitle
    }, title);
  }) : /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
    className: _EmptyStateSt.classes.title,
    appearance: "H3"
  }, title)), subtitle && /*#__PURE__*/_react["default"].createElement("div", {
    className: _EmptyStateSt.classes.subtitleContainer,
    "data-hook": "empty-state-subtitle-container"
  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
    className: _EmptyStateSt.classes.subtitle,
    secondary: true
  }, subtitle)), children && /*#__PURE__*/_react["default"].createElement("div", {
    className: _EmptyStateSt.classes.childrenContainer,
    "data-hook": "empty-state-children-container"
  }, children)));
};

EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
  /** The theme of the EmptyState */
  theme: _propTypes["default"].oneOf(['page', 'page-no-border', 'section']),

  /** Content for the title of the Empty State */
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** Content for the subtitle of the Empty State */
  subtitle: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** The Empty State image, can be either a string representing the image URL, or a node to render instead */
  image: _propTypes["default"].node,

  /** The Empty State image bottom margin. If not specified, use the default padding defined in the css */
  classNames: _propTypes["default"].shape({
    imageContainer: _propTypes["default"].string
  }),

  /** Children to render below the subtitle, ideally an action of some type (Button or TextButton for instance) */
  children: _propTypes["default"].node,
  dataHook: _propTypes["default"].string,
  align: _propTypes["default"].oneOf(['start', 'center', 'end'])
};
EmptyState.defaultProps = {
  theme: 'section',
  image: null,
  children: null,
  align: 'center'
};
var _default = EmptyState;
exports["default"] = _default;