diff --git a/src/constants/common-interface.ts b/src/constants/common-interface.ts index ade037e..09199f4 100644 --- a/src/constants/common-interface.ts +++ b/src/constants/common-interface.ts @@ -203,7 +203,7 @@ export interface ICustomFieldProps extends Omit) => void; } +export interface IFieldAdapter { + component: React.ComponentType; + defaultProps?: Partial; + metadata?: Record; +} + +export type TFieldMapper = Record | IFieldAdapter>; + export interface IFormRenderer extends IUISchema, IFormConfig { baseFormControl?: typeof BaseFormControl; baseFormGroup?: typeof BaseFormGroup; @@ -274,7 +282,7 @@ export interface IFormRenderer extends IUISchema, IFormConfig { /** * Map fields to custom components */ - fieldMapper?: Record>; + fieldMapper?: TFieldMapper; /** * Event handling params diff --git a/src/core/MetaForm.tsx b/src/core/MetaForm.tsx index 4e4eb65..3a95d7c 100644 --- a/src/core/MetaForm.tsx +++ b/src/core/MetaForm.tsx @@ -24,8 +24,8 @@ import { IFooterProps, IFormErrorDetails, TValidator, - IFieldProps, - ICustomFieldProps + TFieldMapper, + IFieldAdapter } from "../constants/common-interface"; import MetaformError from "./MetaformError"; import { @@ -70,7 +70,7 @@ export default class MetaForm implements IMetaForm { controlElements: Record> | undefined; errorHandler?: TErrorCallback; validators?: Record; - fieldMapper?: Record>; + fieldMapper?: TFieldMapper; constructor( private schema: ISchema, @@ -708,14 +708,24 @@ export default class MetaForm implements IMetaForm { this.errorHandler = errorHandler; } - getFieldMapperComponent(displayType: string): React.FC | null { - if (this.fieldMapper && this.fieldMapper[displayType]) { - return this.fieldMapper[displayType]; + getFieldMapperComponent(displayType: string): IFieldAdapter | null { + if (this.fieldMapper) { + const CustomComponent = this.fieldMapper[displayType]; + if (CustomComponent !== undefined) { + if (typeof CustomComponent === "function") { + return { + component: CustomComponent, + defaultProps: {} + }; + } else { + return CustomComponent as IFieldAdapter; + } + } } return null; } - setFieldMapper(fieldMapper: Record>) { + setFieldMapper(fieldMapper: TFieldMapper) { this.fieldMapper = fieldMapper; } diff --git a/src/form/form-controls/BaseFormControl.tsx b/src/form/form-controls/BaseFormControl.tsx index ff39c4d..b3eb29b 100644 --- a/src/form/form-controls/BaseFormControl.tsx +++ b/src/form/form-controls/BaseFormControl.tsx @@ -151,9 +151,13 @@ export default abstract class BaseFormControl extends React.Component { return ; } - custom(CustomComponent: React.FC): JSX.Element { + custom( + CustomComponent: React.ComponentType, + defaultProps?: Partial + ): JSX.Element { return ( , customField.defaultProps); } switch (this.displayType) { case CONTROLS.HEADER: