@bolttech/form-engine 3.1.2-beta.0 → 3.1.2-beta.2

package/README.md

@@ -17,7 +17,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 6. [schema components](#schema-components)
 
 - 6.1 [formatters](#formatters)
-- 6.2 [masks] (#masks)
+- 6.2 [masks](#masks)
 - 6.3 [nameToSubmit](#nametosubmit)
 - 6.4 [props](#props)
 - 6.5 [validations](#validations)
@@ -37,6 +37,7 @@ This is an adapter to be used with the bolttech form engine. Compatible with Nex
 
 9. [AsFormField](#asformfield)
 10. [AsFormFieldBuilder](#asformfieldbuilder)
+11. [AsFormFieldRepeater](#asformfieldrepeater)
 
 <a id="sample"></a>
 
@@ -1187,3 +1188,109 @@ Other than schema component properties like `validations`, `api`, etc.., it has
 | name      | string     | field name to be identified on the form                                                                                  |
 | formIndex | string     | index of the form to be identified on the formGroup                                                                      |
 | component | string     | if mappers is provided from the formgroup context, you can assign the mapper by it's name instead of whole mapper config |
+
+<a id="asformfieldrepeater"></a>
+
+## **AsFormFieldRepeater**
+
+Component adapter to aid managing multiple forms that shares the same inputs
+
+Props:
+
+| Attr                        | Type                                                      |Description                                                                 |
+| --------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------- |
+| RepeaterComponent           | ElementType<{ formIndex: string }>                        | Component with form schema or AsFormFieldBuilder elements                  |
+| addFieldName                | string                                                    | name of the button in the RepeaterComponent to add forms                   |
+| removeFieldName             | string                                                    | name of the button in the RepeaterComponent to remove forms                |
+| existingElements            | Record<string, unknown>[]                                 | existing values emmitted from stateUpdater to restore previous used values |
+| stateUpdater                | (payload: TFormGroupOnDataEventPayload<unknown>) => void; | callback function that reacts to RepeaterComponet values changes           |
+| formPrefix                  | string                                                    | prefix for form names ex, prefix: foo, forms: ["foo1","foo2","foo3"]       |
+| RepeaterFooter              | ElementType<{ formIndex: string }>                        | Component with a button to add forms on the last position                  |
+
+Common use case for this Adapter is to manage multiple forms that collects the same data ex: multiple person personal data
+
+# Example
+
+## RepeaterComponent
+
+```javascript
+const FormElement = ({ formIndex }: { formIndex: string }) => {
+  return (
+    <>
+      <AsFormFieldBuilder formIndex={formIndex} name="foo" component="input" props={{ label: 'foo' }} />
+      <AsFormFieldBuilder formIndex={formIndex} name="bar" component="input" props={{ label: 'bar' }} />
+      <AsFormFieldBuilder
+        formIndex={formIndex}
+        name="addForm"
+        component="button"
+        props={{
+          text: 'add element',
+        }}
+      />
+      <AsFormFieldBuilder
+        formIndex={formIndex}
+        name="removeForm"
+        component="button"
+        props={{
+          text: 'remove element',
+        }}
+      />
+    </>
+  );
+};
+```
+
+Important notes when developing this component is that it needs to receive an object with a key **formIndex**
+
+Optionally, but to add form management functionality, add two buttons with **ON_FIELD_CLICK** event capture (can't be of type submit)
+both that Field button names will be needed on the next step
+
+## RepeaterFooter
+
+Optionally, you can develop a footer component with a button that will be added the bottom of the repeated forms
+and when you press that button will add a form at the bottom of the list
+
+It's props needs to be an objet with a **formIndex** key, the button needs to have **ON_FIELD_CLICK** event capture (can't be of type submit)
+Note: the button name needs to be different from the names you gave to the buttons you are passing on the RepeaterComponent
+
+```javascript
+const FormElementFooter = ({ formIndex }: { formIndex: string }) => {
+  return (
+    <AsFormFieldBuilder
+      formIndex={formIndex}
+      name="addFormBelow"
+      component="button"
+      props={{
+        text: 'add element below',
+      }}
+    />
+  );
+};
+```
+
+## AsFormFieldRepeater
+
+Set the AsFormFieldRepeater adapter with the element you created above and the names that you gave to the button fields
+
+```javascript
+<AsFormFieldRepeater
+  RepeaterComponent={FormElement}
+  RepeaterFooter={FormElementFooter}
+  addFieldName="addForm"
+  removeFieldName="removeForm"
+  formPrefix="insured"
+  stateUpdater={(payload) => {
+    console.log(payload);
+  }}
+/>
+```
+
+**RepeaterComponent** and **RepeaterFooter** you set the elements created above
+
+**addFieldName** you set the name to the button that will add a form on the position it's being clicked
+
+**removeFieldName** you set the name to the button that will remove a form on the position it's being clicked
+
+**formPrefix** the prefix for the forms emmited on **stateUpdater** enumerated
+
+**stateUpdater** callback function that will receive the form values (similar to onData)

package/index.esm.js

@@ -2357,14 +2357,14 @@ function Form({
         },
         children: "try submit"
       }), jsx("br", {}), jsx("hr", {})]
-    }), jsx("form", {
+    }), jsxs("form", {
       onSubmit: handleSubmit,
-      children: jsx(BuildSchemaAsFields, {
+      children: [jsx(BuildSchemaAsFields, {
         formIndex: schemaIndex,
         mappers: mappers,
         components: schema === null || schema === void 0 ? void 0 : schema.components,
         mountedForm: mounted
-      })
+      }), children]
     })]
   });
 }
@@ -2429,6 +2429,7 @@ const FieldWrapper = ({
 }) => {
   var _a, _b, _c, _d;
   const localContext = useFormGroupContext({});
+  const fieldMapper = mapper || ((_a = localContext.mappers) === null || _a === void 0 ? void 0 : _a.find(mapper => mapper.componentName === component));
   /**
    * picks the right context prioritizing the context passed as prop
    */
@@ -2456,7 +2457,7 @@ const FieldWrapper = ({
     return returnProps;
   }, [props]);
   const [valueState, setValueState] = useState((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.stateValue) || {
-    [((_a = mapper === null || mapper === void 0 ? void 0 : mapper.events) === null || _a === void 0 ? void 0 : _a.setValue) || 'value']: ''
+    [((_b = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.events) === null || _b === void 0 ? void 0 : _b.setValue) || 'value']: ''
   });
   const [state, setState] = useState({
     visibility: typeof visibility === 'boolean' ? visibility : true,
@@ -2516,7 +2517,7 @@ const FieldWrapper = ({
    * to the corresponding prop defined on the mappers
    */
   const mapProps = useMemo(() => {
-    const events = mapper === null || mapper === void 0 ? void 0 : mapper.events;
+    const events = fieldMapper === null || fieldMapper === void 0 ? void 0 : fieldMapper.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;
@@ -2545,7 +2546,7 @@ const FieldWrapper = ({
           padding: '0px',
           margin: '0px'
         },
-        children: ["order:", (_b = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.originalSchema) === null || _b === void 0 ? void 0 : _b.order]
+        children: ["order:", (_c = fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.originalSchema) === null || _c === void 0 ? void 0 : _c.order]
       }), jsxs("b", {
         style: {
           padding: '0px',
@@ -2556,7 +2557,7 @@ const FieldWrapper = ({
     }), jsx(FieldWrapperComponentRender, {
       props: Object.assign(Object.assign(Object.assign(Object.assign({}, mapProps), state.props), state.errors), valueState),
       fieldInstance: fieldInstance,
-      mapper: mapper || ((_c = localContext.mappers) === null || _c === void 0 ? void 0 : _c.find(mapper => mapper.componentName === component)),
+      mapper: fieldMapper,
       children: children ? children : ((_d = state === null || state === void 0 ? void 0 : state.props) === null || _d === void 0 ? void 0 : _d.children) ? state === null || state === void 0 ? void 0 : state.props.children : null
     })]
   }) : jsx(Fragment, {});

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.2-beta.0",
+  "version": "3.1.2-beta.2",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "1.0.2-beta.0",
+    "@bolttech/form-engine-core": "1.0.2-beta.2",
     "react": "18.2.0"
   },
   "peerDependencies": {}