refactor(circular-progress): reorganize render function calling structure

PiperOrigin-RevId: 333121473

Author: allan-chen

packages/circular-progress-four-color/mwc-circular-progress-four-color-base.ts

@@ -23,11 +23,18 @@ export class CircularProgressFourColorBase extends CircularProgressBase {
   protected renderIndeterminateContainer() {
     return html`
       <div class="mdc-circular-progress__indeterminate-container">
-             ${
-        this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-1')}
-     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-2')}
-     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-3')}
-     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-4')}
+        <div class="mdc-circular-progress__spinner-layer mdc-circular-progress__color-1">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
+        <div class="mdc-circular-progress__spinner-layer mdc-circular-progress__color-2">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
+        <div class="mdc-circular-progress__spinner-layer mdc-circular-progress__color-3">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
+        <div class="mdc-circular-progress__spinner-layer mdc-circular-progress__color-4">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
       </div>`;
   }
 }

packages/circular-progress/mwc-circular-progress-base.ts

@@ -14,7 +14,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import {html, internalProperty, LitElement, property} from 'lit-element';
+import {html, LitElement, property} from 'lit-element';
 import {classMap} from 'lit-html/directives/class-map';
 import {ifDefined} from 'lit-html/directives/if-defined';
 import {styleMap} from 'lit-html/directives/style-map';
@@ -31,14 +31,6 @@ export class CircularProgressBase extends LitElement {
 
   @property({type: String}) ariaLabel = '';
 
-  @internalProperty() containerSideLength = 0;
-
-  @internalProperty() circleRadius = 0;
-
-  @internalProperty() determinateStrokeDashOffset = 0;
-
-  @internalProperty() strokeWidth = 0;
-
   open() {
     this.closed = false;
   }
@@ -57,9 +49,10 @@ export class CircularProgressBase extends LitElement {
       'mdc-circular-progress--indeterminate': this.indeterminate,
     };
 
+    const containerSideLength = 48 + this.density * 4;
     const styles = {
-      'width': `${this.containerSideLength}px`,
-      'height': `${this.containerSideLength}px`,
+      'width': `${containerSideLength}px`,
+      'height': `${containerSideLength}px`,
     };
 
     return html`
@@ -81,18 +74,24 @@ export class CircularProgressBase extends LitElement {
    * @soyCompatible
    */
   private renderDeterminateContainer() {
-    const center = this.containerSideLength / 2;
+    const sideLength = 48 + this.density * 4;
+    const center = sideLength / 2;
+    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :
+                                              12.5 + (this.density + 3) * 5 / 4;
+    const circumference = 2 * 3.1415926 * circleRadius;
+    const determinateStrokeDashOffset = (1 - this.progress) * circumference;
+    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :
+                                             3 + (this.density + 3) * (1 / 6);
 
     return html`
       <div class="mdc-circular-progress__determinate-container">
         <svg class="mdc-circular-progress__determinate-circle-graphic"
-             viewBox="0 0 ${this.containerSideLength} ${
-        this.containerSideLength}">
+             viewBox="0 0 ${sideLength} ${sideLength}">
           <circle class="mdc-circular-progress__determinate-circle"
-                  cx="${center}" cy="${center}" r="${this.circleRadius}"
-                  stroke-dasharray="${2 * 3.1415926 * this.circleRadius}"
-                  stroke-dashoffset="${this.determinateStrokeDashOffset}"
-                  stroke-width="${this.strokeWidth}"></circle>
+                  cx="${center}" cy="${center}" r="${circleRadius}"
+                  stroke-dasharray="${2 * 3.1415926 * circleRadius}"
+                  stroke-dashoffset="${determinateStrokeDashOffset}"
+                  stroke-width="${strokeWidth}"></circle>
         </svg>
       </div>`;
   }
@@ -103,59 +102,56 @@ export class CircularProgressBase extends LitElement {
   protected renderIndeterminateContainer() {
     return html`
       <div class="mdc-circular-progress__indeterminate-container">
-        ${this.renderIndeterminateSpinnerLayer()}
+        <div class="mdc-circular-progress__spinner-layer">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
       </div>`;
   }
 
   /**
    * @soyCompatible
    */
-  protected renderIndeterminateSpinnerLayer(classes = '') {
-    const center = this.containerSideLength / 2;
-    const circumference = 2 * 3.1415926 * this.circleRadius;
+  protected renderIndeterminateSpinnerLayer() {
+    const sideLength = 48 + this.density * 4;
+    const center = sideLength / 2;
+    const circleRadius = this.density >= -3 ? 18 + this.density * 11 / 6 :
+                                              12.5 + (this.density + 3) * 5 / 4;
+    const circumference = 2 * 3.1415926 * circleRadius;
     const halfCircumference = 0.5 * circumference;
+    const strokeWidth = this.density >= -3 ? 4 + this.density * (1 / 3) :
+                                             3 + (this.density + 3) * (1 / 6);
 
     return html`
-      <div class="mdc-circular-progress__spinner-layer ${classes}">
         <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
           <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-               viewBox="0 0 ${this.containerSideLength} ${
-        this.containerSideLength}">
-            <circle cx="${center}" cy="${center}" r="${this.circleRadius}"
+               viewBox="0 0 ${sideLength} ${sideLength}">
+            <circle cx="${center}" cy="${center}" r="${circleRadius}"
                     stroke-dasharray="${circumference}"
                     stroke-dashoffset="${halfCircumference}"
-                    stroke-width="${this.strokeWidth}"></circle>
+                    stroke-width="${strokeWidth}"></circle>
           </svg>
         </div><div class="mdc-circular-progress__gap-patch">
           <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-               viewBox="0 0 ${this.containerSideLength} ${
-        this.containerSideLength}">
-            <circle cx="${center}" cy="${center}" r="${this.circleRadius}"
+               viewBox="0 0 ${sideLength} ${sideLength}">
+            <circle cx="${center}" cy="${center}" r="${circleRadius}"
                     stroke-dasharray="${circumference}"
                     stroke-dashoffset="${halfCircumference}"
-                    stroke-width="${this.strokeWidth * 0.8}"></circle>
+                    stroke-width="${strokeWidth * 0.8}"></circle>
           </svg>
         </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
           <svg class="mdc-circular-progress__indeterminate-circle-graphic"
-               viewBox="0 0 ${this.containerSideLength} ${
-        this.containerSideLength}">
-            <circle cx="${center}" cy="${center}" r="${this.circleRadius}"
+               viewBox="0 0 ${sideLength} ${sideLength}">
+            <circle cx="${center}" cy="${center}" r="${circleRadius}"
                     stroke-dasharray="${circumference}"
                     stroke-dashoffset="${halfCircumference}"
-                    stroke-width="${this.strokeWidth}"></circle>
+                    stroke-width="${strokeWidth}"></circle>
           </svg>
-        </div>
-      </div>`;
+        </div>`;
   }
 
   update(changedProperties: Map<string, string>) {
     super.update(changedProperties);
 
-    this.containerSideLength = this.getContainerSideLength();
-    this.circleRadius = this.getCircleRadius();
-    this.determinateStrokeDashOffset = this.getDeterminateStrokeDashOffset();
-    this.strokeWidth = this.getStrokeWidth();
-
     // Bound progress value in interval [0, 1].
     if (changedProperties.has('progress')) {
       if (this.progress > 1) {
@@ -167,25 +163,4 @@ export class CircularProgressBase extends LitElement {
       }
     }
   }
-
-  private getContainerSideLength() {
-    return 48 + this.density * 4;
-  }
-
-  private getDeterminateStrokeDashOffset(): number {
-    const circleRadius = this.getCircleRadius();
-    const circumference = 2 * 3.1415926 * circleRadius;
-
-    return (1 - this.progress) * circumference;
-  }
-
-  private getCircleRadius() {
-    return this.density >= -3 ? 18 + this.density * 11 / 6 :
-                                12.5 + (this.density + 3) * 5 / 4;
-  }
-
-  private getStrokeWidth() {
-    return this.density >= -3 ? 4 + this.density * (1 / 3) :
-                                3 + (this.density + 3) * (1 / 6);
-  }
 }