42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useBuilderState } from "../hooks/useBuilderState";
|
|
import FieldListEditor from "./FieldListEditor";
|
|
import type { Component, FormConfig } from "@/types/invyone-component";
|
|
|
|
export default function FormProps({ block }: { block: Component }) {
|
|
const updateBlockConfig = useBuilderState((s) => s.updateBlockConfig);
|
|
const config = block.config as FormConfig;
|
|
|
|
const update = (key: string, val: any) => updateBlockConfig(block.id, { [key]: val });
|
|
|
|
return (
|
|
<>
|
|
<div className="dev-prop-sec">폼 설정</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">컬럼 수</span>
|
|
<select className="dev-select" value={config.columns}
|
|
onChange={(e) => update("columns", Number(e.target.value))}>
|
|
<option value={1}>1칸</option>
|
|
<option value={2}>2칸</option>
|
|
<option value={3}>3칸</option>
|
|
</select>
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">저장 방식</span>
|
|
<select className="dev-select" value={config.saveAction?.method || "UPSERT"}
|
|
onChange={(e) => update("saveAction", { ...config.saveAction, method: e.target.value })}>
|
|
<option value="INSERT">등록</option>
|
|
<option value="UPDATE">수정</option>
|
|
<option value="UPSERT">등록/수정</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="dev-prop-sec">입력 항목</div>
|
|
<div className="dev-hint">체크: 폼에 표시 · 클릭: 상세 설정</div>
|
|
<FieldListEditor filter={(f) => !f.system} toggleKey="visible" />
|
|
</>
|
|
);
|
|
}
|