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

Shopify’s product component library

import React$1 from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useI18n } from '../../utilities/i18n/hooks.js';
import { classNames } from '../../utilities/css.js';
import { DisplayText as DisplayText$1 } from '../DisplayText/DisplayText.js';
import { SkeletonBodyText as SkeletonBodyText$1 } from '../SkeletonBodyText/SkeletonBodyText.js';
import { SkeletonDisplayText as SkeletonDisplayText$1 } from '../SkeletonDisplayText/SkeletonDisplayText.js';
import styles from './SkeletonPage.scss.js';

var _ref = /*#__PURE__*/React$1.createElement(SkeletonDisplayText$1, {
  size: "large"
});

var _ref2 = /*#__PURE__*/React$1.createElement(SkeletonBodyText$1, {
  lines: 1
});

function SkeletonPage({
  children,
  fullWidth,
  narrowWidth,
  primaryAction,
  secondaryActions,
  title = '',
  breadcrumbs
}) {
  var i18n = useI18n();
  var {
    newDesignLanguage
  } = useFeatures();
  var className = classNames(styles.Page, fullWidth && styles.fullWidth, narrowWidth && styles.narrowWidth, newDesignLanguage && styles.newDesignLanguage);
  var headerClassName = classNames(styles.Header, breadcrumbs && styles['Header-hasBreadcrumbs'], secondaryActions && styles['Header-hasSecondaryActions']);
  var titleMarkup = title !== null ? renderTitle(title) : null;
  var primaryActionMarkup = primaryAction ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.PrimaryAction
  }, _ref) : null;
  var secondaryActionsMarkup = secondaryActions ? renderSecondaryActions(secondaryActions) : null;
  var breadcrumbMarkup = breadcrumbs ? /*#__PURE__*/React$1.createElement("div", {
    className: styles.BreadcrumbAction,
    style: {
      width: 60
    }
  }, _ref2) : null;
  return /*#__PURE__*/React$1.createElement("div", {
    className: className,
    role: "status",
    "aria-label": i18n.translate('Polaris.SkeletonPage.loadingLabel')
  }, /*#__PURE__*/React$1.createElement("div", {
    className: headerClassName
  }, breadcrumbMarkup, /*#__PURE__*/React$1.createElement("div", {
    className: styles.TitleAndPrimaryAction
  }, titleMarkup, primaryActionMarkup), secondaryActionsMarkup), /*#__PURE__*/React$1.createElement("div", {
    className: styles.Content
  }, children));
}

var _ref3 = /*#__PURE__*/React$1.createElement(SkeletonBodyText$1, {
  lines: 1
});

function renderSecondaryActions(actionCount) {
  var actions = [];

  for (var i = 0; i < actionCount; i++) {
    var width = Math.round(Math.random() * 40 + 60);
    actions.push( /*#__PURE__*/React$1.createElement("div", {
      className: styles.Action,
      style: {
        width
      },
      key: i
    }, _ref3));
  }

  return /*#__PURE__*/React$1.createElement("div", {
    className: styles.Actions
  }, actions);
}

var _ref4 = /*#__PURE__*/React$1.createElement(SkeletonDisplayText$1, {
  size: "large"
});

function renderTitle(title) {
  var titleContent = title === '' ? _ref4 : /*#__PURE__*/React$1.createElement(DisplayText$1, {
    size: "large",
    element: "h1"
  }, title);
  return /*#__PURE__*/React$1.createElement("div", {
    className: styles.Title
  }, titleContent);
}

export { SkeletonPage };