@applicaster/zapp-react-native-ui-components 12.0.0-rc.11 → 12.0.0-rc.110

package/Contexts/ScreenContext/index.tsx

@@ -1,34 +1,79 @@
-import React, { createContext, ReactNode, useMemo, useState } from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import {
   useCurrentScreenData,
   useNavigation,
   useRoute,
+  isNavBarVisible,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { isNavBarVisible } from "../../Components/Screen/navigationHandler";
+import { create, StoreApi, UseBoundStore } from "zustand";
+import { useShallow } from "zustand/react/shallow";
+import { Animated } from "react-native";
+
+interface NavBarStoreState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+  height: number;
+  scrollState: number;
+  contentPosition: string;
+  scrollYAnimated: Animated.Value;
+}
+
+interface NavBarState {
+  visible: boolean;
+  title: string;
+  summary: string;
+  setVisible: (state: boolean) => void;
+  setTitle: (title: string) => void;
+  setSummary: (subtitle: string) => void;
+}
 
 type ScreenContextType = {
-  navBar: {
-    visible: boolean;
-    title: string;
-    summary: string;
-    setVisible: (state: boolean) => void;
-    setTitle: (title: string) => void;
-    setSummary: (subtitle: string) => void;
-  };
+  _navBarStore: UseBoundStore<StoreApi<NavBarStoreState>>;
+  navBar: NavBarState;
   legacyFormatScreenData: LegacyNavigationScreenData | null;
 };
 
+const createStore = () =>
+  create<NavBarStoreState>((set) => ({
+    title: "",
+    summary: "",
+    visible: true,
+    height: 0,
+    scrollState: 0,
+    contentPosition: "",
+    scrollYAnimated: new Animated.Value(0),
+    setTitle(title) {
+      set({ title });
+    },
+    setSummary(summary) {
+      set({ summary });
+    },
+    setVisible(visible) {
+      set({ visible });
+    },
+  }));
+
 export const ScreenContext = createContext<ScreenContextType>({
+  _navBarStore: createStore(),
   navBar: {
     visible: true,
     title: "",
     summary: "",
-    setVisible: (_state) => {},
-    setTitle: (_title) => {},
-    setSummary: (_subtitle) => {},
+    setVisible: (_state) => void 0,
+    setTitle: (_title) => void 0,
+    setSummary: (_subtitle) => void 0,
   },
   legacyFormatScreenData: {} as LegacyNavigationScreenData,
 });
@@ -42,8 +87,6 @@ export function ScreenContextProvider({
 }) {
   const { data, modalData, videoModalState, canGoBack } = useNavigation();
 
-  const { rivers: _rivers } = usePickFromState(["rivers", "plugins"]);
-
   // There are 4 route scenarios
   // For regular screens take date from navigator stack.
   // is path is model grab screenData from modal state
@@ -56,9 +99,30 @@ export function ScreenContextProvider({
   const isNested = useNestedNavigationContext();
   const currentScreenScreenData = useCurrentScreenData();
 
-  const [navBarTitle, setNavBarTitle] = useState("");
-  const [navBarSummary, setNavBarSummary] = useState("");
-  const [navBarVisible, setNavBarVisible] = useState(true);
+  const screenNavBarStateRef =
+    useRef<null | ReturnType<typeof createStore>>(null);
+
+  const getScreenNavBarState = useCallback(() => {
+    if (screenNavBarStateRef.current !== null) {
+      return screenNavBarStateRef.current;
+    }
+
+    const navBarState = createStore();
+    screenNavBarStateRef.current = navBarState;
+
+    return navBarState;
+  }, []);
+
+  const screenNavBarState = getScreenNavBarState()(
+    useShallow((state) => ({
+      visible: state.visible,
+      title: state.title,
+      summary: state.summary,
+      setTitle: state.setTitle,
+      setSummary: state.setSummary,
+      setVisible: state.setVisible,
+    }))
+  );
 
   const isHook = pathname.includes("hook");
 
@@ -76,26 +140,28 @@ export function ScreenContextProvider({
   const isVisible = isNavBarVisible(
     pathname,
     currentScreenScreenData, // what fallback should be if currentScreenData is not available?
-    navBarVisible,
+    screenNavBarState.visible,
     canGoBack(isHook, pathname),
     videoModalState
   );
 
-  const navBarState = useMemo(() => {
-    return {
-      title: navBarTitle,
-      summary: navBarSummary,
+  const navBarState = useMemo(
+    () => ({
+      title: screenNavBarState.title,
+      summary: screenNavBarState.summary,
       visible: isVisible,
-      setTitle: setNavBarTitle,
-      setSummary: setNavBarSummary,
-      setVisible: setNavBarVisible,
-    };
-  }, [isVisible, navBarTitle, navBarSummary]);
+      setTitle: screenNavBarState.setTitle,
+      setSummary: screenNavBarState.setSummary,
+      setVisible: screenNavBarState.setVisible,
+    }),
+    [isVisible, screenNavBarState.title, screenNavBarState.summary]
+  );
 
   return (
     <ScreenContext.Provider
       value={useMemo(
         () => ({
+          _navBarStore: getScreenNavBarState(),
           navBar: navBarState,
           legacyFormatScreenData: routeScreenData,
         }),

package/Contexts/ScreenDataContext/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+export const ScreenDataContext = React.createContext<any>(null);
+
+// Use this only to provide initial screenData context, before the Transitioner and Screen is rendered.
+export const withScreenDataContextProvider = (Component: any) => {
+  return function ScreenDataContextProvider(props: any) {
+    const { activeRiver } = useNavigation();
+
+    // use only initial activeRiver as this context should only be used for "Home", initial route
+    const screenData = React.useMemo(() => ({ screen: activeRiver }), []);
+
+    return (
+      <ScreenDataContext.Provider value={screenData}>
+        <Component {...props} />
+      </ScreenDataContext.Provider>
+    );
+  };
+};

package/Contexts/ZappPipesContext/ZappPipesEntryContext.ts

@@ -63,7 +63,7 @@ function prepareContext(
   const parent = findParent(currentContext, route, getChildren);
 
   const newEntry = {
-    route: route,
+    route,
     id: uuid(),
     data: newContext,
   } as SingleEntry;

package/Decorators/ComponentsMapWrapper/withComponentsMapProvider.tsx

@@ -12,11 +12,16 @@ export function withComponentsMapProvider(Component: React.ComponentType<any>) {
     };
 
     const setComponentHeightById = (id: string | number, height: number) => {
-      componentsHeightMapRef.current = { ...componentsHeightMapRef.current, [id]: height };
+      componentsHeightMapRef.current = {
+        ...componentsHeightMapRef.current,
+        [id]: height,
+      };
     };
 
     return (
-      <ComponentsMapProvider {...{ setComponentHeightById, getComponentHeightById }}>
+      <ComponentsMapProvider
+        {...{ setComponentHeightById, getComponentHeightById }}
+      >
         <Component {...props} />
       </ComponentsMapProvider>
     );

package/Decorators/RiverResolver/index.tsx

@@ -1,9 +1,5 @@
 import * as React from "react";
 
-import type {
-  ZappComponent,
-  ZappRivers,
-} from "@applicaster/zapp-react-native-flow-types";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";

package/Decorators/index.tsx

@@ -1,9 +1,5 @@
 import { zappPipesDataConnector } from "./ZappPipesDataConnector";
 import * as R from "ramda";
-import type {
-  ZappComponent,
-  ZappDecorator,
-} from "@applicaster/zapp-react-native-flow-types";
 
 import { withNavigator } from "./Navigator";
 

package/events/index.ts

@@ -1,4 +1,5 @@
 export enum QBUIComponentEvents {
   toggleGradient = "toggleGradient",
   topMenuBarTV_onFocus = "topMenuBarTV_onFocus",
+  navigatorReplaceItem = "navigatorReplaceItem",
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.11",
+  "version": "12.0.0-rc.110",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,16 +29,15 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@applicaster/zapp-react-native-flow-types": "1.5.0",
     "@types/react": "17.0.2",
     "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.11",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.11",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.11",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.11",
+    "@applicaster/applicaster-types": "12.0.0-rc.110",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.110",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.110",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.110",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Layout/TV/TransitionOverlay.tsx

@@ -1,64 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
-import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
-import { useScreenConfiguration } from "../../River/useScreenConfiguration";
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
-
-export const TransitionOverlay = () => {
-  const screen = useCurrentScreenData();
-
-  const { backgroundColor: screenBackgroundColor } = useScreenConfiguration(
-    screen?.id
-  );
-
-  const theme = useTheme();
-
-  const themeBackgroundColor = React.useMemo(
-    () => theme.app_background_color,
-    [theme.app_background_color]
-  );
-
-  const backgroundColor = ifEmptyUseFallback(
-    screenBackgroundColor,
-    themeBackgroundColor
-  );
-
-  const {
-    appState: { isTransitioning },
-  } = usePickFromState(["appState"]);
-
-  if (!isWeb() || !isTransitioning) {
-    return null;
-  }
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
-      <Spinner size={"large"} />
-    </View>
-  );
-};

package/Components/VideoModal/hooks/usePosition.ts

@@ -1,50 +0,0 @@
-import {
-  useNavigation,
-  useNavigationType,
-  MenuTypes,
-  useGetBottomTabBarHeight,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
-
-import { useConfiguration } from "../utils";
-
-type Option<T> = T | undefined;
-
-type Return = {
-  top: Option<number>;
-  height: Option<number>;
-  bottom: Option<number>;
-};
-
-export const usePosition = (): Return => {
-  const { minimised_height: minimisedHeight } = useConfiguration();
-  const insets = useSafeAreaInsets();
-  const bottomTabBarHeight = useGetBottomTabBarHeight();
-
-  const {
-    videoModalState: { mode },
-    currentRoute,
-    screenData,
-  } = useNavigation();
-
-  const docked = mode === "MINIMIZED";
-
-  const navType = useNavigationType();
-  const isBottomBarNavigation = navType === MenuTypes.bottomTabBar;
-
-  const minimisedMarginBottom =
-    isMenuVisible(currentRoute, screenData) && isBottomBarNavigation
-      ? bottomTabBarHeight
-      : insets.bottom;
-
-  if (docked) {
-    return {
-      top: undefined,
-      height: minimisedHeight,
-      bottom: minimisedMarginBottom,
-    };
-  }
-
-  return { top: 0, height: undefined, bottom: 0 };
-};