@applicaster/zapp-react-native-ui-components 14.0.7-rc.2 → 14.0.9-alpha.2354002522

package/Components/Screen/orientationHandler.ts

@@ -1,16 +1,18 @@
-import { useLayoutEffect } from "react";
+import React, { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  getOrientation,
   ORIENTATIONS,
+  getOrientation,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
+
+import { ZappHookModalContext } from "../../Contexts";
+import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -87,6 +89,10 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
+  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
+    ZappHookModalContext.ReactContext
+  );
+
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -99,9 +105,6 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
-    // TODO: make sure it can be static getter and subscription is not needed
-    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
-
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -113,7 +116,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, prevIsActive, isActive]);
+  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Contexts/ZappHookModalContext/index.tsx

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import React, { useCallback } from "react";
 
 type HookModalState = {
   path: string;
@@ -10,12 +10,11 @@ export type HookModalContextT = {
   setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => void;
   isRunningInBackground: boolean;
   isPresentationFullScreen: boolean;
-  setIsRunningInBackground: () => void;
-  setIsPresentingFullScreen: () => void;
+  setIsRunningInBackground: (hookBackgroundProcessState?: boolean) => void;
+  setIsPresentingFullScreen: (hookBackgroundProcessState?: boolean) => void;
   state: HookModalState;
   setState: (state: HookModalState) => void;
   resetState: () => void;
-  hookPresentationMode: HookPresentationMode;
 };
 
 const initialState = {
@@ -25,43 +24,68 @@ const initialState = {
 
 type HookPresentationMode = "background" | "fullScreen";
 
-// Use useZappHookModalStore() in React components (hooks)
-// Use zappHookModalStore.getState() in non-React functions (utility functions, etc.)
-export const useZappHookModalStore = create<HookModalContextT>()((set) => ({
-  state: initialState,
+const ReactContext = React.createContext<HookModalContextT>({
   isHooksExecutionInProgress: false,
-  hookPresentationMode: null as HookPresentationMode,
-  isRunningInBackground: false,
-  isPresentationFullScreen: false,
+  setIsHooksExecutionInProgress: () => {},
+  isRunningInBackground: null,
+  setIsRunningInBackground: () => {},
+  setIsPresentingFullScreen: () => {},
+  isPresentationFullScreen: null,
+  state: initialState,
+  setState: () => null,
+  resetState: () => null,
+});
+
+const Provider = ({ children }: { children: React.ReactNode }) => {
+  const [state, setState] = React.useState<HookModalState>(initialState);
+
+  const [hookPresentationMode, setHookPresentationMode] =
+    React.useState<HookPresentationMode>(null);
 
-  setState: (newState: HookModalState) => {
-    set({ state: newState });
-  },
+  const resetState = useCallback(() => {
+    setState(initialState);
+  }, [setState]);
 
-  setIsHooksExecutionInProgress: (hookExecutionState?: boolean) => {
-    set({ isHooksExecutionInProgress: hookExecutionState ?? false });
-  },
+  const [isHooksExecutionInProgress, setIsHooksExecutionInProgress] =
+    React.useState(false);
 
-  setIsRunningInBackground: () => {
-    set({
-      hookPresentationMode: "background",
-      isRunningInBackground: true,
-      isPresentationFullScreen: false,
-    });
-  },
+  const setIsRunningInBackground = () => {
+    setHookPresentationMode("background");
+  };
 
-  setIsPresentingFullScreen: () => {
-    set({
-      hookPresentationMode: "fullScreen",
-      isRunningInBackground: false,
-      isPresentationFullScreen: true,
-    });
-  },
+  const setIsPresentingFullScreen = () => {
+    setHookPresentationMode("fullScreen");
+  };
 
-  resetState: () => {
-    set({ state: initialState });
-  },
-}));
+  return (
+    <ReactContext.Provider
+      value={{
+        isRunningInBackground: hookPresentationMode === "background",
+        setIsRunningInBackground,
+        setIsPresentingFullScreen,
+        isPresentationFullScreen: hookPresentationMode === "fullScreen",
+        isHooksExecutionInProgress,
+        setIsHooksExecutionInProgress,
+        state,
+        setState,
+        resetState,
+      }}
+    >
+      {children}
+    </ReactContext.Provider>
+  );
+};
+
+const withProvider = (Component) => {
+  const WithProvider = (props) => {
+    return (
+      <Provider>
+        <Component {...props} />
+      </Provider>
+    );
+  };
+
+  return WithProvider;
+};
 
-// Export an alias for clearer non-React usage (utility functions, etc.)
-export const zappHookModalStore = useZappHookModalStore;
+export const ZappHookModalContext = { withProvider, ReactContext };

package/Contexts/index.ts

@@ -12,6 +12,8 @@ export { HorizontalScrollContext } from "./HorizontalScrollContext";
 
 export { RiverOffsetContext } from "./RiverOffsetContext";
 
+export { ZappHookModalContext } from "./ZappHookModalContext";
+
 export { MeasurementContext } from "./MeasurementContext";
 
 export * from "./ZappPipesContext";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.7-rc.2",
+  "version": "14.0.9-alpha.2354002522",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.7-rc.2",
-    "@applicaster/zapp-react-native-bridge": "14.0.7-rc.2",
-    "@applicaster/zapp-react-native-redux": "14.0.7-rc.2",
-    "@applicaster/zapp-react-native-utils": "14.0.7-rc.2",
+    "@applicaster/applicaster-types": "14.0.9-alpha.2354002522",
+    "@applicaster/zapp-react-native-bridge": "14.0.9-alpha.2354002522",
+    "@applicaster/zapp-react-native-redux": "14.0.9-alpha.2354002522",
+    "@applicaster/zapp-react-native-utils": "14.0.9-alpha.2354002522",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",