@homebound/form-state 2.9.1 → 2.10.0

package/dist/formState.js

@@ -24,10 +24,10 @@ exports.required = mobx_1.action(({ value: v }) => {
  */
 function createObjectState(config, instance, opts = {}) {
     const noop = () => { };
-    return newObjectState(config, undefined, instance, undefined, opts.maybeAutoSave || noop);
+    return newObjectState(config, undefined, undefined, instance, undefined, opts.maybeAutoSave || noop);
 }
 exports.createObjectState = createObjectState;
-function newObjectState(config, parentState, instance, key, maybeAutoSave) {
+function newObjectState(config, parentState, parentListState, instance, key, maybeAutoSave) {
     // 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.
@@ -52,7 +52,7 @@ function newObjectState(config, parentState, instance, key, maybeAutoSave) {
             if (!instance[key]) {
                 instance[key] = {};
             }
-            field = newObjectState(config.config, getObjectState, instance[key], key, maybeAutoSave);
+            field = newObjectState(config.config, getObjectState, undefined, instance[key], key, maybeAutoSave);
         }
         else {
             throw new Error("Unsupported");
@@ -93,12 +93,13 @@ function newObjectState(config, parentState, instance, key, maybeAutoSave) {
             getFields(this).forEach((f) => (f.touched = touched));
         },
         get readOnly() {
-            return this._readOnly || this._considerReadOnly();
+            return (this._readOnly ||
+                this._considerReadOnly() ||
+                (parentState && parentState().readOnly) ||
+                !!(parentListState === null || parentListState === void 0 ? void 0 : parentListState.readOnly));
         },
         set readOnly(readOnly) {
             this._readOnly = readOnly;
-            // Use this.readOnly so we can _considerReadOnly
-            getFields(this).forEach((f) => (f.readOnly = this.readOnly));
         },
         get valid() {
             return getFields(this).every((f) => f.valid);
@@ -197,8 +198,6 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
     const field = {
         key,
         touched: false,
-        /** Configuration readOnly state. Mostly used to determine original state. */
-        _configReadOnly: readOnly,
         /** Current readOnly value. */
         _readOnly: readOnly || false,
         _focused: false,
@@ -219,25 +218,13 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         get dirty() {
             return !areEqual(this.originalValue, this.value);
         },
+        /** Returns whether this field is readOnly, although if our parent is readOnly then it trumps. */
         get readOnly() {
-            return this._readOnly;
+            return parentState().readOnly || this._readOnly;
         },
-        /**
-         * Field readOnly is only opinionated when set.
-         * - When set to true from FormObject, accept change since true is higher priority.
-         * - When set to false from FormObject, use original (`_configReadOnly`) value.
-         */
+        /** Sets the field readOnly, but `v` will still be or-d with the parent's readOnly state. */
         set readOnly(v) {
-            if (this._configReadOnly === undefined) {
-                this._readOnly = v;
-                return;
-            }
-            if (v) {
-                this._readOnly = v;
-            }
-            else {
-                this._readOnly = this._configReadOnly || false;
-            }
+            this._readOnly = v;
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {
@@ -356,11 +343,10 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         _focused: false,
         _readOnly: false,
         get readOnly() {
-            return this._readOnly;
+            return this._readOnly || parentState().readOnly;
         },
         set readOnly(readOnly) {
             this._readOnly = readOnly;
-            this.rows.forEach((r) => (r.readOnly = readOnly));
         },
         set value(v) {
             this.set(v);
@@ -401,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, parentState, child, undefined, maybeAutoSave);
+                    childState = newObjectState(config, parentState, list, child, undefined, maybeAutoSave);
                     rowMap.set(child, childState);
                 }
                 return childState;

package/dist/formState.test.js

@@ -686,6 +686,42 @@ describe("formState", () => {
         // Then expect form
         expect(formState.title.readOnly).toBeTruthy();
     });
+    it("has an object-level readOnly=true override field-level readOnly=false", () => {
+        // Given a top-level object
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
+        });
+        // And it is read-only
+        a1.readOnly = true;
+        // Then it's 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,
+        // i.e. due to a more granular business rule that happens to
+        // be allowed right now
+        a1.firstName.readOnly = false;
+        // Then the field-level rule is ignored, and it's still treated as read-only
+        expect(a1.firstName.readOnly).toBeTruthy();
+    });
+    it("has an field-level readOnly=true override object-level readOnly=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 read-only=false
+        a1.readOnly = false;
+        // Then it's 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
+        a1.firstName.readOnly = true;
+        // Then the field-level rule is respected
+        expect(a1.firstName.readOnly).toBeTruthy();
+    });
     it("canSave returns dirty and touches", () => {
         const a1 = formState_1.createObjectState({
             firstName: { type: "value", rules: [formState_1.required] },

package/dist/useFormStates.d.ts

@@ -34,8 +34,15 @@ declare type UseFormStatesOpts<T, I> = {
      * Does not need to be stable/useMemo'd.
      */
     map?: (input: Exclude<I, null | undefined>) => T;
+    /**
+     * Sets all `ObjectState`s to readOnly.
+     */
+    readOnly?: boolean;
 };
-export declare function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): {
-    getFormState: (input: I) => ObjectState<T>;
+declare type UseFormStatesHook<T, I> = {
+    getFormState: (input: I, opts?: {
+        readOnly?: boolean;
+    }) => ObjectState<T>;
 };
+export declare function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): UseFormStatesHook<T, I>;
 export {};

package/dist/useFormStates.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const formState_1 = require("./formState");
 const utils_1 = require("./utils");
 function useFormStates(opts) {
-    const { config, autoSave, getId, map, addRules } = opts;
+    const { config, autoSave, getId, map, addRules, readOnly = false } = opts;
     const objectStateCache = react_1.useMemo(() => ({}), 
     // Force resetting the cache if config changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -15,7 +15,10 @@ function useFormStates(opts) {
     // Use a ref so our memo'ized `autoSave` always see the latest value
     const autoSaveRef = react_1.useRef(autoSave);
     autoSaveRef.current = autoSave;
-    const getFormState = react_1.useCallback((input) => {
+    // Use a ref b/c we're memod
+    const readOnlyRef = react_1.useRef(readOnly);
+    readOnlyRef.current = readOnly;
+    const getFormState = react_1.useCallback((input, opts = {}) => {
         const existing = objectStateCache[getId(input)];
         let form = existing === null || existing === void 0 ? void 0 : existing[0];
         async function maybeAutoSave(form) {
@@ -59,6 +62,7 @@ function useFormStates(opts) {
             form.set(utils_1.initValue(config, map ? { map, input } : input), { refreshing: true });
             existing[1] = input;
         }
+        form.readOnly = readOnlyRef.current || !!opts.readOnly;
         return form;
     }, 
     // Allow the user to not stable-ize getId, map, addRules, and autoSave

package/dist/useFormStates.test.js

@@ -156,11 +156,6 @@ describe("useFormStates", () => {
         // Given a user wants to use auto save
         const autoSave = jest.fn();
         function TestComponent() {
-            const config = {
-                id: { type: "value" },
-                firstName: { type: "value" },
-                lastName: { type: "value" },
-            };
             const { getFormState } = useFormStates_1.useFormStates({
                 config,
                 getId: (o) => o.id,
@@ -184,7 +179,51 @@ describe("useFormStates", () => {
         expect(autoSave).toHaveBeenCalledTimes(1);
         expect(autoSave).toHaveBeenCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
     });
+    it("can set readOnly via the hook opt", async () => {
+        // Given a test component
+        function TestComponent({ readOnly }) {
+            const { getFormState } = useFormStates_1.useFormStates({
+                config,
+                getId: (o) => o.id,
+                // And it passes readOnly directly to useFormStates
+                readOnly,
+            });
+            return jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0);
+        }
+        // When we render
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { readOnly: true }, void 0));
+        // Then it's read only
+        expect(r.firstName()).toHaveAttribute("data-readonly", "true");
+        // And when we rerender
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { readOnly: false }, void 0));
+        // Then it's not read only
+        expect(r.firstName()).toHaveAttribute("data-readonly", "false");
+    });
+    it("can set readOnly via the getFormState function", async () => {
+        // Given a test component
+        function TestComponent({ readOnly }) {
+            const { getFormState } = useFormStates_1.useFormStates({
+                config,
+                getId: (o) => o.id,
+            });
+            // And it passes readOnly directly to getFormState
+            return jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }, { readOnly }) }, void 0);
+        }
+        // When we render
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { readOnly: true }, void 0));
+        // Then it's read only
+        expect(r.firstName()).toHaveAttribute("data-readonly", "true");
+        // And when we rerender
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { readOnly: false }, void 0));
+        // Then it's not read only
+        expect(r.firstName()).toHaveAttribute("data-readonly", "false");
+    });
 });
+const config = {
+    id: { type: "value" },
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+};
 function ChildComponent({ os }) {
-    return jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: os.firstName.value }), void 0);
+    return (jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName", "data-readonly": os.firstName.readOnly }, { children: os.firstName.value }), void 0));
 }

package/package.json

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