Implemented custom AutoField prototype.

packages/uniforms-unstyled/__tests__/AutoField.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   AutoField,
+  AutoFieldContext,
   BoolField,
   DateField,
   ListField,
@@ -115,3 +116,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 = (
+    <AutoFieldContext.Provider
+      value={props => (props['data-component'] === 'A' ? FieldA : FieldB)}
+    >
+      <>
+        <AutoField name="x" data-component="A" />
+        <AutoField name="x" data-component="B" />
+      </>
+    </AutoFieldContext.Provider>
+  );
+  mount(element, createContext({ x: { type: String } }));
+
+  expect(FieldA).toHaveBeenCalledTimes(1);
+  expect(FieldB).toHaveBeenCalledTimes(1);
+});

packages/uniforms-unstyled/__tests__/index.ts

@@ -4,6 +4,7 @@ it('exports everything', () => {
   expect(unstyled).toEqual({
     AutoFields: expect.any(Function),
     AutoField: expect.any(Function),
+    AutoFieldContext: expect.any(Object),
     AutoForm: expect.any(Function),
     BaseForm: expect.any(Function),
     BoolField: expect.any(Function),

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;
-      }
+export const { AutoField, AutoFieldContext } = 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-unstyled/src/index.ts

@@ -1,4 +1,4 @@
-export { default as AutoField, AutoFieldProps } from './AutoField';
+export * from './AutoField';
 export { default as AutoFields, AutoFieldsProps } from './AutoFields';
 export { default as AutoForm } from './AutoForm';
 export { default as BaseForm } from './BaseForm';

packages/uniforms/src/createAutoField.tsx

@@ -0,0 +1,33 @@
+import invariant from 'invariant';
+import { ComponentType, createContext, createElement, useContext } from 'react';
+
+import { connectField } from './connectField';
+import { 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]) => Component;
+
+export function createAutoField(defaultComponentDetector: ComponentDetector) {
+  const context = createContext<ComponentDetector>(defaultComponentDetector);
+
+  function AutoField(originalProps: AutoFieldProps) {
+    const props = useField(originalProps.name, originalProps)[0];
+    const componentDetector = useContext(context);
+    const component = props.component ?? componentDetector(props);
+
+    invariant(component, 'AutoField received no component for: %s', props.name);
+
+    return 'options' in component && component.options?.kind === 'leaf'
+      ? createElement(component.Component, props)
+      : createElement(component, originalProps);
+  }
+
+  return { AutoField, AutoFieldContext: context };
+}

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';

website/lib/universal.tsx

@@ -44,6 +44,7 @@ export const themeContext = createContext<keyof typeof themes>('unstyled');
 function _createThemedComponent(component: keyof typeof unstyled) {
   return function ThemedComponent(props: Record<string, any>) {
     const theme = useContext(themeContext);
+    // @ts-expect-error: AutoFieldContext available only in uniforms-unstyled right now.
     const Component = themes[theme][component];
     return <Component key={theme} {...props} />;
   };