From cc9f2646e65d140e917b4766d57bb8bea82b2a22 Mon Sep 17 00:00:00 2001
From: Aleksey Novikov <novikov82@gmail.com>
Date: Thu, 12 Oct 2023 18:25:35 +0300
Subject: [PATCH] #7127 Rating Question - Consider extending a set of Smileys
 (#7130)

* #7127 Rating Question - Consider extending a set of Smileys
Fixes #7127

* #7127 - dropdown rendering
---
 .../src/questions/rating.component.html       |  2 +-
 .../src/questions/selectbase.component.ts     |  4 +--
 packages/survey-vue3-ui/src/Rating.vue        |  2 +-
 src/knockout/templates/question-rating.html   |  2 +-
 src/question_rating.ts                        | 15 ++++++++--
 src/react/reactquestion_rating.tsx            |  2 +-
 src/vue/rating.vue                            |  2 +-
 tests/question_ratingtests.ts                 | 30 +++++++++++++++++++
 8 files changed, 50 insertions(+), 9 deletions(-)

diff --git a/packages/survey-angular-ui/src/questions/rating.component.html b/packages/survey-angular-ui/src/questions/rating.component.html
index 91fecae044..352d083a39 100644
--- a/packages/survey-angular-ui/src/questions/rating.component.html
+++ b/packages/survey-angular-ui/src/questions/rating.component.html
@@ -3,7 +3,7 @@
           <legend role="presentation" class="sv-hidden"></legend>
           <span *ngIf="model.hasMinLabel" [class]="model.cssClasses.minText" [model]="model.locMinRateDescription" sv-ng-string>
           </span>
-          <ng-template *ngFor="let item of model.renderedRateItems; index as index; trackBy: trackByFn" [component]="{ name: model.itemComponentName, data: {model: model, item: item, index: index }}"></ng-template>
+          <ng-template *ngFor="let item of model.renderedRateItems; index as index; trackBy: trackByFn" [component]="{ name: model.itemComponent, data: {model: model, item: item, index: index }}"></ng-template>
           <span *ngIf="model.hasMaxLabel" [class]="model.cssClasses.maxText" [model]="model.locMaxRateDescription" sv-ng-string></span>
       </fieldset>
   </div>
diff --git a/packages/survey-angular-ui/src/questions/selectbase.component.ts b/packages/survey-angular-ui/src/questions/selectbase.component.ts
index 84bf8c4b2d..232df9e0bd 100644
--- a/packages/survey-angular-ui/src/questions/selectbase.component.ts
+++ b/packages/survey-angular-ui/src/questions/selectbase.component.ts
@@ -30,10 +30,10 @@ export class SelectBaseComponent<T extends QuestionSelectBase> extends QuestionA
   public getItemValueComponentData(item: ItemValue): any {
     const itemComponentProperty = this.model.getPropertyByName("itemComponent");
     const isDefaultItemComponent = itemComponentProperty.isDefaultValue(this.model.itemComponent);
-    const itemComponentName = isDefaultItemComponent ? this.getDefaultComponentName() : this.model.itemComponent;
+    const itemComponent = isDefaultItemComponent ? this.getDefaultComponentName() : this.model.itemComponent;
 
     return {
-      componentName: itemComponentName,
+      componentName: itemComponent,
       componentData: {
         question: this.model,
         model: item,
diff --git a/packages/survey-vue3-ui/src/Rating.vue b/packages/survey-vue3-ui/src/Rating.vue
index b0be2bdbf1..a2f366e655 100644
--- a/packages/survey-vue3-ui/src/Rating.vue
+++ b/packages/survey-vue3-ui/src/Rating.vue
@@ -8,7 +8,7 @@
       <component
         v-for="(item, index) in question.renderedRateItems"
         :key="getInputId(index)"
-        :is="question.itemComponentName"
+          :is="question.itemComponent"
         :item="item"
         :index="index"
         :question="question"
diff --git a/src/knockout/templates/question-rating.html b/src/knockout/templates/question-rating.html
index 5d097ab724..071e2ba1b6 100644
--- a/src/knockout/templates/question-rating.html
+++ b/src/knockout/templates/question-rating.html
@@ -9,7 +9,7 @@
               </span>
             <!-- /ko -->
             <!-- ko foreach: question.renderedRateItems -->
-              <!-- ko component: { name: question.itemComponentName, params: { question: question, item: $data, index: $index() } } -->
+              <!-- ko component: { name: question.itemComponent, params: { question: question, item: $data, index: $index() } } -->
               <!-- /ko -->
               
             <!-- /ko -->
diff --git a/src/question_rating.ts b/src/question_rating.ts
index e5ff494df6..19e8e5551a 100644
--- a/src/question_rating.ts
+++ b/src/question_rating.ts
@@ -531,11 +531,21 @@ export class QuestionRatingModel extends Question {
   public get isSmiley() {
     return this.rateType == "smileys";
   }
-  public get itemComponentName() {
+  protected getDefaultItemComponent(): string {
+    if (this.renderAs == "dropdown") return "";
     if (this.isStar) return "sv-rating-item-star";
     if (this.isSmiley) return "sv-rating-item-smiley";
     return "sv-rating-item";
   }
+  /**
+   * The name of a component used to render items.
+   */
+  public get itemComponent(): string {
+    return this.getPropertyValue("itemComponent", this.getDefaultItemComponent());
+  }
+  public set itemComponent(value: string) {
+    this.setPropertyValue("itemComponent", value);
+  }
 
   protected valueToData(val: any): any {
     if (this.useRateValues()) {
@@ -949,7 +959,8 @@ Serializer.addClass(
       default: "auto",
       choices: ["auto", "buttons", "dropdown"],
       visibleIndex: 20
-    }
+    },
+    { name: "itemComponent", visible: false }
   ],
   function () {
     return new QuestionRatingModel("");
diff --git a/src/react/reactquestion_rating.tsx b/src/react/reactquestion_rating.tsx
index a744a62c7f..a42cec8e19 100644
--- a/src/react/reactquestion_rating.tsx
+++ b/src/react/reactquestion_rating.tsx
@@ -21,7 +21,7 @@ export class SurveyQuestionRating extends SurveyQuestionElementBase {
     item: any,
     index: Number
   ): JSX.Element {
-    const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponentName, {
+    const renderedItem = ReactElementFactory.Instance.createElement(this.question.itemComponent, {
       question: this.question,
       item: item,
       index: index,
diff --git a/src/vue/rating.vue b/src/vue/rating.vue
index 89b7167e61..71002d1077 100644
--- a/src/vue/rating.vue
+++ b/src/vue/rating.vue
@@ -8,7 +8,7 @@
         </span>
         <component
           v-for="(item, index) in question.renderedRateItems"
-            :is="question.itemComponentName"
+              :is="question.itemComponent"
           :item="item"
           :index="index"
           :question="question"
diff --git a/tests/question_ratingtests.ts b/tests/question_ratingtests.ts
index 3bde468c92..fe8b915556 100644
--- a/tests/question_ratingtests.ts
+++ b/tests/question_ratingtests.ts
@@ -1453,4 +1453,34 @@ QUnit.test("show only 10 items when switching to smileys mode", (assert) => {
 
   assert.equal(q1.rateValues.length, 10);
 
+});
+
+QUnit.test("rating items custom component", (assert) => {
+  var json = {
+    questions: [
+      {
+        type: "rating",
+        name: "q1"
+      },
+    ],
+  };
+  const survey = new SurveyModel(json);
+  const q1 = <QuestionRatingModel>survey.getQuestionByName("q1");
+  assert.equal(q1.itemComponent, "sv-rating-item");
+
+  q1.renderAs = "dropdown";
+  assert.equal(q1.itemComponent, "");
+
+  var json2 = {
+    questions: [
+      {
+        type: "rating",
+        name: "q1",
+        itemComponent: "custom-item"
+      },
+    ],
+  };
+  const survey2 = new SurveyModel(json2);
+  const q2 = <QuestionRatingModel>survey2.getQuestionByName("q1");
+  assert.equal(q2.itemComponent, "custom-item");
 });
\ No newline at end of file