@atlaskit/empty-state/dist/cjs/empty-state.js

An empty state appears when there is no data to display and describes what the user can do next.

"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 _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
var _compiled = require("@atlaskit/primitives/compiled");
var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
var _actionsContainer = _interopRequireDefault(require("./styled/actions-container"));
var _container = _interopRequireDefault(require("./styled/container"));
var _image = _interopRequireDefault(require("./styled/image"));
var _spinnerContainer = _interopRequireDefault(require("./styled/spinner-container"));
/**
 * __Empty state__
 *
 * A component used for presenting various empty states.
 * e.g. (no items, empty search, broken link, welcome screen etc.)
 *
 * @example
 * ```tsx
 * import EmptyState from '@atlaskit/empty-state';
 *
 * // An example of a 404 state
 * export default () => {
 *  <EmptyState
 *   header="Page not found"
 *   imageUrl="https://cdn.io/images/404"
 *   description="Looks like you've stumbled off track. Sorry about that! This page either doesn't exist or has been removed."
 *   primaryAction={<Button appearance="primary">Home Page</Button>}
 *   secondaryAction={<Button>Report a problem</Button>}
 *  />;
 * };
 * ```
 */
var EmptyState = function EmptyState(_ref) {
  var buttonGroupLabel = _ref.buttonGroupLabel,
    description = _ref.description,
    header = _ref.header,
    _ref$headingLevel = _ref.headingLevel,
    headingLevel = _ref$headingLevel === void 0 ? 4 : _ref$headingLevel,
    _ref$headingSize = _ref.headingSize,
    headingSize = _ref$headingSize === void 0 ? 'medium' : _ref$headingSize,
    imageHeight = _ref.imageHeight,
    imageUrl = _ref.imageUrl,
    imageWidth = _ref.imageWidth,
    isLoading = _ref.isLoading,
    _ref$maxImageHeight = _ref.maxImageHeight,
    maxImageHeight = _ref$maxImageHeight === void 0 ? 160 : _ref$maxImageHeight,
    _ref$maxImageWidth = _ref.maxImageWidth,
    maxImageWidth = _ref$maxImageWidth === void 0 ? 160 : _ref$maxImageWidth,
    primaryAction = _ref.primaryAction,
    renderImage = _ref.renderImage,
    secondaryAction = _ref.secondaryAction,
    width = _ref.width,
    tertiaryAction = _ref.tertiaryAction,
    testId = _ref.testId;
  var actionsContainer = primaryAction || secondaryAction || isLoading ? /*#__PURE__*/_react.default.createElement(_actionsContainer.default, null, primaryAction && secondaryAction ? /*#__PURE__*/_react.default.createElement(_buttonGroup.default, {
    label: buttonGroupLabel || 'Button group',
    testId: testId && "".concat(testId, "-button-group")
  }, secondaryAction, primaryAction) : primaryAction || secondaryAction, /*#__PURE__*/_react.default.createElement(_spinnerContainer.default, null, isLoading && /*#__PURE__*/_react.default.createElement(_spinner.default, {
    testId: "empty-state-spinner"
  }))) : null;
  var tag = "h".concat(headingLevel > 0 && headingLevel < 7 ? headingLevel : headingLevel > 6 ? 6 : 4);
  return /*#__PURE__*/_react.default.createElement(_container.default, {
    testId: testId,
    width: width || 'wide'
  }, imageUrl ? /*#__PURE__*/_react.default.createElement(_image.default, {
    src: imageUrl,
    maxWidth: maxImageWidth,
    maxHeight: maxImageHeight,
    width: imageWidth,
    height: imageHeight
  }) : renderImage && renderImage({
    maxImageWidth: maxImageWidth,
    maxImageHeight: maxImageHeight,
    imageWidth: imageWidth,
    imageHeight: imageHeight
  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    paddingBlockEnd: "space.200"
  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
    size: headingSize,
    as: tag
  }, header)), description && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    paddingBlockEnd: "space.300"
  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
    as: "p"
  }, description)), actionsContainer, tertiaryAction);
};
var _default = exports.default = EmptyState;