@bolttech/form-engine 3.0.0-beta.11 → 3.0.0-beta.13

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FormGroup, FormCore } from '@bolttech/form-engine-core';
-import { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, Children, Suspense } from 'react';
+import { createContext, useRef, useContext, useState, useEffect, useCallback, useMemo, Suspense, Children } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1624,6 +1624,12 @@ const FormGroupContextProvider = ({
   debugMode: _debugMode = false
 }) => {
   const formGroupInstance = useRef(new FormGroup());
+  const addFormWithIndex = index => {
+    formGroupInstance.current.createFormWithIndex({
+      index,
+      mappers
+    });
+  };
   const addForm = ({
     key,
     formInstance
@@ -1640,6 +1646,9 @@ const FormGroupContextProvider = ({
       key
     });
   };
+  const removeField = payload => {
+    formGroupInstance.current.removeField(payload);
+  };
   const getForm = ({
     key
   }) => formGroupInstance.current.getForm({
@@ -1652,9 +1661,11 @@ const FormGroupContextProvider = ({
     return formGroupInstance.current.submitMultipleFormsByIndex(indexes);
   };
   const contextValue = {
+    addFormWithIndex,
     addForm,
     getForm,
     removeForm,
+    removeField,
     mappers,
     formGroupInstance: formGroupInstance.current,
     printFormGroupInstance,
@@ -1679,12 +1690,29 @@ const useFormGroupContext = () => {
   return context;
 };
 
+const FieldWrapperComponentRender = ({
+  props,
+  fieldInstance,
+  children
+}) => {
+  const Component = fieldInstance.mapper.component;
+  const Asynccomponent = fieldInstance.mapper.asynccomponent;
+  if (Component) return jsx(Component, Object.assign({}, props, {
+    children: children && children
+  }));
+  if (Asynccomponent) return jsx(Suspense, {
+    children: jsx(Asynccomponent, Object.assign({}, props, {
+      children: children && children
+    }))
+  });
+  return jsx("div", {
+    children: `failed to render field ${fieldInstance.name} with ${fieldInstance.mapper.componentName}, please check mappers`
+  });
+};
 const FieldWrapper = ({
   index,
-  Component,
   formKey,
-  children,
-  events
+  children
 }) => {
   var _a;
   const {
@@ -1737,6 +1765,7 @@ const FieldWrapper = ({
     });
   }, []);
   const mapProps = useMemo(() => {
+    const events = fieldInstance.mapper.events;
     const props = {};
     if (events === null || events === void 0 ? void 0 : events.onBlur) props[events.onBlur] = () => handleEvent('ON_FIELD_BLUR');
     if (events === null || events === void 0 ? void 0 : events.getValue) props[events.getValue] = handleChange;
@@ -1746,9 +1775,12 @@ const FieldWrapper = ({
     if (events === null || events === void 0 ? void 0 : events.onKeyDown) props[events.onKeyDown] = () => handleEvent('ON_FIELD_KEYDOWN');
     return props;
   }, []);
-  const mapValue = useMemo(() => (events === null || events === void 0 ? void 0 : events.setValue) ? {
-    [events.setValue]: valueState
-  } : {}, [valueState]);
+  const mapValue = useMemo(() => {
+    const events = fieldInstance.mapper.events;
+    return (events === null || events === void 0 ? void 0 : events.setValue) ? {
+      [events.setValue]: valueState
+    } : {};
+  }, [valueState]);
   return (state === null || state === void 0 ? void 0 : state.visibility) ? jsxs(Fragment, {
     children: [debugMode && jsxs(Fragment, {
       children: [jsx("b", {
@@ -1758,9 +1790,11 @@ const FieldWrapper = ({
         },
         children: index
       }), jsx("br", {}), jsx("hr", {})]
-    }), jsx(Component, Object.assign({}, state === null || state === void 0 ? void 0 : state.props, mapProps, mapValue, {
+    }), jsx(FieldWrapperComponentRender, {
+      props: Object.assign(Object.assign(Object.assign({}, state.props), mapProps), mapValue),
+      fieldInstance: fieldInstance,
       children: children && children
-    }))]
+    })]
   }) : jsx(Fragment, {});
 };
 
@@ -1772,31 +1806,17 @@ const BuildTree = ({
   return Array.from(fields).filter(([, value]) => {
     return value.path === prevPath;
   }).map(([, value]) => {
-    var _a;
     const fieldName = value.name;
-    const mapper = (_a = fields.get(fieldName)) === null || _a === void 0 ? void 0 : _a.mapper;
     const children = BuildTree({
       fields,
       prevPath: `${prevPath ? `${prevPath}.` : ``}${value.name}`,
       formKey
     });
     const lenght = Children.count(children);
-    return mapper && mapper.asynccomponent ? jsx(Suspense, {
-      children: jsx(FieldWrapper, {
-        Component: mapper.asynccomponent,
-        index: fieldName,
-        events: mapper.events,
-        formKey: formKey,
-        children: lenght > 0 ? children : null
-      })
-    }, fieldName) : mapper && mapper.component ? jsx(FieldWrapper, {
-      Component: mapper.component,
+    return jsx(FieldWrapper, {
       index: fieldName,
-      events: mapper.events,
       formKey: formKey,
       children: lenght > 0 ? children : null
-    }, fieldName) : jsx("div", {
-      children: `failed to render field: ${fieldName} on tree, check mappers.. :(`
     });
   });
 };
@@ -1939,4 +1959,34 @@ const AsFormField = props => {
   });
 };
 
-export { AsFormField, Form, FormGroupContext, FormGroupContextProvider, useFormGroupContext };
+const AsFormFieldBuilder = props => {
+  const {
+    formGroupInstance,
+    addFormWithIndex,
+    removeField
+  } = useFormGroupContext();
+  const [field, setField] = useState(jsx(Fragment, {}));
+  useEffect(() => {
+    var _a;
+    if (!formGroupInstance.forms.has(props.formIndex)) {
+      addFormWithIndex(props.formIndex);
+    }
+    const fieldInstanceProps = Object.assign(Object.assign({}, props), {
+      children: undefined
+    });
+    (_a = formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.addField(fieldInstanceProps);
+    const field = jsx(FieldWrapper, {
+      formKey: props.formIndex,
+      index: props.name,
+      children: props.children && props.children
+    });
+    setField(field);
+    return () => removeField({
+      formIndex: props.formIndex,
+      fieldIndex: props.name
+    });
+  }, []);
+  return field;
+};
+
+export { AsFormField, AsFormFieldBuilder, Form, FormGroupContext, FormGroupContextProvider, useFormGroupContext };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.13",
   "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.2",
+    "@bolttech/form-engine-core": "0.0.1-beta.4",
     "react": "18.2.0"
   },
   "peerDependencies": {}

package/src/components/AsFormFieldBuilder/AsFormFieldBuilder.d.ts

@@ -0,0 +1,6 @@
+import { IComponentSchema } from '@bolttech/form-engine-core';
+import { PropsWithChildren, ReactElement } from 'react';
+declare const AsFormFieldBuilder: (props: PropsWithChildren<Omit<IComponentSchema, 'children'> & {
+    formIndex: string;
+}>) => ReactElement;
+export default AsFormFieldBuilder;

package/src/components/FieldWrapper/FieldWrapper.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { TFieldWrapper } from '../../types';
-declare const FieldWrapper: ({ index, Component, formKey, children, events, }: PropsWithChildren<TFieldWrapper>) => ReactElement;
+declare const FieldWrapper: ({ index, formKey, children, }: PropsWithChildren<TFieldWrapper>) => ReactElement;
 export default FieldWrapper;

package/src/components/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Form } from './Form/Form';
 export { default as AsFormField } from './AsFormField/AsFormField';
+export { default as AsFormFieldBuilder } from './AsFormFieldBuilder/AsFormFieldBuilder';

package/src/context/FormGroupContext.d.ts

@@ -1,6 +1,7 @@
 import { FormCore, TFormCore, TFormGroup, TFormValues, TMapper } from '@bolttech/form-engine-core';
 import { ElementType, PropsWithChildren, ReactElement } from 'react';
 type TFormContext = {
+    addFormWithIndex: (index: string) => void;
     addForm: (payload: {
         key: string;
         formInstance: TFormCore;
@@ -11,6 +12,10 @@ type TFormContext = {
     removeForm: (payload: {
         key: string;
     }) => void;
+    removeField: (payload: {
+        formIndex: string;
+        fieldIndex: string;
+    }) => void;
     formGroupInstance: TFormGroup;
     mappers: TMapper<ElementType>[];
     printFormGroupInstance: () => void;

package/src/types/index.d.ts

@@ -1,5 +1,3 @@
-import { TComponentPropsMapping } from '@bolttech/form-engine-core';
-import { ElementType } from 'react';
 /**
  * @type TFieldWrapper
  * Represents the wrapper for a form field, including the component,
@@ -40,8 +38,6 @@ import { ElementType } from 'react';
  */
 type TFieldWrapper = {
     index: string;
-    Component: ElementType;
     formKey: string;
-    events?: TComponentPropsMapping;
 };
 export { TFieldWrapper };