@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4400210593 → 12.0.0-alpha.4462655310

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -7,50 +7,28 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
+  borderPaddingTop: number;
+  borderPaddingRight: number;
+  borderPaddingBottom: number;
+  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const MARGINS = [
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-] as const;
-
-const PADDINGS = [
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-] as const;
-
-const isPercentageValue = (value: number | string) => {
-  if (typeof value === "string" && value.endsWith("%")) {
-    return true;
-  }
-
-  return false;
-};
-
-const calculateContainerSpacing = ({
-  spacingKey,
-  style,
-  additionalSpacing,
-}: {
-  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
-  style: ImageStyle | ViewStyle;
-  additionalSpacing: number;
-}) => {
-  return {
-    [spacingKey]:
-      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
-  };
-};
-
-const getContainerBorderWidth = (
-  borderPosition: BorderPosition,
-  borderWidth
-) => {
+const COLOR_TRANSPARENT = "transparent";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
+});
+
+const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -63,104 +41,102 @@ const getContainerBorderWidth = (
   }
 };
 
-const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
-  switch (borderPosition) {
-    case "inside":
-      return borderWidth;
-    case "center":
-      return borderWidth / 2;
-    case "outside":
-      return 0;
-    default:
-      return 0;
-  }
-};
-
-const InsideBorder = ({
+const Border = ({
   style,
+  padding,
   borderPosition,
 }: {
   style: ViewStyle;
+  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (borderPosition === "outside") {
+  if (!borderPosition) {
     return null;
   }
 
-  const insideBorderWidth =
-    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
+  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
+  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
+  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
+  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
+
+  const borderRadiusStyle = initialBorderRadius
+    ? {
+        borderTopLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingLeft),
+        borderTopRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingRight),
+        borderBottomLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingLeft),
+        borderBottomRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingRight),
+      }
+    : {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      };
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
-        borderWidth: insideBorderWidth,
+        ...styles.border,
+        right: -containerPadding - paddingRight,
+        bottom: -containerPadding - paddingBottom,
+        left: -containerPadding - paddingLeft,
+        top: -containerPadding - paddingTop,
+        borderWidth,
         borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
+        ...borderRadiusStyle,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { style, children } = props;
-  // Return border position prop after re-implementing
-  const borderPosition = "outside";
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const spacing = getContainerPadding(borderPosition, borderWidth);
+  const {
+    borderPosition,
+    borderPaddingTop,
+    borderPaddingRight,
+    borderPaddingBottom,
+    borderPaddingLeft,
+    style,
+    children,
+  } = props;
 
   const borderStyleForMissingBorder =
     style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
 
-  const updatedMargins = MARGINS.reduce((acc, margin) => {
-    const marginValue = calculateContainerSpacing({
-      spacingKey: margin,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...marginValue };
-  }, {});
-
-  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
-    const paddingValue = calculateContainerSpacing({
-      spacingKey: padding,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...paddingValue };
-  }, {});
-
-  const updatedWidth = style.width
-    ? isPercentageValue(style.width)
-      ? style.width
-      : toNumberWithDefaultZero(style.width) - spacing * 2
-    : undefined;
-
-  const updatedHeight = style.height
-    ? isPercentageValue(style.height)
-      ? style.height
-      : toNumberWithDefaultZero(style.height) - spacing * 2
-    : undefined;
-
-  const containerStyle = {
-    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
-    padding: spacing,
-    ...updatedMargins,
-    ...updatedPaddings,
-    width: updatedWidth,
-    height: updatedHeight,
-  };
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
 
   return (
-    <View {...props} style={[style, containerStyle]}>
+    <View
+      {...props}
+      style={[style, styles.container, borderStyleForMissingBorder]}
+    >
+      <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
-      <InsideBorder
-        style={{ ...style, ...borderStyleForMissingBorder }}
-        borderPosition={borderPosition}
-      />
     </View>
   );
 };

package/Components/MasterCell/DefaultComponents/DynamicBadge.tsx

@@ -4,6 +4,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 
 type DynamicBadgeProps = {
   cellUUID?: string;
+  uri?: string;
 };
 
 const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
@@ -12,11 +13,12 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
   // TODO: Initial value should depends on player state (playing or not)
   const [showImage, setShowImage] = React.useState(true);
   const player = usePlayer(playerId);
+  const uri = props?.uri;
 
   React.useEffect(() => {
     if (playerId && player) {
       return player.addListener({
-        id: "dynamic-badges",
+        id: `dynamic-badges-${uri}`,
         listener: {
           onPlayerClose: () => {
             setShowImage(true);
@@ -35,7 +37,7 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
     } else {
       setShowImage(true);
     }
-  }, [player]);
+  }, [player, uri]);
 
   if (!showImage) {
     return null;

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

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/ImageContainer/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   enable_video_preview: boolean;
@@ -9,7 +10,10 @@ type Props = {
 };
 
 export const ImageContainer = (props: Props) => {
-  const Component = isVideoPreviewEnabled(props) ? LiveImage : PureImage;
+  const isActive = useIsScreenActive();
+
+  const Component =
+    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Text } from "react-native";
 import { omit } from "ramda";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
   textTransform,
   dateFormat,
@@ -9,6 +8,9 @@ import {
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
 import { withScaledLineHeight } from "./utils";
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   style: any;
@@ -32,14 +34,24 @@ const _Text = ({
   ...otherProps
 }: Props) => {
   const _label = useTextLabel({ label, entry });
+  const isMeasurement = React.useContext(MeasurementPortalContext);
 
   if (isNilOrEmpty(_label)) {
     return null;
   }
 
+  // set maximum possible height for the text in case of measurement
+  const height =
+    isMeasurement && otherProps.numberOfLines && style.lineHeight
+      ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
+      : undefined;
+
   return (
     <Text
-      style={withScaledLineHeight(withFocusedStyles({ style, otherProps }))}
+      style={[
+        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
+        { height },
+      ]}
       {...withoutLabel(otherProps)}
     >
       {dateTransformEnabled

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,11 +1,23 @@
 import React from "react";
-import { Text } from "react-native";
+import RN from "react-native";
 import { Provider } from "react-redux";
 import TestRenderer from "react-test-renderer";
-import configureStore from "redux-mock-store";
-import CustomText from "../Text";
+import configureStoreFn from "redux-mock-store";
 
-const mockStore = configureStore();
+const mockUseIsRTL = jest.fn(() => true);
+const mockGetIsRTL = jest.fn(() => true);
+const mockUseLocalizedStrings = jest.fn(() => ({}));
+const mockGetUILanguage = jest.fn(() => "he-HE");
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+  getIsRTL: mockGetIsRTL,
+  useLocalizedStrings: mockUseLocalizedStrings,
+  getUILanguage: mockGetUILanguage,
+}));
+
+const CustomText = require("../Text").default;
+const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -22,7 +34,7 @@ const getRenderedText = (label: string, store: any) => {
     </Provider>
   );
 
-  return testRenderer.root.findByType(Text).props.children;
+  return testRenderer.root.findByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -34,7 +46,7 @@ describe("RTL app: Hebrew text contains english word", () => {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
-      countryCode: "HE",
+      countryCode: "IL",
     },
   });
 
@@ -47,18 +59,22 @@ describe("RTL app: Hebrew text contains english word", () => {
 
   it("Hebrew text contains not first english word", () => {
     const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
-
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
     const renderedText = getRenderedText(textWithoutEnglishWord, store);
-
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
 
 describe("LTR app: English text", () => {
+  beforeAll(() => {
+    mockUseIsRTL.mockReturnValue(false);
+    mockGetIsRTL.mockReturnValue(false);
+    mockGetUILanguage.mockReturnValue("en-US");
+  });
+
   const englishText = "Test sentence";
 
   const store = mockStore({
@@ -71,7 +87,6 @@ describe("LTR app: English text", () => {
 
   it("English text", () => {
     const renderedText = getRenderedText(englishText, store);
-
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -61,7 +61,10 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -29,7 +29,10 @@ export function ButtonContainerView({
     <View style={style}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         filteredChildren
       )}

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -51,9 +51,7 @@ export const CollapsibleTextContainer = ({
         func: (data) => {
           return getColorFromData({
             data,
-            getValue,
-            key: "background_color",
-            defaultColor: additionalStyles.backgroundColor,
+            valueFromLayout: additionalStyles.backgroundColor,
           });
         },
         propName: "backgroundColor",

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -53,7 +53,7 @@ export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
       measure(viewRef?.current, ({ width, height }) => {
         setDimensions({
           width,
-          height,
+          height: Math.ceil(height),
         });
       });
     })

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
+import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -9,6 +10,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
+import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -47,44 +49,29 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-const isColorOrEmpty = (value) =>
-  value === null ||
-  value === undefined ||
-  value === "" ||
-  value.startsWith("#") ||
-  value.startsWith("rgba") ||
-  value === "transparent";
-
 function resolveColorForProp(entry, style, colorProp) {
-  const colorValue = style[colorProp];
-
-  if (isColorOrEmpty(colorValue)) {
-    return style;
+  const colorFromProp = style[colorProp];
+  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
+    logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 
-  const pathParts = colorValue.split(".");
-  let nestedEntryValue = entry;
-
-  for (const part of pathParts) {
-    if (nestedEntryValue === null || typeof nestedEntryValue !== "object") {
-      logWarning(colorValue, style, entry, nestedEntryValue);
-
-      return style;
-    }
-
-    nestedEntryValue = nestedEntryValue[part];
-  }
+  const colorValue = getColorFromData({
+    data: entry,
+    valueFromLayout: colorFromProp,
+  });
 
-  if (nestedEntryValue === undefined) {
-    logWarning(colorValue, style, entry, nestedEntryValue);
+  if (!colorValue) {
+    logWarning(colorProp, style, entry, colorValue);
 
     return style;
   }
 
-  // After successful traversal, set the value.
-  style[colorProp] = nestedEntryValue;
-
-  return style;
+  return { ...style, [colorProp]: colorValue };
 }
 
 export function resolveColor(entry, style) {
@@ -125,13 +112,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
+
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
+
+    return false;
   });
 
   return filteredChildren;

package/Components/MeasurmentsPortal/BasicMeasurementsPortal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
+import { MeasurementPortalContext } from "./MeasurementsPortal";
 
 type Props = {
   Component: React.ElementType;
@@ -19,13 +20,16 @@ const _MeasurementsPortal = (
   { Component, onLayout, componentProps, containerStyle }: Props,
   ref
 ) => (
-  <View
-    onLayout={onLayout}
-    style={[styles.container, containerStyle]}
-    ref={ref}
-  >
-    <Component {...componentProps} />
-  </View>
+  // hack for cell to determine if cell is in measurement mode
+  <MeasurementPortalContext.Provider value={{}}>
+    <View
+      onLayout={onLayout}
+      style={[styles.container, containerStyle]}
+      ref={ref}
+    >
+      <Component {...componentProps} />
+    </View>
+  </MeasurementPortalContext.Provider>
 );
 
 export const MeasurementsPortal = React.forwardRef(_MeasurementsPortal);

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -35,7 +35,16 @@ const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
   );
 };
 
-const MeasurementPortalContext = React.createContext(null);
+type MeasurementPortalContextType = {
+  measureComponent?: (
+    comp: React.ElementType,
+    props: Record<any, any>
+  ) => Promise<any>;
+  measuringInProgress?: boolean;
+};
+
+const MeasurementPortalContext =
+  React.createContext<null | MeasurementPortalContextType>(null);
 
 const MeasurementsPortalContextProvider = ({ children }) => {
   const Component = React.useRef(View);