#7127 Rating Question - Consider extending a set of Smileys (#7130)

* #7127 Rating Question - Consider extending a set of Smileys Fixes #7127 * #7127 - dropdown rendering
surveyjs · Oct 12, 2023 · cc9f264 · cc9f264
1 parent 202d72f
commit cc9f264
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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");
 });