@bolttech/form-engine 3.0.1-beta.4 → 3.0.1-beta.6

package/index.esm.js

@@ -1996,9 +1996,12 @@ const FormGroupContext = /*#__PURE__*/createContext({});
  */
 const IsolatedContext = ({
   debugMode: _debugMode = false,
-  mappers
+  mappers,
+  config
 }) => {
-  const formGroupInstance = useRef(new FormGroup());
+  const formGroupInstance = useRef(new FormGroup({
+    config
+  }));
   const addFormWithIndex = index => {
     formGroupInstance.current.createFormWithIndex({
       index,
@@ -2054,14 +2057,17 @@ const IsolatedContext = ({
 const FormGroupContextProvider = ({
   children,
   mappers,
-  debugMode: _debugMode2 = false
+  debugMode: _debugMode2 = false,
+  config
 }) => {
   const contextValue = IsolatedContext({
     mappers,
-    debugMode: _debugMode2
+    debugMode: _debugMode2,
+    config
   });
   contextValue.debugMode = _debugMode2;
   contextValue.active = true;
+  contextValue.config = config;
   return jsxs(FormGroupContext.Provider, {
     value: contextValue,
     children: [_debugMode2 && jsxs(Fragment, {
@@ -2383,14 +2389,15 @@ const eventsMapping = {
 /**
  * Hook to register events callback functions
  */
-function useForm(_a) {
+function useForm(_a, deps) {
   var {
       id,
       onData,
       onSubmit,
-      onFormMount
+      onFormMount,
+      onValid
     } = _a,
-    rest = __rest(_a, ["id", "onData", "onSubmit", "onFormMount"]);
+    rest = __rest(_a, ["id", "onData", "onSubmit", "onFormMount", "onValid"]);
   const {
     formGroupInstance
   } = useFormGroupContext({});
@@ -2404,22 +2411,24 @@ function useForm(_a) {
   const formValuesCallbackRefs = useRef({
     onData,
     onSubmit,
-    onFormMount
+    onFormMount,
+    onValid
   });
   useEffect(() => {
     formValuesCallbackRefs.current = {
       onData,
       onSubmit,
-      onFormMount
+      onFormMount,
+      onValid
     };
-  }, [onData, onSubmit, onFormMount]);
+  }, [onData, onSubmit, onFormMount, onValid]);
   /**
    * 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
    * reference to avoid events get outdated values
    */
   useEffect(() => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const callback = payload => {
       var _a, _b;
       const eventMapping = eventsMapping[payload.event];
@@ -2432,43 +2441,49 @@ function useForm(_a) {
     })) === null || _a === void 0 ? void 0 : _a.subscribeFieldEvent({
       callback
     });
-    return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
-  }, []);
-  useEffect(() => {
-    var _a, _b, _c;
     const mountCallback = payload => {
       var _a, _b;
       if (formValuesCallbackRefs.current.onMount) {
         (_b = (_a = formValuesCallbackRefs.current).onFormMount) === null || _b === void 0 ? void 0 : _b.call(_a, payload);
       }
     };
-    const mountSub = (_a = formGroupInstance.getForm({
+    const mountSub = (_b = formGroupInstance.getForm({
       key: id
-    })) === null || _a === void 0 ? void 0 : _a.subscribeOnMount(mountCallback);
+    })) === null || _b === void 0 ? void 0 : _b.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 = (_b = formGroupInstance.getForm({
+    const dataSub = (_c = formGroupInstance.getForm({
+      key: id
+    })) === null || _c === void 0 ? void 0 : _c.subscribeData(dataCallback);
+    const validationCallback = payload => {
+      if (formValuesCallbackRefs.current.onValid) {
+        formValuesCallbackRefs.current.onValid(payload);
+      }
+    };
+    const validSub = (_d = formGroupInstance.getForm({
       key: id
-    })) === null || _b === void 0 ? void 0 : _b.subscribeData(dataCallback);
+    })) === null || _d === void 0 ? void 0 : _d.subscribeFormValidation(validationCallback);
     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 = (_c = formGroupInstance.getForm({
+    const submitSub = (_e = formGroupInstance.getForm({
       key: id
-    })) === null || _c === void 0 ? void 0 : _c.subscribeOnSubmit(submitCallback);
+    })) === null || _e === void 0 ? void 0 : _e.subscribeOnSubmit(submitCallback);
     return () => {
+      sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
       mountSub === null || mountSub === void 0 ? void 0 : mountSub.unsubscribe();
       dataSub === null || dataSub === void 0 ? void 0 : dataSub.unsubscribe();
+      validSub === null || validSub === void 0 ? void 0 : validSub.unsubscribe();
       submitSub === null || submitSub === void 0 ? void 0 : submitSub.unsubscribe();
     };
-  }, []);
+  }, [deps]);
   return;
 }
 
@@ -2495,6 +2510,7 @@ function Form({
   onKeyDown,
   onKeyUp,
   onMount,
+  onValid,
   children
 }) {
   const {
@@ -2606,7 +2622,8 @@ function Form({
     onMount,
     onSubmit,
     onFormMount,
-    onData
+    onData,
+    onValid
   });
   /*
     @TODO move this logic inside form-core, add action and method onto form element,
@@ -2860,7 +2877,6 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
  * @returns {ReactElement}
  */
 const AsFormFieldBuilder = props => {
-  var _a, _b;
   const context = useFormGroupContext({});
   /**
    * state to track the field instance creation process
@@ -2872,7 +2888,7 @@ const AsFormFieldBuilder = props => {
    * Also has the logic to remove it once this element is removed
    */
   useEffect(() => {
-    var _a, _b, _c, _d;
+    var _a;
     if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {
       context.addFormWithIndex(props.formIndex);
     }
@@ -2888,20 +2904,6 @@ const AsFormFieldBuilder = props => {
     const field = formInstance === null || formInstance === void 0 ? void 0 : formInstance.getField({
       key: props.name
     });
-    /* This line is only for scenario that we have value by the component props */
-    if (((_b = props.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) && props.props) {
-      field === null || field === void 0 ? void 0 : field.emitValue({
-        value: props.props[props.mapper.events.setValue],
-        event: 'ON_FIELD_MOUNT'
-      });
-    }
-    /* This line is only for scenario that we have value by the instanced form (initialValues) */
-    if ((_c = formInstance === null || formInstance === void 0 ? void 0 : formInstance.initialValues) === null || _c === void 0 ? void 0 : _c[props.nameToSubmit || props.name]) {
-      field === null || field === void 0 ? void 0 : field.emitValue({
-        value: (_d = formInstance.initialValues) === null || _d === void 0 ? void 0 : _d[props.nameToSubmit || props.name],
-        event: 'ON_FIELD_MOUNT'
-      });
-    }
     if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
       field.visibility = props.visibility;
     }
@@ -2949,31 +2951,6 @@ const AsFormFieldBuilder = props => {
     });
     return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
   }, [props.onSelected]);
-  /**
-   * allows to control field visibility as a controlled component
-   */
-  useEffect(() => {
-    var _a;
-    if (!mounted) return;
-    const field = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(props.name);
-    if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
-      field.visibility = props.visibility;
-    }
-  }, [mounted, props.visibility]);
-  /**
-   * allows to control field value as a controlled component
-   */
-  useEffect(() => {
-    var _a, _b, _c, _d;
-    if (!mounted) return;
-    const field = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(props.name);
-    if (((_b = props.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) && ((_c = props.props) === null || _c === void 0 ? void 0 : _c[props.mapper.events.setValue]) && field) {
-      field === null || field === void 0 ? void 0 : field.emitValue({
-        value: (_d = props.props) === null || _d === void 0 ? void 0 : _d[props.mapper.events.setValue],
-        event: 'ON_FIELD_CHANGE'
-      });
-    }
-  }, [mounted, (_a = props.props) === null || _a === void 0 ? void 0 : _a[((_b = props.mapper.events) === null || _b === void 0 ? void 0 : _b.setValue) || 'value']]);
   return mounted ? jsx(FieldWrapper, {
     formIndex: props.formIndex,
     name: props.name,
@@ -2986,17 +2963,21 @@ const AsFormFieldBuilder = props => {
 // @TODO implement onSubmitGroup
 const useFormGroup = ({
   ids,
-  onData
-  //   onSubmit,
-}) => {
+  onData,
+  onValid
+}, deps) => {
   const {
     formGroupInstance
   } = useFormGroupContext({});
   const onDataCallbackRef = useRef(onData);
+  const onValidCallbackRef = useRef(onValid);
   //   const onSubmitCallbackRef = useRef(onSubmit);
   useEffect(() => {
     onDataCallbackRef.current = onData;
   }, [onData]);
+  useEffect(() => {
+    onValidCallbackRef.current = onValid;
+  }, [onValid]);
   //   useEffect(() => {
   //     onSubmitCallbackRef.current = onSubmit;
   //   }, [onSubmit]);
@@ -3011,6 +2992,15 @@ const useFormGroup = ({
       ids,
       callback: onDataCallback
     });
+    const onValidCallback = payload => {
+      if (onValidCallbackRef.current) {
+        onValidCallbackRef.current(payload);
+      }
+    };
+    const onValidSub = formGroupInstance.onValidSubscription({
+      ids,
+      callback: onValidCallback
+    });
     // const onSubmitCallback = (
     //   payload: TFormValues<Record<string, unknown>>
     // ) => {
@@ -3020,8 +3010,9 @@ const useFormGroup = ({
     // };
     return () => {
       onDataSub.unsubscribe();
+      onValidSub.unsubscribe();
     };
-  }, []);
+  }, [deps]);
   return;
 };
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.1-beta.04",
+  "version": "3.0.1-beta.6",
   "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.2-beta.04",
+    "@bolttech/form-engine-core": "0.0.2-beta.6",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },

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 function Form<T>({ schema, index, initialValues, iVars, action, method, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, children, }: TFormProps<T>): ReactElement;
+declare function Form<T>({ schema, index, initialValues, iVars, action, method, onSubmit, onFormMount, onData, onBlur, onChange, onApiResponse, onClick, onFocus, onKeyDown, onKeyUp, onMount, onValid, children, }: TFormProps<T>): ReactElement;
 export default Form;

package/src/context/FormGroupContext.d.ts

@@ -7,7 +7,7 @@ declare const FormGroupContext: import("react").Context<TFormContext>;
  * @param {PropsWithChildren<TFormContextProvider>} param context parameters
  * @returns {ReactElement}
  */
-declare const FormGroupContextProvider: ({ children, mappers, debugMode, }: PropsWithChildren<TFormContextProvider>) => ReactElement;
+declare const FormGroupContextProvider: ({ children, mappers, debugMode, config, }: PropsWithChildren<TFormContextProvider>) => ReactElement;
 /**
  * FormGroup context hook to handle context or isolated context implementations
  *

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

@@ -1,4 +1,4 @@
-import { FormCore, TFormCore, TFormGroup, TMapper } from '@bolttech/form-engine-core';
+import { FormCore, TFormCore, TFormGroup, TMapper, TSchemaFormConfig } from '@bolttech/form-engine-core';
 import { ElementType } from 'react';
 /**
  * Represents the context for managing forms within a form group.
@@ -32,6 +32,7 @@ type TFormContext = {
     submitMultipleFormsByIndex: (indexes: string[]) => void;
     debugMode: boolean;
     active: boolean;
+    config?: TSchemaFormConfig;
 };
 /**
  * Represents the props for a form context provider.
@@ -42,5 +43,6 @@ type TFormContext = {
 type TFormContextProvider = {
     mappers?: TMapper<ElementType>[];
     debugMode?: boolean;
+    config?: TSchemaFormConfig;
 };
 export type { TFormContext, TFormContextProvider };

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { TUseFormProps } from './useForm.type';
 /**
  * Hook to register events callback functions
  */
-declare function useForm<T>({ id, onData, onSubmit, onFormMount, ...rest }: TUseFormProps<T>): void;
+declare function useForm<T>({ id, onData, onSubmit, onFormMount, onValid, ...rest }: TUseFormProps<T>, deps?: React.DependencyList): void;
 export default useForm;

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

@@ -1,10 +1,7 @@
-import { TFormValues } from '@bolttech/form-engine-core';
-declare const useFormGroup: ({ ids, onData, }: {
+import { TFormGroupOnDataEventPayload, TFormGroupOnValidEventPayload } from '@bolttech/form-engine-core';
+declare const useFormGroup: ({ ids, onData, onValid, }: {
     ids: string[];
-    onData: (payload: Record<string, {
-        formId: string;
-        formField: string;
-        values?: TFormValues<Record<string, unknown>>;
-    }>) => void;
-}) => void;
+    onData?: ((payload: TFormGroupOnDataEventPayload<Record<string, unknown>>) => void) | undefined;
+    onValid?: ((payload: TFormGroupOnValidEventPayload) => void) | undefined;
+}, deps?: React.DependencyList) => void;
 export default useFormGroup;

package/src/types/index.d.ts

@@ -1,4 +1,4 @@
-import { TFieldEvent, TFormValues } from '@bolttech/form-engine-core';
+import { TFieldEvent, TFormValidationPayload, TFormValues } from '@bolttech/form-engine-core';
 /**
  * Represents a field wrapper containing the name of the field and its index in the form.
  *
@@ -27,5 +27,6 @@ type TEventsCallbackProps<T> = Partial<Record<TEventProps, ((payload: TFieldEven
     onFormMount?: (payload: TFormValues<T>) => void;
     onData?: (payload: TFormData<T>) => void;
     onSubmit?: (payload: TFormValues<T>) => void;
+    onValid?: (payload: TFormValidationPayload) => void;
 };
 export { TFieldWrapper, TEventProps, TEventsCallbackProps, TFormData };