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

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import PropTypes from 'prop-types';
import React from 'react';
import cx from 'classnames';
import { ChevronRight } from '@carbon/icons-react';
import SkeletonText from '../SkeletonText/SkeletonText.js';
import { usePrefix } from '../../internal/usePrefix.js';

var _SkeletonText, _SkeletonText2, _SkeletonText3;
function AccordionSkeleton({
  align = 'end',
  className,
  count = 4,
  isFlush,
  open = true,
  ordered = false,
  ...rest
}) {
  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;
  const ListTag = ordered ? 'ol' : 'ul';
  return /*#__PURE__*/React.createElement(ListTag, _extends({
    className: classes
  }, rest), open && /*#__PURE__*/React.createElement("li", {
    className: `${prefix}--accordion__item ${prefix}--accordion__item--active`
  }, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--accordion__heading`
  }, /*#__PURE__*/React.createElement(ChevronRight, {
    className: `${prefix}--accordion__arrow`
  }), /*#__PURE__*/React.createElement(SkeletonText, {
    className: `${prefix}--accordion__title`
  })), /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--accordion__content`
  }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(SkeletonText, {
    width: "90%"
  })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React.createElement(SkeletonText, {
    width: "80%"
  })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React.createElement(SkeletonText, {
    width: "95%"
  })))), Array.from({
    length: numSkeletonItems
  }).map((_, i) => /*#__PURE__*/React.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
};
function AccordionSkeletonItem() {
  const prefix = usePrefix();
  return /*#__PURE__*/React.createElement("li", {
    className: `${prefix}--accordion__item`
  }, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--accordion__heading`
  }, /*#__PURE__*/React.createElement(ChevronRight, {
    className: `${prefix}--accordion__arrow`
  }), /*#__PURE__*/React.createElement(SkeletonText, {
    className: `${prefix}--accordion__title`
  })));
}

export { AccordionSkeleton, AccordionSkeleton as default };