@applicaster/zapp-react-native-ui-components 13.0.0-rc.81 → 13.0.0-rc.83

package/Components/Cell/Cell.tsx

@@ -12,6 +12,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
+import { styles } from "./styles";
 
 type Props = {
   item: ZappEntry;
@@ -68,17 +69,6 @@ type State = {
   hasFocusableInside: boolean;
 };
 
-const baseCellStyles = {
-  height: "100%",
-  display: "flex",
-  flex: 1,
-} as const;
-
-const touchableStyles = {
-  flex: 1,
-  height: "100%",
-} as const;
-
 export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
@@ -252,7 +242,7 @@ export class CellComponent extends React.Component<Props, State> {
       <View
         testID={`${component?.id}-${id}`}
         accessible={false}
-        style={touchableStyles}
+        style={styles.touchableCell}
       >
         <Focusable
           id={focusableId}
@@ -264,7 +254,7 @@ export class CellComponent extends React.Component<Props, State> {
           hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
           preferredFocus={preferredFocus}
           offsetUpdater={offsetUpdater}
-          style={baseCellStyles}
+          style={styles.baseCell}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
         >

package/Components/Cell/CellWithFocusable.tsx

@@ -5,6 +5,8 @@ import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/
 
 import { useCellState } from "../MasterCell/utils";
 import { FocusableGroup } from "../FocusableGroup";
+import { CellWrapper } from "./CellWrapper";
+import { styles } from "./styles";
 
 type Props = {
   item: ZappEntry;
@@ -88,19 +90,21 @@ export function CellWithFocusable(props: Props) {
       onBlur={onGroupBlur}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
     >
-      <CellRenderer
-        testID={"cell-with-focusable-cell-renderer"}
-        item={item}
-        groupId={`focusable-cell-wrapper-${id}`}
-        onToggleFocus={handleToggleFocus}
-        state={state}
-        prefixId={id}
-        focusedButtonId={focusedButtonId}
-        preferredFocus={true}
-        skipFocusManagerRegistration={skipFocusManagerRegistration}
-        isFocusable={isFocusable}
-        focused={focused}
-      />
+      <CellWrapper style={styles.cellWrapper}>
+        <CellRenderer
+          testID={"cell-with-focusable-cell-renderer"}
+          item={item}
+          groupId={`focusable-cell-wrapper-${id}`}
+          onToggleFocus={handleToggleFocus}
+          state={state}
+          prefixId={id}
+          focusedButtonId={focusedButtonId}
+          preferredFocus={true}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
+          isFocusable={isFocusable}
+          focused={focused}
+        />
+      </CellWrapper>
     </FocusableGroup>
   );
 }

package/Components/Cell/CellWrapper.ts

@@ -0,0 +1,5 @@
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+import React from "react";
+import { View } from "react-native";
+
+export const CellWrapper = isTvOSPlatform() ? View : React.Fragment;

package/Components/Cell/styles.ts

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+
+export const styles = StyleSheet.create({
+  cellWrapper: {
+    flex: 0,
+    height: "100%",
+  },
+  baseCell: {
+    height: "100%",
+    display: "flex",
+    flex: 1,
+  },
+  touchableCell: {
+    flex: 1,
+    height: "100%",
+  },
+});

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import * as R from "ramda";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
 
@@ -17,7 +17,7 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(RnImage, R.equals);
+const MemoizedImage = React.memo(RnImage, equals);
 
 function Image({
   style,
@@ -44,11 +44,12 @@ function Image({
 
   return (
     <MemoizedImage
+      key={_source?.uri || "no-image"}
       style={style as ImageStyle}
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...R.omit(["source"], otherProps)}
+      {...omit(["source"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -7,9 +7,13 @@ import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
 
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
+
 export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -34,7 +38,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -56,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -72,8 +76,8 @@ export const useImageSourceWithDefault = ({
   placeholderImage,
   otherProps,
 }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 

package/package.json

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

package/Components/Cell/CellStyles/FallbackCellStyle/index.js

@@ -1,157 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 384,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 384,
-  height: 216,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 336,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const subtitleContainerStyles = {
-  width: 336,
-  height: 88,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const subtitleStyles = (styles) => ({
-  fontSize: 24,
-  fontWeight: "normal",
-  opacity: 0.8,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontStyle: "normal",
-});
-
-const focusedSubtitleStyles = (styles) => ({
-  ...subtitleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-      {
-        type: View,
-        style: subtitleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedSubtitleStyles(styles)
-                : subtitleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["summary"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 3,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const fallbackCellStyle = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-        selected: viewTree("selected", styles),
-        focused_selected: viewTree("focused_selected", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/Hero/index.js

@@ -1,111 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 1280,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 1280,
-  height: 352,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 1184,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const hero = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-      },
-    },
-  },
-});

package/Components/Cell/CellStyles/ScreenSelector/index.js

@@ -1,68 +0,0 @@
-const viewTree = (state) => [
-  {
-    type: "View",
-    style: {
-      flex: 1,
-      // aspectRatio: 1.0487804878,
-      paddingTop: 14,
-      paddingBottom: 14,
-      paddingRight: 30,
-    },
-    elements: [
-      {
-        type: "View",
-
-        elements: [
-          {
-            type: "Text",
-
-            style: {
-              // paddingHorizontal: "15%",
-              paddingTop: "2%",
-              paddingBottom: "2%",
-              fontSize: 26,
-              lineHeight: 32,
-              color:
-                state === "focused" || state === "selected"
-                  ? "rgba(239,239,239,1.0)"
-                  : "rgba(239,239,239,0.61)",
-              fontWeight: "700",
-            },
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-          {
-            type: "View",
-            style: {
-              height: 10,
-              alignItems: "center",
-              justifyContent: "center",
-              borderColor: state === "focused" ? "#FC461B" : "transparent",
-              borderBottomWidth: 6,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const screenSelector = {
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default"),
-        focused: viewTree("focused"),
-        selected: viewTree("selected"),
-      },
-    },
-  },
-};

package/Components/Cell/CellStyles/cellStylesResolver.ts

@@ -1,19 +0,0 @@
-import * as R from "ramda";
-
-import { cellStyles } from "./index";
-
-type Props = {
-  cellStyle: string | null | undefined;
-  componentType: string | null | undefined;
-};
-
-export function cellStylesResolver({ cellStyle, componentType }: Props) {
-  const componentCellStyles =
-    R.prop(componentType, cellStyles) || cellStyles.default;
-
-  const result =
-    R.prop(cellStyle || "fallbackCellStyle", componentCellStyles) ||
-    componentCellStyles.fallbackCellStyle;
-
-  return result;
-}

package/Components/Cell/CellStyles/colors.js

@@ -1,40 +0,0 @@
-import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
-import * as R from "ramda";
-
-export const ACTIVE_COLOR = "ACTIVE_COLOR";
-
-export const BACKGROUND_COLOR = "BACKGROUND_COLOR";
-
-export const MAIN_TEXT_COLOR = "MAIN_TEXT_COLOR";
-
-export const FOCUSED_TEXT_COLOR = "FOCUSED_TEXT_COLOR";
-
-const colorKeyPath = (keyName) => ["tv", keyName, "color"];
-
-const COLORS = {
-  [ACTIVE_COLOR]: {
-    path: colorKeyPath("active"),
-    default: "#FC461B",
-  },
-  [BACKGROUND_COLOR]: {
-    path: colorKeyPath("background"),
-    default: "#2F2F2F",
-  },
-  [MAIN_TEXT_COLOR]: {
-    path: colorKeyPath("main_text"),
-    default: "#EFEFEF",
-  },
-  [FOCUSED_TEXT_COLOR]: {
-    path: colorKeyPath("focused_text_color"),
-    default: "#FFFFFF",
-  },
-};
-
-export const getColor = (name, styles) => {
-  const colorKeyPath = R.path([name, "path"], COLORS);
-
-  return (
-    fixColorHexCode(R.path(colorKeyPath, styles)) ||
-    R.path([name, "default"], COLORS)
-  );
-};

package/Components/Cell/CellStyles/index.js

@@ -1,15 +0,0 @@
-import { fallbackCellStyle } from "./FallbackCellStyle";
-import { hero } from "./Hero";
-import { screenSelector } from "./ScreenSelector";
-
-export const cellStyles = {
-  default: {
-    default: fallbackCellStyle,
-  },
-  hero: {
-    default: hero,
-  },
-  screenSelector: {
-    default: screenSelector,
-  },
-};