Allows actions on collection before registration + fix form.collectio…

…n types (#230) * allows to actions on collection before registration * manage collection of primitive type * fix form collection types * update collection tests
BearStudio · Oct 9, 2024 · 607d1e7 · 607d1e7
1 parent 4211292
commit 607d1e7
Show file tree

Hide file tree

Showing 9 changed files with 379 additions and 193 deletions.
diff --git a/apps/examples/cypress/e2e/collection.cy.ts b/apps/examples/cypress/e2e/collection.cy.ts
@@ -92,17 +92,24 @@ describe("Collection", () => {
     cy.field("members[1].company").hasValue("Initial Company (2)");
   });
 
-  it("Default values", () => {
+  it("Mounted/Unmounted collection", () => {
     cy.get("button").contains("Display").click();
 
-    cy.field("conditioned[0]").hasValue("default value");
-    cy.field("conditioned[1]").should("not.exist");
+    cy.field("conditioned[0]").hasValue("Initial value (1)");
+    cy.field("conditioned[1]").hasValue("Initial value (2)");
+    cy.field("conditioned[2]").should("not.exist");
 
     cy.get("button").contains("Add item").click();
 
-    cy.field("conditioned[1]").should("exist");
+    cy.field("conditioned[2]").should("exist");
 
-    cy.get("button").contains("Reset form").click();
+    cy.get("button").contains("Hide").click();
+
+    cy.field("conditioned[0]").should("not.exist");
+
+    cy.get("button").contains("Display").click();
+
+    cy.field("conditioned[0]").hasValue("Default value");
     cy.field("conditioned[1]").should("not.exist");
   });
 
@@ -121,19 +128,6 @@ describe("Collection", () => {
     cy.field("members[1].company").hasValue("Initial Company (2)");
   });
 
-  it("Unmounted collection", () => {
-    cy.get('[data-test="conditioned[0]"').should("not.exist");
-
-    cy.get("button").contains("Display").click();
-    cy.get("button").contains("Add item").click();
-
-    cy.field("conditioned[0]").should("exist");
-
-    cy.get("button").contains("Hide").click();
-
-    cy.get('[data-test="conditioned[0]"').should("not.exist");
-  });
-
   it("Managed from form collection", () => {
     cy.field("items[0]").should("not.exist");
 

diff --git a/apps/examples/src/pages/collection.tsx b/apps/examples/src/pages/collection.tsx
@@ -28,6 +28,7 @@ const INITIAL_VALUES = {
     { company: "Initial Company (1)" },
     { name: "Initial Name (2)", company: "Initial Company (2)" },
   ],
+  conditioned: ["Initial value (1)", "Initial value (2)"],
 };
 
 type FormValues = any;
@@ -290,7 +291,7 @@ const Collection = () => {
 
 const ConditionedCollection = () => {
   const conditionedCollection = useCollection("conditioned", {
-    defaultValue: ["default value"],
+    defaultValue: ["Default value"],
   });
 
   return (

diff --git a/packages/formiz-core/src/selectors.ts b/packages/formiz-core/src/selectors.ts
@@ -8,6 +8,7 @@ import type {
   DefaultFormValues,
   useFormProps,
 } from "@/types";
+import { useCollection, UseCollectionValues } from "@/useCollection";
 import {
   getFormIsValid,
   getFormIsPristine,
@@ -55,25 +56,42 @@ export const formInterfaceSelector = <
     goToNextStep: state.actions.goToNextStep,
     goToPreviousStep: state.actions.goToPreviousStep,
 
-    collection: (fieldName) => {
+    collection: (collectionName) => {
       const currentCollection = Array.from(state.collections).find(
-        ([_, collection]) => collection.name === fieldName
+        ([_, collection]) => collection.name === collectionName
       );
       if (!currentCollection) {
-        return undefined;
+        return {
+          setKeys: state.actions.setCollectionKeys({
+            collectionName,
+          }),
+          set: state.actions.setCollectionValues({ collectionName }),
+          insertMultiple: state.actions.insertMultipleCollectionValues({
+            collectionName,
+          }),
+          insert: state.actions.insertCollectionValue({ collectionName }),
+          append: state.actions.appendCollectionValue({ collectionName }),
+          prepend: state.actions.prependCollectionValue({ collectionName }),
+          removeMultiple: state.actions.removeMultipleCollectionValues({
+            collectionName,
+          }),
+          remove: state.actions.removeCollectionValue({ collectionName }),
+        };
       }
-      const collectionId = currentCollection?.[0];
+      const collectionId = currentCollection[0];
       return {
-        setKeys: state.actions.setCollectionKeys(collectionId),
-        set: state.actions.setCollectionValues(collectionId),
-        insertMultiple:
-          state.actions.insertMultipleCollectionValues(collectionId),
-        insert: state.actions.insertCollectionValue(collectionId),
-        append: state.actions.appendCollectionValue(collectionId),
-        prepend: state.actions.prependCollectionValue(collectionId),
-        removeMultiple:
-          state.actions.removeMultipleCollectionValues(collectionId),
-        remove: state.actions.removeCollectionValue(collectionId),
+        setKeys: state.actions.setCollectionKeys({ collectionId }),
+        set: state.actions.setCollectionValues({ collectionId }),
+        insertMultiple: state.actions.insertMultipleCollectionValues({
+          collectionId,
+        }),
+        insert: state.actions.insertCollectionValue({ collectionId }),
+        append: state.actions.appendCollectionValue({ collectionId }),
+        prepend: state.actions.prependCollectionValue({ collectionId }),
+        removeMultiple: state.actions.removeMultipleCollectionValues({
+          collectionId,
+        }),
+        remove: state.actions.removeCollectionValue({ collectionId }),
       };
     },
 
@@ -162,18 +180,14 @@ export interface FormInterface<Values extends object = DefaultFormValues> {
 
   collection: (fieldName: string) =>
     | {
-        setKeys: ReturnType<Store<any>["actions"]["setCollectionKeys"]>;
-        set: ReturnType<Store<any>["actions"]["setCollectionValues"]>;
-        insertMultiple: ReturnType<
-          Store<any>["actions"]["insertMultipleCollectionValues"]
-        >;
-        insert: ReturnType<Store<any>["actions"]["insertCollectionValue"]>;
-        append: ReturnType<Store<any>["actions"]["appendCollectionValue"]>;
-        prepend: ReturnType<Store<any>["actions"]["prependCollectionValue"]>;
-        removeMultiple: ReturnType<
-          Store<any>["actions"]["removeMultipleCollectionValues"]
-        >;
-        remove: ReturnType<Store<any>["actions"]["removeCollectionValue"]>;
+        setKeys: UseCollectionValues["setKeys"];
+        set: UseCollectionValues["set"];
+        insertMultiple: UseCollectionValues["insertMultiple"];
+        insert: UseCollectionValues["insert"];
+        append: UseCollectionValues["append"];
+        prepend: UseCollectionValues["prepend"];
+        removeMultiple: UseCollectionValues["removeMultiple"];
+        remove: UseCollectionValues["remove"];
       }
     | undefined;