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

Commit 1f02dbd

Browse files
glittersharkglittershark
committed
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.
1 parent 1eb6eb9 commit 1f02dbd

File tree

4 files changed

+209
-99
lines changed

4 files changed

+209
-99
lines changed

‎build/reactable.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1052,7 +1052,7 @@ window.React["default"] = window.React;
10521052
if ([_tfoot.Tfoot, _thead.Thead, _tr.Tr].indexOf(child.type) >= 0) {
10531053
reactableDescendant = child;
10541054
} else {
1055-
reactableDescendant = new child.type(child.props).render();
1055+
reactableDescendant = new child.type(child.props, child._context).render();
10561056
test = true;
10571057
}
10581058

‎build/tests/reactable_test.js‎

Lines changed: 113 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -611,71 +611,130 @@
611611
});
612612

613613
describe('adding <CustomComponents>s to the <Table>', function () {
614-
before(function () {
615-
var CustomComponent = React.createClass({
616-
displayName: "CustomComponent",
617-
propTypes: {
618-
name: React.PropTypes.string,
619-
age: React.PropTypes.number,
620-
position: React.PropTypes.string
621-
},
622-
render: function render() {
623-
return React.createElement(
624-
Reactable.Tr,
625-
null,
626-
React.createElement(
627-
Reactable.Td,
628-
{ column: 'Name' },
629-
this.props.name || ''
630-
),
631-
React.createElement(
632-
Reactable.Td,
633-
{ column: 'Age' },
634-
this.props.age || ''
635-
),
636-
React.createElement(
637-
Reactable.Td,
638-
{ column: 'Position' },
639-
this.props.position || ''
640-
)
641-
);
642-
}
614+
context('passing through props', function () {
615+
before(function () {
616+
var CustomComponent = React.createClass({
617+
displayName: "CustomComponent",
618+
propTypes: {
619+
name: React.PropTypes.string,
620+
age: React.PropTypes.number,
621+
position: React.PropTypes.string
622+
},
623+
render: function render() {
624+
return React.createElement(
625+
Reactable.Tr,
626+
null,
627+
React.createElement(
628+
Reactable.Td,
629+
{ column: 'Name' },
630+
this.props.name || ''
631+
),
632+
React.createElement(
633+
Reactable.Td,
634+
{ column: 'Age' },
635+
this.props.age || ''
636+
),
637+
React.createElement(
638+
Reactable.Td,
639+
{ column: 'Position' },
640+
this.props.position || ''
641+
)
642+
);
643+
}
644+
});
645+
646+
React.render(React.createElement(
647+
Reactable.Table,
648+
{ className: 'table', id: 'table' },
649+
React.createElement(CustomComponent, { name: 'Griffin Smith', age: 18 }),
650+
React.createElement(CustomComponent, { name: 'Lee Salminen', age: 23 }),
651+
React.createElement(CustomComponent, { age: 28, position: 'Developer' })
652+
), ReactableTestUtils.testNode());
643653
});
644654

645-
React.render(React.createElement(
646-
Reactable.Table,
647-
{ className: 'table', id: 'table' },
648-
React.createElement(CustomComponent, { name: 'Griffin Smith', age: 18 }),
649-
React.createElement(CustomComponent, { name: 'Lee Salminen', age: 23 }),
650-
React.createElement(CustomComponent, { age: 28, position: 'Developer' })
651-
), ReactableTestUtils.testNode());
652-
});
655+
after(ReactableTestUtils.resetTestEnvironment);
653656

654-
after(ReactableTestUtils.resetTestEnvironment);
657+
it('renders the table', function () {
658+
expect($('table#table.table')).to.exist;
659+
});
655660

656-
it('renders the table', function () {
657-
expect($('table#table.table')).to.exist;
658-
});
661+
it('renders the column headers in the table', function () {
662+
var headers = [];
663+
$('thead th').each(function () {
664+
headers.push($(this).text());
665+
});
659666

660-
it('renders the column headers in the table', function () {
661-
var headers = [];
662-
$('thead th').each(function () {
663-
headers.push($(this).text());
667+
expect(headers).to.eql(['Name', 'Age', 'Position']);
664668
});
665669

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

669-
it('renders the first row with the correct data', function () {
670-
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
671-
});
674+
it('renders the second row with the correct data', function () {
675+
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
676+
});
672677

673-
it('renders the second row with the correct data', function () {
674-
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
678+
it('renders the third row with the correct data', function () {
679+
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
680+
});
675681
});
676682

677-
it('renders the third row with the correct data', function () {
678-
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
683+
context('passing through context', function () {
684+
before(function () {
685+
var RowComponent = React.createClass({
686+
displayName: 'CustomComponent',
687+
contextTypes: { test: React.PropTypes.string },
688+
render: function render() {
689+
return React.createElement(
690+
Reactable.Tr,
691+
null,
692+
React.createElement(
693+
Reactable.Td,
694+
{ column: 'Name' },
695+
this.props.name || ''
696+
),
697+
React.createElement(
698+
Reactable.Td,
699+
{ column: 'Test' },
700+
this.context.test || ''
701+
)
702+
);
703+
}
704+
});
705+
706+
var TableComponent = React.createClass({
707+
displayName: 'TableComponent',
708+
childContextTypes: { test: React.PropTypes.string },
709+
getChildContext: function getChildContext() {
710+
return { test: 'foobar' };
711+
},
712+
render: function render() {
713+
return React.createElement(
714+
Reactable.Table,
715+
{ className: 'table', id: 'table' },
716+
React.createElement(RowComponent, { name: 'Griffin Smith' }),
717+
React.createElement(RowComponent, { name: 'Lee Salminen' })
718+
);
719+
}
720+
});
721+
722+
React.render(React.createElement(TableComponent, null), ReactableTestUtils.testNode());
723+
});
724+
725+
after(ReactableTestUtils.resetTestEnvironment);
726+
727+
it('renders the table', function () {
728+
expect($('table#table.table')).to.exist;
729+
});
730+
731+
it('renders the first row with the correct data', function () {
732+
ReactableTestUtils.expectRowText(0, ['Griffin Smith', 'foobar']);
733+
});
734+
735+
it('renders the second row with the correct data', function () {
736+
ReactableTestUtils.expectRowText(1, ['Lee Salminen', 'foobar']);
737+
});
679738
});
680739
});
681740

‎src/reactable/table.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export class Table extends React.Component {
6868
if ([Tfoot, Thead, Tr].indexOf(child.type) >= 0) {
6969
reactableDescendant = child
7070
} else {
71-
reactableDescendant = (new child.type(child.props)).render()
71+
reactableDescendant = (new child.type(child.props, child._context)).render()
7272
test = true
7373
}
7474

‎tests/reactable_test.jsx‎

Lines changed: 94 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -418,60 +418,111 @@ describe('Reactable', function() {
418418
});
419419

420420
describe('adding <CustomComponents>s to the <Table>', function() {
421-
before(function() {
422-
var CustomComponent = React.createClass({
423-
displayName: "CustomComponent",
424-
propTypes:{
425-
name: React.PropTypes.string,
426-
age: React.PropTypes.number,
427-
position: React.PropTypes.string
428-
},
429-
render: function(){
430-
return (
431-
<Reactable.Tr>
432-
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
433-
<Reactable.Td column="Age">{this.props.age || ''}</Reactable.Td>
434-
<Reactable.Td column="Position">{this.props.position || ''}</Reactable.Td>
435-
</Reactable.Tr>
436-
);
437-
}
421+
context('passing through props', function() {
422+
before(function() {
423+
var CustomComponent = React.createClass({
424+
displayName: "CustomComponent",
425+
propTypes:{
426+
name: React.PropTypes.string,
427+
age: React.PropTypes.number,
428+
position: React.PropTypes.string
429+
},
430+
render: function(){
431+
return (
432+
<Reactable.Tr>
433+
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
434+
<Reactable.Td column="Age">{this.props.age || ''}</Reactable.Td>
435+
<Reactable.Td column="Position">{this.props.position || ''}</Reactable.Td>
436+
</Reactable.Tr>
437+
);
438+
}
439+
});
440+
441+
React.render(
442+
<Reactable.Table className="table" id="table">
443+
<CustomComponent name='Griffin Smith' age={18} />
444+
<CustomComponent name='Lee Salminen' age={23} />
445+
<CustomComponent age={28} position='Developer' />
446+
</Reactable.Table>,
447+
ReactableTestUtils.testNode()
448+
);
438449
});
439450

440-
React.render(
441-
<Reactable.Table className="table" id="table">
442-
<CustomComponent name='Griffin Smith' age={18} />
443-
<CustomComponent name='Lee Salminen' age={23} />
444-
<CustomComponent age={28} position='Developer' />
445-
</Reactable.Table>,
446-
ReactableTestUtils.testNode()
447-
);
448-
});
451+
after(ReactableTestUtils.resetTestEnvironment);
449452

450-
after(ReactableTestUtils.resetTestEnvironment);
453+
it('renders the table', function() {
454+
expect($('table#table.table')).to.exist;
455+
});
451456

452-
it('renders the table', function() {
453-
expect($('table#table.table')).to.exist;
454-
});
457+
it('renders the column headers in the table', function() {
458+
var headers = [];
459+
$('thead th').each(function() {
460+
headers.push($(this).text());
461+
});
455462

456-
it('renders the column headers in the table', function() {
457-
var headers = [];
458-
$('thead th').each(function() {
459-
headers.push($(this).text());
463+
expect(headers).to.eql([ 'Name', 'Age', 'Position' ]);
460464
});
461465

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

465-
it('renders the first row with the correct data', function() {
466-
ReactableTestUtils.expectRowText(0, ['Griffin Smith', '18', '']);
467-
});
470+
it('renders the second row with the correct data', function() {
471+
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
472+
});
468473

469-
it('renders the second row with the correct data', function() {
470-
ReactableTestUtils.expectRowText(1, ['Lee Salminen', '23', '']);
474+
it('renders the third row with the correct data', function() {
475+
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
476+
});
471477
});
472478

473-
it('renders the third row with the correct data', function() {
474-
ReactableTestUtils.expectRowText(2, ['', '28', 'Developer']);
479+
context('passing through context', function() {
480+
before(function() {
481+
let RowComponent = React.createClass({
482+
displayName: 'CustomComponent',
483+
contextTypes: { test: React.PropTypes.string },
484+
render: function(){
485+
return (
486+
<Reactable.Tr>
487+
<Reactable.Td column="Name">{this.props.name || ''}</Reactable.Td>
488+
<Reactable.Td column="Test">{this.context.test || ''}</Reactable.Td>
489+
</Reactable.Tr>
490+
);
491+
}
492+
});
493+
494+
let TableComponent = React.createClass({
495+
displayName: 'TableComponent',
496+
childContextTypes: { test: React.PropTypes.string },
497+
getChildContext: function() {
498+
return { test: 'foobar' };
499+
},
500+
render: function() {
501+
return (
502+
<Reactable.Table className="table" id="table">
503+
<RowComponent name='Griffin Smith' />
504+
<RowComponent name='Lee Salminen' />
505+
</Reactable.Table>
506+
);
507+
}
508+
});
509+
510+
React.render(<TableComponent/>, ReactableTestUtils.testNode());
511+
});
512+
513+
after(ReactableTestUtils.resetTestEnvironment);
514+
515+
it('renders the table', function() {
516+
expect($('table#table.table')).to.exist;
517+
});
518+
519+
it('renders the first row with the correct data', function() {
520+
ReactableTestUtils.expectRowText(0, ['Griffin Smith', 'foobar']);
521+
});
522+
523+
it('renders the second row with the correct data', function() {
524+
ReactableTestUtils.expectRowText(1, ['Lee Salminen', 'foobar']);
525+
});
475526
});
476527
});
477528

0 commit comments

Comments
 (0)