Merge pull request react-bootstrap#346 from taion/jjia/panel-table-fill

Support panel-filling tables and list groups

Author: mtscout6

docs/examples/PanelListGroupFill.js

@@ -0,0 +1,13 @@
+var panelInstance = (
+    <Panel collapsable defaultExpanded 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

@@ -192,6 +192,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

@@ -42,7 +42,7 @@ var Panel = React.createClass({
   },
 
   getCollapsableDimensionValue: function () {
-    return this.refs.body.getDOMNode().offsetHeight;
+    return this.refs.panel.getDOMNode().scrollHeight;
   },
 
   getCollapsableDOMNode: function () {
@@ -76,11 +76,51 @@ 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() {
+      return {key: bodyElements.length};
+    }
+
+    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 +183,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,25 @@ 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.ok(children[0].className.match(/\bpanel-body\b/));
+
+    assert.equal(children[1].nodeName, 'TABLE');
+    assert.notOk(children[1].className.match(/\bpanel-body\b/));
+
+    assert.equal(children[2].nodeName, 'DIV');
+    assert.ok(children[2].className.match(/\bpanel-body\b/));
+  })
+});