Skip to content
This repository has been archived by the owner on Jan 15, 2022. It is now read-only.

Commit

Permalink
Handle passing through context to child components
Browse files Browse the repository at this point in the history 
When instantiating child components in order to render them, also pass
through the props given when creating the child component.
  • Loading branch information
@glittershark
glittershark committed Oct 2, 2015
1 parent 1eb6eb9 commit 1f02dbd
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 99 deletions.
2 changes: 1 addition & 1 deletion build/reactable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1052,7 +1052,7 @@ window.React["default"] = window.React;
if ([_tfoot.Tfoot, _thead.Thead, _tr.Tr].indexOf(child.type) >= 0) {
reactableDescendant = child;
} else {
reactableDescendant = new child.type(child.props).render();
reactableDescendant = new child.type(child.props, child._context).render();
test = true;
}

Expand Down
167 changes: 113 additions & 54 deletions build/tests/reactable_test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -611,71 +611,130 @@
});

describe('adding <CustomComponents>s to the <Table>', function () {
before(function () {
var CustomComponent = React.createClass({
displayName: "CustomComponent",
propTypes: {
name: React.PropTypes.string,
age: React.PropTypes.number,
position: React.PropTypes.string
},
render: function render() {
return React.createElement(
Reactable.Tr,
null,
React.createElement(
Reactable.Td,
{ column: 'Name' },
this.props.name || ''
),
React.createElement(
Reactable.Td,
{ column: 'Age' },
this.props.age || ''
),
React.createElement(
Reactable.Td,
{ column: 'Position' },
this.props.position || ''
)
);
}
context('passing through props', function () {
before(function () {
var CustomComponent = React.createClass({
displayName: "CustomComponent",
propTypes: {
name: React.PropTypes.string,
age: React.PropTypes.number,
position: React.PropTypes.string
},
render: function render() {
return React.createElement(
Reactable.Tr,
null,
React.createElement(
Reactable.Td,
{ column: 'Name' },
this.props.name || ''
),
React.createElement(
Reactable.Td,
{ column: 'Age' },
this.props.age || ''
),
React.createElement(
Reactable.Td,
{ column: 'Position' },
this.props.position || ''
)
);
}
});

React.render(React.createElement(
Reactable.Table,
{ className: 'table', id: 'table' },
React.createElement(CustomComponent, { name: 'Griffin Smith', age: 18 }),
React.createElement(CustomComponent, { name: 'Lee Salminen', age: 23 }),
React.createElement(CustomComponent, { age: 28, position: 'Developer' })
), ReactableTestUtils.testNode());
});

React.render(React.createElement(
Reactable.Table,
{ className: 'table', id: 'table' },
React.createElement(CustomComponent, { name: 'Griffin Smith', age: 18 }),
React.createElement(CustomComponent, { name: 'Lee Salminen', age: 23 }),
React.createElement(CustomComponent, { age: 28, position: 'Developer' })
), ReactableTestUtils.testNode());
});
after(ReactableTestUtils.resetTestEnvironment);

after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function () {
expect($('table#table.table')).to.exist;
});

it('renders the table', function () {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function () {
var headers = [];
$('thead th').each(function () {
headers.push($(this).text());
});

it('renders the column headers in the table', function () {
var headers = [];
$('thead th').each(function () {
headers.push($(this).text());
expect(headers).to.eql(['Name', 'Age', 'Position']);
});

expect(headers).to.eql(['Name', 'Age', 'Position']);
});
it('renders the first row with the correct data', function () {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});

it('renders the first row with the correct data', function () {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function () {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});

it('renders the second row with the correct data', function () {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
it('renders the third row with the correct data', function () {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});

it('renders the third row with the correct data', function () {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
context('passing through context', function () {
before(function () {
var RowComponent = React.createClass({
displayName: 'CustomComponent',
contextTypes: { test: React.PropTypes.string },
render: function render() {
return React.createElement(
Reactable.Tr,
null,
React.createElement(
Reactable.Td,
{ column: 'Name' },
this.props.name || ''
),
React.createElement(
Reactable.Td,
{ column: 'Test' },
this.context.test || ''
)
);
}
});

var TableComponent = React.createClass({
displayName: 'TableComponent',
childContextTypes: { test: React.PropTypes.string },
getChildContext: function getChildContext() {
return { test: 'foobar' };
},
render: function render() {
return React.createElement(
Reactable.Table,
{ className: 'table', id: 'table' },
React.createElement(RowComponent, { name: 'Griffin Smith' }),
React.createElement(RowComponent, { name: 'Lee Salminen' })
);
}
});

React.render(React.createElement(TableComponent, null), ReactableTestUtils.testNode());
});

after(ReactableTestUtils.resetTestEnvironment);

it('renders the table', function () {
expect($('table#table.table')).to.exist;
});

it('renders the first row with the correct data', function () {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', 'foobar']);
});

it('renders the second row with the correct data', function () {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', 'foobar']);
});
});
});

Expand Down
2 changes: 1 addition & 1 deletion src/reactable/table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export class Table extends React.Component {
if ([Tfoot, Thead, Tr].indexOf(child.type) >= 0) {
reactableDescendant = child
} else {
reactableDescendant = (new child.type(child.props)).render()
reactableDescendant = (new child.type(child.props, child._context)).render()
test = true
}

Expand Down
137 changes: 94 additions & 43 deletions tests/reactable_test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,60 +418,111 @@ describe('Reactable', function() {
});

describe('adding <CustomComponents>s to the <Table>', function() {
before(function() {
var CustomComponent = React.createClass({
displayName: "CustomComponent",
propTypes:{
name: React.PropTypes.string,
age: React.PropTypes.number,
position: React.PropTypes.string
},
render: function(){
return (
<Reactable.Tr>
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
<Reactable.Td column="Age">{this.props.age || ''}</Reactable.Td>
<Reactable.Td column="Position">{this.props.position || ''}</Reactable.Td>
</Reactable.Tr>
);
}
context('passing through props', function() {
before(function() {
var CustomComponent = React.createClass({
displayName: "CustomComponent",
propTypes:{
name: React.PropTypes.string,
age: React.PropTypes.number,
position: React.PropTypes.string
},
render: function(){
return (
<Reactable.Tr>
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
<Reactable.Td column="Age">{this.props.age || ''}</Reactable.Td>
<Reactable.Td column="Position">{this.props.position || ''}</Reactable.Td>
</Reactable.Tr>
);
}
});

React.render(
<Reactable.Table className="table" id="table">
<CustomComponent name='Griffin Smith' age={18} />
<CustomComponent name='Lee Salminen' age={23} />
<CustomComponent age={28} position='Developer' />
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});

React.render(
<Reactable.Table className="table" id="table">
<CustomComponent name='Griffin Smith' age={18} />
<CustomComponent name='Lee Salminen' age={23} />
<CustomComponent age={28} position='Developer' />
</Reactable.Table>,
ReactableTestUtils.testNode()
);
});
after(ReactableTestUtils.resetTestEnvironment);

after(ReactableTestUtils.resetTestEnvironment);
it('renders the table', function() {
expect($('table#table.table')).to.exist;
});

it('renders the table', function() {
expect($('table#table.table')).to.exist;
});
it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
});

it('renders the column headers in the table', function() {
var headers = [];
$('thead th').each(function() {
headers.push($(this).text());
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});

expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
});
it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});

it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
});
it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
});

it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
});
});

it('renders the third row with the correct data', function() {
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
context('passing through context', function() {
before(function() {
let RowComponent = React.createClass({
displayName: 'CustomComponent',
contextTypes: { test: React.PropTypes.string },
render: function(){
return (
<Reactable.Tr>
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
<Reactable.Td column="Test">{this.context.test || ''}</Reactable.Td>
</Reactable.Tr>
);
}
});

let TableComponent = React.createClass({
displayName: 'TableComponent',
childContextTypes: { test: React.PropTypes.string },
getChildContext: function() {
return { test: 'foobar' };
},
render: function() {
return (
<Reactable.Table className="table" id="table">
<RowComponent name='Griffin Smith' />
<RowComponent name='Lee Salminen' />
</Reactable.Table>
);
}
});

React.render(<TableComponent/>, ReactableTestUtils.testNode());
});

after(ReactableTestUtils.resetTestEnvironment);

it('renders the table', function() {
expect($('table#table.table')).to.exist;
});

it('renders the first row with the correct data', function() {
ReactableTestUtils.expectRowText(0, ['Griffin Smith', 'foobar']);
});

it('renders the second row with the correct data', function() {
ReactableTestUtils.expectRowText(1, ['Lee Salminen', 'foobar']);
});
});
});

Expand Down

0 comments on commit 1f02dbd

Please sign in to comment.