504 lines
24 KiB
TypeScript
504 lines
24 KiB
TypeScript
/**
|
|
* 컴포넌트 ID로 해당 컴포넌트의 ConfigPanel을 동적으로 로드하는 유틸리티
|
|
*/
|
|
|
|
import React from "react";
|
|
import type { ConfigPanelContext } from "@/lib/registry/components/common/ConfigPanelTypes";
|
|
|
|
// 컴포넌트별 ConfigPanel 동적 import 맵
|
|
const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
|
|
// ========== V2 컴포넌트 ==========
|
|
"v2-input": () => import("@/components/v2/config-panels/V2InputConfigPanel"),
|
|
"v2-select": () => import("@/components/v2/config-panels/V2SelectConfigPanel"),
|
|
"v2-date": () => import("@/components/v2/config-panels/V2DateConfigPanel"),
|
|
"v2-list": () => import("@/components/v2/config-panels/V2ListConfigPanel"),
|
|
"v2-media": () => import("@/components/v2/config-panels/V2MediaConfigPanel"),
|
|
"v2-biz": () => import("@/components/v2/config-panels/V2BizConfigPanel"),
|
|
"v2-group": () => import("@/components/v2/config-panels/V2GroupConfigPanel"),
|
|
"v2-hierarchy": () => import("@/components/v2/config-panels/V2HierarchyConfigPanel"),
|
|
"v2-layout": () => import("@/components/v2/config-panels/V2LayoutConfigPanel"),
|
|
"v2-repeater": () => import("@/components/v2/config-panels/V2RepeaterConfigPanel"),
|
|
|
|
// ========== 기본 입력 컴포넌트 ==========
|
|
"text-input": () => import("@/lib/registry/components/text-input/TextInputConfigPanel"),
|
|
"number-input": () => import("@/lib/registry/components/number-input/NumberInputConfigPanel"),
|
|
"date-input": () => import("@/lib/registry/components/date-input/DateInputConfigPanel"),
|
|
"textarea-basic": () => import("@/lib/registry/components/textarea-basic/TextareaBasicConfigPanel"),
|
|
"select-basic": () => import("@/lib/registry/components/select-basic/SelectBasicConfigPanel"),
|
|
"checkbox-basic": () => import("@/lib/registry/components/checkbox-basic/CheckboxBasicConfigPanel"),
|
|
"radio-basic": () => import("@/lib/registry/components/radio-basic/RadioBasicConfigPanel"),
|
|
"toggle-switch": () => import("@/lib/registry/components/toggle-switch/ToggleSwitchConfigPanel"),
|
|
"file-upload": () => import("@/lib/registry/components/file-upload/FileUploadConfigPanel"),
|
|
"slider-basic": () => import("@/lib/registry/components/slider-basic/SliderBasicConfigPanel"),
|
|
"test-input": () => import("@/lib/registry/components/test-input/TestInputConfigPanel"),
|
|
|
|
// ========== 버튼 ==========
|
|
"button-primary": () => import("@/components/screen/config-panels/ButtonConfigPanel"),
|
|
"v2-button-primary": () => import("@/components/screen/config-panels/ButtonConfigPanel"),
|
|
|
|
// ========== 표시 컴포넌트 ==========
|
|
"text-display": () => import("@/lib/registry/components/text-display/TextDisplayConfigPanel"),
|
|
"v2-text-display": () => import("@/lib/registry/components/v2-text-display/TextDisplayConfigPanel"),
|
|
"image-display": () => import("@/lib/registry/components/image-display/ImageDisplayConfigPanel"),
|
|
"divider-line": () => import("@/lib/registry/components/divider-line/DividerLineConfigPanel"),
|
|
"v2-divider-line": () => import("@/lib/registry/components/v2-divider-line/DividerLineConfigPanel"),
|
|
"image-widget": () => import("@/lib/registry/components/image-widget/ImageWidgetConfigPanel"),
|
|
|
|
// ========== 레이아웃/컨테이너 ==========
|
|
"accordion-basic": () => import("@/lib/registry/components/accordion-basic/AccordionBasicConfigPanel"),
|
|
"card-display": () => import("@/lib/registry/components/card-display/CardDisplayConfigPanel"),
|
|
"v2-card-display": () => import("@/lib/registry/components/v2-card-display/CardDisplayConfigPanel"),
|
|
"section-card": () => import("@/lib/registry/components/section-card/SectionCardConfigPanel"),
|
|
"v2-section-card": () => import("@/lib/registry/components/v2-section-card/SectionCardConfigPanel"),
|
|
"section-paper": () => import("@/lib/registry/components/section-paper/SectionPaperConfigPanel"),
|
|
"v2-section-paper": () => import("@/lib/registry/components/v2-section-paper/SectionPaperConfigPanel"),
|
|
"split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
|
|
"v2-split-panel-layout": () => import("@/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel"),
|
|
"split-panel-layout2": () => import("@/lib/registry/components/split-panel-layout2/SplitPanelLayout2ConfigPanel"),
|
|
"screen-split-panel": () => import("@/lib/registry/components/screen-split-panel/ScreenSplitPanelConfigPanel"),
|
|
"conditional-container": () => import("@/lib/registry/components/conditional-container/ConditionalContainerConfigPanel"),
|
|
"v2-split-line": () => import("@/lib/registry/components/v2-split-line/SplitLineConfigPanel"),
|
|
|
|
// ========== 테이블/리스트 ==========
|
|
"table-list": () => import("@/lib/registry/components/table-list/TableListConfigPanel"),
|
|
"v2-table-list": () => import("@/lib/registry/components/v2-table-list/TableListConfigPanel"),
|
|
"pivot-grid": () => import("@/lib/registry/components/pivot-grid/PivotGridConfigPanel"),
|
|
"v2-pivot-grid": () => import("@/lib/registry/components/v2-pivot-grid/PivotGridConfigPanel"),
|
|
"table-search-widget": () => import("@/lib/registry/components/table-search-widget/TableSearchWidgetConfigPanel"),
|
|
"v2-table-search-widget": () => import("@/lib/registry/components/v2-table-search-widget/TableSearchWidgetConfigPanel"),
|
|
"tax-invoice-list": () => import("@/lib/registry/components/tax-invoice-list/TaxInvoiceListConfigPanel"),
|
|
|
|
// ========== 리피터/반복 ==========
|
|
"repeat-container": () => import("@/lib/registry/components/repeat-container/RepeatContainerConfigPanel"),
|
|
"v2-repeat-container": () => import("@/lib/registry/components/v2-repeat-container/RepeatContainerConfigPanel"),
|
|
"repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
|
|
"v2-repeater": () => import("@/components/v2/config-panels/V2RepeaterConfigPanel"),
|
|
"simple-repeater-table": () => import("@/lib/registry/components/simple-repeater-table/SimpleRepeaterTableConfigPanel"),
|
|
"modal-repeater-table": () => import("@/lib/registry/components/modal-repeater-table/ModalRepeaterTableConfigPanel"),
|
|
"repeat-screen-modal": () => import("@/lib/registry/components/repeat-screen-modal/RepeatScreenModalConfigPanel"),
|
|
"related-data-buttons": () => import("@/lib/registry/components/related-data-buttons/RelatedDataButtonsConfigPanel"),
|
|
|
|
// ========== 검색/선택 ==========
|
|
"autocomplete-search-input": () => import("@/lib/registry/components/autocomplete-search-input/AutocompleteSearchInputConfigPanel"),
|
|
"entity-search-input": () => import("@/lib/registry/components/entity-search-input/EntitySearchInputConfigPanel"),
|
|
"selected-items-detail-input": () => import("@/lib/registry/components/selected-items-detail-input/SelectedItemsDetailInputConfigPanel"),
|
|
"customer-item-mapping": () => import("@/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel"),
|
|
"mail-recipient-selector": () => import("@/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel"),
|
|
"location-swap-selector": () => import("@/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel"),
|
|
"v2-location-swap-selector": () => import("@/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel"),
|
|
|
|
// ========== 특수 컴포넌트 ==========
|
|
"flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
|
|
"tabs-widget": () => import("@/components/screen/config-panels/TabsConfigPanel"),
|
|
"v2-tabs-widget": () => import("@/components/screen/config-panels/TabsConfigPanel"),
|
|
"tabs": () => import("@/components/screen/config-panels/TabsConfigPanel"),
|
|
"v2-tabs": () => import("@/components/screen/config-panels/TabsConfigPanel"),
|
|
"map": () => import("@/lib/registry/components/map/MapConfigPanel"),
|
|
"rack-structure": () => import("@/lib/registry/components/rack-structure/RackStructureConfigPanel"),
|
|
"v2-rack-structure": () => import("@/lib/registry/components/v2-rack-structure/RackStructureConfigPanel"),
|
|
"aggregation-widget": () => import("@/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel"),
|
|
"v2-aggregation-widget": () => import("@/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel"),
|
|
"numbering-rule": () => import("@/lib/registry/components/numbering-rule/NumberingRuleConfigPanel"),
|
|
"v2-numbering-rule": () => import("@/lib/registry/components/v2-numbering-rule/NumberingRuleConfigPanel"),
|
|
"category-manager": () => import("@/lib/registry/components/category-manager/CategoryManagerConfigPanel"),
|
|
"universal-form-modal": () => import("@/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel"),
|
|
"v2-process-work-standard": () => import("@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel"),
|
|
|
|
// ========== V2 BOM 컴포넌트 ==========
|
|
"v2-bom-item-editor": () => import("@/components/v2/config-panels/V2BomItemEditorConfigPanel"),
|
|
"v2-bom-tree": () => import("@/components/v2/config-panels/V2BomTreeConfigPanel"),
|
|
|
|
// ========== 레거시 위젯 (component/onUpdateProperty props 사용) ==========
|
|
"card": () => import("@/components/screen/config-panels/CardConfigPanel"),
|
|
"dashboard": () => import("@/components/screen/config-panels/DashboardConfigPanel"),
|
|
"stats": () => import("@/components/screen/config-panels/StatsCardConfigPanel"),
|
|
"stats-card": () => import("@/components/screen/config-panels/StatsCardConfigPanel"),
|
|
"progress": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
|
|
"progress-bar": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
|
|
"chart": () => import("@/components/screen/config-panels/ChartConfigPanel"),
|
|
"chart-basic": () => import("@/components/screen/config-panels/ChartConfigPanel"),
|
|
"alert": () => import("@/components/screen/config-panels/AlertConfigPanel"),
|
|
"alert-info": () => import("@/components/screen/config-panels/AlertConfigPanel"),
|
|
"badge": () => import("@/components/screen/config-panels/BadgeConfigPanel"),
|
|
"badge-status": () => import("@/components/screen/config-panels/BadgeConfigPanel"),
|
|
};
|
|
|
|
const configPanelCache = new Map<string, React.ComponentType<any>>();
|
|
|
|
/**
|
|
* 컴포넌트 ID로 ConfigPanel 컴포넌트를 동적으로 로드
|
|
*/
|
|
export async function getComponentConfigPanel(componentId: string): Promise<React.ComponentType<any> | null> {
|
|
if (configPanelCache.has(componentId)) {
|
|
return configPanelCache.get(componentId)!;
|
|
}
|
|
|
|
const importFn = CONFIG_PANEL_MAP[componentId];
|
|
if (!importFn) {
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
const module = await importFn();
|
|
|
|
// 모듈에서 ConfigPanel 컴포넌트 추출 (우선순위):
|
|
// 1차: PascalCase 변환된 이름 (예: text-input -> TextInputConfigPanel)
|
|
// 2차: v2- 접두사 제거 후 PascalCase (예: v2-table-list -> TableListConfigPanel)
|
|
// 3차: *ConfigPanel로 끝나는 첫 번째 named export
|
|
// 4차: default export
|
|
const pascalCaseName = `${toPascalCase(componentId)}ConfigPanel`;
|
|
const baseComponentId = componentId.startsWith("v2-") ? componentId.slice(3) : componentId;
|
|
const basePascalCaseName = `${toPascalCase(baseComponentId)}ConfigPanel`;
|
|
|
|
const findConfigPanelExport = () => {
|
|
for (const key of Object.keys(module)) {
|
|
if (key.endsWith("ConfigPanel") && typeof module[key] === "function") {
|
|
return module[key];
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const ConfigPanelComponent =
|
|
module[pascalCaseName] ||
|
|
module[basePascalCaseName] ||
|
|
findConfigPanelExport() ||
|
|
module.default;
|
|
|
|
if (!ConfigPanelComponent) {
|
|
console.error(`컴포넌트 "${componentId}"의 ConfigPanel을 모듈에서 찾을 수 없습니다.`);
|
|
return null;
|
|
}
|
|
|
|
configPanelCache.set(componentId, ConfigPanelComponent);
|
|
return ConfigPanelComponent;
|
|
} catch (error) {
|
|
console.error(`컴포넌트 "${componentId}"의 ConfigPanel 로드 실패:`, error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
export function hasComponentConfigPanel(componentId: string): boolean {
|
|
return componentId in CONFIG_PANEL_MAP;
|
|
}
|
|
|
|
export function getSupportedConfigPanelComponents(): string[] {
|
|
return Object.keys(CONFIG_PANEL_MAP);
|
|
}
|
|
|
|
function toPascalCase(str: string): string {
|
|
return str
|
|
.split("-")
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
.join("");
|
|
}
|
|
|
|
/**
|
|
* 컴포넌트 설정 패널을 렌더링하는 React 컴포넌트
|
|
*/
|
|
export interface ComponentConfigPanelProps {
|
|
componentId: string;
|
|
config: Record<string, any>;
|
|
onChange: (config: Record<string, any>) => void;
|
|
screenTableName?: string;
|
|
tableColumns?: any[];
|
|
tables?: any[];
|
|
menuObjid?: number;
|
|
allComponents?: any[];
|
|
currentComponent?: any;
|
|
}
|
|
|
|
export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> = ({
|
|
componentId,
|
|
config,
|
|
onChange,
|
|
screenTableName,
|
|
tableColumns,
|
|
tables,
|
|
menuObjid,
|
|
allComponents,
|
|
currentComponent,
|
|
}) => {
|
|
const [ConfigPanelComponent, setConfigPanelComponent] = React.useState<React.ComponentType<any> | null>(null);
|
|
const [loading, setLoading] = React.useState(true);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [selectedTableColumns, setSelectedTableColumns] = React.useState(tableColumns);
|
|
const [allTablesList, setAllTablesList] = React.useState<any[]>([]);
|
|
const [sourceTableColumns, setSourceTableColumns] = React.useState<any[]>([]);
|
|
const [targetTableColumns, setTargetTableColumns] = React.useState<any[]>([]);
|
|
|
|
React.useEffect(() => {
|
|
let mounted = true;
|
|
async function loadConfigPanel() {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const component = await getComponentConfigPanel(componentId);
|
|
if (mounted) {
|
|
setConfigPanelComponent(() => component);
|
|
setLoading(false);
|
|
}
|
|
} catch (err) {
|
|
if (mounted) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
setLoading(false);
|
|
}
|
|
}
|
|
}
|
|
loadConfigPanel();
|
|
return () => { mounted = false; };
|
|
}, [componentId]);
|
|
|
|
React.useEffect(() => {
|
|
setSelectedTableColumns(tableColumns);
|
|
}, [tableColumns]);
|
|
|
|
// repeater-field-group / selected-items-detail-input에서 전체 테이블 목록 로드
|
|
React.useEffect(() => {
|
|
if (componentId === "repeater-field-group" || componentId === "selected-items-detail-input") {
|
|
const loadAllTables = async () => {
|
|
try {
|
|
const { tableManagementApi } = await import("@/lib/api/tableManagement");
|
|
const response = await tableManagementApi.getTableList();
|
|
if (response.success && response.data) {
|
|
setAllTablesList(response.data);
|
|
}
|
|
} catch (_) {
|
|
// 전체 테이블 목록 로드 실패 시 무시
|
|
}
|
|
};
|
|
loadAllTables();
|
|
}
|
|
}, [componentId]);
|
|
|
|
// selected-items-detail-input: 초기 sourceTable/targetTable 컬럼 로드
|
|
React.useEffect(() => {
|
|
if (componentId !== "selected-items-detail-input") return;
|
|
|
|
const loadColumns = async (tableName: string, setter: React.Dispatch<React.SetStateAction<any[]>>, includeCodeCategory?: boolean) => {
|
|
try {
|
|
const { tableTypeApi } = await import("@/lib/api/screen");
|
|
const columnsResponse = await tableTypeApi.getColumns(tableName);
|
|
const columns = (columnsResponse || []).map((col: any) => ({
|
|
columnName: col.columnName || col.column_name,
|
|
columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type || col.dbType,
|
|
inputType: col.inputType || col.input_type,
|
|
...(includeCodeCategory ? { codeCategory: col.codeCategory || col.code_category } : {}),
|
|
}));
|
|
setter(columns);
|
|
} catch (_) {
|
|
setter([]);
|
|
}
|
|
};
|
|
|
|
if (config.sourceTable) loadColumns(config.sourceTable, setSourceTableColumns);
|
|
if (config.targetTable) loadColumns(config.targetTable, setTargetTableColumns, true);
|
|
}, [componentId, config.sourceTable, config.targetTable]);
|
|
|
|
const screenComponents = React.useMemo(() => {
|
|
if (!allComponents) return [];
|
|
return allComponents.map((comp: any) => ({
|
|
id: comp.id,
|
|
componentType: comp.componentType || comp.type,
|
|
label: comp.label || comp.name || comp.id,
|
|
tableName: comp.componentConfig?.tableName || comp.tableName,
|
|
columnName: comp.columnName || comp.componentConfig?.columnName || comp.componentConfig?.fieldName,
|
|
}));
|
|
}, [allComponents]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="rounded-md border border-dashed border-input bg-muted p-4 w-full">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<span className="text-sm font-medium">로딩 중...</span>
|
|
</div>
|
|
<p className="mt-1 text-xs text-muted-foreground">설정 패널을 불러오는 중입니다.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="rounded-md border border-dashed border-destructive/30 bg-destructive/10 p-4 w-full">
|
|
<div className="flex items-center gap-2 text-destructive">
|
|
<span className="text-sm font-medium">로드 실패</span>
|
|
</div>
|
|
<p className="mt-1 text-xs text-destructive">설정 패널을 불러올 수 없습니다: {error}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!ConfigPanelComponent) {
|
|
return (
|
|
<div className="rounded-md border border-dashed border-amber-300 bg-amber-50 p-4 w-full">
|
|
<div className="flex items-center gap-2 text-amber-600">
|
|
<span className="text-sm font-medium">설정 패널 없음</span>
|
|
</div>
|
|
<p className="mt-1 text-xs text-amber-500">컴포넌트 "{componentId}"에 대한 설정 패널이 없습니다.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 테이블 변경 핸들러
|
|
const handleTableChange = async (tableName: string) => {
|
|
try {
|
|
const existingTable = tables?.find((t) => t.tableName === tableName);
|
|
if (existingTable?.columns?.length > 0) {
|
|
setSelectedTableColumns(existingTable.columns);
|
|
return;
|
|
}
|
|
const { tableTypeApi } = await import("@/lib/api/screen");
|
|
const columnsResponse = await tableTypeApi.getColumns(tableName);
|
|
const columns = (columnsResponse || []).map((col: any) => ({
|
|
tableName: col.tableName || tableName,
|
|
columnName: col.columnName || col.column_name,
|
|
columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type || col.dbType,
|
|
webType: col.webType || col.web_type,
|
|
input_type: col.inputType || col.input_type,
|
|
widgetType: col.widgetType || col.widget_type || col.webType || col.web_type,
|
|
isNullable: col.isNullable || col.is_nullable,
|
|
required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
|
|
columnDefault: col.columnDefault || col.column_default,
|
|
characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
|
|
codeCategory: col.codeCategory || col.code_category,
|
|
codeValue: col.codeValue || col.code_value,
|
|
}));
|
|
setSelectedTableColumns(columns);
|
|
} catch (_) {
|
|
setSelectedTableColumns([]);
|
|
}
|
|
};
|
|
|
|
const handleSourceTableChange = async (tableName: string) => {
|
|
try {
|
|
const { tableTypeApi } = await import("@/lib/api/screen");
|
|
const columnsResponse = await tableTypeApi.getColumns(tableName);
|
|
const columns = (columnsResponse || []).map((col: any) => ({
|
|
columnName: col.columnName || col.column_name,
|
|
columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type || col.dbType,
|
|
inputType: col.inputType || col.input_type,
|
|
}));
|
|
setSourceTableColumns(columns);
|
|
} catch (_) {
|
|
setSourceTableColumns([]);
|
|
}
|
|
};
|
|
|
|
const handleTargetTableChange = async (tableName: string) => {
|
|
try {
|
|
const { tableTypeApi } = await import("@/lib/api/screen");
|
|
const columnsResponse = await tableTypeApi.getColumns(tableName);
|
|
const columns = (columnsResponse || []).map((col: any) => ({
|
|
columnName: col.columnName || col.column_name,
|
|
columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
|
|
dataType: col.dataType || col.data_type || col.dbType,
|
|
inputType: col.inputType || col.input_type,
|
|
codeCategory: col.codeCategory || col.code_category,
|
|
}));
|
|
setTargetTableColumns(columns);
|
|
} catch (_) {
|
|
setTargetTableColumns([]);
|
|
}
|
|
};
|
|
|
|
// --- 특수 래퍼: 레거시 위젯 (component/onUpdateProperty props) ---
|
|
const LEGACY_PANELS = new Set([
|
|
"card", "dashboard", "stats", "stats-card",
|
|
"progress", "progress-bar", "chart", "chart-basic",
|
|
"alert", "alert-info", "badge", "badge-status",
|
|
]);
|
|
|
|
if (LEGACY_PANELS.has(componentId)) {
|
|
const pseudoComponent = {
|
|
id: currentComponent?.id || "temp",
|
|
type: "component",
|
|
componentConfig: config,
|
|
...currentComponent,
|
|
};
|
|
return (
|
|
<ConfigPanelComponent
|
|
component={pseudoComponent}
|
|
onUpdateProperty={(path: string, value: any) => {
|
|
if (path.startsWith("componentConfig.")) {
|
|
const key = path.replace("componentConfig.", "");
|
|
onChange({ ...config, [key]: value });
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// --- 특수 래퍼: ButtonConfigPanel (component/onUpdateProperty props) ---
|
|
if (componentId === "button-primary" || componentId === "v2-button-primary") {
|
|
const componentForButton = currentComponent || {
|
|
id: "temp",
|
|
type: "component",
|
|
componentType: componentId,
|
|
componentConfig: config,
|
|
};
|
|
return (
|
|
<ConfigPanelComponent
|
|
component={componentForButton}
|
|
onUpdateProperty={(path: string, value: any) => {
|
|
if (path.startsWith("componentConfig.")) {
|
|
const configPath = path.replace("componentConfig.", "");
|
|
const pathParts = configPath.split(".");
|
|
const currentConfig = componentForButton.componentConfig || {};
|
|
const newConfig = JSON.parse(JSON.stringify(currentConfig));
|
|
let current: any = newConfig;
|
|
for (let i = 0; i < pathParts.length - 1; i++) {
|
|
if (!current[pathParts[i]]) current[pathParts[i]] = {};
|
|
current = current[pathParts[i]];
|
|
}
|
|
current[pathParts[pathParts.length - 1]] = value;
|
|
onChange(newConfig);
|
|
} else {
|
|
const currentConfig = componentForButton.componentConfig || {};
|
|
onChange({ ...currentConfig, [path]: value });
|
|
}
|
|
}}
|
|
allComponents={allComponents}
|
|
currentTableName={screenTableName}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// --- 통일된 props: 모든 일반 패널에 동일한 props 전달 ---
|
|
const context: ConfigPanelContext = {
|
|
tables,
|
|
tableColumns: selectedTableColumns,
|
|
screenTableName,
|
|
menuObjid,
|
|
allComponents,
|
|
currentComponent,
|
|
allTables: allTablesList.length > 0 ? allTablesList : tables,
|
|
screenComponents,
|
|
};
|
|
|
|
return (
|
|
<ConfigPanelComponent
|
|
config={config}
|
|
onChange={onChange}
|
|
onConfigChange={onChange}
|
|
context={context}
|
|
screenTableName={screenTableName}
|
|
tableColumns={selectedTableColumns}
|
|
tables={tables}
|
|
allTables={allTablesList.length > 0 ? allTablesList : tables}
|
|
onTableChange={handleTableChange}
|
|
menuObjid={menuObjid}
|
|
allComponents={allComponents}
|
|
currentComponent={currentComponent}
|
|
screenComponents={screenComponents}
|
|
inputType={currentComponent?.inputType || config?.inputType}
|
|
sourceTableColumns={sourceTableColumns}
|
|
targetTableColumns={targetTableColumns}
|
|
onSourceTableChange={handleSourceTableChange}
|
|
onTargetTableChange={handleTargetTableChange}
|
|
/>
|
|
);
|
|
};
|