34 lines
884 B
TypeScript
34 lines
884 B
TypeScript
|
import Node from '@/components/dashboard/library/Node';
|
||
|
|
import { TreeProps } from '@/components/dashboard/library/types';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
type BranchProps<T> = {
|
||
|
|
item: TreeProps<T>['data'][number];
|
||
|
|
level: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
function Branch<T>({ item, level }: BranchProps<T>): React.JSX.Element {
|
||
|
|
const [expanded, setExpanded] = React.useState(item.initiallyExpanded ?? false);
|
||
|
|
const hasChild = item?.children?.length;
|
||
|
|
|
||
|
|
const renderSubBranches = () => {
|
||
|
|
if (hasChild) {
|
||
|
|
const newLevel = level + 1;
|
||
|
|
return item?.children?.map((el) => <Branch key={el.id} item={el} level={newLevel} />);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const onExpand = () => {
|
||
|
|
setExpanded((prev) => !prev);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pt-2">
|
||
|
|
<Node item={item} onExpand={onExpand} isExpanded={expanded} />
|
||
|
|
{expanded && renderSubBranches()}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Branch;
|