diff --git a/src/lib/json-ui/renderer.tsx b/src/lib/json-ui/renderer.tsx index 3655212..0013572 100644 --- a/src/lib/json-ui/renderer.tsx +++ b/src/lib/json-ui/renderer.tsx @@ -73,6 +73,13 @@ export function JSONUIRenderer({ if (component.loop) { const items = resolveDataBinding(component.loop.source, dataMap, context) || [] + const Component = getUIComponent(component.type) + + if (!Component) { + console.warn(`Component type "${component.type}" not found in registry`) + return null + } + return ( <> {items.map((item: any, index: number) => { @@ -81,9 +88,45 @@ export function JSONUIRenderer({ [component.loop!.itemVar]: item, ...(component.loop!.indexVar ? { [component.loop!.indexVar]: index } : {}), } + const props: Record = { ...component.props } + + if (component.dataBinding) { + const boundData = resolveDataBinding(component.dataBinding, dataMap, loopContext) + if (boundData !== undefined) { + props.value = boundData + props.data = boundData + } + } + + if (component.events) { + Object.entries(component.events).forEach(([eventName, handler]) => { + props[eventName] = (event?: any) => { + if (onAction) { + const eventHandler = typeof handler === 'string' + ? { action: handler } as EventHandler + : handler as EventHandler + onAction(eventHandler, event) + } + } + }) + } + + if (component.className) { + props.className = cn(props.className, component.className) + } + + if (component.style) { + props.style = { ...props.style, ...component.style } + } return ( - {renderChildren(component.children, loopContext)} + {typeof Component === 'string' + ? React.createElement(Component, props, renderChildren(component.children, loopContext)) + : ( + + {renderChildren(component.children, loopContext)} + + )} ) })}