@homebound/form-state 2.9.1 → 2.11.0

package/dist/fields/valueField.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newValueFieldState = void 0;
+const is_plain_object_1 = require("is-plain-object");
+const mobx_1 = require("mobx");
+const rules_1 = require("../rules");
+const utils_1 = require("../utils");
+function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, maybeAutoSave) {
+    // keep a copy here for reference equality
+    const value = parentInstance[key];
+    let _originalValue = value === null ? undefined : is_plain_object_1.isPlainObject(value) ? mobx_1.toJS(value) : value;
+    // Because we read/write the value directly back into parentInstance[key],
+    // which itself is not a proxy, we use this as our "value changed" trigger.
+    const _tick = mobx_1.observable({ value: 1 });
+    const _originalValueTick = mobx_1.observable({ value: 1 });
+    const field = {
+        key,
+        touched: false,
+        /** Current readOnly value. */
+        _readOnly: readOnly || false,
+        _loading: false,
+        _focused: false,
+        _isIdKey: isIdKey,
+        _isDeleteKey: isDeleteKey,
+        _isReadOnlyKey: isReadOnlyKey,
+        rules,
+        get value() {
+            const value = _tick.value > 0 ? parentInstance[key] : utils_1.fail();
+            // Re-create the `keepNull` logic on sets but for our initial read where our
+            // originalValue is null (empty) but we want to expose it as undefined for
+            // consistency of "empty-ness" to our UI components.
+            return value === null && utils_1.isEmpty(_originalValue) ? undefined : value;
+        },
+        set value(v) {
+            this.set(v);
+        },
+        get dirty() {
+            return !utils_1.areEqual(this.originalValue, this.value);
+        },
+        /** Returns whether this field is readOnly, although if our parent is readOnly then it trumps. */
+        get readOnly() {
+            return parentState().readOnly || this._readOnly;
+        },
+        /** 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() {
+            return this.value;
+        },
+        get valid() {
+            const opts = { value: this.value, key: key, originalValue: this.originalValue, object: parentState() };
+            return this.rules.every((r) => r(opts) === undefined);
+        },
+        get errors() {
+            const opts = { value: this.value, key: key, originalValue: this.originalValue, object: parentState() };
+            return this.rules.map((r) => r(opts)).filter(utils_1.isNotUndefined);
+        },
+        get required() {
+            return this.rules.some((rule) => rule === rules_1.required);
+        },
+        get isNewEntity() {
+            return parentState().isNewEntity;
+        },
+        focus() {
+            this._focused = true;
+        },
+        blur() {
+            this.maybeAutoSave();
+            this._focused = false;
+        },
+        maybeAutoSave() {
+            // Now that the user is done editing the field (note maybe w/o blurring, i.e. if they hit enter), we sneak in some trim logic
+            this.maybeTrim();
+            // touched is readonly, but we're allowed to change it
+            this.touched = true;
+            maybeAutoSave();
+        },
+        set(value, opts = {}) {
+            if (this.readOnly && !opts.resetting && !opts.refreshing) {
+                throw new Error(`${key} is currently readOnly`);
+            }
+            if (opts.refreshing && this.dirty && this.value !== value) {
+                // Ignore incoming values if we have changes (this.dirty) unless our latest change (this.value)
+                // matches the incoming value (value), b/c if it does we should accept it and reset originalValue
+                // so that we're not longer dirty.
+                return;
+            }
+            else if (computed && (opts.resetting || opts.refreshing)) {
+                // Computeds can't be either reset or refreshed
+                return;
+            }
+            // 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.
+            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value);
+            // If a list of primitives was originally undefined, coerce `[]` to `undefined`
+            const coerceEmptyList = value && value instanceof Array && value.length === 0 && utils_1.isEmpty(this.originalValue);
+            const newValue = keepNull ? null : utils_1.isEmpty(value) || coerceEmptyList ? undefined : value;
+            // Set the value on our parent object
+            const changed = !utils_1.areEqual(newValue, this.value);
+            parentInstance[key] = newValue;
+            _tick.value++;
+            if (opts.refreshing) {
+                this.originalValue = newValue;
+            }
+            // If we're being set programmatically, i.e. we don't currently have focus,
+            // call blur to trigger any auto-saves.
+            if (!this._focused && !opts.refreshing && !opts.resetting && this.dirty && changed && opts.autoSave !== false) {
+                this.maybeAutoSave();
+            }
+        },
+        reset() {
+            if (!computed) {
+                this.set(this.originalValue, { resetting: true });
+            }
+            this.touched = false;
+        },
+        save() {
+            if (is_plain_object_1.isPlainObject(this.originalValue)) {
+                this.originalValue = mobx_1.toJS(this.value);
+            }
+            else {
+                this.originalValue = this.value;
+            }
+            this.touched = false;
+        },
+        get originalValue() {
+            // A dummy check to for reactivity around our non-proxy value
+            return _originalValueTick.value > -1 ? _originalValue : _originalValue;
+        },
+        set originalValue(v) {
+            _originalValue = v;
+            _originalValueTick.value++;
+        },
+        maybeTrim() {
+            if (typeof this.value === "string") {
+                let newValue = this.value.trim();
+                if (newValue === "") {
+                    newValue = undefined;
+                }
+                if (newValue !== this.value) {
+                    this.set(newValue);
+                }
+            }
+        },
+    };
+    return field;
+}
+exports.newValueFieldState = newValueFieldState;