@primer/react/lib/FilteredActionList/FilteredActionListLoaders.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var Box = require('../Box/Box.js');
var Spinner = require('../Spinner/Spinner.js');
var Stack = require('../Stack/Stack.js');
var SkeletonBox = require('../experimental/Skeleton/SkeletonBox.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
class FilteredActionListLoadingType {
  constructor(name, appearsInBody) {
    this.name = name;
    this.appearsInBody = appearsInBody;
  }
}
const FilteredActionListLoadingTypes = {
  bodySpinner: new FilteredActionListLoadingType('body-spinner', true),
  bodySkeleton: new FilteredActionListLoadingType('body-skeleton', true),
  input: new FilteredActionListLoadingType('input', false)
};
const SKELETON_ROW_HEIGHT = 24;
const SKELETON_MIN_ROWS = 3;
function FilteredActionListBodyLoader({
  loadingType,
  height
}) {
  switch (loadingType) {
    case FilteredActionListLoadingTypes.bodySpinner:
      return /*#__PURE__*/React__default.default.createElement(LoadingSpinner, {
        "data-testid": "filtered-action-list-spinner"
      });
    case FilteredActionListLoadingTypes.bodySkeleton:
      {
        const rows = height < SKELETON_ROW_HEIGHT ? SKELETON_MIN_ROWS : height / SKELETON_ROW_HEIGHT;
        return /*#__PURE__*/React__default.default.createElement(LoadingSkeleton, {
          "data-testid": "filtered-action-list-skeleton",
          rows: rows
        });
      }
    default:
      return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null);
  }
}
function LoadingSpinner({
  ...props
}) {
  return /*#__PURE__*/React__default.default.createElement(Box, {
    p: 3,
    flexGrow: 1,
    sx: {
      alignContent: 'center',
      textAlign: 'center',
      height: '100%'
    }
  }, /*#__PURE__*/React__default.default.createElement(Spinner, props));
}
LoadingSpinner.displayName = "LoadingSpinner";
function LoadingSkeleton({
  rows = 10,
  ...props
}) {
  return /*#__PURE__*/React__default.default.createElement(Box, {
    p: 2,
    display: "flex",
    flexGrow: 1,
    flexDirection: "column"
  }, /*#__PURE__*/React__default.default.createElement(Stack.Stack, _extends({
    direction: "vertical",
    justify: "center",
    gap: "condensed"
  }, props), Array.from({
    length: rows
  }, (_, i) => /*#__PURE__*/React__default.default.createElement(Stack.Stack, {
    key: i,
    direction: "horizontal",
    gap: "condensed",
    align: "center"
  }, /*#__PURE__*/React__default.default.createElement(SkeletonBox.SkeletonBox, {
    width: "16px",
    height: "16px"
  }), /*#__PURE__*/React__default.default.createElement(SkeletonBox.SkeletonBox, {
    height: "10px",
    width: `${Math.random() * 60 + 20}%`,
    sx: {
      borderRadius: '4px'
    }
  })))));
}
LoadingSkeleton.displayName = "LoadingSkeleton";

exports.FilteredActionListBodyLoader = FilteredActionListBodyLoader;
exports.FilteredActionListLoadingType = FilteredActionListLoadingType;
exports.FilteredActionListLoadingTypes = FilteredActionListLoadingTypes;