fix(Modals): support multiple ThemeProvider (#5414)

Fixes #5410
SAP · Jan 11, 2024 · 6c07525 · 6c07525
1 parent 0180ca3
commit 6c07525
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/packages/main/src/components/Modals/ModalsProvider.tsx b/packages/main/src/components/Modals/ModalsProvider.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
-import React, { useReducer, useRef } from 'react';
+import React, { useMemo, useReducer } from 'react';
 import { createPortal } from 'react-dom';
 import type { ModalState, UpdateModalStateAction } from '../../internal/ModalsContext.js';
-import { ModalsContext } from '../../internal/ModalsContext.js';
+import { getModalContext } from '../../internal/ModalsContext.js';
 
 export interface ModalsProviderPropTypes {
   children: ReactNode;
@@ -23,17 +23,20 @@ const modalStateReducer = (state: ModalState[], action: UpdateModalStateAction)
 export function ModalsProvider({ children }: ModalsProviderPropTypes) {
   const [modals, setModal] = useReducer(modalStateReducer, []);
 
-  const isSyncedWithWindow = useRef(false);
+  // necessary for static method
+  globalThis['@ui5/webcomponents-react'] ??= {};
+  globalThis['@ui5/webcomponents-react'].setModal = setModal;
 
-  if (!isSyncedWithWindow.current && typeof window !== 'undefined') {
-    window['@ui5/webcomponents-react'] ??= {};
-    window['@ui5/webcomponents-react'].ModalsContext = ModalsContext;
-    window['@ui5/webcomponents-react'].setModal = setModal;
-    isSyncedWithWindow.current = true;
-  }
+  const GlobalModalsContext = getModalContext();
+  const memoizedVal = useMemo(
+    () => ({
+      setModal: globalThis['@ui5/webcomponents-react'].setModal
+    }),
+    []
+  );
 
   return (
-    <ModalsContext.Provider value={{ setModal }}>
+    <GlobalModalsContext.Provider value={memoizedVal}>
       {modals.map((modal) => {
         if (modal?.Component) {
           return createPortal(
@@ -43,6 +46,6 @@ export function ModalsProvider({ children }: ModalsProviderPropTypes) {
         }
       })}
       {children}
-    </ModalsContext.Provider>
+    </GlobalModalsContext.Provider>
   );
 }
diff --git a/packages/main/src/internal/ModalsContext.ts b/packages/main/src/internal/ModalsContext.ts
@@ -18,14 +18,19 @@ interface IModalsContext<Props, DomRef> {
   setModal?: Dispatch<UpdateModalStateAction<Props, DomRef>>;
 }
 
-export const ModalsContext = createContext<IModalsContext<Record<string, any>, HTMLElement>>({
+const ModalsContext = createContext<IModalsContext<Record<string, any>, HTMLElement>>({
   setModal: null
 });
 
-export const useModalsContext = (): ContextType<typeof ModalsContext> => {
-  let context = ModalsContext;
-  if (typeof window !== 'undefined' && window['@ui5/webcomponents-react']?.ModalsContext) {
-    context = window['@ui5/webcomponents-react'].ModalsContext;
+export function getModalContext() {
+  if (!globalThis['@ui5/webcomponents-react']?.ModalsContext) {
+    globalThis['@ui5/webcomponents-react'] ??= {};
+    globalThis['@ui5/webcomponents-react'].ModalsContext = ModalsContext;
   }
-  return useContext(context);
+
+  return globalThis['@ui5/webcomponents-react'].ModalsContext;
+}
+
+export const useModalsContext = (): ContextType<typeof ModalsContext> => {
+  return useContext(getModalContext());
 };