Skip to content

Commit

Permalink
[added] responsively hiding columns
Browse files Browse the repository at this point in the history
Signed-off-by: Csaba Palfi <csaba@palfi.me>
  • Loading branch information
csabapalfi committed Dec 14, 2015
1 parent 9babe73 commit 1bee8a2
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 1 deletion.
2 changes: 1 addition & 1 deletion docs/examples/GridBasic.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
34 changes: 34 additions & 0 deletions src/Col.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 12 additions & 0 deletions test/ColSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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/));
});
});

0 comments on commit 1bee8a2

Please sign in to comment.