Skip to content

Commit

Permalink
work for #8129 Popup submenu
Browse files Browse the repository at this point in the history
  • Loading branch information
OlgaLarina committed May 24, 2024
1 parent 73f5746 commit 3f31c78
Show file tree
Hide file tree
Showing 11 changed files with 120 additions and 37 deletions.
7 changes: 4 additions & 3 deletions packages/survey-angular-ui/src/angular-ui.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ import { SurveyHeaderComponent } from "./components/survey-header/survey-header.
import { DynamicHeadComponent } from "./components/element-title/dynamic-head.component";
import { ListComponent } from "./components/list/list.component";
import { ListItemComponent } from "./components/list/list-item.component";
import { ListItemContentComponent } from "./components/list/list-item-content.component";
import { ListItemGroupComponent } from "./components/list/list-item-group.component";
import { RatingItemComponent } from "./components/rating/rating-item.component";
import { RatingItemStarComponent } from "./components/rating/rating-item-star.component";
import { RatingItemSmileyComponent } from "./components/rating/rating-item-smiley.component";
Expand Down Expand Up @@ -121,7 +123,6 @@ 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: [
Expand All @@ -130,7 +131,7 @@ import { ListItemContentComponent } from "./components/list/list-item-content.co
QuestionSkeletonComponent, TextQuestionComponent, RadiogroupComponent, RadiogroupItemComponent, CheckboxComponent, CheckboxItemComponent,
DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleActionsComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
Expand All @@ -152,7 +153,7 @@ import { ListItemContentComponent } from "./components/list/list-item-content.co
CharacterCounterComponent,
DropdownComponent, DropdownQuestionComponent, DropdownSelectComponent, DropdownOptionItemComponent,
PopupComponent, PopupBaseContainerComponent, PopupPointerComponent,
CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
CharacterCounterComponent, ListComponent, ListItemComponent, ListItemContentComponent, ListItemGroupComponent, RatingItemComponent, RatingItemStarComponent, RatingItemSmileyComponent,
TagboxFilterComponent, TagboxComponent, TagboxQuestionComponent, TagboxItemComponent,
ActionBarComponent, ActionComponent, ActionBarItemComponent, ActionBarItemDropdownComponent, HtmlQuestionComponent,
SelectBaseItemComponent, SelectBaseComponent, SurveyCommentComponent, SurveyCommentOtherComponent, ElementHeaderComponent, ElementTitleComponent, DynamicHeadComponent, RowComponent,
Expand Down
1 change: 1 addition & 0 deletions packages/survey-angular-ui/src/angular-ui.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export * from "./components/element-title/dynamic-head.component";
export * from "./components/list/list.component";
export * from "./components/list/list-item.component";
export * from "./components/list/list-item-content.component";
export * from "./components/list/list-item-group.component";
export * from "./components/rating/rating-item.component";
export * from "./components/rating/rating-item-star.component";
export * from "./components/rating/rating-item-smiley.component";
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<ng-template #template>
<sv-ng-list-item-content [model]="model" [listModel]="listModel"></sv-ng-list-item-content>
<sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
</ng-template>
Original file line number Diff line number Diff line change
@@ -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-group, '[sv-ng-list-item-group]'",
templateUrl: "./list-item-group.component.html",
styleUrls: ["../../hide-host.scss"],
})

export class ListItemGroupComponent extends BaseAngular {
@Input() element: any;
@Input() model!: Action;
@Input() listModel!: ListModel;

getModel() {
return this.model;
}
}

AngularComponentFactory.Instance.registerComponent("sv-list-item-group", ListItemGroupComponent);
13 changes: 13 additions & 0 deletions packages/survey-vue3-ui/src/components/list/ListItemGroup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<template>
<sv-list-item-content :item="item" :model="model"></sv-list-item-content>
<sv-popup :model="item.popupModel"></sv-popup>
</template>

<script lang="ts" setup>
import { useBase } from "@/base";
import type { ListModel, Action } from "survey-core";
const props = defineProps<{ model: ListModel; item: Action }>();
useBase(() => props.item);
</script>
4 changes: 3 additions & 1 deletion packages/survey-vue3-ui/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,8 @@ import ActionBarSeparator from "./components/action-bar/ActionBarSeparator.vue";

import List from "./components/list/List.vue";
import ListItem from "./components/list/ListItem.vue";
import ListItemContent from "./components/list/ListItemContent.vue";
import ListItemGroup from "./components/list/ListItemGroup.vue";

import Popup from "./components/popup/Popup.vue";
import PopupContainer from "./components/popup/PopupContainer.vue";
Expand Down Expand Up @@ -130,7 +132,6 @@ 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";

Expand Down Expand Up @@ -242,6 +243,7 @@ function registerComponents(app: App) {

app.component("sv-list", List);
app.component("sv-list-item-content", ListItemContent);
app.component("sv-list-item-group", ListItemGroup);
app.component("sv-list-item", ListItem);

app.component("sv-popup", Popup);
Expand Down
1 change: 1 addition & 0 deletions src/entries/react-ui-model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ export { SurveyQuestionCustom, SurveyQuestionComposite } from "../react/reactque

export { Popup } from "../react/components/popup/popup";
export { ListItemContent } from "../react/components/list/list-item-content";
export { ListItemGroup } from "../react/components/list/list-item-group";
export { List } from "../react/components/list/list";
export { TitleActions } from "../react/components/title/title-actions";
export { TitleElement } from "../react/components/title/title-element";
Expand Down
2 changes: 1 addition & 1 deletion src/knockout/components/list/list-item-group.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<!-- ko component: { name: 'sv-list-item-content', params: { item: $data.item, model: $data.model } } -->
<!-- /ko -->
<sv-popup params="{ model: $data.item.popupModel, getTarget: $parent.getTarget }"></sv-popup>
<sv-popup params="{ model: $data.item.popupModel }"></sv-popup>
35 changes: 35 additions & 0 deletions src/react/components/list/list-item-group.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React from "react";
import { ListModel } from "survey-core";
import { ReactElementFactory } from "../../element-factory";
import { SurveyElementBase } from "../../reactquestion_element";
import { Popup } from "../popup/popup";

interface IListItemProps {
model: ListModel;
item: any;
}

export class ListItemGroup 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 newElement = ReactElementFactory.Instance.createElement("sv-list-item-content", { item: this.item, key: this.item.id, model: this.model });
return <>
{newElement}
<Popup model={this.item?.popupModel}></Popup>
</>;
}
}

ReactElementFactory.Instance.registerElement("sv-list-item-group", (props) => {
return React.createElement(ListItemGroup, props);
});
10 changes: 7 additions & 3 deletions src/vue/components/list/list-item.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,12 @@
:title="item.locTitle.calculatedText"
@mouseover="(e) => model.onItemHover(item)"
@mouseleave="(e) => model.onItemLeave(item)">
<sv-svg-icon v-if="item.iconName && !item.component" v-bind:class="model.cssClasses.itemIcon"
<sv-svg-icon v-if="item.iconName && isDefaultItem" v-bind:class="model.cssClasses.itemIcon"
:iconName="item.iconName" :size="item.iconSize"></sv-svg-icon>
<survey-string v-if="!item.component" :locString="item.locTitle" />
<sv-svg-icon v-if="item.markerIconName && !item.component" v-bind:class="item.cssClasses.itemMarkerIcon"
<survey-string v-if="isDefaultItem" :locString="item.locTitle" />
<sv-svg-icon v-if="item.markerIconName" v-bind:class="item.cssClasses.itemMarkerIcon"
:iconName="item.markerIconName" :size="item.markerIconSize"></sv-svg-icon>
<sv-popup v-if="item.popupModel && isDefaultItem" :model="item.popupModel"></sv-popup>
<component v-if="item.component" :is="item.component" :item="item"> </component>
</div>
</li>
Expand All @@ -39,6 +40,9 @@ export class ListItem extends BaseVue {
get elementId() {
return (this.item as IAction)?.elementId;
}
get isDefaultItem(): boolean {
return !this.item.component || this.item.component === "sv-list-item-group";
}
public click(event: any) {
this.model.onItemClick(this.item as any);
event.stopPropagation();
Expand Down
58 changes: 29 additions & 29 deletions tests/markup/etalon_components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,35 +30,35 @@ registerMarkupTests(
},
snapshot: "list-component"
}, {
// name: "Test popup list with subitems",
// json: {
// questions: [
// {
// "type": "text",
// "name": "q1",
// "title": "Question title"
// }
// ]
// },
// before: () => { Question["questionCounter"] = 100; },
// initSurvey: (survey) => {
// survey.onGetQuestionTitleActions.add((_, opt) => {
// const items = [new Action({ id: "1", title: "text1" }), new Action({ id: "2", title: "text2" })];
// const item = createDropdownActionModel(
// { title: "bottom", showTitle: true },
// {
// verticalPosition: "bottom", horizontalPosition: "center", items: items,
// onSelectionChanged: (item, ...params) => { }
// });
// items[1].setItems([{ id: "11", title: "text11" }, { id: "21", title: "text21" }], () => { });
// opt.titleActions = [item];
// });
// },
// getElement: () => {
// return document.querySelector(".sv-popup .sv-popup__container") as HTMLElement;
// },
// snapshot: "list-component-with-subitems"
// }, {
name: "Test popup list with subitems",
json: {
questions: [
{
"type": "text",
"name": "q1",
"title": "Question title"
}
]
},
before: () => { Question["questionCounter"] = 100; },
initSurvey: (survey) => {
survey.onGetQuestionTitleActions.add((_, opt) => {
const items = [new Action({ id: "1", title: "text1" }), new Action({ id: "2", title: "text2" })];
const item = createDropdownActionModel(
{ title: "bottom", showTitle: true },
{
verticalPosition: "bottom", horizontalPosition: "center", items: items,
onSelectionChanged: (item, ...params) => { }
});
items[1].setItems([{ id: "11", title: "text11" }, { id: "21", title: "text21" }], () => { });
opt.titleActions = [item];
});
},
getElement: () => {
return document.querySelector(".sv-popup .sv-popup__container") as HTMLElement;
},
snapshot: "list-component-with-subitems"
}, {
name: "Test popup list with separator",
json: {
questions: [
Expand Down

0 comments on commit 3f31c78

Please sign in to comment.