@fluentui/react-northstar
Version:
A themable React component library.
49 lines (48 loc) • 2.49 kB
TypeScript
import * as React from 'react';
import { ObjectShorthandCollection } from '../../../types';
import { TreeItemProps } from '../TreeItem';
import { FlatTreeItem, FlatTree } from './flattenTree';
export declare type GetItemById = (id: string) => FlatTreeItem;
export interface UseTreeOptions {
/** Shorthand array of props for Tree. */
items?: ObjectShorthandCollection<TreeItemProps>;
/** Ids of expanded items. */
activeItemIds?: string[];
/** Initial activeItemIds value. */
defaultActiveItemIds?: string[];
/** Only allow one subtree to be expanded at a time. */
exclusive?: boolean;
/** Ids of selected leaf items. */
selectedItemIds?: string[];
/** Initial selectedItemIds value. */
defaultSelectedItemIds?: string[];
}
export interface UseTreeResult {
/** An object with key being id of each tree item, and value being information of each tree item */
flatTree: FlatTree;
/** Access information of a tree item */
getItemById: GetItemById;
/** Ids of expanded items. */
activeItemIds: string[];
/** Ids of visible items */
visibleItemIds: string[];
/** register ref to a tree item, should be used in callback ref on tree item */
registerItemRef: (id: string, node: HTMLElement) => void;
/** get ref to a tree item by its id */
getItemRef: (id: string) => HTMLElement;
/** update the state of tree when a tree item is expanded/collapsed */
toggleItemActive: (e: React.SyntheticEvent, idToToggle: string) => void;
/** set focus on a tree item by its id. Useful for keyboard navigation */
focusItemById: (id: string) => void;
/** update the state of tree when it is needed to expand all siblings of a tree item, for example on '*' keydown */
expandSiblings: (e: React.KeyboardEvent, focusedItemId: string) => void;
/** update the state of tree when a tree item is selected/unselected */
toggleItemSelect: (e: React.SyntheticEvent, idToToggle: string) => void;
/**
* When a-z/A-Z key is pressed on a tree item, move focus to the next visible tree node with content that starts with the typed char.
* Search wraps to first matching node if a matching is not found among the nodes that follow the focused node.
* Focus stays when no matching is found among all visible nodes.
*/
getToFocusIDByFirstCharacter: (e: React.KeyboardEvent, idToToggle: string) => string;
}
export declare function useTree(options: UseTreeOptions): UseTreeResult;