@mui/x-tree-view/internals/components/RichTreeViewLoading.js

The community edition of the MUI X Tree View components.

"use strict";
'use client';

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MAX_LOADING_ITEMS_COUNT = exports.DEFAULT_LOADING_ITEMS_COUNT = void 0;
exports.RichTreeViewItemLoaders = RichTreeViewItemLoaders;
exports.RichTreeViewLoading = RichTreeViewLoading;
exports.RichTreeViewLoadingContext = RichTreeViewLoadingContext;
exports.getLoadingItemsCount = getLoadingItemsCount;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
var _store = require("@mui/x-internals/store");
var _warning = require("@mui/x-internals/warning");
var _TreeItemLoader = require("../../TreeItemLoader");
var _TreeItemLoaderContext = require("../../TreeItemLoader/TreeItemLoaderContext");
var _useTreeViewRootProps = require("../hooks/useTreeViewRootProps");
var _items = require("../plugins/items");
var _selection = require("../plugins/selection");
var _jsxRuntime = require("react/jsx-runtime");
const DEFAULT_LOADING_ITEMS_COUNT = exports.DEFAULT_LOADING_ITEMS_COUNT = 5;
const MAX_LOADING_ITEMS_COUNT = exports.MAX_LOADING_ITEMS_COUNT = 100;
function getLoadingItemsCount(itemsCount) {
  if (process.env.NODE_ENV !== 'production') {
    if (itemsCount != null && (!Number.isFinite(itemsCount) || itemsCount < 0)) {
      (0, _warning.warnOnce)([`MUI X: The \`itemsCount\` value in \`slotProps.loading\` received an invalid value (${itemsCount}).`, 'It must be a non-negative finite number.']);
    }
  }
  const rawCount = itemsCount ?? DEFAULT_LOADING_ITEMS_COUNT;
  return Number.isFinite(rawCount) ? Math.max(1, Math.min(MAX_LOADING_ITEMS_COUNT, Math.floor(rawCount))) : DEFAULT_LOADING_ITEMS_COUNT;
}

/**
 * The owner state of the `loading` slot.
 */

function RichTreeViewItemLoaderRow(props) {
  const {
    classes,
    slots,
    slotProps,
    ownerState
  } = props;
  const ItemLoader = slots.itemLoader ?? _TreeItemLoader.TreeItemLoader;
  const itemLoaderProps = (0, _useSlotProps.default)({
    elementType: ItemLoader,
    externalSlotProps: slotProps?.itemLoader,
    className: classes.itemLoader,
    additionalProps: {
      role: 'treeitem',
      'aria-disabled': true
    },
    ownerState
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemLoader, (0, _extends2.default)({}, itemLoaderProps));
}

/**
 * Renders the default loading rows without any wrapper.
 * Used by `RichTreeViewLoading` for the whole-tree loading state and by
 * `RichTreeViewItem` for the children of an item that lazily loads them.
 * It must render inside a `TreeItemLoaderContext` provider.
 */
function RichTreeViewItemLoaders(props) {
  const {
    classes,
    slots,
    slotProps,
    itemsCount
  } = props;
  const {
    itemDepth,
    isCheckboxSelectionEnabled
  } = React.useContext(_TreeItemLoaderContext.TreeItemLoaderContext);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
    children: Array.from({
      length: itemsCount
    }, (_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoaderRow, {
      classes: classes,
      slots: slots,
      slotProps: slotProps,
      ownerState: {
        index,
        itemsCount,
        itemDepth,
        isCheckboxSelectionEnabled
      }
    }, index))
  });
}

/**
 * Provides the layout information the loading rows need to `TreeItemLoader`.
 * Wraps both the default rows and a custom `loading` slot, so custom loading
 * UIs composed with `TreeItemLoader` keep the correct depth and height.
 */
function RichTreeViewLoadingContext(props) {
  const {
    store,
    itemDepth = 0,
    children
  } = props;
  const itemHeight = (0, _store.useStore)(store, _items.itemsSelectors.itemHeight);
  const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selection.selectionSelectors.isCheckboxSelectionEnabled);
  const contextValue = React.useMemo(() => ({
    itemDepth,
    itemHeight,
    isCheckboxSelectionEnabled
  }), [itemDepth, itemHeight, isCheckboxSelectionEnabled]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItemLoaderContext.TreeItemLoaderContext.Provider, {
    value: contextValue,
    children: children
  });
}

/**
 * Renders the loading placeholder shared by `RichTreeView` and `RichTreeViewPro`.
 * It reuses `useTreeViewRootProps` so the root element keeps the same `role="tree"`,
 * `id`, `aria-multiselectable` and slot/className behavior as the non-loading tree.
 */
function RichTreeViewLoading(props) {
  const {
    store,
    slots,
    slotProps,
    ownerState,
    forwardedProps,
    rootRef,
    classes
  } = props;
  const getRootProps = (0, _useTreeViewRootProps.useTreeViewRootProps)(store, forwardedProps, rootRef);
  const Root = slots.root;
  const Loading = slots.loading;
  const loadingProps = (0, _useSlotProps.default)({
    elementType: Loading ?? 'div',
    externalSlotProps: slotProps?.loading,
    ownerState: {
      itemId: null
    }
  });
  const itemsCount = getLoadingItemsCount(loadingProps.itemsCount);
  const rootProps = (0, _useSlotProps.default)({
    elementType: Root,
    externalSlotProps: slotProps?.root,
    className: classes.root,
    getSlotProps: getRootProps,
    additionalProps: (0, _extends2.default)({
      'aria-busy': true
    }, forwardedProps['aria-label'] == null && forwardedProps['aria-labelledby'] == null ? {
      'aria-label': 'Loading'
    } : {}),
    ownerState
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({}, rootProps, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewLoadingContext, {
      store: store,
      children: Loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, (0, _extends2.default)({}, loadingProps, {
        itemsCount: itemsCount
      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(RichTreeViewItemLoaders, {
        classes: classes,
        slots: slots,
        slotProps: slotProps,
        itemsCount: itemsCount
      })
    })
  }));
}