Adding support for custom wrapper component for Field via <Field component={...}>

Author: davidkpiano

lib/components/field-component.js

@@ -262,6 +262,18 @@ function createFieldControlComponent(control, props, options) {
     control: control }));
 }
 
+function getFieldWrapper(props) {
+  if (!props.component) {
+    if (props.className || props.children.length > 1) {
+      return 'div';
+    }
+
+    return null;
+  }
+
+  return props.component;
+}
+
 function createFieldClass() {
   var customControlPropsMap = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
@@ -283,15 +295,12 @@ function createFieldClass() {
       value: function render() {
         var props = this.props;
 
+        var component = getFieldWrapper(props);
 
-        if (props.children.length > 1) {
-          return _react2.default.createElement(
-            'div',
-            props,
-            _react2.default.Children.map(props.children, function (child) {
-              return createFieldControlComponent(child, props, options);
-            })
-          );
+        if (component) {
+          return _react2.default.createElement(component, props, _react2.default.Children.map(props.children, function (child) {
+            return createFieldControlComponent(child, props, options);
+          }));
         }
 
         return createFieldControlComponent(_react2.default.Children.only(props.children), props, options);
@@ -306,7 +315,8 @@ function createFieldClass() {
     updateOn: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func, _react2.default.PropTypes.oneOf(['change', 'blur', 'focus'])]),
     validators: _react2.default.PropTypes.object,
     asyncValidators: _react2.default.PropTypes.object,
-    parser: _react2.default.PropTypes.func
+    parser: _react2.default.PropTypes.func,
+    component: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.func, _react2.default.PropTypes.string])
   };
 
 

src/components/field-component.js

@@ -228,6 +228,18 @@ function createFieldControlComponent(control, props, options) {
         control={control} />;
 }
 
+function getFieldWrapper(props) {
+  if (!props.component) {
+    if (props.className || props.children.length > 1) {
+      return 'div';
+    }
+
+    return null;
+  }
+
+  return props.component;
+}
+
 export function createFieldClass(
   customControlPropsMap = {}
 ) {
@@ -251,20 +263,24 @@ export function createFieldClass(
       ]),
       validators: React.PropTypes.object,
       asyncValidators: React.PropTypes.object,
-      parser: React.PropTypes.func
+      parser: React.PropTypes.func,
+      component: React.PropTypes.oneOfType([
+        React.PropTypes.func,
+        React.PropTypes.string
+      ])
     };
 
     render() {
       const { props } = this;
-
-      if (props.children.length > 1) {
-        return (
-          <div {...props}>
-            { React.Children.map(
-              props.children,
-              (child) => createFieldControlComponent(child, props, options))
-            }
-          </div>
+      let component = getFieldWrapper(props);
+
+      if (component) {
+        return React.createElement(
+          component,
+          props,
+          React.Children.map(
+            props.children,
+            (child) => createFieldControlComponent(child, props, options))
         );
       }
 

test/field-component-spec.js

@@ -44,6 +44,25 @@ describe('<Field /> component', () => {
       2);
   });
 
+  it('should not wrap child components in a <div> if only one', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+        test: createModelReducer('test', { foo: 'bar' })
+      }));
+    const field = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Field model="test.foo">
+          <input />
+        </Field>
+      </Provider>
+    );
+
+    assert.throws(() => {
+      TestUtils.findRenderedDOMComponentWithTag(field, 'div');
+    });
+
+    assert.ok(TestUtils.findRenderedDOMComponentWithTag(field, 'input'));
+  });
+
   it('should recursively handle nested control components', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       test: createModelReducer('test', { foo: 'bar' })
@@ -651,4 +670,76 @@ describe('<Field /> component', () => {
       assert.equal(options.length, 3);
     });
   });
+
+  describe('wrapper components with component property', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      test: createModelReducer('test', {})
+    }));
+
+    it('should wrap children with specified component (string)', () => {
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field component="div">
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithTag(field, 'div');
+
+      assert.ok(wrapper);
+    });
+
+    it('should wrap children with specified component (class)', () => {
+      class Wrapper extends React.Component {
+        render() {
+          return <main className="wrapper">{ this.props.children }</main>
+        }
+      }
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field component={Wrapper}>
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithClass(field, 'wrapper');
+
+      assert.ok(wrapper);
+    });
+
+    it('should wrap children with specified component (function)', () => {
+      function Wrapper(props) {
+        return <section className="wrapper">{props.children}</section>
+      }
+
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field component={Wrapper}>
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithClass(field, 'wrapper');
+
+      assert.ok(wrapper);
+    });
+
+    it('should wrap children with a <div> when provided with className', () => {
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Field className="wrapper">
+            <input type="text" />
+          </Field>
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithClass(field, 'wrapper');
+
+      assert.ok(wrapper);
+    });
+  });
 });