34 lines
922 B
TypeScript
34 lines
922 B
TypeScript
"use client";
|
|
import classnames from "classnames";
|
|
import { DndContext } from "@dnd-kit/core";
|
|
import { Droppable } from "./Droppable";
|
|
|
|
export default function DraggablePanel(props: DraggablePanelType) {
|
|
const { draggable, wdith = "full", height = "full", children } = props;
|
|
|
|
const draggablePanelClass = classnames(
|
|
`relative h-${height} w-${wdith}`,
|
|
{
|
|
"h-full": height === "full" || height === "100%",
|
|
"w-full": wdith === "full" || wdith === "100%",
|
|
"base-200": draggable, // 当 active 为 true 时添加
|
|
"base-100": !draggable, // 当 disabled 为 true 时添加
|
|
},
|
|
);
|
|
return (
|
|
<DndContext >
|
|
<Droppable>
|
|
<div className={draggablePanelClass}>{children}</div>
|
|
</Droppable>
|
|
</DndContext>
|
|
);
|
|
}
|
|
|
|
export type DraggablePanelType = {
|
|
draggable: boolean;
|
|
wdith?: number | string;
|
|
height?: number | string;
|
|
children: any;
|
|
// grid: boolean;
|
|
};
|