@mui/x-tree-view
Version:
The community edition of the MUI X Tree View components.
103 lines (102 loc) • 3.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSelectionItemPlugin = void 0;
var _store = require("@mui/x-internals/store");
var _TreeViewProvider = require("../../TreeViewProvider");
var _selectors = require("../items/selectors");
var _selectors2 = require("./selectors");
const selectorCheckboxSelectionStatus = (0, _store.createSelector)((state, itemId) => {
if (_selectors2.selectionSelectors.isItemSelected(state, itemId)) {
return 'checked';
}
let hasSelectedDescendant = false;
let hasUnSelectedDescendant = false;
const traverseDescendants = itemToTraverseId => {
if (itemToTraverseId !== itemId) {
if (_selectors2.selectionSelectors.isItemSelected(state, itemToTraverseId)) {
hasSelectedDescendant = true;
} else {
hasUnSelectedDescendant = true;
}
}
_selectors.itemsSelectors.itemOrderedChildrenIds(state, itemToTraverseId).forEach(traverseDescendants);
};
traverseDescendants(itemId);
const shouldSelectBasedOnDescendants = _selectors2.selectionSelectors.propagationRules(state).parents;
if (shouldSelectBasedOnDescendants) {
if (hasSelectedDescendant && hasUnSelectedDescendant) {
return 'indeterminate';
}
if (hasSelectedDescendant && !hasUnSelectedDescendant) {
return 'checked';
}
return 'empty';
}
if (hasSelectedDescendant) {
return 'indeterminate';
}
return 'empty';
});
const useSelectionItemPlugin = ({
props
}) => {
const {
itemId
} = props;
const {
store
} = (0, _TreeViewProvider.useTreeViewContext)();
const isCheckboxSelectionEnabled = (0, _store.useStore)(store, _selectors2.selectionSelectors.isCheckboxSelectionEnabled);
const isFeatureEnabledForItem = (0, _store.useStore)(store, _selectors2.selectionSelectors.isFeatureEnabledForItem, itemId);
const canItemBeSelected = (0, _store.useStore)(store, _selectors2.selectionSelectors.canItemBeSelected, itemId);
const selectionStatus = (0, _store.useStore)(store, selectorCheckboxSelectionStatus, itemId);
return {
propsEnhancers: {
root: () => {
// https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
let ariaChecked;
if (selectionStatus === 'checked') {
// - each selected node has aria-checked set to true.
ariaChecked = true;
} else if (selectionStatus === 'indeterminate') {
ariaChecked = 'mixed';
} else if (!canItemBeSelected) {
// - if the tree contains nodes that are not selectable, aria-checked is not present on those nodes.
ariaChecked = undefined;
} else {
// - all nodes that are selectable but not selected have aria-checked set to false.
ariaChecked = false;
}
return {
'aria-checked': ariaChecked
};
},
checkbox: ({
externalEventHandlers,
interactions
}) => {
const handleChange = event => {
externalEventHandlers.onChange?.(event);
if (event.defaultMuiPrevented) {
return;
}
if (!_selectors2.selectionSelectors.canItemBeSelected(store.state, itemId)) {
return;
}
interactions.handleCheckboxSelection(event);
};
return {
tabIndex: -1,
onChange: handleChange,
visible: isCheckboxSelectionEnabled && isFeatureEnabledForItem,
disabled: !canItemBeSelected,
checked: selectionStatus === 'checked',
indeterminate: selectionStatus === 'indeterminate'
};
}
}
};
};
exports.useSelectionItemPlugin = useSelectionItemPlugin;