diff --git a/packages/dataviews/src/dataform.tsx b/packages/dataviews/src/dataform.tsx index db0c621cc5566f..3ca845b2576dc7 100644 --- a/packages/dataviews/src/dataform.tsx +++ b/packages/dataviews/src/dataform.tsx @@ -18,7 +18,7 @@ type DataFormProps< Item > = { onUpdate: any; // TODO: fix this type. }; -type DataFormTextControlProps< Item > = { +type DataFormControlProps< Item > = { data: Item; field: NormalizedField< Item >; onUpdate: any; // TODO: fix this type. @@ -28,7 +28,7 @@ function DataFormTextControl< Item >( { data, field, onUpdate, -}: DataFormTextControlProps< Item > ) { +}: DataFormControlProps< Item > ) { const { id, header, placeholder } = field; const value = field.getValue( { item: data } ); @@ -51,6 +51,26 @@ function DataFormTextControl< Item >( { ); } +const controls: { + [ key: string ]: < Item >( + props: DataFormControlProps< Item > + ) => JSX.Element; +} = { + text: DataFormTextControl, +}; + +function getControlForField< Item >( field: NormalizedField< Item > ) { + if ( ! field.type ) { + return null; + } + + if ( ! Object.keys( controls ).includes( field.type ) ) { + return null; + } + + return controls[ field.type ]; +} + export default function DataForm< Item >( { data, fields, @@ -68,15 +88,14 @@ export default function DataForm< Item >( { ); return visibleFields.map( ( field ) => { - if ( field.type === 'text' ) { - return ( - - ); - } - return null; + const DataFormControl = getControlForField( field ); + return DataFormControl ? ( + + ) : null; } ); }