70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { cn } from "@/lib/utils";
|
|
import { WidgetComponent } from "@/types/screen";
|
|
|
|
interface SelectWidgetProps {
|
|
widget: WidgetComponent;
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
options?: { value: string; label: string }[];
|
|
className?: string;
|
|
}
|
|
|
|
export default function SelectWidget({ widget, value, onChange, options = [], className }: SelectWidgetProps) {
|
|
const handleChange = (newValue: string) => {
|
|
onChange?.(newValue);
|
|
};
|
|
|
|
// 위젯 타입에 따른 기본 옵션 생성
|
|
const getDefaultOptions = () => {
|
|
switch (widget.widgetType) {
|
|
case "select":
|
|
return [
|
|
{ value: "option1", label: "옵션 1" },
|
|
{ value: "option2", label: "옵션 2" },
|
|
{ value: "option3", label: "옵션 3" },
|
|
];
|
|
case "checkbox":
|
|
return [
|
|
{ value: "true", label: "체크됨" },
|
|
{ value: "false", label: "체크 안됨" },
|
|
];
|
|
case "radio":
|
|
return [
|
|
{ value: "yes", label: "예" },
|
|
{ value: "no", label: "아니오" },
|
|
];
|
|
default:
|
|
return options.length > 0 ? options : [{ value: "default", label: "기본값" }];
|
|
}
|
|
};
|
|
|
|
const displayOptions = options.length > 0 ? options : getDefaultOptions();
|
|
|
|
return (
|
|
<div className={cn("space-y-1.5", className)}>
|
|
{widget.label && (
|
|
<Label htmlFor={widget.id} className="text-xs font-medium">
|
|
{widget.label}
|
|
{widget.required && <span className="text-destructive ml-0.5">*</span>}
|
|
</Label>
|
|
)}
|
|
<Select value={value} onValueChange={handleChange} disabled={widget.readonly}>
|
|
<SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
|
|
<SelectValue placeholder={widget.placeholder || "선택해주세요"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{displayOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value} className="text-sm">
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
);
|
|
}
|