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

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import styles from './EmptyState.scss';

import Heading from '../Heading';
import Text from '../Text';

/**
 * # `<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 React.createElement(
    'div',
    {
      className: classNames(styles.wrapper, styles[theme]),
      'data-hook': dataHook
    },
    React.createElement(
      'div',
      { className: styles.container },
      image && React.createElement(
        'div',
        {
          className: styles.imageContainer,
          'data-hook': 'empty-state-image-container'
        },
        typeof image === 'string' ? React.createElement('img', {
          className: styles.imageElement,
          src: image,
          'data-hook': 'image-element'
        }) : React.cloneElement(image, {
          'data-hook': 'image-node'
        })
      ),
      title && React.createElement(
        'div',
        {
          className: styles.titleContainer,
          'data-hook': 'empty-state-title-container'
        },
        theme === 'section' ? React.createElement(
          Text,
          { weight: 'normal' },
          title
        ) : React.createElement(
          Heading,
          { appearance: 'H3' },
          title
        )
      ),
      React.createElement(
        'div',
        {
          className: styles.subtitleContainer,
          'data-hook': 'empty-state-subtitle-container'
        },
        React.createElement(
          Text,
          { secondary: true },
          subtitle
        )
      ),
      children && React.createElement(
        'div',
        {
          className: styles.childrenContainer,
          'data-hook': 'empty-state-children-container'
        },
        children
      )
    )
  );
};

EmptyState.displayName = 'EmptyState';

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

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

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

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

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

  dataHook: PropTypes.string
};

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

export default EmptyState;