@mui/x-tree-view/esm/internals/plugins/jsxItems/TreeViewJSXItemsPlugin.js

The community edition of the MUI X Tree View components.

import _extends from "@babel/runtime/helpers/esm/extends";
import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../items/index.js";
import { jsxItemsitemWrapper, useJSXItemsItemPlugin } from "./itemPlugin.js";
export class TreeViewJSXItemsPlugin {
  constructor(store) {
    this.store = store;
    store.itemPluginManager.register(useJSXItemsItemPlugin, jsxItemsitemWrapper);
  }

  /**
   * Insert a new item in the state from a Tree Item component.
   * @param {TreeViewItemMeta} item The meta-information of the item to insert.
   * @returns {() => void} A function to remove the item from the state.
   */
  insertJSXItem = item => {
    if (this.store.state.itemMetaLookup[item.id] != null) {
      throw new Error(['MUI X: The Tree View component requires all items to have a unique `id` property.', 'Alternatively, you can use the `getItemId` prop to specify a custom id for each item.', `Two items were provided with the same id in the \`items\` prop: "${item.id}"`].join('\n'));
    }
    this.store.update({
      itemMetaLookup: _extends({}, this.store.state.itemMetaLookup, {
        [item.id]: item
      }),
      // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one.
      itemModelLookup: _extends({}, this.store.state.itemModelLookup, {
        [item.id]: {
          id: item.id,
          label: item.label ?? ''
        }
      })
    });
    return () => {
      const newItemMetaLookup = _extends({}, this.store.state.itemMetaLookup);
      const newItemModelLookup = _extends({}, this.store.state.itemModelLookup);
      delete newItemMetaLookup[item.id];
      delete newItemModelLookup[item.id];
      this.store.update({
        itemMetaLookup: newItemMetaLookup,
        itemModelLookup: newItemModelLookup
      });
    };
  };

  /**
   * Updates the `labelMap` to register the first character of the given item's label.
   * This map is used to navigate the tree using type-ahead search.
   * @param {TreeViewItemId} itemId The id of the item to map the label of.
   * @param {string} label The item's label.
   * @returns {() => void} A function to remove the item from the `labelMap`.
   */
  mapLabelFromJSX = (itemId, label) => {
    this.store.keyboardNavigation.updateLabelMap(labelMap => {
      labelMap[itemId] = label;
      return labelMap;
    });
    return () => {
      this.store.keyboardNavigation.updateLabelMap(labelMap => {
        const newMap = _extends({}, labelMap);
        delete newMap[itemId];
        return newMap;
      });
    };
  };

  /**
   * Store the ids of a given item's children in the state.
   * Those ids must be passed in the order they should be rendered.
   * @param {TreeViewItemId | null} parentId The id of the item to store the children of.
   * @param {TreeViewItemId[]} orderedChildrenIds The ids of the item's children.
   */
  setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
    const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
    this.store.update({
      itemOrderedChildrenIdsLookup: _extends({}, this.store.state.itemOrderedChildrenIdsLookup, {
        [parentIdWithDefault]: orderedChildrenIds
      }),
      itemChildrenIndexesLookup: _extends({}, this.store.state.itemChildrenIndexesLookup, {
        [parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
      })
    });
  };
}