@bolttech/form-engine 3.1.2-beta.3 → 3.1.2-beta.5

package/README.md

@@ -1232,6 +1232,7 @@ Props:
 | 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 |
+| initialElements   | number                                                    | elements to be pre-rendered when the form is presented                     |
 | 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                  |

package/index.esm.js

@@ -2808,12 +2808,10 @@ function useFormGroup({
   return;
 }
 
-const REPEATER_FOOTER_ID = 'repeaterFooter';
 /**
- * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
- * it won't rely on them and needs to be manually declared
+ * Adapter do manage repeated list elements on form
  *
- * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @param {TAsFormFieldRepeaterProps} props Repeater properties to configure the elements repeater
  * @returns {ReactElement}
  */
 const AsFormFieldRepeater = ({
@@ -2821,6 +2819,7 @@ const AsFormFieldRepeater = ({
   addFieldName,
   removeFieldName,
   existingElements,
+  initialElements,
   stateUpdater,
   formPrefix,
   RepeaterFooter
@@ -2829,9 +2828,10 @@ const AsFormFieldRepeater = ({
     getForm,
     formGroupInstance
   } = useFormGroupContext();
-  const [elements, setElements] = useState(existingElements ? Object.keys(existingElements).map(() => uniqueIdGen()) : [uniqueIdGen()]);
+  const [elements, setElements] = useState(typeof existingElements === 'object' && existingElements !== null ? Object.keys(existingElements).map(() => uniqueIdGen()) : typeof initialElements === 'number' ? Array.from(Array(initialElements), () => uniqueIdGen()) : []);
   const mountedRef = useRef(false);
   const prevElements = useRef(0);
+  const REPEATER_FOOTER_ID = useMemo(() => uniqueIdGen(), []);
   const listeningElements = useMemo(() => {
     return [...elements, REPEATER_FOOTER_ID];
   }, [elements]);
@@ -2881,6 +2881,13 @@ const AsFormFieldRepeater = ({
           fieldInstance
         }) {
           if (fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex) {
+            if (event === 'ON_FIELD_CLICK' && fieldInstance.formIndex === REPEATER_FOOTER_ID) {
+              setElements(prev => {
+                prev.push(uniqueIdGen());
+                return [...prev];
+              });
+              return;
+            }
             if (event === 'ON_FIELD_CLICK' && fieldName === addFieldName) {
               setElements(prev => {
                 const index = prev.indexOf(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex);
@@ -2889,18 +2896,12 @@ const AsFormFieldRepeater = ({
               });
             }
             if (event === 'ON_FIELD_CLICK' && fieldName === removeFieldName) {
-              if ((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex) && elements.length > 1) setElements(prev => {
+              if ((fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex) && elements.length > 0) setElements(prev => {
                 const index = prev.indexOf(fieldInstance === null || fieldInstance === void 0 ? void 0 : fieldInstance.formIndex);
                 prev.splice(index, 1);
                 return [...prev];
               });
             }
-            if (event === 'ON_FIELD_CLICK' && fieldInstance.formIndex === REPEATER_FOOTER_ID) {
-              setElements(prev => {
-                prev.push(uniqueIdGen());
-                return [...prev];
-              });
-            }
           }
         }
       });
@@ -2916,8 +2917,9 @@ const AsFormFieldRepeater = ({
       display: 'flex',
       flexDirection: 'column'
     },
-    children: [elements.map(el => jsx(RepeaterComponent, {
-      formIndex: el
+    children: [elements.map((el, index) => jsx(RepeaterComponent, {
+      formIndex: el,
+      index: index
     }, el)), RepeaterFooter && jsx(RepeaterFooter, {
       formIndex: REPEATER_FOOTER_ID
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.2-beta.3",
+  "version": "3.1.2-beta.5",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",

package/src/components/AsFormFieldRepeater/AsFormFieldRepeater.d.ts

@@ -1,23 +1,10 @@
-import { ElementType, ReactNode } from 'react';
-import { TFormGroupOnDataEventPayload } from '@bolttech/form-engine-core';
+import { ReactNode } from 'react';
+import { TAsFormFieldRepeaterProps } from './AsFormFieldRepeater.type';
 /**
- * Component Wrapper to render form fields without the Form component, gets additional formId and mapper since
- * it won't rely on them and needs to be manually declared
+ * Adapter do manage repeated list elements on form
  *
- * @param {TAsFormFieldBuilderProps} props JSON schema props along with FieldWrapper props and mapper props
+ * @param {TAsFormFieldRepeaterProps} props Repeater properties to configure the elements repeater
  * @returns {ReactElement}
  */
-declare const AsFormFieldRepeater: ({ RepeaterComponent, addFieldName, removeFieldName, existingElements, stateUpdater, formPrefix, RepeaterFooter, }: {
-    RepeaterComponent: ElementType<{
-        formIndex: string;
-    }>;
-    addFieldName?: string | undefined;
-    removeFieldName?: string | undefined;
-    existingElements?: Record<string, unknown>[] | undefined;
-    stateUpdater?: ((payload: TFormGroupOnDataEventPayload<unknown>) => void) | undefined;
-    formPrefix?: string | undefined;
-    RepeaterFooter: ElementType<{
-        formIndex: string;
-    }>;
-}) => ReactNode;
+declare const AsFormFieldRepeater: ({ RepeaterComponent, addFieldName, removeFieldName, existingElements, initialElements, stateUpdater, formPrefix, RepeaterFooter, }: TAsFormFieldRepeaterProps) => ReactNode;
 export default AsFormFieldRepeater;

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

@@ -0,0 +1,34 @@
+import { TFormGroupOnDataEventPayload } from '@bolttech/form-engine-core';
+import { OneOf } from '@bolttech/form-engine-core/src/types/utility';
+import { ElementType } from 'react';
+type TRepeaterProps = {
+    formIndex: string;
+    index: number;
+};
+type TRepeaterFooterProps = Pick<TRepeaterProps, 'formIndex'>;
+/**
+ * AsFormFieldRepeater props needed to build a repeater to build forms
+ * @property {ElementType<TRepeaterProps>} RepeaterComponent element to use as repeater
+ * @property {string} addFieldName field name button that will add an element on a position on a repeater
+ * @property {string} removeFieldName field name button that will remove an element on a position on a repeater
+ * @property {Record<string, unknown>[]} existingElements elements to restore a repeater list
+ * @property {number} initialElements elements to be pre-rendered when the form is presented
+ * @property {(payload: TFormGroupOnDataEventPayload<unknown>) => void} stateUpdater similar to onData for the group of form managed by the repeater
+ * @property {string} formPrefix prefix to use on the repeated forms ex: (person- will go person-1, person-2, ...)
+ * @property {ElementType<TRepeaterFooterProps>} RepeaterFooter component with a button that will add an element to the bottom of the list
+ * @see {@link TMapper}
+ * @see {@link IComponentSchema}
+ * @see {@link TFieldWrapper}
+ */
+type TAsFormFieldRepeaterProps = {
+    RepeaterComponent: ElementType<TRepeaterProps>;
+    addFieldName?: string;
+    removeFieldName?: string;
+    stateUpdater?: (payload: TFormGroupOnDataEventPayload<unknown>) => void;
+    formPrefix?: string;
+    RepeaterFooter: ElementType<TRepeaterFooterProps>;
+} & OneOf<{
+    existingElements?: Record<string, unknown>[];
+    initialElements?: number;
+}>;
+export type { TAsFormFieldRepeaterProps, TRepeaterProps, TRepeaterFooterProps };