54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Input } from '@/components/ui/input';
|
|
import type { FieldConfig } from '@/types/invyone-component';
|
|
|
|
interface NumberFieldProps {
|
|
field: FieldConfig;
|
|
value: any;
|
|
onChange: (value: any) => void;
|
|
mode: 'form' | 'search';
|
|
disabled?: boolean;
|
|
error?: string;
|
|
}
|
|
|
|
export function NumberField({ field, value, onChange, mode, disabled, error }: NumberFieldProps) {
|
|
if (mode === 'search') {
|
|
// 검색: min~max 범위 입력 2개
|
|
const min = value?.min ?? '';
|
|
const max = value?.max ?? '';
|
|
return (
|
|
<div className="flex items-center gap-1">
|
|
<Input
|
|
type="number"
|
|
value={min}
|
|
onChange={(e) => onChange({ ...value, min: e.target.value === '' ? undefined : Number(e.target.value) })}
|
|
placeholder="최소"
|
|
disabled={disabled}
|
|
className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
|
|
/>
|
|
<span className="text-xs text-[var(--v5-text-muted)]">~</span>
|
|
<Input
|
|
type="number"
|
|
value={max}
|
|
onChange={(e) => onChange({ ...value, max: e.target.value === '' ? undefined : Number(e.target.value) })}
|
|
placeholder="최대"
|
|
disabled={disabled}
|
|
className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Input
|
|
type="number"
|
|
value={value ?? ''}
|
|
onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}
|
|
placeholder={field.placeholder ?? field.label}
|
|
disabled={disabled}
|
|
className={`h-7 text-xs text-right ${error ? 'border-destructive' : ''}`}
|
|
/>
|
|
);
|
|
}
|