Merge pull request #34 from cedricmessiant/master

Allow user to provide custom buttons to the form

Author: n1k0

README.md

@@ -231,6 +231,22 @@ render((
 
 If you're curious how this could ever be useful, have a look at the [Kinto formbuilder](https://github.com/Kinto/formbuilder) repository to see how it's used to provide editing capabilities to any form field.
 
+## Custom buttons
+
+You can provide custom buttons to your form via the `Form` component's `children`. A default submit button will be rendered if you don't provide children to the `Form` component.
+
+```jsx
+render(
+  <Form schema={schema}>
+    <div>
+      <button type="submit">Submit</button>
+      <button>Cancel</button>
+    </div>
+  </Form>);
+```
+
+**Warning:** there should be a button or an input with `type="submit"` to trigger the form submission (and then the form validation).
+
 ## Development server
 
 ```

src/components/Form.js

@@ -74,7 +74,7 @@ export default class Form extends Component {
   }
 
   render() {
-    const {schema, uiSchema} = this.props;
+    const {children, schema, uiSchema} = this.props;
     const {formData} = this.state;
     const _SchemaField = this.props.SchemaField || SchemaField;
     return (
@@ -86,7 +86,7 @@ export default class Form extends Component {
           formData={formData}
           onChange={this.onChange.bind(this)}
           SchemaField={_SchemaField}/>
-        <p><button type="submit">Submit</button></p>
+        { children ? children : <p><button type="submit">Submit</button></p> }
       </form>
     );
   }

test/index_test.js

@@ -43,6 +43,36 @@ describe("Form", () => {
       expect(node.querySelectorAll("button[type=submit]"))
         .to.have.length.of(1);
     });
+
+    it("should render children buttons", () => {
+      const props = {schema: {}};
+      const comp = renderIntoDocument(
+        <Form {...props}>
+          <button type="submit">Submit</button>
+          <button type="submit">Another submit</button>
+        </Form>
+      );
+      const node = findDOMNode(comp);
+      expect(node.querySelectorAll("button[type=submit]"))
+        .to.have.length.of(2);
+    });
+  });
+
+  describe("Custom submit buttons", () => {
+    it("should submit the form when clicked", () => {
+      const onSubmit = sandbox.spy();
+      const comp = renderIntoDocument(
+        <Form onSubmit={ onSubmit } schema={ {} }>
+          <button type="submit">Submit</button>
+          <button type="submit">Another submit</button>
+        </Form>
+      );
+      const node = findDOMNode(comp);
+      const buttons = node.querySelectorAll("button[type=submit]");
+      buttons[0].click();
+      buttons[1].click();
+      sinon.assert.calledTwice(onSubmit);
+    });
   });
 
   describe("Custom SchemaField", () => {