65 lines
2.8 KiB
TypeScript
65 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useBuilderState } from "../hooks/useBuilderState";
|
|
import FieldListEditor from "./FieldListEditor";
|
|
import type { Component, TableConfig } from "@/types/invyone-component";
|
|
|
|
export default function TableProps({ block }: { block: Component }) {
|
|
const updateBlockConfig = useBuilderState((s) => s.updateBlockConfig);
|
|
const config = block.config as TableConfig;
|
|
|
|
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.pageSize}
|
|
onChange={(e) => update("pageSize", Number(e.target.value))}>
|
|
{[10, 20, 50, 100].map((n) => <option key={n} value={n}>{n}</option>)}
|
|
</select>
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">선택 방식</span>
|
|
<select className="dev-select" value={config.selectionMode}
|
|
onChange={(e) => update("selectionMode", e.target.value)}>
|
|
<option value="none">없음</option>
|
|
<option value="single">단일</option>
|
|
<option value="multiple">다중</option>
|
|
</select>
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">자동 로드</span>
|
|
<div className={`dev-toggle${config.autoLoad ? " on" : ""}`}
|
|
onClick={() => update("autoLoad", !config.autoLoad)} />
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">인라인 편집</span>
|
|
<div className={`dev-toggle${config.inlineEdit ? " on" : ""}`}
|
|
onClick={() => update("inlineEdit", !config.inlineEdit)} />
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">체크박스</span>
|
|
<div className={`dev-toggle${config.showCheckbox ? " on" : ""}`}
|
|
onClick={() => update("showCheckbox", !config.showCheckbox)} />
|
|
</div>
|
|
<div className="dev-prop-row inline">
|
|
<span className="dev-prop-label">스타일</span>
|
|
<select className="dev-select" value={config.style}
|
|
onChange={(e) => update("style", e.target.value)}>
|
|
<option value="default">기본</option>
|
|
<option value="striped">줄무늬</option>
|
|
<option value="bordered">테두리</option>
|
|
<option value="compact">컴팩트</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="dev-prop-sec">표시할 컬럼</div>
|
|
<div className="dev-hint">체크: 보이기 · 클릭: 상세 설정</div>
|
|
<FieldListEditor filter={(f) => !f.system} toggleKey="visible" />
|
|
</>
|
|
);
|
|
}
|