Support panel-filling tables and list groups

For react-bootstrap#228

Author: Jimmy Jia

docs/examples/PanelListGroupFill.js

@@ -0,0 +1,13 @@
+var panelInstance = (
+    <Panel header="Panel heading">
+      Some default panel content here.
+      <ListGroup fill>
+        <ListGroupItem>Item 1</ListGroupItem>
+        <ListGroupItem>Item 2</ListGroupItem>
+        <ListGroupItem>&hellip;</ListGroupItem>
+      </ListGroup>
+      Some more panel content here.
+    </Panel>
+  );
+
+React.render(panelInstance, mountNode);

docs/src/ComponentsPage.js

@@ -188,6 +188,10 @@ var ComponentsPage = React.createClass({
                   <p>Like other components, easily make a panel more meaningful to a particular context by adding a <code>bsStyle</code> prop.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/PanelContextual.js', 'utf8')} />
 
+                  <h3 id="panels-contextual">With tables and list groups</h3>
+                  <p>Add the <code>fill</code> prop to <code>&lt;Table /&gt;</code> or <code>&lt;ListGroup /&gt;</code> elements to make them fill the panel.</p>
+                  <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/PanelListGroupFill.js', 'utf8')} />
+
                   <h3 id="panels-controlled">Controlled PanelGroups</h3>
                   <p><code>PanelGroup</code>s can be controlled by a parent component. The <code>activeKey</code> prop dictates which panel is open.</p>
                   <ReactPlayground codeText={fs.readFileSync(__dirname + '/../examples/PanelGroupControlled.js', 'utf8')} />

src/Panel.jsx

@@ -76,11 +76,62 @@ var Panel = React.createClass({
   },
 
   renderBody: function () {
-    return (
-      <div className="panel-body" ref="body">
-        {this.props.children}
-      </div>
-    );
+    var allChildren = this.props.children;
+    var bodyElements = [];
+
+    function getProps() {
+      var index = bodyElements.length;
+      var props = {key: index};
+
+      // Arbitrarily assign the body ref to the first element. We can't wrap
+      // all body elements in a single DOM node anyway, because the fill
+      // styling depends on the table or list group element being a direct
+      // descendant of the panel.
+      if (index == 0) {
+        props.ref = 'body';
+      }
+
+      return props;
+    }
+
+    function addPanelBody (children) {
+      bodyElements.push(
+        <div className="panel-body" {...getProps()}>
+          {children}
+        </div>
+      );
+    }
+
+    // Handle edge cases where we should not iterate through children.
+    if (!Array.isArray(allChildren) || allChildren.length == 0) {
+      addPanelBody(allChildren);
+    } else {
+      var panelBodyChildren = [];
+
+      function maybeRenderPanelBody () {
+        if (panelBodyChildren.length == 0) {
+          return;
+        }
+
+        addPanelBody(panelBodyChildren);
+        panelBodyChildren = [];
+      }
+
+      allChildren.forEach(function(child) {
+        if (React.isValidElement(child) && child.props.fill != null) {
+          maybeRenderPanelBody();
+
+          // Separately add the filled element.
+          bodyElements.push(cloneWithProps(child, getProps()));
+        } else {
+          panelBodyChildren.push(child);
+        }
+      });
+
+      maybeRenderPanelBody();
+    }
+
+    return bodyElements;
   },
 
   renderHeading: function () {
@@ -143,4 +194,4 @@ var Panel = React.createClass({
   }
 });
 
-module.exports = Panel;
+module.exports = Panel;

test/PanelSpec.jsx

@@ -3,6 +3,7 @@
 var React          = require('react');
 var ReactTestUtils = require('react/lib/ReactTestUtils');
 var Panel          = require('../cjs/Panel');
+var Table          = require('../cjs/Table');
 
 describe('Panel', function () {
   it('Should have class and body', function () {
@@ -137,4 +138,19 @@ describe('Panel', function () {
 
     assert.ok(instance.state.expanded);
   });
-});
+
+  it('Should not wrap panel-filling tables in a panel body', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Panel>
+        Panel content
+        <Table fill />
+        More panel content
+      </Panel>
+    );
+
+    var children = instance.getDOMNode().children;
+    assert.equal(children[0].nodeName, 'DIV');
+    assert.equal(children[1].nodeName, 'TABLE');
+    assert.equal(children[2].nodeName, 'DIV');
+  })
+});