@strictly/react-form 0.0.15 → 0.0.17

package/dist/index.js

@@ -326,26 +326,28 @@ import {
   observable,
   runInAction
 } from "mobx";
-var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _context_dec = [computed.struct], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
 var FormModel = class {
-  constructor(type, value, adapters) {
+  constructor(type, originalValue, adapters, mode) {
     this.type = type;
+    this.originalValue = originalValue;
     this.adapters = adapters;
+    this.mode = mode;
     __runInitializers(_init, 5, this);
     __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __privateAdd(this, _errors, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __publicField(this, "flattenedTypeDefs");
-    this.value = mobxCopy(type, value);
+    this.value = mobxCopy(type, originalValue);
     this.flattenedTypeDefs = flattenTypesOfType(type);
-    const contextValue = this.toContext(value);
     const conversions = flattenValueTo(
       type,
       this.value,
       () => {
       },
-      (_t, value2, _setter, typePath, valuePath) => {
+      (_t, fieldValue, _setter, typePath, valuePath) => {
+        const contextValue = this.toContext(originalValue, valuePath);
         const adapter2 = this.adapters[typePath];
         if (adapter2 == null) {
           return;
@@ -357,15 +359,22 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, contextValue);
+        return convert(fieldValue, valuePath, contextValue);
       }
     );
     this.fieldOverrides = map(conversions, function(_k, v) {
       return v && [v.value];
     });
   }
-  get context() {
-    return this.toContext(this.value);
+  get forceMutableFields() {
+    switch (this.mode) {
+      case "create":
+        return true;
+      case "edit":
+        return false;
+      default:
+        return this.mode;
+    }
   }
   get fields() {
     return new Proxy(
@@ -426,6 +435,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
+    const context = this.toContext(this.value, valuePath);
     const {
       value,
       required,
@@ -434,17 +444,17 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? mobxCopy(
         fieldTypeDef,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, this.context)
-      ) : create(valuePath, this.context),
+        create(valuePath, context)
+      ) : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const error = this.errors[valuePath];
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
-      readonly,
+      readonly: readonly && !this.forceMutableFields,
       required
     };
   }
@@ -496,7 +506,9 @@ var FormModel = class {
     const element = elementValue != null ? elementValue[0] : elementAdapter.create(
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       elementTypePath,
-      this.context
+      // TODO what can we use for the value path here?
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      this.toContext(this.value, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -614,7 +626,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.context);
+    const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -654,10 +666,11 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const value = create(valuePath, this.context);
+    const context = this.toContext(this.value, valuePath);
+    const value = create(valuePath, context);
     const {
       value: displayValue
-    } = convert(value, valuePath, this.context);
+    } = convert(value, valuePath, context);
     const key = valuePath;
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -683,13 +696,14 @@ var FormModel = class {
     } = this.getAdapterForValuePath(valuePath);
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
+    const context = this.toContext(this.value, valuePath);
     const {
       value: storedValue
     } = convert(
-      accessor != null ? accessor.value : create(valuePath, this.context),
+      accessor != null ? accessor.value : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
@@ -697,12 +711,12 @@ var FormModel = class {
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue
-      } = convert(create(valuePath, this.context), valuePath, this.context);
+      } = convert(create(valuePath, context), valuePath, context);
       if (defaultDisplayValue === value) {
         return true;
       }
     }
-    const conversion = revert(value, valuePath, this.context);
+    const conversion = revert(value, valuePath, context);
     return runInAction(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -722,10 +736,11 @@ var FormModel = class {
       }
     });
   }
-  validateAll() {
+  validateAll(force = this.mode === "create") {
     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, [
@@ -745,28 +760,38 @@ var FormModel = class {
             return success;
           }
           const fieldOverride = this.fieldOverrides[adapterPath];
+          const context = this.toContext(this.value, valuePath);
           const {
             value: storedValue
-          } = convert(accessor.value, valuePath, this.context);
+          } = convert(accessor.value, valuePath, context);
           const value = fieldOverride != null ? fieldOverride[0] : storedValue;
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const conversion = revert(value, valuePath, this.context);
-          switch (conversion.type) {
-            case 1 /* Failure */:
-              this.errors[adapterPath] = conversion.error;
-              if (conversion.value != null && dirty) {
-                accessor.set(conversion.value[0]);
-              }
-              return false;
-            case 0 /* Success */:
-              if (dirty) {
-                accessor.set(conversion.value);
-              }
-              delete this.errors[adapterPath];
-              return success;
-            default:
-              throw new UnreachableError2(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 1 /* Failure */:
+                this.errors[adapterPath] = conversion.error;
+                if (conversion.value != null && dirty) {
+                  accessor.set(conversion.value[0]);
+                }
+                return false;
+              case 0 /* Success */:
+                if (dirty) {
+                  accessor.set(conversion.value);
+                }
+                delete this.errors[adapterPath];
+                return success;
+              default:
+                throw new UnreachableError2(conversion);
+            }
           }
+          return success;
         },
         true
       );
@@ -780,7 +805,6 @@ _errors = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errors", _errors_dec, FormModel, _errors);
-__decorateElement(_init, 2, "context", _context_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -1149,34 +1173,6 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
-// mantine/field_view.tsx
-import { Observer } from "mobx-react";
-
-// util/empty.tsx
-function Empty() {
-  return null;
-}
-
-// mantine/field_view.tsx
-import { jsx } from "react/jsx-runtime";
-function FieldView({
-  fields,
-  valuePath,
-  children
-}) {
-  return /* @__PURE__ */ jsx(Observer, { children: () => {
-    const {
-      value,
-      error
-    } = fields[valuePath];
-    return children({
-      value,
-      error,
-      ErrorSink: Empty
-    });
-  } });
-}
-
 // mantine/hooks.tsx
 import {
   Checkbox as CheckboxImpl,
@@ -1203,12 +1199,12 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
   return forwardRef(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1248,7 +1244,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1315,7 +1311,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1346,7 +1342,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1383,7 +1379,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx3(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx2(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1397,6 +1393,80 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_field_view.tsx
+import { Observer } from "mobx-react";
+import {
+  useCallback as useCallback2
+} from "react";
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/create_field_view.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FieldView({
+  valuePath,
+  form,
+  children
+}) {
+  const onFocus = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldFocus) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onBlur = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldBlur) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onValueChange = useCallback2((value) => {
+    var _a;
+    (_a = form.onFieldValueChange) == null ? void 0 : _a.call(form, valuePath, value);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onSubmit = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldSubmit) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  return /* @__PURE__ */ jsx3(Observer, { children: () => {
+    const {
+      value,
+      error
+    } = form.fields[valuePath];
+    return children({
+      value,
+      error,
+      ErrorSink: Empty,
+      onFocus,
+      onBlur,
+      onValueChange,
+      onSubmit
+    });
+  } });
+}
+function createFieldView(valuePath) {
+  return (props) => {
+    return /* @__PURE__ */ jsx3(
+      FieldView,
+      __spreadValues({
+        form: this,
+        valuePath
+      }, props)
+    );
+  };
+}
+
 // mantine/create_fields_view.tsx
 import {
   jsonPathPrefix,
@@ -1468,13 +1538,13 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
 // mantine/create_form.tsx
 import { observer as observer3 } from "mobx-react";
 import {
-  useCallback as useCallback2
+  useCallback as useCallback3
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function createForm(valuePath, Form, observableProps) {
   return observer3((props) => {
     const { value } = observableProps.fields[valuePath];
-    const onValueChange = useCallback2((value2) => {
+    const onValueChange = useCallback3((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
     return /* @__PURE__ */ jsx5(
@@ -1488,7 +1558,10 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+import {
+  Fragment
+} from "react";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
@@ -1504,9 +1577,9 @@ function DefaultList({
   listPath,
   children
 }) {
-  return /* @__PURE__ */ jsx6(Fragment, { children: values.map(function(value, index) {
+  return /* @__PURE__ */ jsx6(Fragment2, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
-    return children(valuePath, value, index);
+    return /* @__PURE__ */ jsx6(Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }
 
@@ -1705,12 +1778,13 @@ function useMantineFormFields({
   onFieldFocus,
   onFieldSubmit,
   fields
+  // should use FieldView rather than observing fields directly from here
 }) {
   const form = useMemo2(
     function() {
       return new MantineFormImpl(fields);
     },
-    // handled separately below
+    // fields handled separately below
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -1773,6 +1847,9 @@ var MantineFormImpl = class {
     __publicField(this, "listCache", new Cache(
       createList.bind(this)
     ));
+    __publicField(this, "fieldViewCache", new Cache(
+      createFieldView.bind(this)
+    ));
     __publicField(this, "fieldsViewCache", new Cache(
       createFieldsView.bind(this)
     ));
@@ -1840,6 +1917,11 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  fieldView(valuePath) {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath
+    );
+  }
   fieldsView(valuePath, FieldsView) {
     return this.fieldsViewCache.retrieveOrCreate(
       valuePath,
@@ -1907,7 +1989,6 @@ export {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
   Empty,
-  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,

package/index.ts

@@ -17,7 +17,6 @@ export * from './field_converters/trimming_string_converter'
 export * from './field_converters/validating_converter'
 export * from './field_value_factories/prototyping_field_value_factory'
 export * from './mantine/error_renderer'
-export * from './mantine/field_view'
 export * from './mantine/hooks'
 export * from './types/error_of_field'
 export * from './types/field'

package/mantine/create_field_view.tsx

@@ -0,0 +1,94 @@
+import { Observer } from 'mobx-react'
+import {
+  type ComponentType,
+  useCallback,
+} from 'react'
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
+import { type ErrorOfField } from 'types/error_of_field'
+import { type Fields } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { Empty } from 'util/empty'
+import { type MantineForm } from './types'
+
+export type FieldViewProps<F extends Fields, K extends keyof F> = {
+  children: (props: {
+    value: ValueTypeOfField<F[K]>,
+    error: ErrorOfField<F[K]> | undefined,
+    ErrorSink: ComponentType<{ error: ErrorOfField<F[K]> }>,
+    onFocus: () => void,
+    onBlur: () => void,
+    onValueChange: (v: ValueTypeOfField<F[K]>) => void,
+    onSubmit: () => void,
+  }) => JSX.Element,
+}
+
+/**
+ * Displays current value and error of a field
+ */
+function FieldView<F extends Fields, K extends keyof F>({
+  valuePath,
+  form,
+  children,
+}: FieldViewProps<F, K> & {
+  valuePath: K,
+  form: MantineForm<F>,
+}) {
+  const onFocus = useCallback(() => {
+    form.onFieldFocus?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onBlur = useCallback(() => {
+    form.onFieldBlur?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onValueChange = useCallback((value: ValueTypeOfField<F[K]>) => {
+    form.onFieldValueChange?.(valuePath, value)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onSubmit = useCallback(() => {
+    form.onFieldSubmit?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  return (
+    <Observer>
+      {() => {
+        const {
+          value,
+          error,
+        } = form.fields[valuePath]
+        return children({
+          value,
+          error,
+          ErrorSink: Empty,
+          onFocus,
+          onBlur,
+          onValueChange,
+          onSubmit,
+        })
+      }}
+    </Observer>
+  )
+}
+
+export function createFieldView<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+>(this: MantineForm<F>, valuePath: K): ComponentType<FieldViewProps<F, K>> {
+  return (props: FieldViewProps<F, K>) => {
+    return (
+      <FieldView
+        form={this}
+        valuePath={valuePath}
+        {...props}
+      />
+    )
+  }
+}

package/mantine/create_list.tsx

@@ -1,5 +1,8 @@
 import { type ElementOfArray } from '@strictly/base'
-import { type ComponentType } from 'react'
+import {
+  type ComponentType,
+  Fragment,
+} from 'react'
 import { type Fields } from 'types/field'
 import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
 import { type ValueTypeOfField } from 'types/value_type_of_field'
@@ -54,7 +57,11 @@ export function DefaultList<
     <>
       {values.map(function (value, index) {
         const valuePath: `${ListPath}.${number}` = `${listPath}.${index}`
-        return children(valuePath, value, index)
+        return (
+          <Fragment key={valuePath}>
+            {children(valuePath, value, index)}
+          </Fragment>
+        )
       })}
     </>
   )

package/mantine/hooks.tsx

@@ -44,6 +44,10 @@ import {
   createCheckbox,
   type SuppliedCheckboxProps,
 } from './create_checkbox'
+import {
+  createFieldView,
+  type FieldViewProps,
+} from './create_field_view'
 import {
   createFieldsView,
   type FieldsView,
@@ -93,12 +97,13 @@ export function useMantineFormFields<
   onFieldFocus,
   onFieldSubmit,
   fields,
-}: FieldsViewProps<F>): MantineFormImpl<F> {
+  // should use FieldView rather than observing fields directly from here
+}: FieldsViewProps<F>): Omit<MantineFormImpl<F>, 'fields'> {
   const form = useMemo(
     function () {
       return new MantineFormImpl(fields)
     },
-    // handled separately below
+    // fields handled separately below
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   )
@@ -184,6 +189,12 @@ class MantineFormImpl<
   > = new Cache(
     createList.bind(this),
   )
+  private readonly fieldViewCache: Cache<
+    [keyof AllFieldsOfFields<F>],
+    ComponentType<FieldViewProps<F, Exclude<keyof AllFieldsOfFields<F>, number | symbol>>>
+  > = new Cache(
+    createFieldView.bind(this),
+  )
   private readonly fieldsViewCache: Cache<
     // the cache cannot reference keys, so we just use any
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -392,6 +403,12 @@ class MantineFormImpl<
     >
   }
 
+  fieldView<K extends keyof AllFieldsOfFields<F>>(valuePath: K): ComponentType<FieldViewProps<F, K>> {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath,
+    )
+  }
+
   fieldsView<
     K extends keyof AllFieldsOfFields<F>,
     P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,