@bolttech/form-engine 3.0.0-beta.43 → 3.0.0-beta.46

package/index.esm.js

@@ -2383,13 +2383,14 @@ const eventsMapping = {
 /**
  * Hook to register events callback functions
  */
-const useForm = _a => {
+function useForm(_a) {
   var {
       id,
       onData,
-      onSubmit
+      onSubmit,
+      onMount
     } = _a,
-    rest = __rest(_a, ["id", "onData", "onSubmit"]);
+    rest = __rest(_a, ["id", "onData", "onSubmit", "onMount"]);
   const {
     formGroupInstance
   } = useFormGroupContext({});
@@ -2402,14 +2403,16 @@ const useForm = _a => {
   }, [rest]);
   const formValuesCallbackRefs = useRef({
     onData,
-    onSubmit
+    onSubmit,
+    onMount
   });
   useEffect(() => {
     formValuesCallbackRefs.current = {
       onData,
-      onSubmit
+      onSubmit,
+      onMount
     };
-  }, [onData, onSubmit]);
+  }, [onData, onSubmit, onMount]);
   /**
    * handle function call after the debounce occurs on the form instance field event
    * subject in order to call the most updated function with the updated function
@@ -2432,39 +2435,49 @@ const useForm = _a => {
     return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
   }, []);
   useEffect(() => {
-    var _a, _b;
+    var _a, _b, _c;
+    const mountCallback = payload => {
+      var _a, _b;
+      if (formValuesCallbackRefs.current.onMount) {
+        (_b = (_a = formValuesCallbackRefs.current).onMount) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
+      }
+    };
+    const mountSub = (_a = formGroupInstance.getForm({
+      key: id
+    })) === null || _a === void 0 ? void 0 : _a.subscribeOnMount(mountCallback);
     const dataCallback = payload => {
       var _a, _b;
       if (formValuesCallbackRefs.current.onData) {
         (_b = (_a = formValuesCallbackRefs.current).onData) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
       }
     };
-    const dataSub = (_a = formGroupInstance.getForm({
+    const dataSub = (_b = formGroupInstance.getForm({
       key: id
-    })) === null || _a === void 0 ? void 0 : _a.subscribeData(dataCallback);
+    })) === null || _b === void 0 ? void 0 : _b.subscribeData(dataCallback);
     const submitCallback = payload => {
       var _a, _b;
       if (formValuesCallbackRefs.current.onSubmit) {
         (_b = (_a = formValuesCallbackRefs.current).onSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
       }
     };
-    const submitSub = (_b = formGroupInstance.getForm({
+    const submitSub = (_c = formGroupInstance.getForm({
       key: id
-    })) === null || _b === void 0 ? void 0 : _b.subscribeOnSubmit(submitCallback);
+    })) === null || _c === void 0 ? void 0 : _c.subscribeOnSubmit(submitCallback);
     return () => {
+      mountSub === null || mountSub === void 0 ? void 0 : mountSub.unsubscribe();
       dataSub === null || dataSub === void 0 ? void 0 : dataSub.unsubscribe();
       submitSub === null || submitSub === void 0 ? void 0 : submitSub.unsubscribe();
     };
   }, []);
   return;
-};
+}
 
 /**
  *
  * @param {TFormProps} param form properties initializor
  * @returns {ReactElement}
  */
-const Form = ({
+function Form({
   schema,
   index,
   initialValues,
@@ -2482,7 +2495,7 @@ const Form = ({
   onKeyUp,
   onMount,
   children
-}) => {
+}) {
   const {
     addForm,
     removeForm,
@@ -2512,11 +2525,17 @@ const Form = ({
       key: schemaIndex,
       formInstance
     });
+    let subMounted;
+    if (onMount) {
+      subMounted = formInstance.subscribeOnMount(onMount);
+    }
+    formInstance === null || formInstance === void 0 ? void 0 : formInstance.mounted();
     /*
       @TODO check if form instance is killed each time it is unmounted
       the management of multiple forms needs to be planned
     */
     return () => {
+      subMounted === null || subMounted === void 0 ? void 0 : subMounted.unsubscribe();
       removeForm({
         key: schemaIndex
       });
@@ -2636,7 +2655,7 @@ const Form = ({
       children: tree && tree
     })]
   });
-};
+}
 
 /**
  * Component wrapper to aid building schemas with react without writting a JSON schema

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.43",
+  "version": "3.0.0-beta.46",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "0.0.1-beta.31",
-    "react": "18.2.0"
+    "@bolttech/form-engine-core": "0.0.1-beta.33",
+    "react": "18.2.0",
+    "rxjs": "7.8.1"
   },
   "peerDependencies": {}
 }

package/src/components/Form/Form.d.ts

@@ -5,5 +5,5 @@ import { TFormProps } from './Form.type';
  * @param {TFormProps} param form properties initializor
  * @returns {ReactElement}
  */
-declare const Form: ({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: TFormProps) => ReactElement;
+declare function Form<T>({ schema, index, initialValues, iVars, action, method, onSubmit, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: TFormProps<T>): ReactElement;
 export default Form;

package/src/components/Form/Form.type.d.ts

@@ -7,5 +7,5 @@ import { TEventsCallbackProps } from '../../types';
  * @see {@link TFormEntry}
  * @see {@link TEventsCallbackProps}
  */
-type TFormProps = PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps>;
+type TFormProps<T> = PropsWithChildren<Omit<TFormEntry, 'mappers'> & TEventsCallbackProps<T>>;
 export type { TFormProps };

package/src/context/FormGroupContext.type.d.ts

@@ -29,7 +29,7 @@ type TFormContext = {
     formGroupInstance: TFormGroup;
     mappers?: TMapper<ElementType>[];
     printFormGroupInstance: () => void;
-    submitMultipleFormsByIndex: <T>(indexes: string[]) => void;
+    submitMultipleFormsByIndex: (indexes: string[]) => void;
     debugMode: boolean;
     active: boolean;
 };

package/src/hooks/useForm/useForm.d.ts

@@ -2,5 +2,5 @@ import { TUseFormProps } from './useForm.type';
 /**
  * Hook to register events callback functions
  */
-declare const useForm: ({ id, onData, onSubmit, ...rest }: TUseFormProps) => void;
+declare function useForm<T>({ id, onData, onSubmit, onMount, ...rest }: TUseFormProps<T>): void;
 export default useForm;

package/src/hooks/useForm/useForm.type.d.ts

@@ -6,7 +6,7 @@ import { TEventsCallbackProps } from '../../types';
  *
  * @see {@link TEventsCallbackProps}
  */
-type TUseFormProps = {
+type TUseFormProps<T> = {
     id: string;
-} & TEventsCallbackProps;
+} & TEventsCallbackProps<T>;
 export type { TUseFormProps };

package/src/types/index.d.ts

@@ -23,8 +23,9 @@ type TFormData<T> = {
 /**
  * Represents a mapping of event properties to their corresponding callback functions.
  */
-type TEventsCallbackProps = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & {
-    onData?: <T>(payload: TFormData<T>) => void;
-    onSubmit?: <T>(payload: TFormValues<T>) => void;
+type TEventsCallbackProps<T> = Partial<Record<TEventProps, ((payload: TFieldEvent) => void) | null | undefined>> & {
+    onMount?: (payload: TFormValues<T>) => void;
+    onData?: (payload: TFormData<T>) => void;
+    onSubmit?: (payload: TFormValues<T>) => void;
 };
 export { TFieldWrapper, TEventProps, TEventsCallbackProps, TFormData };