Skip to content

Commit

Permalink
#7127 Rating Question - Consider extending a set of Smileys (#7130)
Browse files Browse the repository at this point in the history
* #7127 Rating Question - Consider extending a set of Smileys
Fixes #7127

* #7127 - dropdown rendering
  • Loading branch information
novikov82 committed Oct 12, 2023
1 parent 202d72f commit cc9f264
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/survey-vue3-ui/src/Rating.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/templates/question-rating.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
15 changes: 13 additions & 2 deletions src/question_rating.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()) {
Expand Down Expand Up @@ -949,7 +959,8 @@ Serializer.addClass(
default: "auto",
choices: ["auto", "buttons", "dropdown"],
visibleIndex: 20
}
},
{ name: "itemComponent", visible: false }
],
function () {
return new QuestionRatingModel("");
Expand Down
2 changes: 1 addition & 1 deletion src/react/reactquestion_rating.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/vue/rating.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
30 changes: 30 additions & 0 deletions tests/question_ratingtests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});

0 comments on commit cc9f264

Please sign in to comment.