@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.121

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

@@ -6,6 +6,7 @@ import {
 } from "./utils";
 import { Button } from "./Button";
 import { buildActionButtonsModel } from "../../ActionButtonsCore/model";
+import { ViewStyle } from "react-native";
 
 const CONTAINER_PREFIX = "mobile_buttons_container";
 const BUTTON_PREFIX = "mobile_button";
@@ -42,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,
@@ -60,28 +76,18 @@ 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 = {
+      const spacingStyle: ViewStyle = {
         [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
       };
 
@@ -91,6 +97,7 @@ export const MobileActionButtons = ({
         stylePrefix,
         specificPrefix,
         spacingStyle,
+        isVertical,
       });
 
       if (!button) return null;

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/utils/__tests__/insertButtons.test.ts

@@ -5,14 +5,19 @@ import {
 } from "..";
 
 describe("mobile action insertion helpers", () => {
-  const labels = [{ name: "text_label_1" }, { name: "text_label_2" }];
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "text_label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "text_label_2" } },
+  ];
+
+  const labels = slots.map((slot) => slot.element);
   const buttons = { type: "View", name: "buttons" };
 
   it("inserts label buttons below target label", () => {
     const result = insertButtonsBetweenLabels(
       { mobile_buttons_container_position: "below_text_label_1" },
       buttons,
-      labels
+      slots
     );
 
     expect(result).toEqual([labels[0], buttons, labels[1]]);
@@ -22,7 +27,7 @@ describe("mobile action insertion helpers", () => {
     const result = insertButtonsBetweenLabels(
       { mobile_buttons_container_position: "unknown" },
       buttons,
-      labels
+      slots
     );
 
     expect(result).toEqual([labels[0], labels[1]]);

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

@@ -8,7 +8,7 @@ import { Platform } from "react-native";
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels = []
+  slots = [] // { name, element } per canonical text label slot
 ) =>
   insertBetweenLabels(
     {
@@ -19,7 +19,7 @@ export const insertButtonsBetweenLabels = (
       appendWhenMissing: false,
     },
     buttons,
-    labels // "text_label_1", "text_label_2", "text_label_3", "text_label_4"
+    slots
   );
 
 export const insertButtonsBetweenLabelContainers = (

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/insertButtonsBetweenLabels.test.ts

@@ -3,18 +3,20 @@ import { insertButtonsBetweenLabels } from "..";
 describe("insertButtonsBetweenLabels - depthlevel 1", () => {
   const buttons = "buttons";
 
-  const labels = [
-    { name: "label_1" },
-    { name: "label_2" },
-    { name: "label_3" },
+  const slots = [
+    { name: "label_1", element: { id: "label_1" } },
+    { name: "label_2", element: { id: "label_2" } },
+    { name: "label_3", element: { id: "label_3" } },
   ];
 
+  const labels = slots.map((slot) => slot.element);
+
   it("put buttons on top", () => {
     const configuration = {
       tv_buttons_container_position: "on_top",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([buttons, ...labels]);
   });
@@ -24,7 +26,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "unknown_position",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([...labels, buttons]);
   });
@@ -34,7 +36,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_1",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
   });
@@ -44,7 +46,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_2",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
@@ -54,22 +56,52 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_3",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("put above label_2", () => {
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
+
+    expect(result).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "label_1", element: { id: "label_1" } },
+      { name: "label_2", element: null },
+      { name: "label_3", element: { id: "label_3" } },
+    ];
+
+    const configuration = {
+      tv_buttons_container_position: "above_label_2",
+    };
+
+    const result = insertButtonsBetweenLabels(
+      configuration,
+      buttons,
+      slotsWithEmpty
+    );
+
+    expect(result).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+  });
+
+  it("appends buttons when the target is unknown", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, buttons, labels);
+    const result = insertButtonsBetweenLabels(configuration, buttons, slots);
 
     expect(result).toEqual([labels[0], labels[1], labels[2], buttons]);
   });
 
-  it("put underneath all", () => {
+  it("appends buttons when there are no slots", () => {
     const configuration = {
       tv_buttons_container_position: "label_X",
     };
@@ -88,7 +120,7 @@ describe("insertButtonsBetweenLabels - depthlevel 1", () => {
       tv_buttons_container_position: "label_X",
     };
 
-    const result = insertButtonsBetweenLabels(configuration, null, labels);
+    const result = insertButtonsBetweenLabels(configuration, null, slots);
 
     expect(result).toEqual(labels);
   });

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -34,7 +34,7 @@ export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels = []
+  slots = [] // { name, element } per canonical text label slot
 ) =>
   insertBetweenLabels(
     {
@@ -45,7 +45,7 @@ export const insertButtonsBetweenLabels = (
       appendWhenMissing: true,
     },
     buttons,
-    labels
+    slots
   );
 
 export const insertButtonsBetweenLabelContainers = (

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("aligns the label to the text alignment instead of stretching the cell", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("flex-start");
+  });
+});

package/Components/MasterCell/__tests__/masterCell.test.js

@@ -76,6 +76,66 @@ describe("masterCellBuilder", () => {
     });
   });
 
+  describe("cellOptions.interactive", () => {
+    // renders a single View tagged with the state the cell was built with
+    const dataAdapter =
+      () =>
+      ({ state }) => [
+        { type: "View", style: {}, props: { testID: `state-${state}` } },
+      ];
+
+    // Only the root View gets this testID: cell elements pass their own testID, which overrides it
+    const ROOT_TEST_ID = "master-cell-root";
+
+    // forwardRef: MasterCell attaches a ref to its root View
+    const TestView = React.forwardRef((props, ref) => (
+      <View testID={ROOT_TEST_ID} {...props} ref={ref} />
+    ));
+
+    const renderCell = (cellOptions, state) => {
+      const MasterCell = masterCellBuilder({
+        cellConfiguration: singleView,
+        dataAdapter,
+        components: { View: TestView },
+        cellOptions,
+      });
+
+      return renderWithProviders(<MasterCell item={entry} state={state} />);
+    };
+
+    const getRoot = (wrapper) => wrapper.getByTestId(ROOT_TEST_ID);
+
+    it("keeps focused state and default root props when omitted", () => {
+      const wrapper = renderCell(undefined, "focused");
+      const root = getRoot(wrapper);
+
+      expect(wrapper.getByTestId("state-focused")).toBeDefined();
+      expect(root.props.onStartShouldSetResponder).toBeUndefined();
+      expect(root.props.collapsable).toBeUndefined();
+    });
+
+    it("claims body touches on a non-collapsable root when false", () => {
+      const wrapper = renderCell({ interactive: false }, "default");
+      const root = getRoot(wrapper);
+
+      expect(root.props.onStartShouldSetResponder()).toBe(true);
+      expect(root.props.collapsable).toBe(false);
+    });
+
+    it("renders focused as default when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused");
+
+      expect(wrapper.getByTestId("state-default")).toBeDefined();
+      expect(wrapper.queryByTestId("state-focused")).toBeNull();
+    });
+
+    it("renders focused_selected as selected when false", () => {
+      const wrapper = renderCell({ interactive: false }, "focused_selected");
+
+      expect(wrapper.getByTestId("state-selected")).toBeDefined();
+    });
+  });
+
   describe.skip("when using custom default components", () => {
     // the collapsable prop is added here to easily check from the snapshot that the mock
     // component is being used instead of the default one

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,12 +2,19 @@ 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";
 import { elementMapper, mapElementWithKey } from "./elementMapper";
-import { getEntryState, hasFocusableInsideBuilder } from "./utils";
+import {
+  getEntryState,
+  hasFocusableInsideBuilder,
+  withoutFocusedState,
+} from "./utils";
 
 type Props = {
   item: ZappEntry;
@@ -16,6 +23,16 @@ type Props = {
 
 const defaultContainerStyle = { flex: 1 };
 
+/**
+ * Root props of a non-interactive cell: the root view claims touches on the cell body,
+ * so the host list's touchable never fires (buttons, being deeper, still receive theirs).
+ * `collapsable: false` keeps Android / Fabric from flattening the view away.
+ */
+const nonInteractiveRootProps = {
+  onStartShouldSetResponder: () => true,
+  collapsable: false,
+};
+
 /**
  * Constructs a MasterCell with the provided options
  * @param {Object} options
@@ -24,6 +41,8 @@ const defaultContainerStyle = { flex: 1 };
  * @param {Function} options.dataAdapter optional dataAdapter to use instead of the default one.
  * See dataAdapter.js for more info
  * @param {containerStyles} options.containerStyle style to apply at the top level of the master cell
+ * @param {Object} options.cellOptions optional cell options. `interactive: false` makes the cell body
+ * ignore taps and render without focused / pressed states (inner buttons keep working). Defaults to `true`.
  * @returns {Function} Functional React Component to render the masterCell with the provided options
  */
 
@@ -34,8 +53,9 @@ type MasterCellBuilderOptions = {
   containerStyle: any;
   cellOptions?: {
     isRTL?: boolean;
-    generateId?: () => string;
     skipButtons?: boolean;
+    component?: ZappComponent;
+    interactive?: boolean;
   };
 };
 
@@ -46,7 +66,7 @@ export function masterCellBuilder({
   containerStyle = defaultContainerStyle,
   cellOptions = {},
 }: MasterCellBuilderOptions) {
-  const { generateId = uuid, skipButtons = false } = cellOptions;
+  const { skipButtons = false, component, interactive = true } = cellOptions;
 
   const componentsMap = R.merge(defaultComponents, components);
   const { View } = componentsMap;
@@ -65,6 +85,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -84,15 +105,39 @@ export function masterCellBuilder({
       () =>
         elementsBuilder({
           entry: item,
-          state: getEntryState(state, entryIsSelected),
+          state: getEntryState(
+            interactive ? state : withoutFocusedState(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,
     ]);
@@ -109,7 +154,11 @@ export function masterCellBuilder({
     );
 
     return (
-      <View style={containerStyle} ref={wrapperRef}>
+      <View
+        style={containerStyle}
+        ref={wrapperRef}
+        {...(interactive ? undefined : nonInteractiveRootProps)}
+      >
         {elements.map(remapElements)}
       </View>
     );