33 lines
861 B
TypeScript
33 lines
861 B
TypeScript
|
import { TreeProps } from '@/components/dashboard/library/types';
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
type NodeProps<T> = {
|
||
|
|
item: TreeProps<T>['data'][number];
|
||
|
|
onExpand: () => void;
|
||
|
|
isExpanded?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
function Node<T>(props: NodeProps<T>): React.JSX.Element {
|
||
|
|
const hasChild = props.item.children;
|
||
|
|
const hasComponent = props.item.jsxElement ? true : false;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={props.item.children?.length ? props.onExpand : undefined}
|
||
|
|
draggable={props.item.draggable ?? true}
|
||
|
|
onDragStart={props.item.onDrag}
|
||
|
|
>
|
||
|
|
{hasComponent ? (
|
||
|
|
props.item.jsxElement
|
||
|
|
) : (
|
||
|
|
<p className="font-bold uppercase cursor-pointer">
|
||
|
|
<span className="pr-2">{hasChild ? (props.isExpanded ? '▾ ' : '▸ ') : ''}</span>
|
||
|
|
{props.item.name}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Node;
|