import React, {
forwardRef,
MouseEventHandler,
ReactNode,
useContext,
} from 'react';
import {TreeContext} from './tree-context';
import clsx from 'clsx';
import {ArrowRightIcon} from '../../icons/material/ArrowRight';
interface TreeLabelProps {
level?: number;
node: any;
icon?: ReactNode;
label?: ReactNode;
className?: string;
}
export const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(
({icon, label, level = 0, node, className, ...domProps}, ref) => {
const {expandedKeys, setExpandedKeys, selectedKeys, setSelectedKeys} =
useContext(TreeContext);
const isExpanded = expandedKeys.includes(node.id);
const isSelected = selectedKeys.includes(node.id);
const handleExpandIconClick: MouseEventHandler = e => {
e.stopPropagation();
const index = expandedKeys.indexOf(node.id);
const newExpandedKeys = [...expandedKeys];
if (index > -1) {
newExpandedKeys.splice(index, 1);
} else {
newExpandedKeys.push(node.id);
}
setExpandedKeys(newExpandedKeys);
};
return (
<div
{...domProps}
ref={ref}
onClick={e => {
e.stopPropagation();
setSelectedKeys([node.id]);
}}
className={clsx(
'flex flex-nowrap whitespace-nowrap items-center gap-4 py-6 rounded header cursor-pointer overflow-hidden text-ellipsis tree-label',
className,
isSelected && 'bg-primary/selected text-primary font-bold',
!isSelected && 'hover:bg-hover'
)}
>
{level > 0 && (
<div className="flex">
{Array.from({length: level}).map((_, i) => {
return <div key={i} className="w-24 h-24" />;
})}
</div>
)}
<div onClick={handleExpandIconClick}>
<ArrowRightIcon
className={clsx(
'icon-sm cursor-default transition-transform',
isExpanded && 'rotate-90'
)}
/>
</div>
{icon}
<div className="overflow-hidden text-ellipsis pr-6">{label}</div>
</div>
);
}
);
TreeLabel.displayName = 'TreeLabel';