diff --git a/packages/react/src/components/form/FieldFactory.tsx b/packages/react/src/components/form/FieldFactory.tsx index 10003262f..3444e6091 100644 --- a/packages/react/src/components/form/FieldFactory.tsx +++ b/packages/react/src/components/form/FieldFactory.tsx @@ -10,6 +10,21 @@ import React from 'react'; import { UseFormReturn } from 'react-hook-form'; import type { FormField } from '@objectstack/spec/ui'; +/** + * Extended form field with additional properties for complex widgets + * These properties are not part of the standard FormField schema but may be + * provided by specific implementations + */ +export interface ExtendedFormField extends FormField { + multiple?: boolean; + accept?: string[]; + options?: Array<{ + label: string; + value: string; + disabled?: boolean; + }>; +} + export interface FieldFactoryProps { /** * Field configuration from FormFieldSchema @@ -36,11 +51,22 @@ export const FieldFactory: React.FC = ({ }) => { const { register, formState: { errors } } = methods; + // Cast to extended field for properties not in base schema + const extendedField = field as ExtendedFormField; + // Determine the widget type const widgetType = field.widget || 'text'; const fieldName = field.field; const error = errors[fieldName]; + // Helper function to handle multiple select value conversion + const handleMultipleSelectValue = (value: any) => { + if (extendedField.multiple && value instanceof HTMLCollection) { + return Array.from(value as HTMLCollectionOf).map((opt) => opt.value); + } + return value; + }; + // Handle conditional visibility // Note: visibleOn expression evaluation is not yet implemented // Fields are always visible unless explicitly hidden @@ -151,20 +177,23 @@ export const FieldFactory: React.FC = ({ case 'select': case 'dropdown': - // Note: This is a basic implementation without options support - // To properly support select fields, options would need to be passed - // via an extended FormField schema or external configuration return renderField( ); @@ -211,6 +240,250 @@ export const FieldFactory: React.FC = ({ /> ); + case 'currency': + return renderField( +
+ $ + +
+ ); + + case 'percent': + return renderField( +
+ + % +
+ ); + + case 'phone': + return renderField( + + ); + + case 'markdown': + return renderField( +