Modal Popup not applying theme variables (#6559)

* work for #6503 Modal Popup not applying theme variables * work for #6559 Modal Popup not applying theme variables - support Vue3 --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Jul 24, 2023 · b583559 · b583559
1 parent e1016de
commit b583559
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 13 deletions.
diff --git a/packages/survey-angular-ui/src/components/popup/modal-container.component.ts b/packages/survey-angular-ui/src/components/popup/modal-container.component.ts
@@ -17,8 +17,8 @@ export class ModalComponent {
 
   constructor(private popupService: PopupService) {
   }
-  showDialog(dialogOptions: IDialogOptions, container?: HTMLElement): PopupBaseViewModel {
-    this.model = createPopupModalViewModel(dialogOptions, container);
+  showDialog(dialogOptions: IDialogOptions, rootElement?: HTMLElement): PopupBaseViewModel {
+    this.model = createPopupModalViewModel(dialogOptions, rootElement);
     this.model.model.onHide = () => {
       this.portalHost.detach();
       this.model.dispose();
@@ -52,10 +52,15 @@ export class ModalComponent {
       );
       return this.showDialog(options);
     };
+
+    settings.showDialog = (dialogOptions: IDialogOptions, rootElement?: HTMLElement) => {
+      this.showDialog(dialogOptions, rootElement);
+    };
   }
   ngOnDestroy() {
     if(this.functionDefined) {
       settings.showModal = <any>undefined;
+      settings.showDialog = <any>undefined;
     }
   }
 }

diff --git a/packages/survey-vue3-ui/src/components/popup/PopupModal.vue b/packages/survey-vue3-ui/src/components/popup/PopupModal.vue
@@ -39,15 +39,15 @@ function showModal(
 }
 function showDialog(
   dialogOptions: IDialogOptions,
-  container?: HTMLElement
+  rootElement?: HTMLElement
 ): PopupBaseViewModel {
   dialogOptions.onHide = () => {
     popup.value = undefined;
     popupViewModel.dispose();
   };
   const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(
     dialogOptions,
-    container
+    rootElement
   );
   popupViewModel.model.isVisible = true;
   popup.value = popupViewModel;
@@ -59,4 +59,10 @@ if (!settings.showModal) {
     settings.showModal = undefined as any;
   });
 }
+if (!settings.showDialog) {
+  settings.showDialog = showDialog;
+  onUnmounted(() => {
+    settings.showDialog = undefined as any;
+  });
+}
 </script>
diff --git a/src/knockout/components/popup/popup.ts b/src/knockout/components/popup/popup.ts
@@ -44,13 +44,13 @@ export function showModal(
   );
   return showDialog(options, container);
 }
-export function showDialog(dialogOptions: IDialogOptions, container?: HTMLElement): PopupBaseViewModel {
+export function showDialog(dialogOptions: IDialogOptions, rootElement?: HTMLElement): PopupBaseViewModel {
   dialogOptions.onHide = () => {
     viewModel.dispose();
     ko.cleanNode(popupViewModel.container);
     popupViewModel.dispose();
   };
-  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, container);
+  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, rootElement);
   var viewModel = new PopupViewModel(popupViewModel);
   popupViewModel.container.innerHTML = template;
   ko.applyBindings(viewModel, popupViewModel.container);
@@ -59,6 +59,7 @@ export function showDialog(dialogOptions: IDialogOptions, container?: HTMLElemen
 }
 
 settings.showModal = showModal;
+settings.showDialog = showDialog;
 
 ko.components.register("sv-popup", {
   viewModel: {

diff --git a/src/popup-utils.ts b/src/popup-utils.ts
@@ -2,8 +2,10 @@ import { IDialogOptions, PopupModel } from "./popup";
 import { PopupDropdownViewModel } from "./popup-dropdown-view-model";
 import { PopupModalViewModel } from "./popup-modal-view-model";
 import { PopupBaseViewModel } from "./popup-view-model";
+import { settings } from "./settings";
+import { getElement } from "./utils/utils";
 
-export function createPopupModalViewModel(options: IDialogOptions, container?: HTMLElement): PopupBaseViewModel {
+export function createPopupModalViewModel(options: IDialogOptions, rootElement?: HTMLElement): PopupBaseViewModel {
   const popupModel = new PopupModel(
     options.componentName,
     options.data,
@@ -20,8 +22,12 @@ export function createPopupModalViewModel(options: IDialogOptions, container?: H
   );
   popupModel.displayMode = options.displayMode || "popup";
   const popupViewModel: PopupBaseViewModel = new PopupModalViewModel(popupModel);
-  popupViewModel.setComponentElement(container);
-  if(!container) {
+  if(!!rootElement && !!rootElement.appendChild) {
+    const container: HTMLElement = document.createElement("div");
+    rootElement.appendChild(container);
+    popupViewModel.setComponentElement(container);
+  }
+  if(!popupViewModel.container) {
     popupViewModel.initializePopupContainer();
   }
   return popupViewModel;

diff --git a/src/react/components/popup/popup.tsx b/src/react/components/popup/popup.tsx
@@ -207,16 +207,17 @@ export function showModal(
   );
   return showDialog(options);
 }
-export function showDialog(dialogOptions: IDialogOptions, container?: HTMLElement): PopupBaseViewModel {
+export function showDialog(dialogOptions: IDialogOptions, rootElement?: HTMLElement): PopupBaseViewModel {
   dialogOptions.onHide = () => {
     ReactDOM.unmountComponentAtNode(popupViewModel.container);
     popupViewModel.dispose();
   };
-  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, container);
+  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, rootElement);
   ReactDOM.render(<PopupContainer model={popupViewModel} />, popupViewModel.container);
   popupViewModel.model.isVisible = true;
 
   return popupViewModel;
 }
 
 settings.showModal = showModal;
+settings.showDialog = showDialog;
diff --git a/src/settings.ts b/src/settings.ts
@@ -1,3 +1,5 @@
+import { IDialogOptions } from "./popup";
+
 export type ISurveyEnvironment = {
   root: Document | ShadowRoot,
   rootElement: HTMLElement | ShadowRoot,
@@ -562,6 +564,7 @@ export var settings = {
       displayMode?: "popup" | "overlay"
     ) => any
     >undefined,
+  showDialog: < (options: IDialogOptions, rootElement?: HTMLElement) => any >undefined,
   supportCreatorV2: false,
   showDefaultItemsInCreatorV2: true,
   /**

diff --git a/src/vue/components/popup/popup-container.vue b/src/vue/components/popup/popup-container.vue
@@ -102,12 +102,12 @@ export function showModal(
   );
   return showDialog(options);
 }
-export function showDialog(dialogOptions: IDialogOptions, container?: HTMLElement): PopupBaseViewModel {
+export function showDialog(dialogOptions: IDialogOptions, rootElement?: HTMLElement): PopupBaseViewModel {
   dialogOptions.onHide = () => {
     popup.$destroy();
     popupViewModel.dispose();
   };
-  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, container);
+  const popupViewModel: PopupBaseViewModel = createPopupModalViewModel(dialogOptions, rootElement);
   const popup = new PopupContainer({
     el: popupViewModel.container.appendChild(document.createElement("div")),
     propsData: { model: popupViewModel },
@@ -116,6 +116,7 @@ export function showDialog(dialogOptions: IDialogOptions, container?: HTMLElemen
   return popupViewModel;
 }
 settings.showModal = showModal;
+settings.showDialog = showDialog;
 Vue.component("sv-popup-container", PopupContainer);
 export default PopupContainer;
 </script>