Forms - Grid Based Forms

kushalsng · Nov 17, 2016 · 4a1aed8 · 4a1aed8
1 parent 9c22a1d
commit 4a1aed8
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -79,3 +79,4 @@ There are no code listings in this chapter.
    * Bootstrap Installation [Full source](../../tree/10-bootstrap-installation) | [Diffs from previous step](../../compare/09-using-delete-api...10-bootstrap-installation)
    * Navigation [Full source](../../tree/10-navigation) | [Diffs from previous step](../../compare/10-bootstrap-installation...10-navigation)
    * Table and Panel [Full source](../../tree/10-table-and-panel) | [Diffs from previous step](../../compare/10-navigation...10-table-and-panel)
+   * Forms - Grid Based Forms [Full source](../../tree/10-forms--grid-based-forms) | [Diffs from previous step](../../compare/10-table-and-panel...10-forms--grid-based-forms)
diff --git a/src/IssueFilter.jsx b/src/IssueFilter.jsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Col, Row, FormGroup, FormControl, ControlLabel, InputGroup,
+  ButtonToolbar, Button } from 'react-bootstrap';
 
 export default class IssueFilter extends React.Component {
   constructor(props) {
@@ -67,25 +69,45 @@ export default class IssueFilter extends React.Component {
 
   render() {
     return (
-      <div>
-        Status:
-        <select value={this.state.status} onChange={this.onChangeStatus}>
-          <option value="">(Any)</option>
-          <option value="New">New</option>
-          <option value="Open">Open</option>
-          <option value="Assigned">Assigned</option>
-          <option value="Fixed">Fixed</option>
-          <option value="Verified">Verified</option>
-          <option value="Closed">Closed</option>
-        </select>
-        &nbsp;Effort between:
-        <input size={5} value={this.state.effort_gte} onChange={this.onChangeEffortGte} />
-        &nbsp;-&nbsp;
-        <input size={5} value={this.state.effort_lte} onChange={this.onChangeEffortLte} />
-        <button onClick={this.applyFilter}>Apply</button>
-        <button onClick={this.resetFilter} disabled={!this.state.changed}>Reset</button>
-        <button onClick={this.clearFilter}>Clear</button>
-      </div>
+      <Row>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <FormGroup>
+            <ControlLabel>Status</ControlLabel>
+            <FormControl
+              componentClass="select" value={this.state.status}
+              onChange={this.onChangeStatus}
+            >
+              <option value="">(Any)</option>
+              <option value="New">New</option>
+              <option value="Open">Open</option>
+              <option value="Assigned">Assigned</option>
+              <option value="Fixed">Fixed</option>
+              <option value="Verified">Verified</option>
+              <option value="Closed">Closed</option>
+            </FormControl>
+          </FormGroup>
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <FormGroup>
+            <ControlLabel>Effort</ControlLabel>
+            <InputGroup>
+              <FormControl value={this.state.effort_gte} onChange={this.onChangeEffortGte} />
+              <InputGroup.Addon>-</InputGroup.Addon>
+              <FormControl value={this.state.effort_lte} onChange={this.onChangeEffortLte} />
+            </InputGroup>
+          </FormGroup>
+        </Col>
+        <Col xs={6} sm={4} md={3} lg={2}>
+          <FormGroup>
+            <ControlLabel>&nbsp;</ControlLabel>
+            <ButtonToolbar>
+              <Button bsStyle="primary" onClick={this.applyFilter}>Apply</Button>
+              <Button onClick={this.resetFilter} disabled={!this.state.changed}>Reset</Button>
+              <Button onClick={this.clearFilter}>Clear</Button>
+            </ButtonToolbar>
+          </FormGroup>
+        </Col>
+      </Row>
     );
   }
 }