From 1f02dbd3d96fc0fbfd3250d4217ac91bc2418762 Mon Sep 17 00:00:00 2001 From: Griffin Smith Date: Thu, 1 Oct 2015 21:41:27 -0400 Subject: [PATCH] Handle passing through context to child components When instantiating child components in order to render them, also pass through the props given when creating the child component. --- build/reactable.js | 2 +- build/tests/reactable_test.js | 167 +++++++++++++++++++++++----------- src/reactable/table.jsx | 2 +- tests/reactable_test.jsx | 137 +++++++++++++++++++--------- 4 files changed, 209 insertions(+), 99 deletions(-) diff --git a/build/reactable.js b/build/reactable.js index e15568bd..c298e1d4 100644 --- a/build/reactable.js +++ b/build/reactable.js @@ -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; } diff --git a/build/tests/reactable_test.js b/build/tests/reactable_test.js index 7e2c3770..b9aa180b 100644 --- a/build/tests/reactable_test.js +++ b/build/tests/reactable_test.js @@ -611,71 +611,130 @@ }); describe('adding s to the ', 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']); + }); }); }); diff --git a/src/reactable/table.jsx b/src/reactable/table.jsx index 68f1f2c8..eb67dd60 100644 --- a/src/reactable/table.jsx +++ b/src/reactable/table.jsx @@ -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 } diff --git a/tests/reactable_test.jsx b/tests/reactable_test.jsx index 4887766e..65ee8b86 100644 --- a/tests/reactable_test.jsx +++ b/tests/reactable_test.jsx @@ -418,60 +418,111 @@ describe('Reactable', function() { }); describe('adding s to the
', 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 ( - - {this.props.name || ''} - {this.props.age || ''} - {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(){ + return ( + + {this.props.name || ''} + {this.props.age || ''} + {this.props.position || ''} + + ); + } + }); + + React.render( + + + + + , + ReactableTestUtils.testNode() + ); }); - React.render( - - - - - , - 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 ( + + {this.props.name || ''} + {this.context.test || ''} + + ); + } + }); + + let TableComponent = React.createClass({ + displayName: 'TableComponent', + childContextTypes: { test: React.PropTypes.string }, + getChildContext: function() { + return { test: 'foobar' }; + }, + render: function() { + return ( + + + + + ); + } + }); + + React.render(, 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']); + }); }); });