Merge pull request react-bootstrap#379 from taion/jjia/panel-fill-bugfix

Properly render panel-filling single children
Leonard-Li777 · Feb 12, 2015 · 4ed6fe0 · 4ed6fe0
2 parents 2cda33a + db0f0bb
commit 4ed6fe0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/Panel.jsx b/src/Panel.jsx
@@ -83,6 +83,10 @@ var Panel = React.createClass({
       return {key: bodyElements.length};
     }
 
+    function addPanelChild (child) {
+      bodyElements.push(cloneWithProps(child, getProps()));
+    }
+
     function addPanelBody (children) {
       bodyElements.push(
         <div className="panel-body" {...getProps()}>
@@ -93,7 +97,11 @@ var Panel = React.createClass({
 
     // Handle edge cases where we should not iterate through children.
     if (!Array.isArray(allChildren) || allChildren.length == 0) {
-      addPanelBody(allChildren);
+      if (this.shouldRenderFill(allChildren)) {
+        addPanelChild(allChildren);
+      } else {
+        addPanelBody(allChildren);
+      }
     } else {
       var panelBodyChildren = [];
 
@@ -107,22 +115,26 @@ var Panel = React.createClass({
       }
 
       allChildren.forEach(function(child) {
-        if (React.isValidElement(child) && child.props.fill != null) {
+        if (this.shouldRenderFill(child)) {
           maybeRenderPanelBody();
 
           // Separately add the filled element.
-          bodyElements.push(cloneWithProps(child, getProps()));
+          addPanelChild(child);
         } else {
           panelBodyChildren.push(child);
         }
-      });
+      }.bind(this));
 
       maybeRenderPanelBody();
     }
 
     return bodyElements;
   },
 
+  shouldRenderFill: function (child) {
+    return React.isValidElement(child) && child.props.fill != null
+  },
+
   renderHeading: function () {
     var header = this.props.header;
 

diff --git a/test/PanelSpec.jsx b/test/PanelSpec.jsx
@@ -149,6 +149,7 @@ describe('Panel', function () {
     );
 
     var children = instance.getDOMNode().children;
+    assert.equal(children.length, 3);
 
     assert.equal(children[0].nodeName, 'DIV');
     assert.ok(children[0].className.match(/\bpanel-body\b/));
@@ -158,5 +159,19 @@ describe('Panel', function () {
 
     assert.equal(children[2].nodeName, 'DIV');
     assert.ok(children[2].className.match(/\bpanel-body\b/));
-  })
+  });
+
+  it('Should not wrap single panel-fill table in a panel body', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Panel>
+        <Table fill />
+      </Panel>
+    );
+
+    var children = instance.getDOMNode().children;
+    assert.equal(children.length, 1);
+
+    assert.equal(children[0].nodeName, 'TABLE');
+    assert.notOk(children[0].className.match(/\bpanel-body\b/));
+  });
 });