@bolttech/form-engine 3.0.2-beta.5 → 3.0.2-beta.7

package/README.md

@@ -1108,10 +1108,11 @@ useFormGroup({ ids: ['form1', 'form2'], onData: (payload) => console.log(payload
 
 As `useForm`, `useFormGroup` serves the same purpose, but the difference is that it handles multiple forms and has limited callback functions to set:
 
-| method  | payload                         | description                                                |
-| ------- | ------------------------------- | ---------------------------------------------------------- |
-| onData  | TFormGroupOnDataEventPayload<T> | event occuring when a value is changing via input or logic |
-| onValid | TFormGroupOnValidEventPayload   | event occuring when validation status changes on the form  |
+| method   | payload                           | description                                                 |
+|----------|-----------------------------------|-------------------------------------------------------------|
+| onData   | TFormGroupOnDataEventPayload<T>   | event occurring when a value is changing via input or logic |
+| onValid  | TFormGroupOnValidEventPayload     | event occurring when validation status changes on the form  |
+| onSubmit | TFormGroupOnSubmitEventPayload<T> | event occurring when form submission is trigger             |
 
 <a id="asformfield"></a>
 

package/index.esm.js

@@ -2955,27 +2955,27 @@ const AsFormFieldBuilder = props => {
   }) : jsx(Fragment, {});
 };
 
-// @TODO implement onSubmitGroup
-const useFormGroup = ({
+function useFormGroup({
   ids,
   onData,
-  onValid
-}, deps) => {
+  onValid,
+  onSubmit
+}, deps) {
   const {
     formGroupInstance
   } = useFormGroupContext({});
   const onDataCallbackRef = useRef(onData);
   const onValidCallbackRef = useRef(onValid);
-  //   const onSubmitCallbackRef = useRef(onSubmit);
+  const onSubmitCallbackRef = useRef(onSubmit);
   useEffect(() => {
     onDataCallbackRef.current = onData;
   }, [onData]);
   useEffect(() => {
     onValidCallbackRef.current = onValid;
   }, [onValid]);
-  //   useEffect(() => {
-  //     onSubmitCallbackRef.current = onSubmit;
-  //   }, [onSubmit]);
+  useEffect(() => {
+    onSubmitCallbackRef.current = onSubmit;
+  }, [onSubmit]);
   useEffect(() => {
     const onDataCallback = payload => {
       var _a;
@@ -2996,20 +2996,24 @@ const useFormGroup = ({
       ids,
       callback: onValidCallback
     });
-    // const onSubmitCallback = (
-    //   payload: TFormValues<Record<string, unknown>>
-    // ) => {
-    //   if (onSubmitCallbackRef.current) {
-    //     onSubmitCallbackRef.current?.(payload);
-    //   }
-    // };
+    const onSubmitCallback = payload => {
+      var _a;
+      if (onSubmitCallbackRef.current) {
+        (_a = onSubmitCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(onSubmitCallbackRef, payload);
+      }
+    };
+    const onSubmitSub = formGroupInstance.onSubmitSubscription({
+      ids,
+      callback: onSubmitCallback
+    });
     return () => {
       onDataSub.unsubscribe();
       onValidSub.unsubscribe();
+      onSubmitSub.unsubscribe();
     };
   }, [deps]);
   return;
-};
+}
 
 const defaultChangeEvent = event => {
   return event.currentTarget.value;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.2-beta.5",
+  "version": "3.0.2-beta.7",
   "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.3-beta.5",
+    "@bolttech/form-engine-core": "0.0.3-beta.6",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },

package/src/hooks/useFormGroup/useFormGroup.d.ts

@@ -1,7 +1,4 @@
-import { TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
-declare const useFormGroup: ({ ids, onData, onValid, }: {
-    ids: string[];
-    onData?: ((payload: TFormGroupOnDataEventPayload<Record<string, unknown>>) => void) | undefined;
-    onValid?: ((payload: TFormGroupOnValidEventPayload) => void) | undefined;
-}, deps?: React.DependencyList) => void;
+/// <reference types="react" />
+import { TUseFormGroup } from './useFormGroup.type';
+declare function useFormGroup<T>({ ids, onData, onValid, onSubmit }: TUseFormGroup<T>, deps?: React.DependencyList): void;
 export default useFormGroup;

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

@@ -0,0 +1,17 @@
+import { TFormGroupOnDataEventPayload, TFormGroupOnSubmitEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
+/**
+ * Represents the properties for the useFormGroup hook, including a list of ID's and event callback properties.
+ *
+ * @property {string} ids - The unique identifier for the forms.
+ * @property {payload: TFormGroupOnDataEventPayload<T>} onData - callback event occurring when a value is changing via input or logic.
+ * @property {payload: TFormGroupOnValidEventPayload} onData - callback event occurring when validation status changes on the form.
+ * @property {payload: TFormGroupOnSubmitEventPayload<T>} onData - event occurring when form submission is trigger.
+ *
+ */
+type TUseFormGroup<T> = {
+    ids: string[];
+    onData?: (payload: TFormGroupOnDataEventPayload<T>) => void;
+    onValid?: (payload: TFormGroupOnValidEventPayload) => void;
+    onSubmit?: (payload: TFormGroupOnSubmitEventPayload<T>) => void;
+};
+export type { TUseFormGroup };