ERP-node/frontend/lib/registry/layouts/accordion/index.ts

64 lines
1.7 KiB
TypeScript

"use client";
import { createLayoutDefinition } from "../../utils/createLayoutDefinition";
import { AccordionLayout } from "./AccordionLayout";
import { AccordionLayoutRenderer } from "./AccordionLayoutRenderer";
import { LayoutRendererProps } from "../BaseLayoutRenderer";
import React from "react";
/**
* 아코디언 레이아웃 래퍼 컴포넌트 (DynamicLayoutRenderer용)
*/
const AccordionLayoutWrapper: React.FC<LayoutRendererProps> = (props) => {
const renderer = new AccordionLayoutRenderer(props);
return renderer.render();
};
/**
* accordion 레이아웃 정의
*/
export const AccordionLayoutDefinition = createLayoutDefinition({
id: "accordion",
name: "아코디언 레이아웃",
nameEng: "Accordion Layout",
description: "접을 수 있는 아코디언 레이아웃입니다.",
category: "navigation",
icon: "accordion",
component: AccordionLayoutWrapper,
defaultConfig: {
accordion: {
multiple: false,
defaultExpanded: ["zone1"],
collapsible: true,
},
},
defaultZones: [
{
id: "zone1",
name: "존 1",
position: {},
size: { width: "100%", height: "100%" },
},
{
id: "zone2",
name: "존 2",
position: {},
size: { width: "100%", height: "100%" },
},
{
id: "zone3",
name: "존 3",
position: {},
size: { width: "100%", height: "100%" },
},
],
tags: ["accordion", "navigation", "layout"],
version: "1.0.0",
author: "Developer",
documentation: "accordion 레이아웃입니다.",
});
// 자동 등록을 위한 export
export { AccordionLayout } from "./AccordionLayout";
export { AccordionLayoutRenderer } from "./AccordionLayoutRenderer";