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

wix-style-react

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _EmptyState = require('./EmptyState.scss');

var _EmptyState2 = _interopRequireDefault(_EmptyState);

var _Heading = require('../Heading');

var _Heading2 = _interopRequireDefault(_Heading);

var _Text = require('../Text');

var _Text2 = _interopRequireDefault(_Text);

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

/**
 * # `<EmptyState/>` component
 * > 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,
      children = _ref.children,
      dataHook = _ref.dataHook;
  return _react2.default.createElement(
    'div',
    {
      className: (0, _classnames2.default)(_EmptyState2.default.wrapper, _EmptyState2.default[theme]),
      'data-hook': dataHook
    },
    _react2.default.createElement(
      'div',
      { className: _EmptyState2.default.container },
      image && _react2.default.createElement(
        'div',
        {
          className: _EmptyState2.default.imageContainer,
          'data-hook': 'empty-state-image-container'
        },
        typeof image === 'string' ? _react2.default.createElement('img', {
          className: _EmptyState2.default.imageElement,
          src: image,
          'data-hook': 'image-element'
        }) : _react2.default.cloneElement(image, {
          'data-hook': 'image-node'
        })
      ),
      title && _react2.default.createElement(
        'div',
        {
          className: _EmptyState2.default.titleContainer,
          'data-hook': 'empty-state-title-container'
        },
        theme === 'section' ? _react2.default.createElement(
          _Text2.default,
          { weight: 'normal' },
          title
        ) : _react2.default.createElement(
          _Heading2.default,
          { appearance: 'H3' },
          title
        )
      ),
      _react2.default.createElement(
        'div',
        {
          className: _EmptyState2.default.subtitleContainer,
          'data-hook': 'empty-state-subtitle-container'
        },
        _react2.default.createElement(
          _Text2.default,
          { secondary: true },
          subtitle
        )
      ),
      children && _react2.default.createElement(
        'div',
        {
          className: _EmptyState2.default.childrenContainer,
          'data-hook': 'empty-state-children-container'
        },
        children
      )
    )
  );
};

EmptyState.displayName = 'EmptyState';

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

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

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

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

  /** Children to render below the subtitle, ideally an action of some type (Button or TextLink for instance) */
  children: _propTypes2.default.node,

  dataHook: _propTypes2.default.string
};

EmptyState.defaultProps = {
  theme: 'section',
  image: null,
  children: null
};

exports.default = EmptyState;