@shopify/polaris/dist/esm/components/EmptyState/EmptyState.js

Shopify’s product component library

import React$1, { useContext } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { classNames } from '../../utilities/css.js';
import { Image as Image$1 } from '../Image/Image.js';
import { buttonFrom } from '../Button/utils.js';
import { WithinContentContext } from '../../utilities/within-content-context.js';
import { Stack as Stack$1 } from '../Stack/Stack.js';
import { TextContainer as TextContainer$1 } from '../TextContainer/TextContainer.js';
import { DisplayText as DisplayText$1 } from '../DisplayText/DisplayText.js';
import styles from './EmptyState.scss.js';

function EmptyState({
  children,
  heading,
  image,
  largeImage,
  imageContained,
  fullWidth = false,
  action,
  secondaryAction,
  footerContent
}) {
  var withinContentContainer = useContext(WithinContentContext);
  var {
    newDesignLanguage = false
  } = useFeatures();
  var className = classNames(styles.EmptyState, fullWidth && styles.fullWidth, newDesignLanguage && styles.newDesignLanguage, imageContained && styles.imageContained, withinContentContainer ? styles.withinContentContainer : styles.withinPage);
  var imageMarkup = largeImage ? /*#__PURE__*/React$1.createElement(Image$1, {
    alt: "",
    role: "presentation",
    className: styles.Image,
    source: largeImage,
    sourceSet: [{
      source: image,
      descriptor: '568w'
    }, {
      source: largeImage,
      descriptor: '1136w'
    }],
    sizes: "(max-width: 568px) 60vw"
  }) : /*#__PURE__*/React$1.createElement(Image$1, {
    role: "presentation",
    alt: "",
    className: styles.Image,
    source: image
  });
  var secondaryActionMarkup = secondaryAction ? buttonFrom(secondaryAction, newDesignLanguage ? {} : {
    plain: true
  }) : null;
  var footerContentMarkup = footerContent ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.FooterContent
  }, /*#__PURE__*/React$1.createElement(TextContainer$1, null, footerContent)) : null;
  var headingSize = withinContentContainer ? 'small' : 'medium';
  var primaryActionSize = withinContentContainer || newDesignLanguage ? 'medium' : 'large';
  var primaryActionMarkup = action ? buttonFrom(action, {
    primary: true,
    size: primaryActionSize
  }) : null;
  var headingMarkup = heading ? /*#__PURE__*/React$1.createElement(DisplayText$1, {
    size: headingSize
  }, heading) : null;
  var childrenMarkup = children ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Content
  }, children) : null;
  var textContentMarkup = headingMarkup || children ? /*#__PURE__*/React$1.createElement(TextContainer$1, null, headingMarkup, childrenMarkup) : null;
  var actionsMarkup = primaryActionMarkup || secondaryActionMarkup ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.Actions
  }, /*#__PURE__*/React$1.createElement(Stack$1, {
    alignment: "center",
    distribution: newDesignLanguage ? 'center' : undefined,
    spacing: newDesignLanguage ? 'tight' : undefined
  }, primaryActionMarkup, secondaryActionMarkup)) : null;
  var detailsMarkup = textContentMarkup || actionsMarkup || footerContentMarkup ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.DetailsContainer
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Details
  }, textContentMarkup, actionsMarkup, footerContentMarkup)) : /*#__PURE__*/React$1.createElement("div", {
    className: styles.DetailsContainer
  });
  return /*#__PURE__*/React$1.createElement("div", {
    className: className
  }, /*#__PURE__*/React$1.createElement("div", {
    className: styles.Section
  }, detailsMarkup, /*#__PURE__*/React$1.createElement("div", {
    className: styles.ImageContainer
  }, imageMarkup)));
}

export { EmptyState };