@strictly/react-form 0.0.16 → 0.0.18

package/.out/core/mobx/form_model.d.ts

@@ -23,15 +23,19 @@ export type ValuePathsToAdaptersOf<TypePathsToAdapters extends Partial<Readonly<
 export type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string, FieldAdapter>>>> = UnionToIntersection<{
     readonly [K in keyof TypePathsToAdapters]: TypePathsToAdapters[K] extends undefined ? undefined : unknown extends ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>> ? never : ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>>;
 }[keyof TypePathsToAdapters] | {}>;
+export type FormMode = 'edit' | 'create';
 export declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ContextType>, ContextType = ContextOf<TypePathsToAdapters>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
+    private readonly originalValue;
     protected readonly adapters: TypePathsToAdapters;
+    protected readonly mode: FormMode;
     accessor value: MobxValueOfType<T>;
     accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>;
     accessor errors: FlattenedErrors<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
-    constructor(type: T, value: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters);
+    constructor(type: T, originalValue: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters, mode: FormMode);
     protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
+    get forceMutableFields(): boolean;
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
@@ -51,6 +55,6 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     clearAll(value: ValueOfType<T>): void;
     isValuePathActive<K extends keyof ValuePathsToAdapters>(valuePath: K): boolean;
     validateField<K extends keyof ValuePathsToAdapters>(valuePath: K, ignoreDefaultValue?: boolean): boolean;
-    validateAll(): boolean;
+    validateAll(force?: boolean): boolean;
 }
 export {};

package/.out/core/mobx/form_model.js

@@ -70,19 +70,31 @@ let FormModel = (() => {
             set fieldOverrides(value) { __classPrivateFieldSet(this, _FormModel_fieldOverrides_accessor_storage, value, "f"); }
             get errors() { return __classPrivateFieldGet(this, _FormModel_errors_accessor_storage, "f"); }
             set errors(value) { __classPrivateFieldSet(this, _FormModel_errors_accessor_storage, value, "f"); }
-            constructor(type, value, adapters) {
+            constructor(type, originalValue, adapters, mode) {
                 Object.defineProperty(this, "type", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
                     value: (__runInitializers(this, _instanceExtraInitializers), type)
                 });
+                Object.defineProperty(this, "originalValue", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: originalValue
+                });
                 Object.defineProperty(this, "adapters", {
                     enumerable: true,
                     configurable: true,
                     writable: true,
                     value: adapters
                 });
+                Object.defineProperty(this, "mode", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: mode
+                });
                 _FormModel_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, void 0));
                 _FormModel_fieldOverrides_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _fieldOverrides_initializers, void 0)));
                 _FormModel_errors_accessor_storage.set(this, (__runInitializers(this, _fieldOverrides_extraInitializers), __runInitializers(this, _errors_initializers, {})));
@@ -92,13 +104,13 @@ let FormModel = (() => {
                     writable: true,
                     value: __runInitializers(this, _errors_extraInitializers)
                 });
-                this.value = mobxCopy(type, value);
+                this.value = mobxCopy(type, originalValue);
                 this.flattenedTypeDefs = flattenTypesOfType(type);
                 // pre-populate field overrides for consistent behavior when default information is overwritten
                 // then returned to
                 const conversions = flattenValueTo(type, this.value, () => { }, (_t, fieldValue, _setter, typePath, valuePath) => {
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    const contextValue = this.toContext(value, valuePath);
+                    const contextValue = this.toContext(originalValue, valuePath);
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     const adapter = this.adapters[typePath];
                     if (adapter == null) {
@@ -117,6 +129,16 @@ let FormModel = (() => {
                     return v && [v.value];
                 });
             }
+            get forceMutableFields() {
+                switch (this.mode) {
+                    case 'create':
+                        return true;
+                    case 'edit':
+                        return false;
+                    default:
+                        return this.mode;
+                }
+            }
             get fields() {
                 return new Proxy(this.knownFields, {
                     get: (target, prop) => {
@@ -186,7 +208,7 @@ let FormModel = (() => {
                 return {
                     value: fieldOverride != null ? fieldOverride[0] : value,
                     error,
-                    readonly,
+                    readonly: readonly && !this.forceMutableFields,
                     required,
                 };
             }
@@ -452,11 +474,12 @@ let FormModel = (() => {
                     }
                 });
             }
-            validateAll() {
+            validateAll(force = this.mode === 'create') {
                 // sort keys shortest to longest so parent changes don't overwrite child changes
                 const accessors = toArray(this.accessors).toSorted(function ([a], [b]) {
                     return a.length - b.length;
                 });
+                const flattenedOriginalValues = flattenValuesOfType(this.type, this.originalValue);
                 return runInAction(() => {
                     return accessors.reduce((success, [valuePath, accessor,]) => {
                         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -478,25 +501,33 @@ let FormModel = (() => {
                         const value = fieldOverride != null
                             ? fieldOverride[0]
                             : storedValue;
-                        // TODO more nuanced comparison
+                        // TODO customizable comparisons
                         const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-                        const conversion = revert(value, valuePath, context);
-                        switch (conversion.type) {
-                            case UnreliableFieldConversionType.Failure:
-                                this.errors[adapterPath] = conversion.error;
-                                if (conversion.value != null && dirty) {
-                                    accessor.set(conversion.value[0]);
-                                }
-                                return false;
-                            case UnreliableFieldConversionType.Success:
-                                if (dirty) {
-                                    accessor.set(conversion.value);
-                                }
-                                delete this.errors[adapterPath];
-                                return success;
-                            default:
-                                throw new UnreachableError(conversion);
+                        const needsValidation = force
+                            || !(valuePath in flattenedOriginalValues)
+                            || storedValue !== convert(flattenedOriginalValues[valuePath], valuePath, 
+                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                            this.toContext(this.originalValue, valuePath)).value;
+                        if (needsValidation) {
+                            const conversion = revert(value, valuePath, context);
+                            switch (conversion.type) {
+                                case UnreliableFieldConversionType.Failure:
+                                    this.errors[adapterPath] = conversion.error;
+                                    if (conversion.value != null && dirty) {
+                                        accessor.set(conversion.value[0]);
+                                    }
+                                    return false;
+                                case UnreliableFieldConversionType.Success:
+                                    if (dirty) {
+                                        accessor.set(conversion.value);
+                                    }
+                                    delete this.errors[adapterPath];
+                                    return success;
+                                default:
+                                    throw new UnreachableError(conversion);
+                            }
                         }
+                        return success;
                     }, true);
                 });
             }

package/.out/core/mobx/specs/form_model.tests.js

@@ -1,7 +1,8 @@
 import { expectDefinedAndReturn } from '@strictly/base';
-import { booleanType, list, nullType, numberType, object, record, stringType, union, } from '@strictly/define';
+import { booleanType, flattenValidatorsOfValidatingType, list, nullType, numberType, object, record, stringType, union, } from '@strictly/define';
 import { adapterFromTwoWayConverter, identityAdapter, } from 'core/mobx/field_adapter_builder';
 import { FormModel, } from 'core/mobx/form_model';
+import { mergeAdaptersWithValidators } from 'core/mobx/merge_field_adapters_with_validators';
 import { IntegerToStringConverter } from 'field_converters/integer_to_string_converter';
 import { NullableToBooleanConverter } from 'field_converters/nullable_to_boolean_converter';
 import { SelectDiscriminatedUnionConverter } from 'field_converters/select_value_type_converter';
@@ -72,7 +73,7 @@ describe('all', function () {
                 let model;
                 beforeEach(function () {
                     originalValue = 5;
-                    model = new TestFormModel(typeDef, originalValue, adapters);
+                    model = new TestFormModel(typeDef, originalValue, adapters, 'create');
                 });
                 describe('accessors', function () {
                     it('gets the expected value', function () {
@@ -113,7 +114,7 @@ describe('all', function () {
                         readonly: false,
                     });
                     originalValue = 5;
-                    model = new TestFormModel(typeDef, originalValue, adapters);
+                    model = new TestFormModel(typeDef, originalValue, adapters, 'create');
                 });
                 it('reports required status', function () {
                     expect(model.fields).toEqual(expect.objectContaining({
@@ -138,7 +139,7 @@ describe('all', function () {
                     4,
                     17,
                 ];
-                model = new TestFormModel(typeDef, value, adapters);
+                model = new TestFormModel(typeDef, value, adapters, 'create');
             });
             describe('accessors', function () {
                 it.each([
@@ -200,7 +201,7 @@ describe('all', function () {
                     a: 1,
                     b: 2,
                 };
-                model = new TestFormModel(typeDef, value, converters);
+                model = new TestFormModel(typeDef, value, converters, 'create');
             });
             describe('accessors', function () {
                 it.each([
@@ -251,7 +252,7 @@ describe('all', function () {
                     a: 1,
                     b: true,
                 };
-                model = new TestFormModel(typeDef, value, converters);
+                model = new TestFormModel(typeDef, value, converters, 'create');
             });
             describe('accessors', function () {
                 it.each([
@@ -297,7 +298,7 @@ describe('all', function () {
             const originalValue = 2;
             let model;
             beforeEach(function () {
-                model = new TestFormModel(typeDef, originalValue, adapters);
+                model = new TestFormModel(typeDef, originalValue, adapters, 'create');
             });
             describe('setFieldValueAndValidate', function () {
                 describe('success', function () {
@@ -399,7 +400,7 @@ describe('all', function () {
                     3,
                     7,
                 ];
-                model = new TestFormModel(typeDef, originalValue, converters);
+                model = new TestFormModel(typeDef, originalValue, converters, 'create');
             });
             describe('setFieldValueAndValidate', function () {
                 describe('success', function () {
@@ -697,7 +698,7 @@ describe('all', function () {
                 let model;
                 beforeEach(function () {
                     originalValue = null;
-                    model = new TestFormModel(type, originalValue, adapters);
+                    model = new TestFormModel(type, originalValue, adapters, 'create');
                 });
                 it('has the expected fields', function () {
                     expect(model.fields).toEqual({
@@ -745,7 +746,7 @@ describe('all', function () {
                         const model = new TestFormModel(type, {
                             d: 'x',
                             a: 1,
-                        }, adapters);
+                        }, adapters, 'create');
                         it.each([
                             [
                                 '$',
@@ -768,7 +769,7 @@ describe('all', function () {
                         const model = new TestFormModel(type, {
                             d: 'y',
                             b: false,
-                        }, adapters);
+                        }, adapters, 'create');
                         it.each([
                             [
                                 '$',
@@ -800,7 +801,7 @@ describe('all', function () {
             let model;
             beforeEach(function () {
                 originalValue = 1;
-                model = new TestFormModel(typeDef, originalValue, converters);
+                model = new TestFormModel(typeDef, originalValue, converters, 'create');
             });
             it('returns the default value for the fake field', function () {
                 expect(model.fields['$.fake']).toEqual(expect.objectContaining({
@@ -821,5 +822,54 @@ describe('all', function () {
                 });
             });
         });
+        describe('interaction with create and edit modes', () => {
+            const typeDef = object().readonlyField('n', numberType.enforce(n => n < 10 ? 'err' : null));
+            const adapters = mergeAdaptersWithValidators({
+                $: identityAdapter({ n: 0 }),
+                '$.n': integerToStringAdapter,
+            }, flattenValidatorsOfValidatingType(typeDef));
+            let originalValue;
+            beforeEach(() => {
+                originalValue = {
+                    n: 1,
+                };
+            });
+            describe('create mode', () => {
+                let model;
+                beforeEach(() => {
+                    model = new TestFormModel(typeDef, originalValue, adapters, 'create');
+                });
+                it('makes the field editable', () => {
+                    expect(model.fields['$.n'].readonly).toBeFalsy();
+                });
+                it('fails validation', () => {
+                    expect(model.validateAll()).toBeFalsy();
+                });
+                it('passes validation with valid data', () => {
+                    model.setFieldValue('$.n', '10');
+                    expect(model.validateAll()).toBeTruthy();
+                });
+            });
+            describe('edit model', () => {
+                let model;
+                beforeEach(function () {
+                    model = new TestFormModel(typeDef, originalValue, adapters, 'edit');
+                });
+                it('respects the field being readonly', () => {
+                    expect(model.fields['$.n'].readonly).toBeTruthy();
+                });
+                it('validates successfully with clean, but invalid data', () => {
+                    expect(model.validateAll()).toBeTruthy();
+                });
+                it('fails validation with invalid, dirty data', () => {
+                    model.setFieldValue('$.n', '2');
+                    expect(model.validateAll()).toBeFalsy();
+                });
+                it('passes validation with valid, dirty data', () => {
+                    model.setFieldValue('$.n', '10');
+                    expect(model.validateAll()).toBeTruthy();
+                });
+            });
+        });
     });
 });

package/.out/mantine/hooks.js

@@ -67,7 +67,7 @@ export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldF
     const form = useMemo(function () {
         return new MantineFormImpl(fields);
     }, 
-    // handled separately below
+    // fields handled separately below
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     useEffect(function () {