Added kind option to connectField.

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Next
 
 - **Breaking:** Removed `modelSync` from `AutoForm` state. [\#739](https://github.com/vazco/uniforms/issues/739)
+- **Added:** New `kind: 'leaf' | 'node'` flag for `connectField`. [\#741](https://github.com/vazco/uniforms/issues/741)
 
 ## [v3.0.0-alpha.4](https://github.com/vazco/uniforms/tree/v3.0.0-alpha.4) (2020-06-03)
 

packages/uniforms-antd/__tests__/AutoField.tsx

@@ -21,7 +21,7 @@ test('<AutoField> - works', () => {
   expect(wrapper.find(AutoField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders RadioField', () => {
+test('<AutoField> - detects RadioField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -34,10 +34,10 @@ test('<AutoField> - renders RadioField', () => {
     }),
   );
 
-  expect(wrapper.find(RadioField)).toHaveLength(1);
+  expect(wrapper.find(RadioField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders SelectField', () => {
+test('<AutoField> - detects SelectField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -47,17 +47,17 @@ test('<AutoField> - renders SelectField', () => {
     }),
   );
 
-  expect(wrapper.find(SelectField)).toHaveLength(1);
+  expect(wrapper.find(SelectField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders DateField', () => {
+test('<AutoField> - detects DateField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Date } }));
 
-  expect(wrapper.find(DateField)).toHaveLength(1);
+  expect(wrapper.find(DateField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders ListField', () => {
+test('<AutoField> - detects ListField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -67,35 +67,35 @@ test('<AutoField> - renders ListField', () => {
   expect(wrapper.find(ListField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders NumField', () => {
+test('<AutoField> - detects NumField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Number } }));
 
-  expect(wrapper.find(NumField)).toHaveLength(1);
+  expect(wrapper.find(NumField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders NestField', () => {
+test('<AutoField> - detects NestField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Object } }));
 
   expect(wrapper.find(NestField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders TextField', () => {
+test('<AutoField> - detects TextField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: String } }));
 
-  expect(wrapper.find(TextField)).toHaveLength(1);
+  expect(wrapper.find(TextField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders BoolField', () => {
+test('<AutoField> - detects BoolField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Boolean } }));
 
-  expect(wrapper.find(BoolField)).toHaveLength(1);
+  expect(wrapper.find(BoolField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders Component (model)', () => {
+test('<AutoField> - uses Component (schema)', () => {
   const Component = jest.fn(() => null);
 
   const element = <AutoField name="x" />;
@@ -107,7 +107,7 @@ test('<AutoField> - renders Component (model)', () => {
   expect(Component).toHaveBeenCalledTimes(1);
 });
 
-test('<AutoField> - renders Component (specified)', () => {
+test('<AutoField> - uses Component (props)', () => {
   const Component = jest.fn(() => null);
 
   const element = <AutoField name="x" component={Component} />;

packages/uniforms-antd/src/AutoField.tsx

@@ -1,6 +1,6 @@
 import invariant from 'invariant';
 import { ComponentType, createElement } from 'react';
-import { Override, useField } from 'uniforms';
+import { Override, connectField, useField } from 'uniforms';
 
 import BoolField from './BoolField';
 import DateField from './DateField';
@@ -14,7 +14,7 @@ import TextField from './TextField';
 export type AutoFieldProps = Override<
   Record<string, unknown>,
   {
-    component?: ComponentType<any>;
+    component?: ComponentType<any> | ReturnType<typeof connectField>;
     name: string;
   }
 >;
@@ -57,5 +57,7 @@ export default function AutoField(originalProps: AutoFieldProps) {
     }
   }
 
-  return createElement(component, originalProps);
+  return 'options' in component && component.options?.kind === 'leaf'
+    ? createElement(component.Component, props)
+    : createElement(component, originalProps);
 }

packages/uniforms-antd/src/BoolField.tsx

@@ -45,4 +45,4 @@ Bool.defaultProps = {
   unCheckedChildren: <Icon type="close" />,
 };
 
-export default connectField(Bool);
+export default connectField(Bool, { kind: 'leaf' });

packages/uniforms-antd/src/DateField.tsx

@@ -38,4 +38,4 @@ Date.defaultProps = {
   style: { width: '100%' },
 };
 
-export default connectField(Date);
+export default connectField(Date, { kind: 'leaf' });

packages/uniforms-antd/src/ErrorField.tsx

@@ -31,4 +31,4 @@ Error.defaultProps = {
   },
 };
 
-export default connectField(Error, { initialValue: false });
+export default connectField(Error, { initialValue: false, kind: 'leaf' });

packages/uniforms-antd/src/ListAddField.tsx

@@ -45,4 +45,4 @@ ListAdd.defaultProps = {
   type: 'dashed' as ButtonType,
 };
 
-export default connectField(ListAdd, { initialValue: false });
+export default connectField(ListAdd, { initialValue: false, kind: 'leaf' });

packages/uniforms-antd/src/ListDelField.tsx

@@ -52,4 +52,4 @@ ListDel.defaultProps = {
   type: 'ghost' as ButtonType,
 };
 
-export default connectField(ListDel);
+export default connectField(ListDel, { initialValue: false, kind: 'leaf' });

packages/uniforms-antd/src/LongTextField.tsx

@@ -40,4 +40,4 @@ function LongText(props: LongTextFieldProps) {
 
 LongText.defaultProps = { rows: 5 };
 
-export default connectField(LongText);
+export default connectField(LongText, { kind: 'leaf' });

packages/uniforms-antd/src/NumField.tsx

@@ -35,4 +35,4 @@ function Num(props: NumFieldProps) {
   );
 }
 
-export default connectField(Num);
+export default connectField(Num, { kind: 'leaf' });

packages/uniforms-antd/src/RadioField.tsx

@@ -42,4 +42,4 @@ function Radio(props: RadioFieldProps) {
   );
 }
 
-export default connectField(Radio);
+export default connectField(Radio, { kind: 'leaf' });

packages/uniforms-antd/src/SelectField.tsx

@@ -93,4 +93,4 @@ function Select(props: SelectFieldProps) {
   );
 }
 
-export default connectField(Select);
+export default connectField(Select, { kind: 'leaf' });

packages/uniforms-antd/src/TextField.tsx

@@ -30,4 +30,4 @@ function Text(props: TextFieldProps) {
   );
 }
 
-export default connectField(Text);
+export default connectField(Text, { kind: 'leaf' });

packages/uniforms-bootstrap3/__tests__/AutoField.tsx

@@ -21,7 +21,7 @@ test('<AutoField> - works', () => {
   expect(wrapper.find(AutoField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders RadioField', () => {
+test('<AutoField> - detects RadioField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -34,10 +34,10 @@ test('<AutoField> - renders RadioField', () => {
     }),
   );
 
-  expect(wrapper.find(RadioField)).toHaveLength(1);
+  expect(wrapper.find(RadioField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders SelectField', () => {
+test('<AutoField> - detects SelectField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -47,17 +47,17 @@ test('<AutoField> - renders SelectField', () => {
     }),
   );
 
-  expect(wrapper.find(SelectField)).toHaveLength(1);
+  expect(wrapper.find(SelectField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders DateField', () => {
+test('<AutoField> - detects DateField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Date } }));
 
-  expect(wrapper.find(DateField)).toHaveLength(1);
+  expect(wrapper.find(DateField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders ListField', () => {
+test('<AutoField> - detects ListField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(
     element,
@@ -67,35 +67,35 @@ test('<AutoField> - renders ListField', () => {
   expect(wrapper.find(ListField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders NumField', () => {
+test('<AutoField> - detects NumField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Number } }));
 
-  expect(wrapper.find(NumField)).toHaveLength(1);
+  expect(wrapper.find(NumField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders NestField', () => {
+test('<AutoField> - detects NestField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Object } }));
 
   expect(wrapper.find(NestField)).toHaveLength(1);
 });
 
-test('<AutoField> - renders TextField', () => {
+test('<AutoField> - detects TextField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: String } }));
 
-  expect(wrapper.find(TextField)).toHaveLength(1);
+  expect(wrapper.find(TextField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders BoolField', () => {
+test('<AutoField> - detects BoolField', () => {
   const element = <AutoField name="x" />;
   const wrapper = mount(element, createContext({ x: { type: Boolean } }));
 
-  expect(wrapper.find(BoolField)).toHaveLength(1);
+  expect(wrapper.find(BoolField.Component)).toHaveLength(1);
 });
 
-test('<AutoField> - renders Component (model)', () => {
+test('<AutoField> - uses Component (schema)', () => {
   const Component = jest.fn(() => null);
 
   const element = <AutoField name="x" />;
@@ -107,7 +107,7 @@ test('<AutoField> - renders Component (model)', () => {
   expect(Component).toHaveBeenCalledTimes(1);
 });
 
-test('<AutoField> - renders Component (specified)', () => {
+test('<AutoField> - uses Component (props)', () => {
   const Component = jest.fn(() => null);
 
   const element = <AutoField name="x" component={Component} />;

packages/uniforms-bootstrap3/src/AutoField.tsx

@@ -1,6 +1,6 @@
 import invariant from 'invariant';
 import { ComponentType, createElement } from 'react';
-import { Override, useField } from 'uniforms';
+import { Override, connectField, useField } from 'uniforms';
 
 import BoolField from './BoolField';
 import DateField from './DateField';
@@ -14,7 +14,7 @@ import TextField from './TextField';
 export type AutoFieldProps = Override<
   Record<string, unknown>,
   {
-    component?: ComponentType<any>;
+    component?: ComponentType<any> | ReturnType<typeof connectField>;
     name: string;
   }
 >;
@@ -57,5 +57,7 @@ export default function AutoField(originalProps: AutoFieldProps) {
     }
   }
 
-  return createElement(component, originalProps);
+  return 'options' in component && component.options?.kind === 'leaf'
+    ? createElement(component.Component, props)
+    : createElement(component, originalProps);
 }

packages/uniforms-bootstrap3/src/BoolField.tsx

@@ -55,4 +55,4 @@ function Bool(props: BoolFieldProps) {
   );
 }
 
-export default connectField(Bool);
+export default connectField(Bool, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/DateField.tsx

@@ -69,4 +69,4 @@ function Date({
   );
 }
 
-export default connectField(Date);
+export default connectField(Date, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/ErrorField.tsx

@@ -35,4 +35,4 @@ function Error({
   );
 }
 
-export default connectField(Error, { initialValue: false });
+export default connectField(Error, { initialValue: false, kind: 'leaf' });

packages/uniforms-bootstrap3/src/ListAddField.tsx

@@ -57,4 +57,4 @@ ListAdd.defaultProps = {
   addIcon: <i className="glyphicon glyphicon-plus" />,
 };
 
-export default connectField(ListAdd, { initialValue: false });
+export default connectField(ListAdd, { initialValue: false, kind: 'leaf' });

packages/uniforms-bootstrap3/src/ListDelField.tsx

@@ -56,4 +56,4 @@ ListDel.defaultProps = {
   removeIcon: <i className="glyphicon glyphicon-minus" />,
 };
 
-export default connectField(ListDel, { initialValue: false });
+export default connectField(ListDel, { initialValue: false, kind: 'leaf' });

packages/uniforms-bootstrap3/src/LongTextField.tsx

@@ -34,4 +34,4 @@ function LongText(props: LongTextFieldProps) {
     />,
   );
 }
-export default connectField(LongText);
+export default connectField(LongText, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/NumField.tsx

@@ -43,4 +43,4 @@ function Num(props: NumFieldProps) {
   );
 }
 
-export default connectField(Num);
+export default connectField(Num, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/RadioField.tsx

@@ -50,4 +50,4 @@ function Radio(props: RadioFieldProps) {
   );
 }
 
-export default connectField(Radio);
+export default connectField(Radio, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/SelectField.tsx

@@ -123,4 +123,4 @@ function Select({
   );
 }
 
-export default connectField(Select);
+export default connectField(Select, { kind: 'leaf' });

packages/uniforms-bootstrap3/src/TextField.tsx

@@ -35,4 +35,4 @@ function Text(props: TextFieldProps) {
   );
 }
 
-export default connectField(Text);
+export default connectField(Text, { kind: 'leaf' });