94 lines
2.0 KiB
TypeScript
94 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ConfigPanelBuilder } from "@/lib/registry/components/common/ConfigPanelBuilder";
|
|
import { ConfigSectionDefinition } from "@/lib/registry/components/common/ConfigPanelTypes";
|
|
|
|
interface ProgressBarConfigPanelProps {
|
|
config?: Record<string, any>;
|
|
onChange?: (key: string, value: any) => void;
|
|
component?: any;
|
|
onUpdateProperty?: (path: string, value: any) => void;
|
|
}
|
|
|
|
const sections: ConfigSectionDefinition[] = [
|
|
{
|
|
id: "content",
|
|
title: "콘텐츠",
|
|
fields: [
|
|
{
|
|
key: "label",
|
|
label: "라벨",
|
|
type: "text",
|
|
placeholder: "진행률 라벨을 입력하세요",
|
|
},
|
|
{
|
|
key: "value",
|
|
label: "현재 값",
|
|
type: "number",
|
|
min: 0,
|
|
placeholder: "현재 값",
|
|
},
|
|
{
|
|
key: "max",
|
|
label: "최대 값",
|
|
type: "number",
|
|
min: 1,
|
|
placeholder: "최대 값",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "style",
|
|
title: "스타일",
|
|
fields: [
|
|
{
|
|
key: "color",
|
|
label: "진행률 색상",
|
|
type: "color",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "display",
|
|
title: "표시 옵션",
|
|
fields: [
|
|
{
|
|
key: "showPercentage",
|
|
label: "퍼센트 표시",
|
|
type: "switch",
|
|
},
|
|
{
|
|
key: "showValue",
|
|
label: "값 표시",
|
|
type: "switch",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export const ProgressBarConfigPanel: React.FC<ProgressBarConfigPanelProps> = ({
|
|
config: directConfig,
|
|
onChange: directOnChange,
|
|
component,
|
|
onUpdateProperty,
|
|
}) => {
|
|
const config = directConfig || component?.componentConfig || {};
|
|
|
|
const handleChange = (key: string, value: any) => {
|
|
if (directOnChange) {
|
|
directOnChange(key, value);
|
|
} else if (onUpdateProperty) {
|
|
onUpdateProperty(`componentConfig.${key}`, value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ConfigPanelBuilder
|
|
config={config}
|
|
onChange={handleChange}
|
|
sections={sections}
|
|
/>
|
|
);
|
|
};
|