@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
226 lines (224 loc) • 9.09 kB
JavaScript
;
'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.useTreeViewItems = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
var _useTreeViewItems = require("./useTreeViewItems.utils");
var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
var _useTreeViewItems2 = require("./useTreeViewItems.selectors");
var _useTreeViewId = require("../../corePlugins/useTreeViewId");
var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
var _jsxRuntime = require("react/jsx-runtime");
const useTreeViewItems = ({
instance,
params,
store
}) => {
const itemsConfig = React.useMemo(() => ({
isItemDisabled: params.isItemDisabled,
getItemLabel: params.getItemLabel,
getItemChildren: params.getItemChildren,
getItemId: params.getItemId
}), [params.isItemDisabled, params.getItemLabel, params.getItemChildren, params.getItemId]);
const getItem = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId), [store]);
const getParentId = React.useCallback(itemId => {
const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
return itemMeta?.parentId || null;
}, [store]);
const setIsItemDisabled = (0, _useEventCallback.useEventCallback)(({
itemId,
shouldBeDisabled
}) => {
if (!store.state.items.itemMetaLookup[itemId]) {
return;
}
const itemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
itemMetaLookup[itemId] = (0, _extends2.default)({}, itemMetaLookup[itemId], {
disabled: shouldBeDisabled ?? !itemMetaLookup[itemId].disabled
});
store.set('items', (0, _extends2.default)({}, store.state.items, {
itemMetaLookup
}));
});
const getItemTree = React.useCallback(() => {
const getItemFromItemId = itemId => {
const item = _useTreeViewItems2.itemsSelectors.itemModel(store.state, itemId);
const itemToMutate = (0, _extends2.default)({}, item);
const newChildren = _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, itemId);
if (newChildren.length > 0) {
itemToMutate.children = newChildren.map(getItemFromItemId);
} else {
delete itemToMutate.children;
}
return itemToMutate;
};
return _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, null).map(getItemFromItemId);
}, [store]);
const getItemOrderedChildrenIds = React.useCallback(itemId => _useTreeViewItems2.itemsSelectors.itemOrderedChildrenIds(store.state, itemId), [store]);
const getItemDOMElement = itemId => {
const itemMeta = _useTreeViewItems2.itemsSelectors.itemMeta(store.state, itemId);
if (itemMeta == null) {
return null;
}
const idAttribute = (0, _useTreeViewId2.generateTreeItemIdAttribute)({
treeId: _useTreeViewId.idSelectors.treeId(store.state),
itemId,
id: itemMeta.idAttribute
});
return document.getElementById(idAttribute);
};
const areItemUpdatesPreventedRef = React.useRef(false);
const preventItemUpdates = React.useCallback(() => {
areItemUpdatesPreventedRef.current = true;
}, []);
const areItemUpdatesPrevented = React.useCallback(() => areItemUpdatesPreventedRef.current, []);
const setItemChildren = ({
items,
parentId,
getChildrenCount
}) => {
const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
const parentDepth = parentId == null ? -1 : _useTreeViewItems2.itemsSelectors.itemDepth(store.state, parentId);
const {
metaLookup,
modelLookup,
orderedChildrenIds,
childrenIndexes
} = (0, _useTreeViewItems.buildItemsLookups)({
config: itemsConfig,
items,
parentId,
depth: parentDepth + 1,
isItemExpandable: getChildrenCount ? item => getChildrenCount(item) > 0 : () => false,
otherItemsMetaLookup: _useTreeViewItems2.itemsSelectors.itemMetaLookup(store.state)
});
const lookups = {
itemModelLookup: (0, _extends2.default)({}, store.state.items.itemModelLookup, modelLookup),
itemMetaLookup: (0, _extends2.default)({}, store.state.items.itemMetaLookup, metaLookup),
itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup, {
[parentIdWithDefault]: orderedChildrenIds
}),
itemChildrenIndexesLookup: (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup, {
[parentIdWithDefault]: childrenIndexes
})
};
store.set('items', (0, _extends2.default)({}, store.state.items, lookups));
};
const removeChildren = (0, _useEventCallback.useEventCallback)(parentId => {
const newMetaMap = Object.keys(store.state.items.itemMetaLookup).reduce((acc, key) => {
const item = store.state.items.itemMetaLookup[key];
if (item.parentId === parentId) {
return acc;
}
return (0, _extends2.default)({}, acc, {
[item.id]: item
});
}, {});
const newItemOrderedChildrenIdsLookup = (0, _extends2.default)({}, store.state.items.itemOrderedChildrenIdsLookup);
const newItemChildrenIndexesLookup = (0, _extends2.default)({}, store.state.items.itemChildrenIndexesLookup);
const cleanId = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
delete newItemChildrenIndexesLookup[cleanId];
delete newItemOrderedChildrenIdsLookup[cleanId];
store.set('items', (0, _extends2.default)({}, store.state.items, {
itemMetaLookup: newMetaMap,
itemOrderedChildrenIdsLookup: newItemOrderedChildrenIdsLookup,
itemChildrenIndexesLookup: newItemChildrenIndexesLookup
}));
});
const addExpandableItems = (0, _useEventCallback.useEventCallback)(items => {
const newItemMetaLookup = (0, _extends2.default)({}, store.state.items.itemMetaLookup);
for (const itemId of items) {
newItemMetaLookup[itemId] = (0, _extends2.default)({}, newItemMetaLookup[itemId], {
expandable: true
});
}
store.set('items', (0, _extends2.default)({}, store.state.items, {
itemMetaLookup: newItemMetaLookup
}));
});
React.useEffect(() => {
if (instance.areItemUpdatesPrevented()) {
return;
}
const newState = (0, _useTreeViewItems.buildItemsState)({
disabledItemsFocusable: params.disabledItemsFocusable,
items: params.items,
config: itemsConfig
});
store.set('items', (0, _extends2.default)({}, store.state.items, newState));
}, [instance, store, params.items, params.disabledItemsFocusable, itemsConfig]);
// Wrap `props.onItemClick` with `useEventCallback` to prevent unneeded context updates.
const handleItemClick = (0, _useEventCallback.useEventCallback)((event, itemId) => {
if (params.onItemClick) {
params.onItemClick(event, itemId);
}
});
return {
getRootProps: () => ({
style: {
'--TreeView-itemChildrenIndentation': typeof params.itemChildrenIndentation === 'number' ? `${params.itemChildrenIndentation}px` : params.itemChildrenIndentation
}
}),
publicAPI: {
getItem,
getItemDOMElement,
getItemTree,
getItemOrderedChildrenIds,
setIsItemDisabled,
getParentId
},
instance: {
getItemDOMElement,
preventItemUpdates,
areItemUpdatesPrevented,
setItemChildren,
removeChildren,
addExpandableItems,
handleItemClick
}
};
};
exports.useTreeViewItems = useTreeViewItems;
useTreeViewItems.getInitialState = params => ({
items: (0, _useTreeViewItems.buildItemsState)({
items: params.items,
disabledItemsFocusable: params.disabledItemsFocusable,
config: {
isItemDisabled: params.isItemDisabled,
getItemId: params.getItemId,
getItemLabel: params.getItemLabel,
getItemChildren: params.getItemChildren
}
})
});
useTreeViewItems.applyDefaultValuesToParams = ({
params
}) => (0, _extends2.default)({}, params, {
disabledItemsFocusable: params.disabledItemsFocusable ?? false,
itemChildrenIndentation: params.itemChildrenIndentation ?? '12px'
});
useTreeViewItems.wrapRoot = ({
children
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
value: _useTreeViewItems2.itemsSelectors.itemDepth,
children: children
});
};
if (process.env.NODE_ENV !== "production") useTreeViewItems.wrapRoot.displayName = "useTreeViewItems.wrapRoot";
useTreeViewItems.params = {
disabledItemsFocusable: true,
items: true,
isItemDisabled: true,
getItemLabel: true,
getItemChildren: true,
getItemId: true,
onItemClick: true,
itemChildrenIndentation: true
};