From 0d5ead545321464ad3a4843ff6bd10219a7e4aa0 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 22 May 2024 15:20:51 +0300
Subject: [PATCH] work for #8129 extract list-item-content

---
 .../src/angular-ui.module.ts                  |  5 +-
 .../list/list-item-content.component.html     |  5 ++
 .../list/list-item-content.component.ts       | 22 +++++++++
 .../components/list/list-item.component.html  |  9 +---
 .../src/components/list/ListItem.vue          |  9 +---
 .../src/components/list/ListItemContent.vue   | 18 +++++++
 packages/survey-vue3-ui/src/index.ts          |  2 +
 src/entries/react-ui-model.ts                 |  1 +
 .../components/list/list-item-content.tsx     | 49 +++++++++++++++++++
 src/react/components/list/list-item.tsx       | 28 ++---------
 10 files changed, 105 insertions(+), 43 deletions(-)
 create mode 100644 packages/survey-angular-ui/src/components/list/list-item-content.component.html
 create mode 100644 packages/survey-angular-ui/src/components/list/list-item-content.component.ts
 create mode 100644 packages/survey-vue3-ui/src/components/list/ListItemContent.vue
 create mode 100644 src/react/components/list/list-item-content.tsx

diff --git a/packages/survey-angular-ui/src/angular-ui.module.ts b/packages/survey-angular-ui/src/angular-ui.module.ts
index b7d08d5a89..27c7561fc1 100644
--- a/packages/survey-angular-ui/src/angular-ui.module.ts
+++ b/packages/survey-angular-ui/src/angular-ui.module.ts
@@ -121,6 +121,7 @@ import { HeaderMobileComponent } from "./components/header/header-mobile.compone
 import { ChooseFileBtn } from "./components/file/choose-file.component";
 import { FilePreviewComponent } from "./components/file/file-preview.component";
 import { SvgBundleComponent } from "./svgbundle.component";
+import { ListItemContentComponent } from "./components/list/list-item-content.component";
 
 @NgModule({
   declarations: [
@@ -129,7 +130,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
@@ -151,7 +152,7 @@ import { SvgBundleComponent } from "./svgbundle.component";
     CharacterCounterComponent,
     DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
     PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
-    CharacterCounterComponent, ListComponent, ListItemComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
+    CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
     TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
     ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
     SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
diff --git a/packages/survey-angular-ui/src/components/list/list-item-content.component.html b/packages/survey-angular-ui/src/components/list/list-item-content.component.html
new file mode 100644
index 0000000000..02bdc8e6bf
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/list/list-item-content.component.html
@@ -0,0 +1,5 @@
+<ng-template #template>
+<svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
+  sv-ng-svg-icon></svg>
+<sv-ng-string [model]="model.locTitle"></sv-ng-string>
+</ng-template>
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/list/list-item-content.component.ts b/packages/survey-angular-ui/src/components/list/list-item-content.component.ts
new file mode 100644
index 0000000000..1e4279bb3f
--- /dev/null
+++ b/packages/survey-angular-ui/src/components/list/list-item-content.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from "@angular/core";
+import { ListModel, Action } from "survey-core";
+import { BaseAngular } from "../../base-angular";
+import { AngularComponentFactory } from "../../component-factory";
+
+@Component({
+  selector: "sv-ng-list-item-content, '[sv-ng-list-item-content]'",
+  templateUrl: "./list-item-content.component.html",
+  styleUrls: ["../../hide-host.scss"],
+})
+
+export class ListItemContentComponent extends BaseAngular {
+  @Input() element: any;
+  @Input() model!: Action;
+  @Input() listModel!: ListModel;
+
+  getModel() {
+    return this.model;
+  }
+}
+
+AngularComponentFactory.Instance.registerComponent("sv-list-item-content", ListItemContentComponent);
\ No newline at end of file
diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.html b/packages/survey-angular-ui/src/components/list/list-item.component.html
index f5a9159bbe..b147f8f5b9 100644
--- a/packages/survey-angular-ui/src/components/list/list-item.component.html
+++ b/packages/survey-angular-ui/src/components/list/list-item.component.html
@@ -4,14 +4,7 @@
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
     <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText">
-    <ng-container *ngIf="!model.component">
-      <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
-        sv-ng-svg-icon></svg>
-      <sv-ng-string [model]="model.locTitle"></sv-ng-string>
-    </ng-container>
-    <ng-container *ngIf="model.component">
-      <ng-template [component]="{ name: model.component, data: { model: model } }"></ng-template>
-    </ng-container>
+    <ng-template [component]="{ name: model.component || 'sv-list-item-content', data: { model: model, listModel: listModel } }"></ng-template>
     </div>
   </li>
 </ng-template>
\ No newline at end of file
diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
index 45ac5e630f..2eb4b5a9ee 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItem.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -21,14 +21,7 @@
       v-bind:class="model.cssClasses.itemBody"
       :title="item.locTitle.calculatedText"
     >
-      <sv-svg-icon
-        v-if="item.iconName && !item.component"
-        v-bind:class="model.cssClasses.itemIcon"
-        :iconName="item.iconName"
-        :size="item.iconSize"
-      ></sv-svg-icon>
-      <survey-string v-if="!item.component" :locString="item.locTitle" />
-      <component v-if="item.component" :is="item.component" :item="item">
+      <component :is="item.component || 'sv-list-item-content'" :item="item" :model="model">
       </component>
     </div>
   </li>
diff --git a/packages/survey-vue3-ui/src/components/list/ListItemContent.vue b/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
new file mode 100644
index 0000000000..6c3b5c8c85
--- /dev/null
+++ b/packages/survey-vue3-ui/src/components/list/ListItemContent.vue
@@ -0,0 +1,18 @@
+<template>
+  <sv-svg-icon
+    v-if="item.iconName"
+    v-bind:class="model.cssClasses.itemIcon"
+    :iconName="item.iconName"
+    :size="item.iconSize"
+  ></sv-svg-icon>
+  <survey-string :locString="item.locTitle" />
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "@/base";
+import type { ListModel, Action, IAction } from "survey-core";
+
+const props = defineProps<{ model: ListModel; item: Action }>();
+
+useBase(() => props.item);
+</script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 89a6e777bb..93ea12f611 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -130,6 +130,7 @@ import ButtonGroup from "./buttongroup/ButtonGroup.vue";
 import ButtonGroupItem from "./buttongroup/ButtonGroupItem.vue";
 import Logo from "./Logo.vue";
 import SvgBundle from "./SvgBundle.vue";
+import ListItemContent from "./components/list/ListItemContent.vue";
 
 export { useBase, useLocString, useQuestion, useComputedArray } from "./base";
 
@@ -240,6 +241,7 @@ function registerComponents(app: App) {
   app.component("sv-action-bar-separator", ActionBarSeparator);
 
   app.component("sv-list", List);
+  app.component("sv-list-item-content", ListItemContent);
   app.component("sv-list-item", ListItem);
 
   app.component("sv-popup", Popup);
diff --git a/src/entries/react-ui-model.ts b/src/entries/react-ui-model.ts
index 27ed75619d..cd7a2f8279 100644
--- a/src/entries/react-ui-model.ts
+++ b/src/entries/react-ui-model.ts
@@ -79,6 +79,7 @@ export { SurveyQuestionButtonGroup } from "../react/reactquestion_buttongroup";
 export { SurveyQuestionCustom, SurveyQuestionComposite } from "../react/reactquestion_custom";
 
 export { Popup } from "../react/components/popup/popup";
+export { ListItemContent } from "../react/components/list/list-item-content";
 export { List } from "../react/components/list/list";
 export { TitleActions } from "../react/components/title/title-actions";
 export { TitleElement } from "../react/components/title/title-element";
diff --git a/src/react/components/list/list-item-content.tsx b/src/react/components/list/list-item-content.tsx
new file mode 100644
index 0000000000..6e0c1991b4
--- /dev/null
+++ b/src/react/components/list/list-item-content.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { ListModel } from "survey-core";
+import { ReactElementFactory } from "../../element-factory";
+import { SurveyElementBase } from "../../reactquestion_element";
+import { SvgIcon } from "../svg-icon/svg-icon";
+
+interface IListItemProps {
+  model: ListModel;
+  item: any;
+}
+
+export class ListItemContent extends SurveyElementBase<IListItemProps, any> {
+  get model(): ListModel {
+    return this.props.model;
+  }
+  get item(): any {
+    return this.props.item;
+  }
+  getStateElement() {
+    return this.item;
+  }
+  render(): JSX.Element | null {
+    if (!this.item) return null;
+
+    const content: Array<JSX.Element> = [];
+    const text = this.renderLocString(this.item.locTitle, undefined, "locString");
+    if(this.item.iconName) {
+      const icon = <SvgIcon
+        key={1}
+        className={this.model.cssClasses.itemIcon}
+        iconName={this.item.iconName}
+        size={this.item.iconSize}
+        aria-label={this.item.title}
+      ></SvgIcon>;
+      content.push(icon);
+      content.push(<span key={2}>{text}</span>);
+    } else {
+      content.push(text);
+    }
+
+    return <>
+      {content}
+    </>;
+  }
+}
+
+ReactElementFactory.Instance.registerElement("sv-list-item-content", (props) => {
+  return React.createElement(ListItemContent, props);
+});
diff --git a/src/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx
index 25b5edf246..0fc457afc1 100644
--- a/src/react/components/list/list-item.tsx
+++ b/src/react/components/list/list-item.tsx
@@ -3,7 +3,6 @@ import { ListModel } from "survey-core";
 import { ReactElementFactory } from "../../element-factory";
 import { SurveyElementBase } from "../../reactquestion_element";
 import { attachKey2click } from "../../reactSurvey";
-import { SvgIcon } from "../svg-icon/svg-icon";
 
 interface IListItemProps {
   model: ListModel;
@@ -29,36 +28,15 @@ export class ListItem extends SurveyElementBase<IListItemProps, any> {
       paddingInlineStart: this.model.getItemIndent(this.item)
     };
     const className = this.model.getItemClass(this.item);
-    const content: Array<JSX.Element> = [];
-    if (!this.item.component) {
-      const text = this.renderLocString(this.item.locTitle, undefined, "locString");
-      if(this.item.iconName) {
-        const icon = <SvgIcon
-          key={1}
-          className={this.model.cssClasses.itemIcon}
-          iconName={this.item.iconName}
-          size={this.item.iconSize}
-          aria-label={this.item.title}
-        ></SvgIcon>;
-        content.push(icon);
-        content.push(<span key={2}>{text}</span>);
-      } else {
-        content.push(text);
-      }
-    } else {
-      const newElement = ReactElementFactory.Instance.createElement(this.item.component, { item: this.item, key: this.item.id });
-      if(!!newElement) {
-        content.push(newElement);
-      }
-    }
-
+    const itemContent = this.item.component || "sv-list-item-content";
+    const newElement = ReactElementFactory.Instance.createElement(itemContent, { item: this.item, key: this.item.id, model: this.model });
     const contentWrap =
         <div
           style={contentWrapStyle}
           className={this.model.cssClasses.itemBody}
           title={this.item.locTitle.calculatedText}
         >
-          {content}
+          {newElement}
         </div>;
     const separator = this.item.needSeparator ? <div className = {this.model.cssClasses.itemSeparator}/>:null;
     const isVisible = this.model.isItemVisible(this.item);