[fixed] 'stacked' progress with 'active' and 'striped' children

Now it correctly renders 'active' and 'striped' children bars.
kyletsang · Jul 11, 2015 · 0683df7 · 0683df7
1 parent c27e1d4
commit 0683df7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/docs/examples/ProgressBarStacked.js b/docs/examples/ProgressBarStacked.js
@@ -1,8 +1,8 @@
 const progressInstance = (
   <ProgressBar>
-    <ProgressBar bsStyle='success' now={35} key={1} />
+    <ProgressBar striped bsStyle='success' now={35} key={1} />
     <ProgressBar bsStyle='warning' now={20} key={2} />
-    <ProgressBar bsStyle='danger' now={10} key={3} />
+    <ProgressBar active bsStyle='danger' now={10} key={3} />
   </ProgressBar>
 );
 

diff --git a/src/ProgressBar.js b/src/ProgressBar.js
@@ -43,12 +43,6 @@ const ProgressBar = React.createClass({
       return this.renderProgressBar();
     }
 
-    const classes = {
-      active: this.props.active,
-      progress: true,
-      'progress-striped': this.props.active || this.props.striped
-    };
-
     let content;
 
     if (this.props.children) {
@@ -58,7 +52,7 @@ const ProgressBar = React.createClass({
     }
 
     return (
-      <div {...this.props} className={classNames(this.props.className, classes)}>
+      <div {...this.props} className={classNames(this.props.className, 'progress')}>
         {content}
       </div>
     );
@@ -94,10 +88,15 @@ const ProgressBar = React.createClass({
       );
     }
 
+    const classes = classNames(this.props.className, this.getBsClassSet(), {
+      active: this.props.active,
+      'progress-bar-striped': this.props.active || this.props.striped
+    });
+
     return (
       <div
         {...this.props}
-        className={classNames(this.props.className, this.getBsClassSet())}
+        className={classes}
         role="progressbar"
         style={{width: percentage + '%'}}
         aria-valuenow={this.props.now}

diff --git a/test/ProgressBarSpec.js b/test/ProgressBarSpec.js
@@ -152,16 +152,18 @@ describe('ProgressBar', function () {
       <ProgressBar min={1} max={11} now={6} striped />
     );
 
-    assert.ok(React.findDOMNode(instance).className.match(/\bprogress-striped\b/));
+    assert.ok(React.findDOMNode(instance).firstChild.className.match(/\bprogress-bar-striped\b/));
   });
 
   it('Should show animated striped bar', function () {
     let instance = ReactTestUtils.renderIntoDocument(
       <ProgressBar min={1} max={11} now={6} active />
     );
 
-    assert.ok(React.findDOMNode(instance).className.match(/\bprogress-striped\b/));
-    assert.ok(React.findDOMNode(instance).className.match(/\bactive\b/));
+    const barClassName = React.findDOMNode(instance).firstChild.className;
+
+    assert.ok(barClassName.match(/\bprogress-bar-striped\b/));
+    assert.ok(barClassName.match(/\bactive\b/));
   });
 
   it('Should show stacked bars', function () {
@@ -182,6 +184,28 @@ describe('ProgressBar', function () {
     assert.equal(bar2.style.width, '30%');
   });
 
+  it('Should render active and striped children in stacked bar too', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ProgressBar>
+        <ProgressBar active key={1} now={50} />
+        <ProgressBar striped key={2} now={30} />
+      </ProgressBar>
+    );
+    let wrapper = React.findDOMNode(instance);
+    let bar1 = wrapper.firstChild;
+    let bar2 = wrapper.lastChild;
+
+    assert.ok(wrapper.className.match(/\bprogress\b/));
+
+    assert.ok(bar1.className.match(/\bprogress-bar\b/));
+    assert.ok(bar1.className.match(/\bactive\b/));
+    assert.ok(bar1.className.match(/\bprogress-bar-striped\b/));
+
+    assert.ok(bar2.className.match(/\bprogress-bar\b/));
+    assert.ok(bar2.className.match(/\bprogress-bar-striped\b/));
+    assert.notOk(bar2.className.match(/\bactive\b/));
+  });
+
   it('allows only ProgressBar in children', function () {
     ReactTestUtils.renderIntoDocument(
       <ProgressBar>