@homebound/form-state 2.10.1 → 2.11.0

package/dist/fields/listField.js

@@ -19,12 +19,19 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         _focused: false,
         _readOnly: false,
+        _loading: false,
         get readOnly() {
             return this._readOnly || parentState().readOnly;
         },
         set readOnly(readOnly) {
             this._readOnly = readOnly;
         },
+        get loading() {
+            return this._loading || parentState().loading;
+        },
+        set loading(loading) {
+            this._loading = loading;
+        },
         set value(v) {
             this.set(v);
         },

package/dist/fields/objectField.js

@@ -68,6 +68,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         },
         // private
         _readOnly: false,
+        _loading: false,
         _considerDeleted() {
             const deleteField = getFields(this).find((f) => f._isDeleteKey);
             return !!(deleteField === null || deleteField === void 0 ? void 0 : deleteField.value);
@@ -91,6 +92,12 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         set readOnly(readOnly) {
             this._readOnly = readOnly;
         },
+        get loading() {
+            return this._loading || (parentState && parentState().loading) || !!(parentListState === null || parentListState === void 0 ? void 0 : parentListState.loading);
+        },
+        set loading(loading) {
+            this._loading = loading;
+        },
         get valid() {
             return getFields(this).every((f) => f.valid);
         },

package/dist/fields/valueField.d.ts

@@ -16,6 +16,7 @@ export interface FieldState<T, V> {
     readonly originalValue: V;
     touched: boolean;
     readOnly: boolean;
+    loading: boolean;
     readonly required: boolean;
     readonly dirty: boolean;
     readonly valid: boolean;

package/dist/fields/valueField.js

@@ -18,6 +18,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         touched: false,
         /** Current readOnly value. */
         _readOnly: readOnly || false,
+        _loading: false,
         _focused: false,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
@@ -40,9 +41,17 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         get readOnly() {
             return parentState().readOnly || this._readOnly;
         },
-        /** Sets the field readOnly, but `v` will still be or-d with the parent's readOnly state. */
-        set readOnly(v) {
-            this._readOnly = v;
+        /** Sets the field readOnly, but `loading` will still be or-d with the parent's readOnly state. */
+        set readOnly(readOnly) {
+            this._readOnly = readOnly;
+        },
+        /** Returns whether this field is loading, or if our parent is loading. */
+        get loading() {
+            return parentState().loading || this._loading;
+        },
+        /** Sets the field loading, but `loading` will still be or-d with the parent's loading state. */
+        set loading(loading) {
+            this._loading = loading;
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {

package/dist/formState.test.js

@@ -696,7 +696,7 @@ describe("formState", () => {
         });
         // And it is read-only
         a1.readOnly = true;
-        // Then it's fields are read-only
+        // Then its fields are read-only
         const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
         fields.forEach((f) => expect(f.readOnly).toBeTruthy());
         // And even if a specific field tries to _not_ be read-only,
@@ -715,7 +715,7 @@ describe("formState", () => {
         });
         // And the top-level form is explicitly set to read-only=false
         a1.readOnly = false;
-        // Then it's fields are not read-only
+        // Then its fields are not read-only
         const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
         fields.forEach((f) => expect(f.readOnly).toBeFalsy());
         // But when one of the fields opts in to readOnly
@@ -723,6 +723,40 @@ describe("formState", () => {
         // Then the field-level rule is respected
         expect(a1.firstName.readOnly).toBeTruthy();
     });
+    it("has an object-level loading=true override field-level loading=false", () => {
+        // Given a top-level object
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
+        });
+        // And it is loading
+        a1.loading = true;
+        // Then its fields are read-only
+        const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
+        fields.forEach((f) => expect(f.loading).toBeTruthy());
+        // And even if a specific field tries to _not_ be loading
+        a1.firstName.loading = false;
+        // Then the field-level value is ignored, and it's still treated as loading
+        expect(a1.firstName.loading).toBeTruthy();
+    });
+    it("has an field-level loading=true override object-level loading=false", () => {
+        // Given a top-level object
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
+        });
+        // And the top-level form is explicitly set to loading=false
+        a1.loading = false;
+        // Then its fields are not loading
+        const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
+        fields.forEach((f) => expect(f.loading).toBeFalsy());
+        // But when one of the fields opts in to loading
+        a1.firstName.loading = true;
+        // Then the field-level loading is respected
+        expect(a1.firstName.loading).toBeTruthy();
+    });
     it("canSave returns dirty and touches", () => {
         const a1 = objectField_1.createObjectState({
             firstName: { type: "value", rules: [rules_1.required] },

package/dist/useFormState.js

@@ -62,6 +62,9 @@ function useFormState(opts) {
         const value = firstRunRef.current ? firstInitValue : utils_1.initValue(config, init);
         const form = objectField_1.createObjectState(config, value, { maybeAutoSave });
         form.readOnly = readOnly;
+        if (init && "input" in init && !("ifUndefined" in init)) {
+            form.loading = init.input === undefined;
+        }
         // The identity of `addRules` is not stable, but assume that it is for better UX.
         (addRules || (() => { }))(form);
         firstRunRef.current = true;
@@ -80,6 +83,9 @@ function useFormState(opts) {
             firstRunRef.current = false;
             return;
         }
+        if (init && "input" in init && !("ifUndefined" in init)) {
+            form.loading = init.input === undefined;
+        }
         form.set(utils_1.initValue(config, init), { refreshing: true });
     }, [form, ...dep]);
     // Use useEffect so that we don't touch the form.init proxy during a render

package/dist/useFormState.test.js

@@ -15,10 +15,10 @@ describe("useFormState", () => {
         function TestComponent() {
             const config = { firstName: { type: "value" } };
             // And we have query data that may or may not be defined
-            const data = Math.random() >= 0 ? { firstName: "bob" } : undefined;
-            // Then the lambda is passed the "de-undefined" data
+            const data = { firstName: "bob" };
             const form = useFormState_1.useFormState({
                 config,
+                // Then the lambda is passed the "de-undefined" data, i.e. `d.firstName` is not a compile error
                 init: { input: data, map: (d) => ({ firstName: d.firstName }) },
             });
             return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
@@ -454,6 +454,21 @@ describe("useFormState", () => {
         expect(autoSaveStub).toBeCalledTimes(1);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
     });
+    it("sets loading if input.data is undefined", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ data }) {
+            const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.input: undefined`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { data: undefined }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the data is loading
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { data: { firstName: "first" } }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/package.json

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