@mui/x-tree-view/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js

The community edition of the MUI X Tree View components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTreeViewExpansion = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
var _useStableCallback = require("@base-ui/utils/useStableCallback");
var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
const useTreeViewExpansion = ({
  instance,
  store,
  params
}) => {
  (0, _useAssertModelConsistency.useAssertModelConsistency)({
    componentName: 'Tree View',
    propName: 'expandedItems',
    controlled: params.expandedItems,
    defaultValue: params.defaultExpandedItems
  });
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
      isItemEditable: params.isItemEditable,
      expansionTrigger: params.expansionTrigger
    });
    if (store.state.expansion.expansionTrigger === newExpansionTrigger) {
      return;
    }
    store.set('expansion', (0, _extends2.default)({}, store.state.expansion, {
      expansionTrigger: newExpansionTrigger
    }));
  }, [store, params.isItemEditable, params.expansionTrigger]);
  const setExpandedItems = (event, value) => {
    if (params.expandedItems === undefined) {
      store.set('expansion', (0, _extends2.default)({}, store.state.expansion, {
        expandedItems: value
      }));
    }
    params.onExpandedItemsChange?.(event, value);
  };
  const resetItemExpansion = (0, _useStableCallback.useStableCallback)(() => {
    setExpandedItems(null, []);
  });
  const applyItemExpansion = (0, _useStableCallback.useStableCallback)(({
    itemId,
    event,
    shouldBeExpanded
  }) => {
    const oldExpanded = _useTreeViewExpansion.expansionSelectors.expandedItemsRaw(store.state);
    let newExpanded;
    if (shouldBeExpanded) {
      newExpanded = [itemId].concat(oldExpanded);
    } else {
      newExpanded = oldExpanded.filter(id => id !== itemId);
    }
    if (params.onItemExpansionToggle) {
      params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
    }
    setExpandedItems(event, newExpanded);
  });
  const setItemExpansion = (0, _useStableCallback.useStableCallback)(({
    itemId,
    event = null,
    shouldBeExpanded
  }) => {
    const isExpandedBefore = _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
    const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
    if (isExpandedBefore === cleanShouldBeExpanded) {
      return;
    }
    const eventParameters = {
      isExpansionPrevented: false,
      shouldBeExpanded: cleanShouldBeExpanded,
      event,
      itemId
    };
    (0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'beforeItemToggleExpansion', eventParameters);
    if (eventParameters.isExpansionPrevented) {
      return;
    }
    instance.applyItemExpansion({
      itemId,
      event,
      shouldBeExpanded: cleanShouldBeExpanded
    });
  });
  const isItemExpanded = (0, _useStableCallback.useStableCallback)(itemId => {
    return _useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, itemId);
  });
  const expandAllSiblings = (event, itemId) => {
    const itemMeta = _useTreeViewItems.itemsSelectors.itemMeta(store.state, itemId);
    if (itemMeta == null) {
      return;
    }
    const siblings = _useTreeViewItems.itemsSelectors.itemOrderedChildrenIds(store.state, itemMeta.parentId);
    const diff = siblings.filter(child => _useTreeViewExpansion.expansionSelectors.isItemExpandable(store.state, child) && !_useTreeViewExpansion.expansionSelectors.isItemExpanded(store.state, child));
    const newExpanded = _useTreeViewExpansion.expansionSelectors.expandedItemsRaw(store.state).concat(diff);
    if (diff.length > 0) {
      if (params.onItemExpansionToggle) {
        diff.forEach(newlyExpandedItemId => {
          params.onItemExpansionToggle(event, newlyExpandedItemId, true);
        });
      }
      setExpandedItems(event, newExpanded);
    }
  };

  /**
   * Update the controlled model when the `expandedItems` prop changes.
   */
  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
    const expandedItems = params.expandedItems;
    if (expandedItems !== undefined) {
      store.set('expansion', (0, _extends2.default)({}, store.state.expansion, {
        expandedItems
      }));
    }
  }, [store, params.expandedItems]);
  return {
    publicAPI: {
      setItemExpansion,
      isItemExpanded
    },
    instance: {
      setItemExpansion,
      applyItemExpansion,
      expandAllSiblings,
      resetItemExpansion
    }
  };
};
exports.useTreeViewExpansion = useTreeViewExpansion;
const DEFAULT_EXPANDED_ITEMS = [];
useTreeViewExpansion.applyDefaultValuesToParams = ({
  params
}) => (0, _extends2.default)({}, params, {
  defaultExpandedItems: params.defaultExpandedItems ?? DEFAULT_EXPANDED_ITEMS
});
useTreeViewExpansion.getInitialState = params => ({
  expansion: {
    expandedItems: params.expandedItems === undefined ? params.defaultExpandedItems : params.expandedItems,
    expansionTrigger: (0, _useTreeViewExpansion2.getExpansionTrigger)(params)
  }
});
useTreeViewExpansion.params = {
  expandedItems: true,
  defaultExpandedItems: true,
  onExpandedItemsChange: true,
  onItemExpansionToggle: true,
  expansionTrigger: true
};