@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
195 lines (193 loc) • 7.81 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.useTreeViewJSXItems = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
var _TreeViewProvider = require("../../TreeViewProvider");
var _TreeViewChildrenItemProvider = require("../../TreeViewProvider/TreeViewChildrenItemProvider");
var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.utils");
var _TreeViewItemDepthContext = require("../../TreeViewItemDepthContext");
var _useTreeViewId = require("../../corePlugins/useTreeViewId/useTreeViewId.utils");
var _useTreeItemUtils = require("../../../hooks/useTreeItemUtils/useTreeItemUtils");
var _useSelector = require("../../hooks/useSelector");
var _useTreeViewId2 = require("../../corePlugins/useTreeViewId/useTreeViewId.selectors");
var _jsxRuntime = require("react/jsx-runtime");
const useTreeViewJSXItems = ({
instance,
store
}) => {
instance.preventItemUpdates();
const insertJSXItem = (0, _useEventCallback.default)(item => {
store.update(prevState => {
if (prevState.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'));
}
return (0, _extends2.default)({}, prevState, {
items: (0, _extends2.default)({}, prevState.items, {
itemMetaLookup: (0, _extends2.default)({}, prevState.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: (0, _extends2.default)({}, prevState.items.itemModelLookup, {
[item.id]: {
id: item.id,
label: item.label ?? ''
}
})
})
});
});
return () => {
store.update(prevState => {
const newItemMetaLookup = (0, _extends2.default)({}, prevState.items.itemMetaLookup);
const newItemModelLookup = (0, _extends2.default)({}, prevState.items.itemModelLookup);
delete newItemMetaLookup[item.id];
delete newItemModelLookup[item.id];
return (0, _extends2.default)({}, prevState, {
items: (0, _extends2.default)({}, prevState.items, {
itemMetaLookup: newItemMetaLookup,
itemModelLookup: newItemModelLookup
})
});
});
(0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'removeItem', {
id: item.id
});
};
});
const setJSXItemsOrderedChildrenIds = (parentId, orderedChildrenIds) => {
const parentIdWithDefault = parentId ?? _useTreeViewItems.TREE_VIEW_ROOT_PARENT_ID;
store.update(prevState => (0, _extends2.default)({}, prevState, {
items: (0, _extends2.default)({}, prevState.items, {
itemOrderedChildrenIdsLookup: (0, _extends2.default)({}, prevState.items.itemOrderedChildrenIdsLookup, {
[parentIdWithDefault]: orderedChildrenIds
}),
itemChildrenIndexesLookup: (0, _extends2.default)({}, prevState.items.itemChildrenIndexesLookup, {
[parentIdWithDefault]: (0, _useTreeViewItems.buildSiblingIndexes)(orderedChildrenIds)
})
})
}));
};
const mapFirstCharFromJSX = (0, _useEventCallback.default)((itemId, firstChar) => {
instance.updateFirstCharMap(firstCharMap => {
firstCharMap[itemId] = firstChar;
return firstCharMap;
});
return () => {
instance.updateFirstCharMap(firstCharMap => {
const newMap = (0, _extends2.default)({}, firstCharMap);
delete newMap[itemId];
return newMap;
});
};
});
return {
instance: {
insertJSXItem,
setJSXItemsOrderedChildrenIds,
mapFirstCharFromJSX
}
};
};
exports.useTreeViewJSXItems = useTreeViewJSXItems;
const useTreeViewJSXItemsItemPlugin = ({
props,
rootRef,
contentRef
}) => {
const {
instance,
store
} = (0, _TreeViewProvider.useTreeViewContext)();
const {
children,
disabled = false,
label,
itemId,
id
} = props;
const parentContext = React.useContext(_TreeViewChildrenItemProvider.TreeViewChildrenItemContext);
if (parentContext == null) {
throw new Error(['MUI X: Could not find the Tree View Children Item context.', 'It looks like you rendered your component outside of a SimpleTreeView parent component.', 'This can also happen if you are bundling multiple versions of the Tree View.'].join('\n'));
}
const {
registerChild,
unregisterChild,
parentId
} = parentContext;
const expandable = (0, _useTreeItemUtils.itemHasChildren)(children);
const pluginContentRef = React.useRef(null);
const handleContentRef = (0, _useForkRef.default)(pluginContentRef, contentRef);
const treeId = (0, _useSelector.useSelector)(store, _useTreeViewId2.selectorTreeViewId);
// Prevent any flashing
(0, _useEnhancedEffect.default)(() => {
const idAttribute = (0, _useTreeViewId.generateTreeItemIdAttribute)({
itemId,
treeId,
id
});
registerChild(idAttribute, itemId);
return () => {
unregisterChild(idAttribute);
unregisterChild(idAttribute);
};
}, [store, instance, registerChild, unregisterChild, itemId, id, treeId]);
(0, _useEnhancedEffect.default)(() => {
return instance.insertJSXItem({
id: itemId,
idAttribute: id,
parentId,
expandable,
disabled
});
}, [instance, parentId, itemId, expandable, disabled, id]);
React.useEffect(() => {
if (label) {
return instance.mapFirstCharFromJSX(itemId, (pluginContentRef.current?.textContent ?? '').substring(0, 1).toLowerCase());
}
return undefined;
}, [instance, itemId, label]);
return {
contentRef: handleContentRef,
rootRef
};
};
useTreeViewJSXItems.itemPlugin = useTreeViewJSXItemsItemPlugin;
useTreeViewJSXItems.wrapItem = ({
children,
itemId,
idAttribute
}) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const depthContext = React.useContext(_TreeViewItemDepthContext.TreeViewItemDepthContext);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
itemId: itemId,
idAttribute: idAttribute,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
value: depthContext + 1,
children: children
})
});
};
if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapItem.displayName = "useTreeViewJSXItems.wrapItem";
useTreeViewJSXItems.wrapRoot = ({
children
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewChildrenItemProvider.TreeViewChildrenItemProvider, {
itemId: null,
idAttribute: null,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewItemDepthContext.TreeViewItemDepthContext.Provider, {
value: 0,
children: children
})
});
if (process.env.NODE_ENV !== "production") useTreeViewJSXItems.wrapRoot.displayName = "useTreeViewJSXItems.wrapRoot";
useTreeViewJSXItems.params = {};