Merge pull request #1 from aajahid/contextWrapper - Allow user to wra…

…p the whole app in a context This enables one to use context based features, like react router, in popups and dialogs.
aajahid · Jul 18, 2022 · 14c9f14 · 14c9f14
2 parents c9ab64f + b314554
commit 14c9f14
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 3 deletions.
diff --git a/src/common/Interfaces.ts b/src/common/Interfaces.ts
@@ -64,6 +64,7 @@ export abstract class App {
 
 export abstract class UserInterface {
     abstract setMainView(element: React.ReactElement<any>): void;
+    abstract setContextWrapper(contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>)): void;
     abstract registerRootView(viewKey: string, getComponentFunc: Function): void;
 
     abstract useCustomScrollbars(enable?: boolean): void;

diff --git a/src/native-common/MainViewStore.ts b/src/native-common/MainViewStore.ts
@@ -13,6 +13,8 @@ import SubscribableEvent from 'subscribableevent';
 
 export class MainViewStore extends SubscribableEvent<() => void> {
     private _mainView: React.ReactElement<any> | undefined;
+    private _contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>) | undefined;
+
 
     getMainView(): React.ReactElement<any> | undefined {
         return this._mainView;
@@ -22,6 +24,15 @@ export class MainViewStore extends SubscribableEvent<() => void> {
         this._mainView = view;
         this.fire();
     }
+
+    getContextWrapper(): ((rootView: React.ReactElement<any>) => React.ReactElement<any>) | undefined {
+        return this._contextWrapper;
+    }
+
+    setContextWrapper(contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>)): void {
+        this._contextWrapper = contextWrapper;
+        this.fire();
+    }
 }
 
 export default new MainViewStore();
diff --git a/src/native-common/RootView.tsx b/src/native-common/RootView.tsx
@@ -35,6 +35,7 @@ interface RootViewPropsWithMainViewType extends BaseRootViewProps {
 
 interface RootViewState {
     mainView?: any;
+    contextWrapper?: (rootView: React.ReactElement<any>) => React.ReactElement<any>;
     announcementText?: string;
 }
 
@@ -144,7 +145,12 @@ abstract class BaseRootView<P extends BaseRootViewProps> extends React.Component
             </RN.Animated.View>
         );
 
-        return this.renderTopView(content);
+        const maybeContextWrappedContent =
+            this.state.contextWrapper === undefined
+            ? content
+            : this.state.contextWrapper(content);
+
+        return this.renderTopView(maybeContextWrappedContent);
     }
 
     protected _renderAnnouncerView(): JSX.Element {
@@ -193,13 +199,15 @@ class RootViewUsingStore extends BaseRootView<BaseRootViewProps> {
 
     private _getStateFromStore(): RootViewState {
         let mainView = MainViewStore.getMainView();
+        let contextWrapper = MainViewStore.getContextWrapper();
 
         if (mainView && !isEqual(mainView.props, this._mainViewProps)) {
             mainView = React.cloneElement(mainView, this._mainViewProps);
         }
 
         return {
-            mainView: mainView,
+            mainView:       mainView,
+            contextWrapper: contextWrapper,
         };
     }
 

diff --git a/src/native-common/UserInterface.tsx b/src/native-common/UserInterface.tsx
@@ -137,6 +137,10 @@ export class UserInterface extends RX.UserInterface {
         MainViewStore.setMainView(element);
     }
 
+    setContextWrapper(contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>)): void {
+        MainViewStore.setContextWrapper(contextWrapper);
+    }
+
     registerRootViewUsingPropsFactory(factory: RN.ComponentProvider) {
         this._rootViewUsingPropsFactory = factory;
     }

diff --git a/src/web/FrontLayerViewManager.tsx b/src/web/FrontLayerViewManager.tsx
@@ -37,11 +37,17 @@ export class FrontLayerViewManager {
     private _isRtlAllowed = true;
     private _isRtlForced = false;
 
+    private _contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>) | undefined;
+
     setMainView(element: React.ReactElement<any>): void {
         this._mainView = element;
         this._renderRootView();
     }
 
+    setContextWrapper(contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>)): void {
+        this._contextWrapper = contextWrapper;
+    }
+
     isModalDisplayed(modalId?: string): boolean {
         if (modalId) {
             return this._modalStack.some(d => d.id === modalId);
@@ -205,7 +211,12 @@ export class FrontLayerViewManager {
 
         const container = document.getElementsByClassName('app-container')[0];
 
-        ReactDOM.render(rootView, container);
+        const maybeContextWrappedRootView =
+            this._contextWrapper === undefined
+            ? rootView
+            : this._contextWrapper(rootView);
+
+        ReactDOM.render(maybeContextWrappedRootView, container);
     }
 
     isPopupDisplayed(popupId?: string): boolean {

diff --git a/src/web/UserInterface.ts b/src/web/UserInterface.ts
@@ -114,6 +114,10 @@ export class UserInterface extends RX.UserInterface {
         FrontLayerViewManager.setMainView(element);
     }
 
+    setContextWrapper(contextWrapper: ((rootView: React.ReactElement<any>) => React.ReactElement<any>)): void {
+        FrontLayerViewManager.setContextWrapper(contextWrapper);
+    }
+
     registerRootView(viewKey: string, getComponentFunc: Function): void {
         // Nothing to do
     }