ERP-node/frontend/lib/registry/components/split-panel-layout/index.ts

71 lines
2.2 KiB
TypeScript

"use client";
import React from "react";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
import { ComponentCategory } from "@/types/component";
import { SplitPanelLayoutWrapper } from "./SplitPanelLayoutComponent";
import { SplitPanelLayoutConfigPanel } from "./SplitPanelLayoutConfigPanel";
import { SplitPanelLayoutConfig } from "./types";
/**
* SplitPanelLayout 컴포넌트 정의
* 마스터-디테일 패턴의 좌우 분할 레이아웃
*/
export const SplitPanelLayoutDefinition = createComponentDefinition({
id: "split-panel-layout",
name: "분할 패널",
nameEng: "SplitPanelLayout Component",
description: "마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트",
category: ComponentCategory.DISPLAY,
webType: "text",
component: SplitPanelLayoutWrapper,
defaultConfig: {
leftPanel: {
title: "마스터",
showSearch: true,
showAdd: false,
},
rightPanel: {
title: "디테일",
showSearch: true,
showAdd: false,
relation: {
type: "detail",
foreignKey: "parent_id",
},
},
splitRatio: 30,
resizable: true,
minLeftWidth: 200,
minRightWidth: 300,
autoLoad: true,
syncSelection: true,
} as SplitPanelLayoutConfig,
defaultSize: { width: 800, height: 600 },
configPanel: SplitPanelLayoutConfigPanel,
icon: "PanelLeftRight",
tags: ["분할", "마스터", "디테일", "레이아웃"],
version: "1.0.0",
author: "개발팀",
documentation: "https://docs.example.com/components/split-panel-layout",
});
// 컴포넌트는 SplitPanelLayoutRenderer에서 자동 등록됩니다
// 타입 내보내기
export type { SplitPanelLayoutConfig } from "./types";
// 컴포넌트 내보내기
export { SplitPanelLayoutComponent } from "./SplitPanelLayoutComponent";
export { SplitPanelLayoutRenderer } from "./SplitPanelLayoutRenderer";
// Resize Context 내보내기 (버튼 등 외부 컴포넌트에서 분할 패널 드래그 리사이즈 상태 활용)
export {
SplitPanelProvider,
useSplitPanel,
useAdjustedPosition,
useSplitPanelAwarePosition,
useAdjustedComponentPosition,
} from "./SplitPanelContext";
export type { SplitPanelResizeContextValue, SplitPanelInfo } from "./SplitPanelContext";