71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRef } from "react";
|
|
import type { UseFieldArrayReturn } from "react-hook-form";
|
|
import {
|
|
Tree,
|
|
type NodeModel,
|
|
type TreeMethods,
|
|
} from "@minoru/react-dnd-treeview";
|
|
import { Button } from "@common/components";
|
|
import type { SiteMapFormData } from "@/entities/menu";
|
|
import { type TreeMenu } from "@/entities/tree-menu";
|
|
import { MenuNode } from "./menu-node";
|
|
|
|
type MenuTreeProps = {
|
|
tree: NodeModel<TreeMenu>[];
|
|
fieldArray: UseFieldArrayReturn<SiteMapFormData>;
|
|
};
|
|
|
|
function MenuTree({ tree, fieldArray }: MenuTreeProps) {
|
|
const treeMethods = useRef<TreeMethods>(null);
|
|
|
|
return (
|
|
<>
|
|
<div className="max-h-[calc(100vh-33.5rem)] min-h-[40vh] overflow-auto">
|
|
<Tree
|
|
tree={tree}
|
|
rootId={0}
|
|
ref={treeMethods}
|
|
render={(node: NodeModel<TreeMenu>, props) => {
|
|
return <MenuNode node={node} fieldArray={fieldArray} {...props} />;
|
|
}}
|
|
onDrop={() => {}}
|
|
canDrag={() => false}
|
|
canDrop={() => false}
|
|
classes={{
|
|
container: "flex flex-col",
|
|
dropTarget: "!bg-[rgba(32,148,250,0.5)] rounded-sm",
|
|
placeholder: "relative",
|
|
}}
|
|
sort={false}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
color="lightGray"
|
|
className="flex-1 items-center px-0"
|
|
onClick={() => {
|
|
treeMethods.current?.openAll();
|
|
}}
|
|
>
|
|
<i className="diveicon di-arrows-angle-expand" />
|
|
전체펼침
|
|
</Button>
|
|
<Button
|
|
color="lightGray"
|
|
className="flex-1 items-center px-0"
|
|
onClick={() => {
|
|
treeMethods.current?.closeAll();
|
|
}}
|
|
>
|
|
<i className="diveicon di-arrows-angle-contract" />
|
|
전체접기
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export { MenuTree };
|