Fix progress circular (#903)

* fix(progress-circular): render correctly in determinate mode * chore(ci): install deps with yarn * reverting yarn change
adopted-ember-addons · May 10, 2018 · 1c3b22e · 1c3b22e
1 parent 587b0c2
commit 1c3b22e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 9 deletions.
diff --git a/addon/components/paper-progress-circular.js b/addon/components/paper-progress-circular.js
@@ -59,7 +59,7 @@ export default Component.extend(ColorMixin, {
     return mode === MODE_DETERMINATE || mode === MODE_INDETERMINATE ? `md-mode-${mode}` : 'ng-hide';
   }),
 
-  isIndeterminate: equal('mode', MODE_INDETERMINATE),
+  isIndeterminate: equal('mode', MODE_INDETERMINATE).readOnly(),
 
   strokeWidth: computed('strokeRatio', 'diameter', function() {
     return this.get('strokeRatio') * this.get('diameter');
@@ -113,9 +113,11 @@ export default Component.extend(ColorMixin, {
     let newValue = clamp(this.get('value'), 0, 100);
     let newDisabled = this.get('disabled');
 
-    if (this.oldValue !== newValue) {
-      // value changed
-      this.startDeterminateAnimation(this.oldValue, newValue);
+    let diameterChanged = this.oldDiameter !== this.get('diameter');
+    let strokeRatioChanged = this.oldStrokeRatio !== this.get('strokeRatio');
+
+    if (this.oldValue !== newValue || diameterChanged || strokeRatioChanged) {
+      this.startDeterminateAnimation(this.oldValue || 0, newValue);
       this.oldValue = newValue;
     }
 
@@ -128,6 +130,9 @@ export default Component.extend(ColorMixin, {
       }
       this.oldValue = newValue;
     }
+
+    this.oldDiameter = this.get('diameter');
+    this.oldStrokeRatio = this.get('strokeRatio');
   },
 
   willDestroyElement() {
@@ -167,8 +172,12 @@ export default Component.extend(ColorMixin, {
 
     let renderFrame = (value, diameter, strokeWidth, dashLimit) => {
       if (!this.isDestroyed && !this.isDestroying) {
-        this.$('path').attr('stroke-dashoffset', this.getDashLength(diameter, strokeWidth, value, dashLimit));
-        this.$('path').attr('transform', `rotate(${rotation} ${diameter / 2} ${diameter / 2})`);
+        let $path = this.$('path');
+        if (!$path) {
+          return;
+        }
+        $path.attr('stroke-dashoffset', this.getDashLength(diameter, strokeWidth, value, dashLimit));
+        $path.attr('transform', `rotate(${rotation} ${diameter / 2} ${diameter / 2})`);
       }
     };
 
@@ -178,7 +187,6 @@ export default Component.extend(ColorMixin, {
     } else {
       let animation = () => {
         let currentTime = clamp(now() - startTime, 0, animationDuration);
-
         renderFrame(ease(currentTime, animateFrom, changeInValue, animationDuration), diameter, strokeWidth, dashLimit);
 
         // Do not allow overlapping animations

diff --git a/tests/dummy/app/templates/demo/progress-circular.hbs b/tests/dummy/app/templates/demo/progress-circular.hbs
@@ -10,7 +10,6 @@
     {{! END-SNIPPET }}
   </div>
   {{code-snippet name="progress-circular.determinate.hbs"}}
-
   <h3>Indeterminate</h3>
   <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
   <div class="layout-column layout-gt-sm-row layout-align-space-around">
@@ -65,4 +64,5 @@
     </div>
     {{! END-SNIPPET }}
   </div>
+
 {{/doc-content}}
diff --git a/tests/integration/components/paper-progress-circular-test.js b/tests/integration/components/paper-progress-circular-test.js
@@ -1,4 +1,5 @@
 import { moduleForComponent, test } from 'ember-qunit';
+import wait from 'ember-test-helpers/wait';
 import hbs from 'htmlbars-inline-precompile';
 
 moduleForComponent('paper-progress-circular', 'Integration | Component | paper progress circular', {
@@ -24,4 +25,21 @@ test('should set correct size based on diameter', function(assert) {
   let $el = this.$('md-progress-circular');
   assert.ok(/height:.*25px/.test($el.attr('style')));
   assert.ok(/width:.*25px/.test($el.attr('style')));
-});
+});
+
+test('renders correctly with explicit value and diameter', async function(assert) {
+  assert.expect(5);
+
+  this.render(hbs`{{paper-progress-circular value=50 diameter=25}}`);
+
+  await wait();
+
+  let $el = this.$('md-progress-circular');
+  assert.ok(/height:.*25px/.test($el.attr('style')));
+  assert.ok(/width:.*25px/.test($el.attr('style')));
+
+  let $svgPath = $el.find('path');
+  assert.equal('rotate(0 12.5 12.5)', $svgPath.attr('transform'), 'rotated halfway');
+  assert.ok(parseFloat($svgPath.attr('stroke-dashoffset')), 'stroke-dashoffset has a number');
+  assert.ok(parseFloat($svgPath.attr('stroke-dasharray')), 'stroke-dasharray has a number');
+});