@strictly/react-form 0.0.8 → 0.0.10

package/mantine/create_fields_view.tsx

@@ -1,3 +1,4 @@
+import { type StringConcatOf } from '@strictly/base'
 import type { FieldsViewProps } from 'core/props'
 import { observer } from 'mobx-react'
 import type {
@@ -10,6 +11,26 @@ import type { SubFormFields } from 'types/sub_form_fields'
 import type { ValueTypeOfField } from 'types/value_type_of_field'
 import type { MantineFieldComponent } from './types'
 
+export type CallbackMapper<ValuePath extends string> = {
+  <
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Cb extends (...args: any[]) => any,
+  >(cb: Cb): Parameters<Cb> extends [infer SubFormValuePath extends string, ...(infer Rest)]
+    ? SubFormValuePath extends StringConcatOf<ValuePath, infer Postfix>
+      ? (valuePath: `$${Postfix}`, ...rest: Rest) => ReturnType<Cb>
+    : never
+    : never,
+}
+
+export type FieldsView<
+  ValuePath extends string = string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  C extends ComponentType<any> = ComponentType<any>,
+> = {
+  Component: C,
+  callbackMapper: CallbackMapper<ValuePath>,
+}
+
 export function createFieldsView<
   F extends Fields,
   K extends keyof AllFieldsOfFields<F>,
@@ -18,7 +39,7 @@ export function createFieldsView<
   valuePath: K,
   FieldsView: ComponentType<P>,
   observableProps: FieldsViewProps<F>,
-): MantineFieldComponent<FieldsViewProps<P['fields']>, P, never> {
+): FieldsView<K, MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>> {
   function toKey(subKey: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return (subKey as string).replace('$', valuePath as string)
@@ -49,36 +70,50 @@ export function createFieldsView<
   }
 
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return observer(function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>) {
-    // convert fields to sub-fields
-    const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>(
-      (acc, [
-        fieldKey,
-        fieldValue,
-      ]) => {
+  const Component = observer(
+    function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>) {
+      // convert fields to sub-fields
+      const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>(
+        (acc, [
+          fieldKey,
+          fieldValue,
+        ]) => {
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          if (fieldKey.startsWith(valuePath as string)) {
+            acc[toSubKey(fieldKey)] = fieldValue
+          }
+          return acc
+        },
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        if (fieldKey.startsWith(valuePath as string)) {
-          acc[toSubKey(fieldKey)] = fieldValue
-        }
-        return acc
-      },
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      {} as P['fields'],
-    )
+        {} as P['fields'],
+      )
 
-    return (
-      <FieldsView
-        {
-          // maybe we can do this in a more type safe way
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
-          ...props as any
-        }
-        fields={subFields}
-        onFieldBlur={onFieldBlur}
-        onFieldFocus={onFieldFocus}
-        onFieldSubmit={onFieldSubmit}
-        onFieldValueChange={onFieldValueChange}
-      />
-    )
-  }) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>
+      return (
+        <FieldsView
+          {
+            // maybe we can do this in a more type safe way
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+            ...props as any
+          }
+          fields={subFields}
+          onFieldBlur={onFieldBlur}
+          onFieldFocus={onFieldFocus}
+          onFieldSubmit={onFieldSubmit}
+          onFieldValueChange={onFieldValueChange}
+        />
+      )
+    },
+  ) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+  const callbackMapper: CallbackMapper<K> = ((callback: (valuePath: string, ...args: any[]) => any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (subFormValuePath: string, ...args: any[]) => {
+      const valuePath = toKey(subFormValuePath)
+      return callback(valuePath, ...args)
+    }
+  }) as CallbackMapper<K>
+  return {
+    Component,
+    callbackMapper,
+  }
 }

package/mantine/error_renderer.ts

@@ -1,15 +1,24 @@
 import { type ComponentType } from 'react'
+import { type ErrorOfField } from 'types/error_of_field'
+import { type Fields } from 'types/field'
 
-export type ErrorRendererProps<E> = {
+type InternalErrorRendererProps<E> = {
   error: E,
 }
 
+export type ErrorRendererProps<
+  F extends Fields,
+  K extends keyof Fields,
+> = InternalErrorRendererProps<
+  ErrorOfField<F[K]>
+>
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ErrorRenderer<E = any> = ComponentType<ErrorRendererProps<E>>
+export type ErrorRenderer<E = any> = ComponentType<InternalErrorRendererProps<E>>
 
 export function DefaultErrorRenderer({
   error,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-}: ErrorRendererProps<any>) {
+}: InternalErrorRendererProps<any>) {
   return JSON.stringify(error)
 }

package/mantine/hooks.tsx

@@ -44,7 +44,10 @@ import {
   createCheckbox,
   type SuppliedCheckboxProps,
 } from './create_checkbox'
-import { createFieldsView } from './create_fields_view'
+import {
+  createFieldsView,
+  type FieldsView,
+} from './create_fields_view'
 import { createForm } from './create_form'
 import {
   createList,
@@ -185,7 +188,7 @@ class MantineFormImpl<
     // the cache cannot reference keys, so we just use any
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [keyof AllFieldsOfFields<F>, ComponentType<any>, FieldsViewProps<F>],
-    ComponentType
+    FieldsView
   > = new Cache(
     createFieldsView.bind(this),
   )
@@ -392,11 +395,11 @@ class MantineFormImpl<
   fieldsView<
     K extends keyof AllFieldsOfFields<F>,
     P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,
-  >(valuePath: K, FieldsView: ComponentType<P>): MantineFieldComponent<
+  >(valuePath: K, FieldsView: ComponentType<P>): FieldsView<K, MantineFieldComponent<
     FieldsViewProps<P['fields']>,
     P,
     never
-  > {
+  >> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.fieldsViewCache.retrieveOrCreate(
       valuePath,
@@ -404,11 +407,11 @@ class MantineFormImpl<
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       FieldsView as ComponentType,
       this,
-    ) as unknown as MantineFieldComponent<
+    ) as unknown as FieldsView<K, MantineFieldComponent<
       FieldsViewProps<P['fields']>,
       P,
       never
-    >
+    >>
   }
 
   form<