@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
144 lines (140 loc) • 4.7 kB
JavaScript
'use client';
;
var react = require('react');
var getAllCheckedNodes = require('./get-all-checked-nodes/get-all-checked-nodes.cjs');
var getChildrenNodesValues = require('./get-children-nodes-values/get-children-nodes-values.cjs');
var isNodeChecked = require('./is-node-checked/is-node-checked.cjs');
var isNodeIndeterminate = require('./is-node-indeterminate/is-node-indeterminate.cjs');
function getInitialState(initialState, data, value, acc = {}) {
data.forEach((node) => {
acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;
if (Array.isArray(node.children)) {
getInitialState(initialState, node.children, value, acc);
}
});
return acc;
}
function useTree({
initialSelectedState = [],
initialExpandedState = {},
multiple = false
} = {}) {
const [data, setData] = react.useState([]);
const [expandedState, setExpandedState] = react.useState(initialExpandedState);
const [selectedState, setSelectedState] = react.useState(initialSelectedState);
const [checkedState, setCheckedState] = react.useState([]);
const [anchorNode, setAnchorNode] = react.useState(null);
const [hoveredNode, setHoveredNode] = react.useState(null);
const initialize = react.useCallback(
(_data) => {
setExpandedState((current) => getInitialState(current, _data, selectedState));
setData(_data);
},
[selectedState]
);
const toggleExpanded = react.useCallback((value) => {
setExpandedState((current) => ({ ...current, [value]: !current[value] }));
}, []);
const collapse = react.useCallback((value) => {
setExpandedState((current) => ({ ...current, [value]: false }));
}, []);
const expand = react.useCallback((value) => {
setExpandedState((current) => ({ ...current, [value]: true }));
}, []);
const expandAllNodes = react.useCallback(() => {
setExpandedState((current) => {
const next = { ...current };
Object.keys(next).forEach((key) => {
next[key] = true;
});
return next;
});
}, []);
const collapseAllNodes = react.useCallback(() => {
setExpandedState((current) => {
const next = { ...current };
Object.keys(next).forEach((key) => {
next[key] = false;
});
return next;
});
}, []);
const toggleSelected = react.useCallback(
(value) => setSelectedState((current) => {
if (!multiple) {
if (current.includes(value)) {
setAnchorNode(null);
return [];
}
setAnchorNode(value);
return [value];
}
if (current.includes(value)) {
setAnchorNode(null);
return current.filter((item) => item !== value);
}
setAnchorNode(value);
return [...current, value];
}),
[]
);
const select = react.useCallback((value) => {
setAnchorNode(value);
setSelectedState(
(current) => multiple ? current.includes(value) ? current : [...current, value] : [value]
);
}, []);
const deselect = react.useCallback((value) => {
anchorNode === value && setAnchorNode(null);
setSelectedState((current) => current.filter((item) => item !== value));
}, []);
const clearSelected = react.useCallback(() => {
setSelectedState([]);
setAnchorNode(null);
}, []);
const checkNode = react.useCallback(
(value) => {
const checkedNodes = getChildrenNodesValues.getChildrenNodesValues(value, data);
setCheckedState((current) => Array.from(/* @__PURE__ */ new Set([...current, ...checkedNodes])));
},
[data]
);
const uncheckNode = react.useCallback(
(value) => {
const checkedNodes = getChildrenNodesValues.getChildrenNodesValues(value, data);
setCheckedState((current) => current.filter((item) => !checkedNodes.includes(item)));
},
[data]
);
const getCheckedNodes = () => getAllCheckedNodes.getAllCheckedNodes(data, checkedState).result;
const isNodeChecked$1 = (value) => isNodeChecked.memoizedIsNodeChecked(value, data, checkedState);
const isNodeIndeterminate$1 = (value) => isNodeIndeterminate.memoizedIsNodeIndeterminate(value, data, checkedState);
return {
multiple,
expandedState,
selectedState,
checkedState,
anchorNode,
initialize,
toggleExpanded,
collapse,
expand,
expandAllNodes,
collapseAllNodes,
setExpandedState,
checkNode,
uncheckNode,
toggleSelected,
select,
deselect,
clearSelected,
setSelectedState,
hoveredNode,
setHoveredNode,
getCheckedNodes,
isNodeChecked: isNodeChecked$1,
isNodeIndeterminate: isNodeIndeterminate$1
};
}
exports.useTree = useTree;
//# sourceMappingURL=use-tree.cjs.map