@applicaster/zapp-react-native-ui-components 12.0.0-rc.31 → 12.0.0-rc.33

package/Components/Cell/Cell.tsx

@@ -202,7 +202,7 @@ export class CellComponent extends React.Component<Props> {
       groupId,
       isFocusable = true,
       skipFocusManagerRegistration,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -263,7 +263,7 @@ export class CellComponent extends React.Component<Props> {
                   item,
                   focused: this.isCellFocused(focused),
                   scrollTo: this.scrollToIndex(event),
-                  behavior
+                  behavior,
                 }}
               />
             );

package/Components/Cell/CellWithFocusable.tsx

@@ -35,18 +35,18 @@ const useCellFocusedState = (groupId: string, id: string) => {
 };
 
 type Props = {
-  item: ZappEntry,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  id: string,
-  groupId: string,
-  onFocus: Function,
-  index: number,
-  scrollTo: Function,
-  preferredFocus?: boolean,
-  skipFocusManagerRegistration?: boolean,
-  isFocusable?: boolean,
-  behavior: Behavior,
-  selected?: boolean,
+  item: ZappEntry;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  id: string;
+  groupId: string;
+  onFocus: Function;
+  index: number;
+  scrollTo: Function;
+  preferredFocus?: boolean;
+  skipFocusManagerRegistration?: boolean;
+  isFocusable?: boolean;
+  behavior: Behavior;
+  selected?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -62,11 +62,18 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected
+    selected,
   } = props;
 
   const isFocused = useCellFocusedState(groupId, id);
-  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused,
+    selected,
+  });
+
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling

package/Components/Cell/TvOSCellComponent.tsx

@@ -249,7 +249,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -310,7 +310,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  behavior
+                  behavior,
                 }}
               />
             );

package/Components/FocusableCell/index.tsx

@@ -3,12 +3,12 @@ import { Platform } from "react-native";
 import { useCellState } from "../MasterCell/utils";
 
 type Props = {
-  index: number,
-  item: ZappEntry,
-  focused: boolean,
-  scrollTo?: (index: number) => void,
-  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
-  behavior: Behavior
+  index: number;
+  item: ZappEntry;
+  focused: boolean;
+  scrollTo?: (index: number) => void;
+  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
+  behavior: Behavior;
 };
 
 const isAndroid = Platform.OS === "android";
@@ -20,7 +20,7 @@ export function FocusableCell(props: Props) {
     CellRenderer,
     focused,
     scrollTo = null,
-    behavior
+    behavior,
   } = props;
 
   const state = useCellState({ id: item.id, behavior, focused });

package/Components/HookRenderer/index.tsx

@@ -1,3 +1 @@
-import { HookRenderer as HookRendererComponent } from "./HookRenderer";
-
-export const HookRenderer = HookRendererComponent;
+export { HookRenderer } from "./HookRenderer";

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -12,19 +12,7 @@ jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
-    navigations: [
-      {
-        category: "menu",
-        navigation_type: "menu",
-        styles: {
-          hide_secondary_level_menu: false,
-        },
-      },
-    ],
-  })),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
 
 const Layout = require("..").default;
 

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -23,7 +23,11 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
-  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
+  const isSelected = React.useMemo(
+    () => cellState === "selected",
+    [item?.id, cellState]
+  );
+
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(

package/Components/MasterCell/utils/index.ts

@@ -285,8 +285,8 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
       }
     }
   }, [behavior]);
-  
-   useEffect(() => {
+
+  useEffect(() => {
     if (!behavior) {
       return;
     }

package/Components/Tabs/TV/styles.ts

@@ -78,7 +78,7 @@ export const getStyles = (config): Partial<TVTabsStyles> => {
         },
         tvos: {
           marginTop: -1,
-        }
+        },
       }),
     },
     tabsBackground: {

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -1,249 +1,297 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PlayerWrapper renders inline 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": "100%",
+          "backgroundColor": "transparent",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={false}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={false}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline and docked 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "additive",
-      "left": "off",
-      "right": "off",
-      "top": "off",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 50,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "additive",
+        "left": "off",
+        "right": "off",
+        "top": "off",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
+        },
+        Object {
+          "backgroundColor": "transparent",
         },
         Object {
-          "aspectRatio": undefined,
           "height": 50,
-          "width": "100%",
+          "width": 300,
         },
         Object {},
-        Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": undefined,
+            "height": 50,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "row",
-      },
-      Object {
-        "backgroundColor": "red",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "row",
         },
         Object {
-          "aspectRatio": 1.7777777777777777,
-          "height": undefined,
-          "width": 195,
+          "backgroundColor": "red",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    configuration={
-      Object {
-        "tablet_landscape_player_container_background_color": "red",
-        "tablet_landscape_sidebar_width": "35%",
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7777777777777777,
+            "height": undefined,
+            "width": 195,
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-    entry={
-      Object {
-        "id": "test",
+      testID="test-player-container"
+    />
+    <View
+      configuration={
+        Object {
+          "tablet_landscape_player_container_background_color": "red",
+          "tablet_landscape_sidebar_width": "35%",
+        }
       }
-    }
-    isTabletLandscape={true}
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+      entry={
+        Object {
+          "id": "test",
+        }
       }
-    }
-  />
-</RNCSafeAreaView>
+      isTabletLandscape={true}
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;
 
 exports[`PlayerWrapper renders properly 1`] = `
-<RNCSafeAreaView
-  edges={
-    Object {
-      "bottom": "off",
-      "left": "off",
-      "right": "off",
-      "top": "additive",
-    }
-  }
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
   style={
     Array [
       Object {
-        "flexDirection": "column",
-      },
-      Object {
-        "backgroundColor": "transparent",
-      },
-      Object {
-        "height": 800,
-        "width": 300,
+        "flex": 1,
       },
-      Object {},
+      undefined,
     ]
   }
 >
-  <View
+  <RNCSafeAreaView
+    edges={
+      Object {
+        "bottom": "off",
+        "left": "off",
+        "right": "off",
+        "top": "additive",
+      }
+    }
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "position": "relative",
-          "zIndex": 200,
+          "flexDirection": "column",
         },
         Object {
-          "aspectRatio": 1.7786666666666666,
-          "height": undefined,
-          "width": "100%",
+          "backgroundColor": "transparent",
+        },
+        Object {
+          "height": 800,
+          "width": 300,
         },
-        Object {},
         Object {},
       ]
     }
-    testID="test-player-container"
-  />
-  <View
-    style={
-      Object {
-        "flex": 1,
-        "paddingTop": 20,
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+            "position": "relative",
+            "zIndex": 200,
+          },
+          Object {
+            "aspectRatio": 1.7786666666666666,
+            "height": undefined,
+            "width": "100%",
+          },
+          Object {},
+          Object {},
+        ]
       }
-    }
-  />
-</RNCSafeAreaView>
+      testID="test-player-container"
+    />
+    <View
+      style={
+        Object {
+          "flex": 1,
+          "paddingTop": 20,
+        }
+      }
+    />
+  </RNCSafeAreaView>
+</RNCSafeAreaProvider>
 `;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.31",
+  "version": "12.0.0-rc.33",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-rc.31",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.31",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.31",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.31",
+    "@applicaster/applicaster-types": "12.0.0-rc.33",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.33",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.33",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.33",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",