File "tree.tsx"
Full Path: /home/markqprx/iniasli.pro/client/ui/tree/tree.tsx
File size: 1.73 KB
MIME-type: text/plain
Charset: utf-8
import React, {Key, useState} from 'react';
import {useControlledState} from '@react-stately/utils';
import {FocusScope} from '@react-aria/focus';
import {TreeContext, TreeContextValue} from './tree-context';
import {TreeItemRenderer} from './tree-item';
import {renderTree} from './render-tree';
export interface TreeNode {
id: number | string;
children: TreeNode[];
}
interface TreeProps<T extends TreeNode> {
children: TreeItemRenderer<T>;
nodes: T[];
selectedKeys?: Key[];
expandedKeys?: Key[];
defaultExpandedKeys?: Key[];
onExpandedKeysChange?: (value: Key[]) => void;
defaultSelectedKeys?: Key[];
onSelectedKeysChange?: (value: Key[]) => void;
}
export function Tree<T extends TreeNode>({
children,
nodes,
...props
}: TreeProps<T>) {
const [expandedKeys, setExpandedKeys] = useControlledState(
props.expandedKeys,
props.defaultSelectedKeys,
props.onExpandedKeysChange
);
const [selectedKeys, setSelectedKeys] = useControlledState(
props.selectedKeys,
props.defaultSelectedKeys,
props.onSelectedKeysChange
);
const [focusedNode, setFocusedNode] = useState<Key | undefined>();
const value: TreeContextValue = {
expandedKeys,
setExpandedKeys,
selectedKeys,
setSelectedKeys,
focusedNode,
setFocusedNode,
};
return (
<TreeContext.Provider value={value}>
<FocusScope>
<TreeRoot nodes={nodes} itemRenderer={children} />
</FocusScope>
</TreeContext.Provider>
);
}
interface TreeRootProps<T extends TreeNode> {
nodes: TreeNode[];
itemRenderer: TreeItemRenderer<T>;
}
function TreeRoot<T extends TreeNode>(props: TreeRootProps<T>) {
return (
<ul className="overflow-hidden text-sm" role="tree">
{renderTree(props)}
</ul>
);
}