ERP-node/frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx

54 lines
1.9 KiB
TypeScript

"use client";
import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { FlowWidgetDefinition } from "./index";
import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
import { createComponentDefinition } from "../../utils/createComponentDefinition";
/**
* FlowWidget 렌더러
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
*/
export class FlowWidgetRenderer extends AutoRegisteringComponentRenderer {
// 먼저 Definition에 컴포넌트 설정
static componentDefinition = (() => {
// FlowWidgetRenderer를 컴포넌트로 설정
const definition = { ...FlowWidgetDefinition, component: FlowWidgetRenderer };
// createComponentDefinition으로 검증 및 처리
return createComponentDefinition(definition as any);
})();
render(): React.ReactElement {
console.log("🎨🎨🎨 FlowWidgetRenderer - render 호출 시작 🎨🎨🎨");
console.log("🎨 FlowWidgetRenderer - render 호출:", {
componentId: this.props.component.id,
hasOnFlowSelectedDataChange: !!this.props.onFlowSelectedDataChange,
onFlowSelectedDataChangeType: typeof this.props.onFlowSelectedDataChange,
allPropsKeys: Object.keys(this.props),
allPropsValues: this.props,
});
console.log("🎨🎨🎨 FlowWidget에 전달할 prop:", {
hasComponent: !!this.props.component,
hasOnSelectedDataChange: !!this.props.onFlowSelectedDataChange,
});
return (
<FlowWidget
component={this.props.component as any}
onSelectedDataChange={this.props.onFlowSelectedDataChange}
/>
);
}
}
// 자동 등록 실행
FlowWidgetRenderer.registerSelf();
// Hot Reload 지원 (개발 모드)
if (process.env.NODE_ENV === "development") {
FlowWidgetRenderer.enableHotReload();
}
console.log("✅ FlowWidget 컴포넌트 등록 완료");