@mskcc/carbon-react/lib/components/Accordion/Accordion.Skeleton.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var PropTypes = require('prop-types');
var React = require('react');
var cx = require('classnames');
var SkeletonText = require('../SkeletonText/SkeletonText.js');
var usePrefix = require('../../internal/usePrefix.js');
var MskIcon = require('../Icon/MskIcon.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);

var _SkeletonText, _SkeletonText2, _SkeletonText3;
function AccordionSkeleton(_ref) {
  let {
    align = 'end',
    className,
    count = 4,
    isFlush,
    open = true,
    ...rest
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const classes = cx__default["default"](`${prefix}--accordion`, `${prefix}--skeleton`, className, {
    [`${prefix}--accordion--${align}`]: align,
    [`${prefix}--accordion--flush`]: isFlush && align !== 'start'
  });
  const numSkeletonItems = open ? count - 1 : count;
  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
    className: classes
  }, rest), open && /*#__PURE__*/React__default["default"].createElement("li", {
    className: `${prefix}--accordion__item ${prefix}--accordion__item--active`
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--accordion__heading`
  }, /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
    icon: "chevron_right",
    className: `${prefix}--accordion__arrow`
  }), /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    className: `${prefix}--accordion__title`
  })), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--accordion__content`
  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    width: "90%"
  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    width: "80%"
  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    width: "95%"
  })))), Array.from({
    length: numSkeletonItems
  }).map((_, i) => /*#__PURE__*/React__default["default"].createElement(AccordionSkeletonItem, {
    key: i
  })));
}
AccordionSkeleton.propTypes = {
  /**
   * Specify the alignment of the accordion heading title and chevron.
   */
  align: PropTypes__default["default"].oneOf(['start', 'end']),
  /**
   * Specify an optional className to add.
   */
  className: PropTypes__default["default"].string,
  /**
   * Set number of items to render
   */
  count: PropTypes__default["default"].number,
  /**
   * Specify whether an individual AccordionItem should be flush, default is false
   */
  isFlush: PropTypes__default["default"].bool,
  /**
   * `false` to not display the first item opened
   */
  open: PropTypes__default["default"].bool
};
function AccordionSkeletonItem() {
  const prefix = usePrefix.usePrefix();
  return /*#__PURE__*/React__default["default"].createElement("li", {
    className: `${prefix}--accordion__item`
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--accordion__heading`
  }, /*#__PURE__*/React__default["default"].createElement(MskIcon.Icon, {
    icon: "chevron_right",
    className: `${prefix}--accordion__arrow`
  }), /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    className: `${prefix}--accordion__title`
  })));
}

exports.AccordionSkeleton = AccordionSkeleton;
exports["default"] = AccordionSkeleton;