@homebound/form-state 2.0.1 → 2.1.2

package/README.md

@@ -5,3 +5,5 @@ Push release.
 # Todo
 
 * Add conditional readonly logic, like `{ type: "field", readOnlyIf: i => i.isInternal.value }`
+
+* Add `omitFromValue` so we can have two fields, `book.author.id` / `book.author.name`, where `book.author.name` is used for showing the author name, but `book.author.id` is the only field that is submitted to the server on mutation (maybe pair this with `Ref` based mutations) 

package/dist/FormStateApp.test.js

@@ -6,21 +6,21 @@ const react_1 = require("@testing-library/react");
 const FormStateApp_1 = require("./FormStateApp");
 describe("FormStateApp", () => {
     it("save resets dirty reactively", async () => {
-        const { firstName, firstName_dirty, firstName_touched, save } = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
-        expect(firstName_dirty()).toHaveTextContent("false");
-        rtl_utils_1.type(firstName, "changed");
-        expect(firstName_dirty()).toHaveTextContent("true");
-        react_1.fireEvent.blur(firstName());
-        expect(firstName_touched()).toHaveTextContent("true");
-        rtl_utils_1.click(save);
-        expect(firstName_dirty()).toHaveTextContent("false");
-        expect(firstName_touched()).toHaveTextContent("false");
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
+        expect(r.firstName_dirty()).toHaveTextContent("false");
+        rtl_utils_1.type(r.firstName, "changed");
+        expect(r.firstName_dirty()).toHaveTextContent("true");
+        react_1.fireEvent.blur(r.firstName());
+        expect(r.firstName_touched()).toHaveTextContent("true");
+        rtl_utils_1.click(r.save);
+        expect(r.firstName_dirty()).toHaveTextContent("false");
+        expect(r.firstName_touched()).toHaveTextContent("false");
     });
     it("originalValue is reactive", async () => {
-        const { firstName_original, set, save } = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
-        expect(firstName_original()).toHaveTextContent("a1");
-        rtl_utils_1.click(set);
-        rtl_utils_1.click(save);
-        expect(firstName_original()).toHaveTextContent("a2");
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
+        expect(r.firstName_original()).toHaveTextContent("a1");
+        rtl_utils_1.click(r.set);
+        rtl_utils_1.click(r.save);
+        expect(r.firstName_original()).toHaveTextContent("a2");
     });
 });

package/dist/formState.d.ts

@@ -109,6 +109,7 @@ export interface FieldState<T, V> {
     readonly required: boolean;
     readonly dirty: boolean;
     readonly valid: boolean;
+    readonly isNewEntity: boolean;
     rules: Rule<T, V>[];
     readonly errors: string[];
     /** Returns a subset of V with only the changed values. Currently not observable. */

package/dist/formState.js

@@ -40,7 +40,7 @@ function useFormState(opts) {
     }, [
         config,
         // If they're using init.input, useMemo on it, otherwise let the identity of init be unstable
-        ...(init && "input" in init && "map" in init ? [init.input] : []),
+        ...(init && "input" in init && "map" in init ? (Array.isArray(init.input) ? init.input : [init.input]) : []),
     ]);
     // Use useEffect so that we don't touch the form.init proxy during a render
     react_1.useEffect(() => {
@@ -64,10 +64,10 @@ exports.required = mobx_1.action(({ value: v }) => {
  */
 function createObjectState(config, instance, opts = {}) {
     const noop = () => { };
-    return newObjectState(config, instance, undefined, opts.onBlur || noop);
+    return newObjectState(config, undefined, instance, undefined, opts.onBlur || noop);
 }
 exports.createObjectState = createObjectState;
-function newObjectState(config, instance, key, onBlur) {
+function newObjectState(config, parentState, instance, key, onBlur) {
     // This is what we return, but we only know it's value until we call `observable`, so
     // we create a mutable variable to capture it so that we can create fields/call their
     // constructors and give them a way to access it later.
@@ -92,7 +92,7 @@ function newObjectState(config, instance, key, onBlur) {
             if (!instance[key]) {
                 instance[key] = {};
             }
-            field = newObjectState(config.config, instance[key], key, onBlur);
+            field = newObjectState(config.config, getObjectState, instance[key], key, onBlur);
         }
         else {
             throw new Error("Unsupported");
@@ -143,9 +143,19 @@ function newObjectState(config, instance, key, onBlur) {
         get valid() {
             return getFields(this).every((f) => f.valid);
         },
+        get errors() {
+            return getFields(this).flatMap((f) => f.errors.map((e) => `${f.key}: ${e}`));
+        },
         get dirty() {
             return getFields(this).some((f) => f.dirty);
         },
+        get isNewEntity() {
+            const idField = getFields(this).find((f) => f._isIdKey);
+            if (!idField && parentState) {
+                return parentState().isNewEntity;
+            }
+            return !idField || idField.value === null || idField.value === undefined;
+        },
         canSave() {
             this.touched = true;
             return this.valid;
@@ -153,7 +163,7 @@ function newObjectState(config, instance, key, onBlur) {
         // Accepts new values in bulk, i.e. when setting the form initial state from the backend.
         set(value) {
             if (this.readOnly) {
-                throw new Error("Currently readOnly");
+                throw new Error(`${key || "formState"} is currently readOnly`);
             }
             getFields(this).forEach((field) => {
                 if (field.key in value && (!field.dirty || !field._focused)) {
@@ -267,6 +277,9 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         get required() {
             return this.rules.some((rule) => rule === exports.required);
         },
+        get isNewEntity() {
+            return parentState().isNewEntity;
+        },
         focus() {
             this._focused = true;
         },
@@ -283,9 +296,9 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             this.touched = true;
             onBlur();
         },
-        set(value) {
-            if (this.readOnly) {
-                throw new Error("Currently readOnly");
+        set(value, opts = {}) {
+            if (this.readOnly && !opts.resetting) {
+                throw new Error(`${key} is currently readOnly`);
             }
             // If the user has deleted/emptied a value that was originally set, keep it as `null`
             // so that our partial update to the backend correctly unsets it.
@@ -298,11 +311,8 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             _tick.value++;
         },
         reset() {
-            // We check !this.readOnly b/c set will blow up, but maybe we should pass
-            // an internal override to allow it anyway? Currently this is failing when
-            // using a `isReadOnlyKey` has made an entity read-only.
-            if (!computed && !this.readOnly) {
-                this.set(this.originalValue);
+            if (!computed) {
+                this.set(this.originalValue, { resetting: true });
             }
             this.touched = false;
         },
@@ -356,6 +366,9 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         get required() {
             return this.rules.some((rule) => rule === exports.required);
         },
+        get isNewEntity() {
+            return parentState().isNewEntity;
+        },
         // private
         hasNewItems() {
             const currentList = this.value;
@@ -374,7 +387,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 // Because we're reading from this.value, child will be the proxy version
                 let childState = rowMap.get(child);
                 if (!childState) {
-                    childState = newObjectState(config, child, undefined, onBlur);
+                    childState = newObjectState(config, parentState, child, undefined, onBlur);
                     rowMap.set(child, childState);
                 }
                 return childState;
@@ -420,9 +433,9 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             this.touched = true;
             onBlur();
         },
-        set(values) {
-            if (this.readOnly) {
-                throw new Error("Currently readOnly");
+        set(values, opts = {}) {
+            if (this.readOnly && !opts.resetting) {
+                throw new Error(`${key} is currently readOnly`);
             }
             // We should be passed values that are non-proxies.
             parentInstance[key] = values.map((value) => {
@@ -459,7 +472,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         reset() {
             if (originalCopy) {
-                this.set(originalCopy);
+                this.set(originalCopy, { resetting: true });
                 this.rows.forEach((r) => r.reset());
             }
         },

package/dist/formState.test.js

@@ -31,6 +31,8 @@ describe("formState", () => {
         a.title.value = null;
         expect(a.title.valid).toBeFalsy();
         expect(numErrors).toEqual(1);
+        expect(a.title.errors).toEqual(["Required"]);
+        expect(a.errors).toEqual(["title: Required"]);
     });
     it("can tell what is required", () => {
         const a = formState_1.createObjectState({
@@ -149,8 +151,12 @@ describe("formState", () => {
         // Then it's title is invalid
         expect(a1.books.rows.length).toEqual(1);
         expect(a1.books.rows[0].title.valid).toBeFalsy();
+        expect(a1.books.rows[0].title.errors).toEqual(["Required"]);
         // And the books collection itself is invalid
         expect(a1.books.valid).toBeFalsy();
+        // But we don't currently show the error here b/c it's not an error on the collection itself;
+        // we could have like an `a1.books.allErrors` property instead.
+        expect(a1.books.errors).toEqual([]);
         // And the author itself is also invalid
         expect(a1.valid).toBeFalsy();
         expect(lastValid).toBeFalsy();
@@ -403,6 +409,43 @@ describe("formState", () => {
         expect(a1.dirty).toBeFalsy();
         expect(a1.touched).toBeFalsy();
     });
+    it("resets values even if read only", () => {
+        // Given a form state
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [
+                { title: "b1", classification: formStateDomain_1.dd100 },
+                { title: "b2", classification: formStateDomain_1.dd100 },
+            ],
+        });
+        // And some values have been changed
+        expect(a1.dirty).toBeFalsy();
+        a1.firstName.set("a2");
+        a1.firstName.touched = true;
+        a1.lastName.set("aL2");
+        a1.books.rows[0].set({ title: "b2" });
+        a1.books.rows[1].set({ title: "bb2" });
+        a1.books.add({ title: "b3" });
+        expect(a1.books.touched).toEqual(true);
+        expect(a1.dirty).toBeTruthy();
+        // And the "readOnly=true" operation has "beat" the reset operation
+        a1.readOnly = true;
+        // When we reset
+        a1.reset();
+        // Then it still works
+        expect(a1.firstName.value).toBe("a1");
+        expect(a1.firstName.touched).toBeFalsy();
+        expect(a1.lastName.value).toBe("aL1");
+        expect(a1.books.rows.length).toBe(2);
+        expect(a1.books.touched).toBe(false);
+        expect(a1.books.rows[0].title.value).toBe("b1");
+        expect(a1.books.rows[0].title.dirty).toBe(false);
+        expect(a1.books.rows[0].title.touched).toBe(false);
+        expect(a1.books.rows[1].title.value).toBe("b2");
+        expect(a1.dirty).toBeFalsy();
+        expect(a1.touched).toBeFalsy();
+    });
     it("saves values into _originalState", () => {
         const a1 = createAuthorInputState({
             firstName: "a1",
@@ -490,7 +533,7 @@ describe("formState", () => {
         a1.readOnly = true;
         fields.forEach((f) => expect(f.readOnly).toBeTruthy());
         fields.forEach((f) => {
-            expect(() => f.set(null)).toThrow("Currently readOnly");
+            expect(() => f.set(null)).toThrow("is currently readOnly");
         });
     });
     it("maintain field readOnly state when form is readOnly", () => {
@@ -953,6 +996,23 @@ describe("formState", () => {
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         expect(r.baseElement).toHaveTextContent("bob");
     });
+    it("memoizes on init.input being an array", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent() {
+            const [, setTick] = react_1.useState(0);
+            const form = formState_1.useFormState({
+                config,
+                init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) },
+            });
+            const onClick = () => [form.firstName.set("fred"), setTick(1)];
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "change", onClick: onClick }, void 0),
+                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0)] }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        expect(r.firstName()).toHaveTextContent("ab");
+        rtl_utils_1.click(r.change);
+        expect(r.firstName()).toHaveTextContent("fred");
+    });
     it("uses default if init.input is undefined", async () => {
         // Given a component
         function TestComponent() {
@@ -1022,6 +1082,47 @@ describe("formState", () => {
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         expect(r.baseElement.textContent).toEqual("");
     });
+    it("provides isNewEntity", () => {
+        // Given an author without an id
+        const formState = formState_1.createObjectState(authorWithAddressConfig, {
+            firstName: "f",
+            address: { city: "c1", street: "s1" },
+        });
+        // Then their fields know the entity is new
+        expect(formState.firstName.isNewEntity).toBeTruthy();
+        expect(formState.address.city.isNewEntity).toBeTruthy();
+        // When we have an id
+        formState.id.set("1");
+        // Then their fields know the entity is not new
+        expect(formState.firstName.isNewEntity).toBeFalsy();
+        expect(formState.address.city.isNewEntity).toBeFalsy();
+    });
+    it("provides isNewEntity for lists", () => {
+        // Given an author & books without an id
+        const formState = formState_1.createObjectState(authorWithBooksConfig, {
+            books: [{ title: "t1" }, { title: "t2" }],
+        });
+        // Then both books know they are new
+        expect(formState.books.rows[0].title.isNewEntity).toBeTruthy();
+        expect(formState.books.rows[1].title.isNewEntity).toBeTruthy();
+        expect(formState.books.rows[0].isNewEntity).toBeTruthy();
+        expect(formState.books.rows[1].isNewEntity).toBeTruthy();
+        expect(formState.books.isNewEntity).toBeTruthy();
+        // And when the author is not new, only it changes
+        formState.id.set("1");
+        expect(formState.books.rows[0].title.isNewEntity).toBeTruthy();
+        expect(formState.books.rows[1].title.isNewEntity).toBeTruthy();
+        expect(formState.books.rows[0].isNewEntity).toBeTruthy();
+        expect(formState.books.rows[1].isNewEntity).toBeTruthy();
+        expect(formState.books.isNewEntity).toBeFalsy();
+        // And when the 1st book is not new, only it changes
+        formState.books.rows[0].id.set("2");
+        expect(formState.books.rows[0].title.isNewEntity).toBeFalsy();
+        expect(formState.books.rows[1].title.isNewEntity).toBeTruthy();
+        expect(formState.books.rows[0].isNewEntity).toBeFalsy();
+        expect(formState.books.rows[1].isNewEntity).toBeTruthy();
+        expect(formState.books.isNewEntity).toBeFalsy();
+    });
 });
 class ObservableObject {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.0.1",
+  "version": "2.1.2",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",