@applicaster/zapp-react-native-ui-components 12.0.0-rc.99 → 13.0.0-alpha.2330880002

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/Contexts/CachedDimensionsContext/index.ts

@@ -1,5 +1,6 @@
 import { create, useStore } from "zustand";
 import { produce } from "immer";
+import { useCallback, useMemo } from "react";
 
 type Dimensions = {
   width: Option<number>;
@@ -31,16 +32,19 @@ export const useCachedDimensions = (id: string) => {
     dimensionsStore
   ) as DimensionsState;
 
-  const getCachedDimensions = () => {
+  const getCachedDimensions = useCallback(() => {
     return dimensions[id] || initialDimensions();
-  };
+  }, [dimensions?.[id], id]);
 
-  const handleSetCachedDimensions = (newDimensions) => {
+  const handleSetCachedDimensions = useCallback((newDimensions) => {
     setCachedDimensions(id, newDimensions);
-  };
-
-  return {
-    getCachedDimensions,
-    setCachedDimensions: handleSetCachedDimensions,
-  };
+  }, []);
+
+  return useMemo(
+    () => ({
+      getCachedDimensions,
+      setCachedDimensions: handleSetCachedDimensions,
+    }),
+    [getCachedDimensions, handleSetCachedDimensions]
+  );
 };

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/Contexts/ScreenContext/index.tsx

@@ -177,7 +177,12 @@ export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
     return (
       <ScreenContext.Consumer>
-        {(value) => <Component {...props} screenContext={value} />}
+        {useCallback(
+          (value) => (
+            <Component {...props} screenContext={value} />
+          ),
+          [Component, props]
+        )}
       </ScreenContext.Consumer>
     );
   };

package/README.md

@@ -78,17 +78,6 @@ export default MyAwesomeComponent;
 export { MyAwesomeComponent } from "./MyAwesomeComponent";
 ```
 
-We provide flow types for component props - please use it to make sure your component will be compliant
-
-```javascript
-import * as React from "react";
-import type { ZappComponentProps } from "../../flow-types"; // in the root of the project
-
-export class MyComponent extends React.Component<ZappComponentProps> {
-  /* ... */
-}
-```
-
 ## Connecting my component to Zapp Pipes
 
 Zapp App components rely on [Zapp-Pipes](https://github.com/applicaster/zapp-pipes) to load data.
@@ -100,10 +89,9 @@ In order to connect your component to ZappPipes, you simply need to use the `Zap
 import * as React from "react";
 import { View, Text } from "react-native";
 import { zappPipesDataConnector } from "../ZappPipesDataConnector";
-import type { ZappComponentProps } from "../../flow-types";
 
 @zappPipesDataConnector
-export class MyComponent extends React.Component<ZappComponentProps> {
+export class MyComponent extends React.Component {
   renderComponent = (data) => {
     return (
       <View>

package/const.ts

@@ -1,3 +1,5 @@
+import { ViewStyle } from "react-native";
+
 export const tvPluginsWithCellRenderer = [
   "group-qb",
   "gallery-qb",
@@ -5,3 +7,7 @@ export const tvPluginsWithCellRenderer = [
   "hero-qb",
   "list-qb",
 ];
+
+// Can't be used in StyleSheet.create, need to be inline/defined as a constant
+// https://github.com/necolas/react-native-web/issues/1427
+export const flatListOverflowStyle: ViewStyle = { overflow: "visible" };

package/index.js

@@ -1,3 +1,6 @@
 import * as QuickBrickComponents from "./Components";
+import { flatListOverflowStyle } from "./const";
+
+export { flatListOverflowStyle };
 
 export default QuickBrickComponents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.99",
+  "version": "13.0.0-alpha.2330880002",
   "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.99",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.99",
+    "@applicaster/applicaster-types": "13.0.0-alpha.2330880002",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.2330880002",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.2330880002",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2330880002",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Components/Screen/TV/hooks/useRestoreFocus.ts

@@ -1,22 +0,0 @@
-import * as React from "react";
-import { isNil } from "ramda";
-import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
-
-export const useRestoreFocus = (): void => {
-  const isScreenActive = useIsScreenActive();
-  const previousIsScreenActive = usePrevious(isScreenActive);
-
-  React.useEffect(() => {
-    if (isNil(previousIsScreenActive)) {
-      // it's initial mounting of the screen, do nothing here
-      return;
-    }
-
-    if (!previousIsScreenActive && isScreenActive) {
-      // restore focus when we go back from next screen
-      focusManager.setInitialFocus();
-    }
-  }, [previousIsScreenActive, isScreenActive]);
-};