Add shared JSON UI renderer types

This commit is contained in:
2026-01-18 01:14:53 +00:00
parent b14a0a0403
commit 013de088a0
2 changed files with 23 additions and 19 deletions

View File

@@ -1,16 +1,9 @@
import React, { useCallback } from 'react'
import { UIComponent, EventHandler } from './schema'
import type { EventHandler, JSONFormRendererProps, JSONUIRendererProps, UIComponent } from './types'
import { getUIComponent } from './component-registry'
import { resolveDataBinding, evaluateCondition, mergeClassNames } from './utils'
import { cn } from '@/lib/utils'
export interface JSONUIRendererProps {
component: UIComponent
dataMap?: Record<string, any>
onAction?: (handler: EventHandler, event?: any) => void
context?: Record<string, any>
}
export function JSONUIRenderer({
component,
dataMap = {},
@@ -50,7 +43,7 @@ export function JSONUIRenderer({
onAction={onAction}
context={loopContext}
/>
)
)}
})}
</>
)
@@ -123,15 +116,8 @@ export function JSONUIRenderer({
)
}
export interface JSONFormRendererProps {
formData: any
fields: any[]
onSubmit: (data: any) => void
onChange?: (data: any) => void
}
export function JSONFormRenderer({ formData, fields, onSubmit, onChange }: JSONFormRendererProps) {
const handleFieldChange = useCallback((fieldName: string, value: any) => {
const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
const newData = { ...formData, [fieldName]: value }
onChange?.(newData)
}, [formData, onChange])
@@ -175,12 +161,13 @@ export function JSONFormRenderer({ formData, fields, onSubmit, onChange }: JSONF
dataMap={{}}
onAction={(handler, event) => {
if (handler.action === 'field-change') {
handleFieldChange(field.name, event.target.value)
const targetValue = (event as { target?: { value?: unknown } } | undefined)?.target?.value
handleFieldChange(field.name, targetValue)
}
}}
/>
</div>
)
)}
})}
</form>
)

17
src/lib/json-ui/types.ts Normal file
View File

@@ -0,0 +1,17 @@
import type { EventHandler, FormField, UIComponent } from './schema'
export type { EventHandler, FormField, UIComponent }
export interface JSONUIRendererProps {
component: UIComponent
dataMap?: Record<string, unknown>
onAction?: (handler: EventHandler, event?: unknown) => void
context?: Record<string, unknown>
}
export interface JSONFormRendererProps {
formData: Record<string, unknown>
fields: FormField[]
onSubmit: (data: Record<string, unknown>) => void
onChange?: (data: Record<string, unknown>) => void
}