Calcuate renderedRateValues prop on demand #9267

packages/survey-core/src/question_rating.ts

@@ -52,27 +52,26 @@ export class QuestionRatingModel extends Question {
     super(name);
 
     this.createItemValues("rateValues");
-    this.createRenderedRateItems();
     this.createLocalizableString("ratingOptionsCaption", this, false, true);
     this.registerFunctionOnPropertiesValueChanged(["rateMin", "rateMax",
       "minRateDescription", "maxRateDescription", "rateStep", "displayRateDescriptionsAsExtremeItems"],
-    () => this.createRenderedRateItems());
+    () => this.resetRenderedItems());
     this.registerFunctionOnPropertiesValueChanged(["rateType"],
       () => {
         this.setIconsToRateValues();
-        this.createRenderedRateItems();
+        this.resetRenderedItems();
         this.updateRateCount();
       });
     this.registerFunctionOnPropertiesValueChanged(["rateValues"],
       () => {
         this.setIconsToRateValues();
-        this.createRenderedRateItems();
+        this.resetRenderedItems();
       });
     this.registerSychProperties(["rateValues"],
       () => {
         this.autoGenerate = this.rateValues.length == 0;
         this.setIconsToRateValues();
-        this.createRenderedRateItems();
+        this.resetRenderedItems();
       });
     this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"],
       () => {
@@ -90,7 +89,7 @@ export class QuestionRatingModel extends Question {
           this.rateValues.splice(0, this.rateValues.length);
           this.updateRateMax();
         }
-        this.createRenderedRateItems();
+        this.resetRenderedItems();
       });
     this.createLocalizableString("minRateDescription", this, true)
       .onStringChanged.add((sender, options) => {
@@ -121,7 +120,6 @@ export class QuestionRatingModel extends Question {
     if (this.jsonObj.autoGenerate === undefined && this.jsonObj.rateValues !== undefined) this.autoGenerate = !this.jsonObj.rateValues.length;
     this.updateRateCount();
     this.setIconsToRateValues();
-    this.createRenderedRateItems();
   }
 
   private _syncPropertiesChanging: boolean = false;
@@ -219,7 +217,6 @@ export class QuestionRatingModel extends Question {
   }
   public set rateValues(val: Array<any>) {
     this.setPropertyValue("rateValues", val);
-    this.createRenderedRateItems();
   }
   /**
    * Specifies the first rate value in the generated sequence of rate values. Applies if the [`rateValues`](https://surveyjs.io/form-library/documentation/api-reference/rating-scale-question-model#rateValues) array is empty.
@@ -342,31 +339,21 @@ export class QuestionRatingModel extends Question {
     return this.renderedRateItems.map(i => i.itemValue);
   }
   protected supportEmptyValidation(): boolean { return this.renderAs === "dropdown"; }
-  public itemValuePropertyChanged(
-    item: ItemValue,
-    name: string,
-    oldValue: any,
-    newValue: any
-  ) {
+  public itemValuePropertyChanged(item: ItemValue, name: string, oldValue: any, newValue: any): void {
     if (!this.useRateValues() && newValue !== undefined) this.autoGenerate = false;
     super.itemValuePropertyChanged(item, name, oldValue, newValue);
   }
-  private createRenderedRateItems() {
-    let rateValues = [];
-    if (this.useRateValues()) {
-      rateValues = this.rateValues;
-    }
-    else {
-      rateValues = this.createRateValues();
-    }
-
-    if (this.autoGenerate) {
-      this.rateMax = rateValues[rateValues.length - 1].value;
-    }
+  private getRateValuesCore(): Array<ItemValue> {
+    return this.useRateValues() ? this.rateValues : this.createRateValues();
+  }
+  private calculateRateValues(): Array<ItemValue> {
+    let rateValues = this.getRateValuesCore();
     if (this.rateType == "smileys" && rateValues.length > 10) rateValues = rateValues.slice(0, 10);
-
-    this.visibleChoicesValue = rateValues.map((i, idx) => this.getRatingItemValue(i, idx));
-    this.renderedRateItems = rateValues.map((v, i) => {
+    return rateValues;
+  }
+  private calculateRenderedRateItems() : Array<RenderedRatingItem> {
+    const rateValues = this.calculateRateValues();
+    return rateValues.map((v, i) => {
       let renderedItem = null;
       if (this.displayRateDescriptionsAsExtremeItems) {
         if (i == 0) renderedItem = new RenderedRatingItem(v, this.minRateDescription && this.locMinRateDescription || v.locText);
@@ -376,7 +363,24 @@ export class QuestionRatingModel extends Question {
       return renderedItem;
     });
   }
-  @propertyArray() renderedRateItems: Array<RenderedRatingItem>;
+  private calculateVisibleChoices(): Array<ItemValue> {
+    const rateValues = this.calculateRateValues();
+    return rateValues.map((i, idx) => this.getRatingItemValue(i, idx));
+  }
+  private resetRenderedItems() {
+    if (this.autoGenerate) {
+      const rateValues = this.getRateValuesCore();
+      this.rateMax = rateValues[rateValues.length - 1].value;
+    }
+    this.resetPropertyValue("renderedRateItems");
+    this.resetPropertyValue("visibleChoices");
+  }
+  public get renderedRateItems(): Array<RenderedRatingItem> {
+    return this.getPropertyValue("renderedRateItems", undefined, () => this.calculateRenderedRateItems());
+  }
+  public get visibleChoices(): ItemValue[] {
+    return this.getPropertyValue("visibleChoices", undefined, () => this.calculateVisibleChoices());
+  }
 
   private createRateValues() {
     var res = [];
@@ -844,10 +848,6 @@ export class QuestionRatingModel extends Question {
   public isItemSelected(item: ItemValue): boolean {
     return item.value == this.value;
   }
-  private visibleChoicesValue: ItemValue[];
-  public get visibleChoices(): ItemValue[] {
-    return this.visibleChoicesValue;
-  }
   public get readOnlyText() {
     if (this.readOnly) return (this.displayValue || this.placeholder);
     return this.isEmpty() ? this.placeholder : "";
@@ -910,7 +910,7 @@ export class QuestionRatingModel extends Question {
   public themeChanged(theme: ITheme): void {
     this.colorsCalculated = false;
     this.updateColors(theme.cssVariables);
-    this.createRenderedRateItems();
+    this.resetRenderedItems();
   }
   public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
     super.setSurveyImpl(value, isLight);