Implemented custom AutoField prototype.

packages/uniforms-unstyled/__tests__/AutoField.tsx

@@ -115,3 +115,23 @@ test('<AutoField> - uses Component (props)', () => {
 
   expect(Component).toHaveBeenCalledTimes(1);
 });
+
+test('<AutoField> - uses Component (context)', () => {
+  const FieldA = jest.fn(() => null);
+  const FieldB = jest.fn(() => null);
+
+  const element = (
+    <AutoField.componentDetectorContext.Provider
+      value={props => (props['data-component'] === 'A' ? FieldA : FieldB)}
+    >
+      <>
+        <AutoField name="x" data-component="A" />
+        <AutoField name="x" data-component="B" />
+      </>
+    </AutoField.componentDetectorContext.Provider>
+  );
+  mount(element, createContext({ x: { type: String } }));
+
+  expect(FieldA).toHaveBeenCalledTimes(1);
+  expect(FieldB).toHaveBeenCalledTimes(1);
+});

packages/uniforms-unstyled/src/AutoField.tsx

@@ -1,6 +1,5 @@
 import invariant from 'invariant';
-import { ComponentType, createElement } from 'react';
-import { Override, connectField, useField } from 'uniforms';
+import { createAutoField } from 'uniforms';
 
 import BoolField from './BoolField';
 import DateField from './DateField';
@@ -11,53 +10,31 @@ import RadioField from './RadioField';
 import SelectField from './SelectField';
 import TextField from './TextField';
 
-export type AutoFieldProps = Override<
-  Record<string, unknown>,
-  {
-    component?: ComponentType<any> | ReturnType<typeof connectField>;
-    name: string;
-  }
->;
-
-export default function AutoField(originalProps: AutoFieldProps) {
-  const props = useField(originalProps.name, originalProps)[0];
-  const { allowedValues, checkboxes, fieldType } = props;
-  let { component } = props;
+export type AutoFieldProps = Parameters<typeof AutoField>[0];
 
-  if (component === undefined) {
-    if (allowedValues) {
-      if (checkboxes && fieldType !== Array) {
-        component = RadioField;
-      } else {
-        component = SelectField;
-      }
-    } else {
-      switch (fieldType) {
-        case Array:
-          component = ListField;
-          break;
-        case Boolean:
-          component = BoolField;
-          break;
-        case Date:
-          component = DateField;
-          break;
-        case Number:
-          component = NumField;
-          break;
-        case Object:
-          component = NestField;
-          break;
-        case String:
-          component = TextField;
-          break;
-      }
+const AutoField = createAutoField(props => {
+  if (props.allowedValues) {
+    return props.checkboxes && props.fieldType !== Array
+      ? RadioField
+      : SelectField;
+  }
 
-      invariant(component, 'Unsupported field type: %s', fieldType);
-    }
+  switch (props.fieldType) {
+    case Array:
+      return ListField;
+    case Boolean:
+      return BoolField;
+    case Date:
+      return DateField;
+    case Number:
+      return NumField;
+    case Object:
+      return NestField;
+    case String:
+      return TextField;
   }
 
-  return 'options' in component && component.options?.kind === 'leaf'
-    ? createElement(component.Component, props)
-    : createElement(component, originalProps);
-}
+  return invariant(false, 'Unsupported field type: %s', props.fieldType);
+});
+
+export default AutoField;

packages/uniforms/src/createAutoField.tsx

@@ -0,0 +1,39 @@
+import invariant from 'invariant';
+import { ComponentType, createContext, createElement, useContext } from 'react';
+
+import { connectField } from './connectField';
+import { Context, Override } from './types';
+import { useField } from './useField';
+
+type AutoFieldProps = Override<
+  Record<string, unknown>,
+  { component?: Component; name: string }
+>;
+
+type Component = ComponentType<any> | ReturnType<typeof connectField>;
+
+type ComponentDetector = (
+  props: ReturnType<typeof useField>[0],
+  uniforms: Context<unknown>,
+) => Component;
+
+export function createAutoField(defaultComponentDetector: ComponentDetector) {
+  const context = createContext<ComponentDetector>(defaultComponentDetector);
+
+  function AutoField(rawProps: AutoFieldProps) {
+    const [props, uniforms] = useField(rawProps.name, rawProps);
+    const componentDetector = useContext(context);
+    const component = props.component ?? componentDetector(props, uniforms);
+
+    invariant(component, 'AutoField received no component for: %s', props.name);
+
+    return 'options' in component && component.options?.kind === 'leaf'
+      ? createElement(component.Component, props)
+      : createElement(component, rawProps);
+  }
+
+  AutoField.componentDetectorContext = context;
+  AutoField.defaultComponentDetector = defaultComponentDetector;
+
+  return AutoField;
+}

packages/uniforms/src/index.ts

@@ -7,6 +7,7 @@ export * from './ValidatedQuickForm';
 export * from './changedKeys';
 export * from './connectField';
 export * from './context';
+export * from './createAutoField';
 export * from './filterDOMProps';
 export * from './joinName';
 export * from './randomIds';