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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React__default from 'react';
import cx from 'classnames';
import SkeletonText from '../SkeletonText/SkeletonText.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { Icon } from '../Icon/MskIcon.js';

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

export { AccordionSkeleton, AccordionSkeleton as default };