Merge pull request #140 from asvetliakov/master

Allow to pass custom component into <Form>

Author: davidkpiano

src/components/form-component.js

@@ -109,18 +109,20 @@ class Form extends Component {
   }
 
   render() {
-    return (
-      <form
-        {...this.props}
-        onSubmit={this.handleSubmit}
-      >
-        { this.props.children }
-      </form>
-    );
+    const { component, children, ...other } = this.props;
+    return React.createElement(component,
+      {
+        ...other,
+        onSubmit: this.handleSubmit,
+      }, children);
   }
 }
 
 Form.propTypes = {
+  component: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.string,
+  ]),
   validators: PropTypes.object,
   errors: PropTypes.object,
   validateOn: PropTypes.oneOf([
@@ -137,6 +139,7 @@ Form.propTypes = {
 
 Form.defaultProps = {
   validateOn: 'change',
+  component: 'form',
 };
 
 function selector(state, { model }) {

test/form-component-spec.js

@@ -9,6 +9,56 @@ import thunk from 'redux-thunk';
 import { Form, modelReducer, formReducer, Field } from '../src';
 
 describe('<Form> component', () => {
+  describe('wraps component if specified', () => {
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      testForm: formReducer('test', {}),
+      test: modelReducer('test'),
+    }));
+
+    it('should wrap children with specified component (string)', () => {
+      const form = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form model="test" component="section" />
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithTag(form, 'section');
+
+      assert.ok(wrapper);
+    });
+
+    it('should wrap children with specified component (class)', () => {
+      class Wrapper extends React.Component {
+        render() {
+          const { children, ...other } = this.props;
+          return <form className="wrapper" {...other}>{children}</form>;
+        }
+      }
+      Wrapper.propTypes = {
+        children: React.PropTypes.object,
+      };
+      const form = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form model="test" component={Wrapper} />
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithClass(form, 'wrapper');
+
+      assert.ok(wrapper);
+    });
+    it('Renders as <form> by default', () => {
+      const field = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form model="test" />
+        </Provider>
+      );
+
+      const wrapper = TestUtils.findRenderedDOMComponentWithTag(field, 'form');
+
+      assert.ok(wrapper);
+    });
+  });
   describe('validation on submit', () => {
     const store = applyMiddleware(thunk)(createStore)(combineReducers({
       testForm: formReducer('test', {}),