@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
104 lines (103 loc) • 4.03 kB
JavaScript
'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import { useStableCallback } from '@base-ui/utils/useStableCallback';
import { TreeViewChildrenItemProvider } from "../../TreeViewProvider/TreeViewChildrenItemProvider.js";
import { buildSiblingIndexes, TREE_VIEW_ROOT_PARENT_ID } from "../useTreeViewItems/useTreeViewItems.utils.js";
import { TreeViewItemDepthContext } from "../../TreeViewItemDepthContext/index.js";
import { useTreeViewJSXItemsItemPlugin } from "./itemPlugin.js";
import { jsx as _jsx } from "react/jsx-runtime";
export const useTreeViewJSXItems = ({
instance,
store
}) => {
instance.preventItemUpdates();
const insertJSXItem = useStableCallback(item => {
if (store.state.items.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'));
}
store.set('items', _extends({}, store.state.items, {
itemMetaLookup: _extends({}, store.state.items.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({}, store.state.items.itemModelLookup, {
[item.id]: {
id: item.id,
label: item.label ?? ''
}
})
}));
return () => {
const newItemMetaLookup = _extends({}, store.state.items.itemMetaLookup);
const newItemModelLookup = _extends({}, store.state.items.itemModelLookup);
delete newItemMetaLookup[item.id];
delete newItemModelLookup[item.id];
store.set('items', _extends({}, store.state.items, {
itemMetaLookup: newItemMetaLookup,
itemModelLookup: newItemModelLookup
}));
};
});
const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
const parentIdWithDefault = parentId ?? TREE_VIEW_ROOT_PARENT_ID;
store.set('items', _extends({}, store.state.items, {
itemOrderedChildrenIdsLookup: _extends({}, store.state.items.itemOrderedChildrenIdsLookup, {
[parentIdWithDefault]: orderedChildrenIds
}),
itemChildrenIndexesLookup: _extends({}, store.state.items.itemChildrenIndexesLookup, {
[parentIdWithDefault]: buildSiblingIndexes(orderedChildrenIds)
})
}));
};
const mapLabelFromJSX = useStableCallback((itemId, label) => {
instance.updateLabelMap(labelMap => {
labelMap[itemId] = label;
return labelMap;
});
return () => {
instance.updateLabelMap(labelMap => {
const newMap = _extends({}, labelMap);
delete newMap[itemId];
return newMap;
});
};
});
return {
instance: {
insertJSXItem,
setJSXItemsOrderedChildrenIds,
mapLabelFromJSX
}
};
};
useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
useTreeViewJSXItems.wrapItem = ({
children,
itemId,
idAttribute
}) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const depthContext = React.useContext(TreeViewItemDepthContext);
return /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
itemId: itemId,
idAttribute: idAttribute,
children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
value: depthContext + 1,
children: children
})
});
};
if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapItem.displayName = "useTreeViewJSXItems.wrapItem";
useTreeViewJSXItems.wrapRoot = ({
children
}) => /*#__PURE__*/_jsx(TreeViewChildrenItemProvider, {
itemId: null,
idAttribute: null,
children: /*#__PURE__*/_jsx(TreeViewItemDepthContext.Provider, {
value: 0,
children: children
})
});
if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapRoot.displayName = "useTreeViewJSXItems.wrapRoot";
useTreeViewJSXItems.params = {};