@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1803625751 → 16.0.0-alpha.1816065263

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -1,4 +1,7 @@
-import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { Asset } from "./Asset";
@@ -11,25 +14,29 @@ import {
   getTextLabelStyles,
 } from "./utils";
 import { ViewStyle } from "react-native";
+import { Spacer } from "./Spacer";
 
-const displayModeStyle = (value) => {
+const displayModeStyle = (value, isVertical: boolean) => {
   const mode = value("display_mode") || "dynamic";
 
   const defaultStyle = {
     flexShrink: 1,
   };
 
+  const width = toNumberWithDefault(140, value("width"));
+
   switch (mode) {
     case "fixed":
       return {
         ...defaultStyle,
-        width: toNumberWithDefault(140, value("width")),
-        maxWidth: toNumberWithDefault(140, value("width")),
+        width,
+        maxWidth: width,
       };
     case "fill":
       return {
         ...defaultStyle,
-        flex: 1,
+        width: isVertical ? "100%" : undefined,
+        flex: !isVertical ? 1 : undefined,
       };
     case "dynamic":
     default:
@@ -45,6 +52,7 @@ type Props = {
   stylePrefix: string;
   specificPrefix: string;
   spacingStyle: ViewStyle;
+  isVertical: boolean;
 };
 
 export const Button = ({
@@ -53,8 +61,9 @@ export const Button = ({
   stylePrefix,
   specificPrefix,
   spacingStyle,
+  isVertical,
 }: Props) => {
-  // Retrives values depending to the slot
+  // Retrieves values depending to the slot
   const getSlotBasedValue = (property: string) =>
     value(`${specificPrefix}_${property}`);
 
@@ -78,21 +87,27 @@ export const Button = ({
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = getSlotBasedValue("assign_action");
   const assetAlignment = getValue("asset_alignment") || "left";
+
+  const hasHorizontalAlignment = ["left", "right"].includes(assetAlignment);
+  const vGutter = toNumberWithDefaultZero(getValue("vertical_gutter"));
+  const hGutter = toNumberWithDefaultZero(getValue("horizontal_gutter"));
   const actionAssetFlavour = getValue("action_asset_flavour");
   const contentsAlignment = getValue("contents_alignment") || "center";
+  const displayMode = getValue("display_mode") || "dynamic";
 
   return {
     type: "MobileActionButton",
     style: {
-      flexDirection: getContentDirection(assetAlignment),
       // alignContent: "center", Why do we need this?
       ...getPressableStyles(getValue),
-      ...displayModeStyle(getValue),
+      ...displayModeStyle(getValue, isVertical),
       ...spacingStyle,
     },
     additionalProps: {
+      displayMode,
       alignment: {
         alignContent: "center",
+        flexDirection: getContentDirection(assetAlignment),
         alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
         justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
       },
@@ -115,7 +130,12 @@ export const Button = ({
             testID,
           })
         : null,
-
+      Spacer({
+        enabled: assetEnabled && labelEnabled,
+        style: hasHorizontalAlignment
+          ? { width: hGutter }
+          : { height: vGutter },
+      }),
       labelEnabled
         ? TextLabelsContainer({
             style: getTextLabelStyles(getValue),
@@ -128,7 +148,7 @@ export const Button = ({
               },
               transformText: getValue("text_transform") || "default",
               numberOfLines: getValue("number_of_lines") || 1,
-              ellipseMode: "tail",
+              ellipsizeMode: "tail",
             },
             actionIdentifier,
             testID,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Spacer.ts

@@ -1,16 +1,18 @@
 type Props = {
   enabled?: boolean;
+  style?: object;
 };
 
-export const Spacer = ({ enabled = false }: Props = {}) => {
+export const Spacer = ({
+  enabled = false,
+  style = { flex: 1 },
+}: Props = {}) => {
   if (!enabled) {
     return null;
   }
 
   return {
     type: "View",
-    style: {
-      flex: 1,
-    },
+    style,
   };
 };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/TextLabelsContainer.ts

@@ -29,7 +29,6 @@ export const TextLabelsContainer = ({
             context: actionIdentifier,
             name: "label_1",
           },
-          state: "default",
           mobileActionRole: "label",
           testID: testID ? `${testID}-label` : undefined,
           ...extraProps,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as RNText, TouchableOpacity, View } from "react-native";
+import { Pressable, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -8,6 +8,11 @@ import { elementMapper } from "../../../../elementMapper";
 import { defaultComponents } from "../../../index";
 import { MobileActionButtons } from "..";
 import { AssetComponent } from "../AssetComponent";
+import { usePressedState } from "../../../../hooks/usePressedState";
+
+jest.mock("../../../../hooks/usePressedState", () => ({
+  usePressedState: jest.fn(),
+}));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
   useActions: jest.fn(),
@@ -136,6 +141,7 @@ const baseNode = {
       borderColor: "rgba(4,4,4,1)",
     },
     testID: "mobile-action-button",
+    testOnly_pressed: false,
   },
   elements: [
     {
@@ -190,14 +196,20 @@ const baseNode = {
 describe("MobileActionButton", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    (usePressedState as jest.Mock).mockReturnValue(false);
   });
 
-  const renderNode = (node = baseNode) =>
-    render(
+  const renderNode = ({ node = baseNode, pressed = false } = {}) => {
+    if (pressed) {
+      node.props.testOnly_pressed = true;
+    }
+
+    return render(
       <React.Fragment>
         {elementMapper(defaultComponents)(node as never)}
       </React.Fragment>
     );
+  };
 
   it("renders nested image and text children through elementMapper", () => {
     mockUseActions.mockReturnValue(buildActionContext());
@@ -210,12 +222,13 @@ describe("MobileActionButton", () => {
   });
 
   it("applies focused styles when action entry state is active", () => {
+    (usePressedState as jest.Mock).mockReturnValue(true);
     mockUseActions.mockReturnValue(buildActionContext({ active: true }));
 
-    const { getByTestId, getByText } = renderNode();
+    const { getByTestId, getByText } = renderNode({ pressed: true });
 
     expect(
-      getByTestId("mobile-action-button").props.style.backgroundColor
+      getByTestId("mobile-action-button").props.style[2].backgroundColor
     ).toBe("rgba(3,3,3,1)");
 
     expect(getByText("Play").props.style).toEqual(
@@ -253,6 +266,8 @@ describe("MobileActionButton", () => {
       })
     );
 
+    node.props.testOnly_pressed = false;
+
     const { UNSAFE_getAllByType, UNSAFE_getByType, getByTestId, getByText } =
       render(
         <React.Fragment>
@@ -260,14 +275,14 @@ describe("MobileActionButton", () => {
         </React.Fragment>
       );
 
-    const pressable = UNSAFE_getByType(TouchableOpacity);
+    const pressable = UNSAFE_getByType(Pressable);
     const label = getByText("Play");
     const asset = getByTestId("mobile_action_button_1-asset");
 
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style).toMatchObject({
+    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,
@@ -278,15 +293,11 @@ describe("MobileActionButton", () => {
       height: 24,
     });
 
-    expect(label.props.style).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          color: "rgba(10,10,10,1)",
-          fontSize: 15,
-          lineHeight: 24,
-        }),
-      ])
-    );
+    expect(label.props.style[0]).toMatchObject({
+      color: "rgba(10,10,10,1)",
+      fontSize: 15,
+      lineHeight: 24,
+    });
 
     expect(UNSAFE_getAllByType(View).length).toBeGreaterThan(0);
     expect(UNSAFE_getAllByType(RNText).length).toBeGreaterThan(0);
@@ -324,7 +335,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalled();
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
@@ -339,7 +350,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour1);
+      renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_1" }),
@@ -356,7 +367,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour2);
+      renderNode({ node: nodeWithFlavour2 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_2" }),
@@ -369,7 +380,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: undefined })
       );
 
-      const { queryByTestId } = renderNode(nodeWithFlavour1);
+      const { queryByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(queryByTestId("mobile-action-button-asset")).toBeNull();
     });
@@ -385,7 +396,7 @@ describe("MobileActionButton", () => {
         })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
     });

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/index.test.ts

@@ -241,10 +241,21 @@ describe("MobileActionButtons", () => {
     expect(overImageResult?.additionalProps?.contentStyle).toMatchObject({
       flexDirection: "column",
       alignItems: "center",
-      marginTop: 5,
-      marginRight: 6,
-      marginBottom: 7,
-      marginLeft: 8,
+      paddingTop: 5,
+      paddingRight: 6,
+      paddingBottom: 7,
+      paddingLeft: 8,
+    });
+
+    expect(overImageResult?.style).toMatchObject({
+      alignItems: "flex-end",
+      bottom: 0,
+      justifyContent: "flex-start",
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      zIndex: 10,
     });
 
     expect(

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/index.ts

@@ -43,9 +43,24 @@ export const MobileActionButtons = ({
     return null;
   }
 
+  const {
+    container: { stacking, verticalGutter, horizontalGutter },
+  } = model;
+
+  const isVertical = stacking === "vertical";
+  const isOverImage = position === "over_image";
+  const gutter = isVertical ? verticalGutter : horizontalGutter;
+
+  const containerPaddings = {
+    paddingTop: model.container.margins.top,
+    paddingRight: model.container.margins.right,
+    paddingBottom: model.container.margins.bottom,
+    paddingLeft: model.container.margins.left,
+  };
+
   const style = {
     alignItems: "center",
-    ...(placement === "over_image"
+    ...(isOverImage
       ? {
           position: "absolute",
           zIndex: 10,
@@ -61,27 +76,17 @@ export const MobileActionButtons = ({
   };
 
   const contentStyle = {
-    flexDirection: model.container.stacking === "vertical" ? "column" : "row",
-    alignSelf:
-      placement !== "over_image" ? model.container.horizontalAlign : undefined,
+    ...containerPaddings,
+    flexDirection: isVertical ? "column" : "row",
+    width: isVertical ? "100%" : undefined,
+    alignSelf: !isOverImage ? model.container.horizontalAlign : undefined,
     alignItems: model.container.horizontalAlign,
-    marginTop: model.container.margins.top,
-    marginRight: model.container.margins.right,
-    marginBottom: model.container.margins.bottom,
-    marginLeft: model.container.margins.left,
   };
 
   const elements = compact(
     model.buttons.map(({ renderIndex, specificPrefix, stylePrefix }) => {
       const isNotLast = renderIndex < model.buttons.length - 1;
 
-      const {
-        container: { stacking, verticalGutter, horizontalGutter },
-      } = model;
-
-      const isVertical = stacking === "vertical";
-      const gutter = isVertical ? verticalGutter : horizontalGutter;
-
       const spacingStyle: ViewStyle = {
         [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
       };
@@ -92,6 +97,7 @@ export const MobileActionButtons = ({
         stylePrefix,
         specificPrefix,
         spacingStyle,
+        isVertical,
       });
 
       if (!button) return null;

package/Components/MasterCell/contexts/PressedStateContext.ts

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const PressedStateContext = React.createContext<boolean>(false);

package/Components/MasterCell/dataAdapter.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { functionForName } from "./MappingFunctions";
 import { resolveColor } from "./utils";
@@ -52,7 +53,8 @@ export function configInflater(
     additionalProps?: Record<string, any>;
     data?: Array<{ propName: string; func: Function; args: any[] }>;
     elements?: any[];
-  }
+  },
+  allowDynamicColorsOutsideExtensions: boolean
 ) {
   const props = data.reduce(
     (acc, curr) => {
@@ -68,13 +70,13 @@ export function configInflater(
 
   if (Array.isArray(elements)) {
     adjustedElements = elements.map((element) =>
-      configInflater(entry, element as any)
+      configInflater(entry, element as any, allowDynamicColorsOutsideExtensions)
     );
   }
 
   return {
     type,
-    style: resolveColor(entry, style),
+    style: resolveColor(entry, style, allowDynamicColorsOutsideExtensions),
     props,
     elements: adjustedElements,
   };
@@ -98,9 +100,17 @@ function resolveElementsNode(entry, state, elements) {
 }
 
 export function defaultDataAdapter(elements) {
-  return function elementsBuilder({ entry, state = "default" }) {
+  return function elementsBuilder({
+    entry,
+    state = "default",
+    allowDynamicColorsOutsideExtensions,
+  }) {
     return resolveElementsNode(entry, state, elements).map((element) =>
-      configInflater(entry, element)
+      configInflater(
+        entry,
+        element,
+        toBooleanWithDefaultFalse(allowDynamicColorsOutsideExtensions)
+      )
     );
   };
 }

package/Components/MasterCell/hooks/index.ts

@@ -1 +1,3 @@
 export { useAsyncRendering } from "./useAsyncRendering";
+
+export { usePressedState } from "./usePressedState";

package/Components/MasterCell/hooks/usePressedState.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { PressedStateContext } from "../contexts/PressedStateContext";
+
+export const usePressedState = () => React.useContext(PressedStateContext);

package/Components/MasterCell/index.tsx

@@ -2,7 +2,10 @@ import * as R from "ramda";
 import * as React from "react";
 import { v4 as uuid } from "uuid";
 
+import { isHorizontalList } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
@@ -34,8 +37,8 @@ type MasterCellBuilderOptions = {
   containerStyle: any;
   cellOptions?: {
     isRTL?: boolean;
-    generateId?: () => string;
     skipButtons?: boolean;
+    component?: ZappComponent;
   };
 };
 
@@ -46,7 +49,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { generateId = uuid, skipButtons = false } = cellOptions;
+  const { skipButtons = false, component } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -65,6 +68,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -85,14 +89,35 @@ export function masterCellBuilder({
         elementsBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
+          allowDynamicColorsOutsideExtensions:
+            theme?.allow_dynamic_colors_outside_extensions,
         }),
-      [state, item, entryIsSelected] // Assuming that item won't mutate
+      [
+        state,
+        item,
+        entryIsSelected,
+        theme?.allow_dynamic_colors_outside_extensions,
+      ] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);
 
-    const cellUUID = React.useMemo<string>(generateId, [
-      generateId,
+    const cellUUID = React.useMemo<string>(() => {
+      const isLiveImage = isVideoPreviewEnabled({
+        enable_video_preview: component?.rules?.enable_video_preview,
+        player_screen_id: component?.rules?.player_screen_id,
+      });
+
+      const isHL = isHorizontalList(component);
+
+      return isHL && isLiveImage
+        ? `${component?.id}-${component?.styles?.cell_plugin_configuration_id}`
+        : uuid();
+    }, [
+      component?.id,
+      component?.styles?.cell_plugin_configuration_id,
+      component?.rules?.enable_video_preview,
+      component?.rules?.player_screen_id,
       screenId,
       item?.id,
     ]);