[added] responsively hiding columns

Signed-off-by: Csaba Palfi <csaba@palfi.me>
react-bootstrap · Dec 14, 2015 · 1bee8a2 · 1bee8a2
1 parent 9babe73
commit 1bee8a2
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/docs/examples/GridBasic.js b/docs/examples/GridBasic.js
@@ -8,7 +8,7 @@ const gridInstance = (
     <Row className="show-grid">
       <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
       <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
-      <Col xs={6} md={4}><code>&lt;{'Col xs={6} md={4}'} /&gt;</code></Col>
+      <Col xsHidden md={4}><code>&lt;{'Col xsHidden md={4}'} /&gt;</code></Col>
     </Row>
 
     <Row className="show-grid">

diff --git a/src/Col.js b/src/Col.js
@@ -37,6 +37,38 @@ const Col = React.createClass({
      * class-prefix `col-lg-`
      */
     lg: React.PropTypes.number,
+    /**
+     * Hide column
+     *
+     * on Extra small devices Phones
+     *
+     * adds class `hidden-xs`
+     */
+    xsHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Small devices Tablets
+     *
+     * adds class `hidden-sm`
+     */
+    smHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Medium devices Desktops
+     *
+     * adds class `hidden-md`
+     */
+    mdHidden: React.PropTypes.bool,
+    /**
+     * Hide column
+     *
+     * on Large devices Desktops
+     *
+     * adds class `hidden-lg`
+     */
+    lgHidden: React.PropTypes.bool,
     /**
      * Move columns to the right
      *
@@ -158,6 +190,8 @@ const Col = React.createClass({
         classes['col-' + classPart + this.props[prop]] = true;
       }
 
+      classes['hidden-' + size] = this.props[size + 'Hidden'];
+
       prop = size + 'Offset';
       classPart = size + '-offset-';
       if (this.props[prop] >= 0) {

diff --git a/test/ColSpec.js b/test/ColSpec.js
@@ -40,4 +40,16 @@ describe('Col', () => {
     assert.ok(instanceClassName.match(/\bcol-md-push-0\b/));
     assert.ok(instanceClassName.match(/\bcol-lg-push-0\b/));
   });
+
+  it('Should set Hidden to true', () => {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Col xsHidden smHidden mdHidden lgHidden />
+    );
+
+    let instanceClassName = ReactDOM.findDOMNode(instance).className;
+    assert.ok(instanceClassName.match(/\bhidden-xs\b/));
+    assert.ok(instanceClassName.match(/\bhidden-sm\b/));
+    assert.ok(instanceClassName.match(/\bhidden-md\b/));
+    assert.ok(instanceClassName.match(/\bhidden-lg\b/));
+  });
 });