84 lines
2.5 KiB
TypeScript
84 lines
2.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { EntitySearchInputComponent } from "./EntitySearchInputComponent";
|
||
|
|
import { WebTypeComponentProps } from "@/lib/registry/types";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* EntitySearchInput 래퍼 컴포넌트
|
||
|
|
* WebTypeRegistry에서 사용하기 위한 래퍼로,
|
||
|
|
* 레지스트리 props를 EntitySearchInputComponent에 맞게 변환합니다.
|
||
|
|
*/
|
||
|
|
export const EntitySearchInputWrapper: React.FC<WebTypeComponentProps> = ({
|
||
|
|
component,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
readonly = false,
|
||
|
|
...props
|
||
|
|
}) => {
|
||
|
|
// component에서 필요한 설정 추출
|
||
|
|
const widget = component as any;
|
||
|
|
const webTypeConfig = widget?.webTypeConfig || {};
|
||
|
|
const componentConfig = widget?.componentConfig || {};
|
||
|
|
|
||
|
|
// 설정 우선순위: webTypeConfig > componentConfig > component 직접 속성
|
||
|
|
const config = { ...componentConfig, ...webTypeConfig };
|
||
|
|
|
||
|
|
// 테이블 타입 관리에서 설정된 참조 테이블 정보 사용
|
||
|
|
const tableName = config.referenceTable || widget?.referenceTable || "";
|
||
|
|
const displayField = config.labelField || config.displayColumn || config.displayField || "name";
|
||
|
|
const valueField = config.valueField || config.referenceColumn || "id";
|
||
|
|
|
||
|
|
// UI 모드: uiMode > mode 순서
|
||
|
|
const uiMode = config.uiMode || config.mode || "select";
|
||
|
|
|
||
|
|
// 다중선택 설정
|
||
|
|
const multiple = config.multiple ?? false;
|
||
|
|
|
||
|
|
// placeholder
|
||
|
|
const placeholder = config.placeholder || widget?.placeholder || "항목을 선택하세요";
|
||
|
|
|
||
|
|
console.log("🏢 EntitySearchInputWrapper 렌더링:", {
|
||
|
|
tableName,
|
||
|
|
displayField,
|
||
|
|
valueField,
|
||
|
|
uiMode,
|
||
|
|
multiple,
|
||
|
|
value,
|
||
|
|
config,
|
||
|
|
});
|
||
|
|
|
||
|
|
// 테이블 정보가 없으면 안내 메시지 표시
|
||
|
|
if (!tableName) {
|
||
|
|
return (
|
||
|
|
<div className="text-muted-foreground flex h-full w-full items-center rounded-md border border-dashed px-3 py-2 text-sm">
|
||
|
|
테이블 타입 관리에서 참조 테이블을 설정해주세요
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<EntitySearchInputComponent
|
||
|
|
tableName={tableName}
|
||
|
|
displayField={displayField}
|
||
|
|
valueField={valueField}
|
||
|
|
uiMode={uiMode}
|
||
|
|
placeholder={placeholder}
|
||
|
|
disabled={readonly}
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple={multiple}
|
||
|
|
component={component}
|
||
|
|
isInteractive={props.isInteractive}
|
||
|
|
onFormDataChange={props.onFormDataChange}
|
||
|
|
formData={props.formData}
|
||
|
|
className="h-full w-full"
|
||
|
|
style={widget?.style}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
EntitySearchInputWrapper.displayName = "EntitySearchInputWrapper";
|
||
|
|
|