@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
105 lines (104 loc) • 5.32 kB
TypeScript
import { CheckedNodeStatus } from './get-all-checked-nodes/get-all-checked-nodes';
import type { TreeNodeData } from './Tree';
export type TreeExpandedState = Record<string, boolean>;
export declare function getTreeExpandedState(data: TreeNodeData[], expandedNodesValues: string[] | '*'): Record<string, boolean>;
export interface UseTreeInput {
/** Initial expanded state of all nodes, uncontrolled state */
initialExpandedState?: TreeExpandedState;
/** Expanded state of all nodes, controlled state */
expandedState?: TreeExpandedState;
/** Called when the tree expanded state changes */
onExpandedStateChange?: (expandedState: TreeExpandedState) => void;
/** Initial selected state of nodes */
initialSelectedState?: string[];
/** Selected state of all nodes, controlled state */
selectedState?: string[];
/** Called when the tree selected state changes */
onSelectedStateChange?: (selectedState: string[]) => void;
/** Initial checked state of nodes */
initialCheckedState?: string[];
/** Checked state of all nodes, controlled state */
checkedState?: string[];
/** Called when the tree checked state changes */
onCheckedStateChange?: (checkedState: string[]) => void;
/** Determines whether multiple node can be selected at a time */
multiple?: boolean;
/** Called with the node value when it is expanded */
onNodeExpand?: (value: string) => void;
/** Called with the node value when it is collapsed */
onNodeCollapse?: (value: string) => void;
/** Called when a node with `hasChildren: true` is expanded for the first time.
* The callback should update the tree data with loaded children.
*/
onLoadChildren?: (nodeValue: string) => Promise<void>;
/** When `true`, checking a parent does not affect children and vice versa.
* Each node's checked state is fully independent. @default false
*/
checkStrictly?: boolean;
}
export interface UseTreeReturnType {
/** When `true`, each node's checked state is independent (no parent-child cascading) */
checkStrictly: boolean;
/** Determines whether multiple node can be selected at a time */
multiple: boolean;
/** A record of `node.value` and boolean values that represent nodes expanded state */
expandedState: TreeExpandedState;
/** An array of selected nodes values */
selectedState: string[];
/** An array of checked nodes values */
checkedState: string[];
/** A value of the node that was last clicked
* Anchor node is used to determine range of selected nodes for multiple selection
*/
anchorNode: string | null;
/** Initializes tree state based on provided data, called automatically by the Tree component */
initialize: (data: TreeNodeData[]) => void;
/** Toggles expanded state of the node with provided value */
toggleExpanded: (value: string) => void;
/** Collapses node with provided value */
collapse: (value: string) => void;
/** Expands node with provided value */
expand: (value: string) => void;
/** Expands all nodes */
expandAllNodes: () => void;
/** Collapses all nodes */
collapseAllNodes: () => void;
/** Sets expanded state */
setExpandedState: (value: TreeExpandedState) => void;
/** Toggles selected state of the node with provided value */
toggleSelected: (value: string) => void;
/** Selects node with provided value */
select: (value: string) => void;
/** Deselects node with provided value */
deselect: (value: string) => void;
/** Clears selected state */
clearSelected: () => void;
/** Sets selected state */
setSelectedState: (value: string[]) => void;
/** Checks node with provided value */
checkNode: (value: string) => void;
/** Unchecks node with provided value */
uncheckNode: (value: string) => void;
/** Checks all nodes */
checkAllNodes: () => void;
/** Unchecks all nodes */
uncheckAllNodes: () => void;
/** Sets checked state */
setCheckedState: (value: string[]) => void;
/** Returns all checked nodes with status */
getCheckedNodes: () => CheckedNodeStatus[];
/** Returns `true` if node with provided value is checked */
isNodeChecked: (value: string) => boolean;
/** Returns `true` if node with provided value is indeterminate */
isNodeIndeterminate: (value: string) => boolean;
/** Returns `true` if the node's children are currently being loaded */
isNodeLoading: (value: string) => boolean;
/** Returns the error from the last failed load attempt for the given node, or `null` */
getNodeLoadError: (value: string) => Error | null;
/** Programmatically triggers loading of a node's children */
loadNode: (value: string) => Promise<void>;
/** Clears the loaded cache for a node, causing it to re-fetch on next expand */
invalidateNode: (value: string) => void;
}
export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, onLoadChildren, checkStrictly, }?: UseTreeInput): UseTreeReturnType;
export type TreeController = ReturnType<typeof useTree>;