@carbon/react/lib/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.
 */

'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 iconsReact = require('@carbon/icons-react');
var SkeletonText = require('../SkeletonText/SkeletonText.js');
var usePrefix = require('../../internal/usePrefix.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({
  align = 'end',
  className,
  count = 4,
  isFlush,
  open = true,
  ordered = false,
  ...rest
}) {
  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;
  const ListTag = ordered ? 'ol' : 'ul';
  return /*#__PURE__*/React__default["default"].createElement(ListTag, _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(iconsReact.ChevronRight, {
    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(iconsReact.ChevronRight, {
    className: `${prefix}--accordion__arrow`
  }), /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
    className: `${prefix}--accordion__title`
  })));
}

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