feature-111: update fieldMapper signature

src/constants/common-interface.ts

@@ -203,7 +203,7 @@ export interface ICustomFieldProps extends Omit<IFormField, "display" | "readonl
     error: IError;
 
     className?: string;
-    placeHolder?: string;
+    placeholder?: string;
 
     // states
     disabled?: boolean;
@@ -222,6 +222,14 @@ export interface ICustomFieldProps extends Omit<IFormField, "display" | "readonl
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 
+export interface IFieldAdapter {
+    component: React.ComponentType<ICustomFieldProps>;
+    defaultProps?: Partial<ICustomFieldProps>;
+    metadata?: Record<string, unknown>;
+}
+
+export type TFieldMapper = Record<string, React.ComponentType<ICustomFieldProps> | 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<string, React.FC<ICustomFieldProps>>;
+    fieldMapper?: TFieldMapper;
 
     /**
      * Event handling params

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<string, React.FunctionComponent<IControlProps>> | undefined;
     errorHandler?: TErrorCallback;
     validators?: Record<string, TValidator>;
-    fieldMapper?: Record<string, React.FC<ICustomFieldProps>>;
+    fieldMapper?: TFieldMapper;
 
     constructor(
         private schema: ISchema,
@@ -708,14 +708,24 @@ export default class MetaForm implements IMetaForm {
         this.errorHandler = errorHandler;
     }
 
-    getFieldMapperComponent(displayType: string): React.FC<ICustomFieldProps> | 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<string, React.FC<ICustomFieldProps>>) {
+    setFieldMapper(fieldMapper: TFieldMapper) {
         this.fieldMapper = fieldMapper;
     }
 

src/form/form-controls/BaseFormControl.tsx

@@ -151,9 +151,13 @@ export default abstract class BaseFormControl extends React.Component {
         return <Fragment />;
     }
 
-    custom(CustomComponent: React.FC<ICustomFieldProps>): JSX.Element {
+    custom(
+        CustomComponent: React.ComponentType<ICustomFieldProps>,
+        defaultProps?: Partial<ICustomFieldProps>
+    ): JSX.Element {
         return (
             <CustomComponent
+                {...defaultProps}
                 name={this.props.name}
                 className={this.props.form.className}
                 label={this.props.form.displayName ?? ""}
@@ -169,9 +173,9 @@ export default abstract class BaseFormControl extends React.Component {
     }
 
     control() {
-        const CustomComponent = this.context.getFieldMapperComponent(this.displayType || "");
-        if (CustomComponent) {
-            return this.custom(CustomComponent);
+        const customField = this.context.getFieldMapperComponent(this.displayType || "");
+        if (customField) {
+            return this.custom(customField.component as React.FC<ICustomFieldProps>, customField.defaultProps);
         }
         switch (this.displayType) {
             case CONTROLS.HEADER: