Files
protoc-frontend/src/component/BasicElements/NumberElement.tsx
2025-07-23 16:55:35 +03:00

54 lines
1.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { Input } from '@/component/ui/input'
import { ElementDefinition } from '@/entitiy/element/model/interface'
import { Hash } from 'lucide-react'
interface NumberConfig {
placeholder?: string
required?: boolean
targetCells: any[]
}
export const numberDefinition: ElementDefinition<NumberConfig, number> = {
type: 'number',
label: 'Число',
icon: <Hash className="h-4 w-4" />,
version: 1,
defaultConfig: {
placeholder: '',
required: false,
targetCells: [],
},
mapToCells: config => config.targetCells || [],
mapToCellValues: (config, value) => {
const cells = config.targetCells || []
return cells.map(target => ({ target, value: value || 0 }))
},
Editor: () => (
<div className="text-sm text-gray-600">
Дополнительные настройки отсутствуют
</div>
),
Preview: ({ config }) => (
<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="number"
placeholder={config.placeholder || '0'}
disabled
className="w-full"
/>
</div>
</div>
),
Render: ({ config, value, onChange }) => (
<Input
type="number"
placeholder={config.placeholder || '0'}
value={value || ''}
onChange={e => onChange?.(parseFloat(e.target.value) || 0)}
required={config.required}
/>
),
}