50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { Input } from '@/components/ui/input'
|
||
import { ElementDefinition } from '@/lib/element-registry'
|
||
import { Calendar } from 'lucide-react'
|
||
|
||
interface DateConfig {
|
||
required?: boolean
|
||
targetCells: any[]
|
||
}
|
||
|
||
export const dateDefinition: ElementDefinition<DateConfig, string> = {
|
||
type: 'date',
|
||
label: 'Дата',
|
||
icon: <Calendar className="h-4 w-4" />,
|
||
defaultConfig: {
|
||
required: false,
|
||
targetCells: [],
|
||
},
|
||
Editor: ({ config, onChange }) => (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center space-x-2">
|
||
<input
|
||
type="checkbox"
|
||
id="required"
|
||
checked={config.required}
|
||
onChange={(e) => onChange({ ...config, required: e.target.checked })}
|
||
/>
|
||
<label htmlFor="required" className="text-sm font-medium">
|
||
Обязательное поле
|
||
</label>
|
||
</div>
|
||
</div>
|
||
),
|
||
Preview: () => (
|
||
<div className="space-y-3">
|
||
<div className="text-sm font-medium text-gray-700">Предпросмотр</div>
|
||
<div className="rounded-lg border border-gray-200 bg-white p-4">
|
||
<Input type="date" disabled className="w-full" />
|
||
</div>
|
||
</div>
|
||
),
|
||
Render: ({ config, value, onChange }) => (
|
||
<Input
|
||
type="date"
|
||
value={value || ''}
|
||
onChange={(e) => onChange?.(e.target.value)}
|
||
required={config.required}
|
||
/>
|
||
),
|
||
}
|