File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import {useState} from "react";
import type {MenuTreeItem} from "../type/authorRoleMenu.types.ts";
type TreeItemProps = {
node: MenuTreeItem;
isChecked: (menuNo: MenuTreeItem["menuNo"]) => boolean;
onCheck: (menuNo: MenuTreeItem["menuNo"], checked: boolean) => void;
};
export const AuthorRoleMenuTreeItem = ({
node,
isChecked,
onCheck,
}: TreeItemProps) => {
const [open, setOpen] = useState(true);
const hasChildren =
node.children.length > 0;
return (
<div className={`tree-node ${hasChildren ? 'folder' : 'file'}`}>
<label className={"tree-label"}>
{hasChildren && (
<button
type={"button"}
onClick={() => setOpen(prev => !prev)}
>
{open ? "-" : "+"}
</button>
)}
<input
type={"checkbox"}
checked={isChecked(node.menuNo)}
onChange={(event) => onCheck(node.menuNo, event.target.checked)}
/>
<span>
{node.menuNm}
</span>
</label>
{open && hasChildren && (
<div className={"tree-children"}>
{node.children.map((child) => (
<AuthorRoleMenuTreeItem
key={child.menuNo}
node={child}
isChecked={isChecked}
onCheck={onCheck}
/>
))}
</div>
)}
</div>
);
};