@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 _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
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, _useEnhancedEffect.default)(() => {
    store.update(prevState => {
      const newExpansionTrigger = (0, _useTreeViewExpansion2.getExpansionTrigger)({
        isItemEditable: params.isItemEditable,
        expansionTrigger: params.expansionTrigger
      });
      if (prevState.expansion.expansionTrigger === newExpansionTrigger) {
        return prevState;
      }
      return (0, _extends2.default)({}, prevState, {
        expansion: (0, _extends2.default)({}, prevState.expansion, {
          expansionTrigger: newExpansionTrigger
        })
      });
    });
  }, [store, params.isItemEditable, params.expansionTrigger]);
  const setExpandedItems = (event, value) => {
    if (params.expandedItems === undefined) {
      store.update(prevState => (0, _extends2.default)({}, prevState, {
        expansion: (0, _extends2.default)({}, prevState.expansion, {
          expandedItems: value
        })
      }));
    }
    params.onExpandedItemsChange?.(event, value);
  };
  const applyItemExpansion = (0, _useEventCallback.default)(({
    itemId,
    event,
    shouldBeExpanded
  }) => {
    const oldExpanded = (0, _useTreeViewExpansion.selectorExpandedItems)(store.value);
    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, _useEventCallback.default)(({
    itemId,
    event = null,
    shouldBeExpanded
  }) => {
    const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, 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 expandAllSiblings = (event, itemId) => {
    const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
    if (itemMeta == null) {
      return;
    }
    const siblings = (0, _useTreeViewItems.selectorItemOrderedChildrenIds)(store.value, itemMeta.parentId);
    const diff = siblings.filter(child => (0, _useTreeViewExpansion.selectorIsItemExpandable)(store.value, child) && !(0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, child));
    const newExpanded = (0, _useTreeViewExpansion.selectorExpandedItems)(store.value).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, _useEnhancedEffect.default)(() => {
    const expandedItems = params.expandedItems;
    if (expandedItems !== undefined) {
      store.update(prevState => (0, _extends2.default)({}, prevState, {
        expansion: (0, _extends2.default)({}, prevState.expansion, {
          expandedItems
        })
      }));
    }
  }, [store, params.expandedItems]);
  return {
    publicAPI: {
      setItemExpansion
    },
    instance: {
      setItemExpansion,
      applyItemExpansion,
      expandAllSiblings
    }
  };
};
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
};