@applicaster/zapp-react-native-ui-components 16.0.0-alpha.5402127570 → 16.0.0-alpha.5439705823

package/Components/CellRendererResolver/index.ts

@@ -92,7 +92,7 @@ export function CellRendererResolver({
     component,
     styles,
     cellStyles,
-    cellOptions,
+    cellOptions: { ...cellOptions, component },
     ...cellOptions, // fallback for existing plugins
   });
 }

package/Components/Layout/FullWidthRow.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row" },
+  basis: {
+    maxWidth: "100%",
+    flexBasis: "100%",
+  },
+});
+
+type Props = {
+  children: React.ReactNode;
+};
+
+/**
+ * Constrains its child to exactly the available parent width.
+ *
+ * UI components such as Hero and List render their items inside a parent
+ * `ScrollView` (e.g. when wrapped by tabs). A child placed directly in a
+ * scroll container can size itself to its own content rather than to the
+ * viewport, which causes items to be measured at a stale width and resize
+ * unexpectedly after layout changes such as device rotation.
+ *
+ * Wrapping the content in a `flexDirection: "row"` parent with a
+ * `flexBasis: "100%"` / `maxWidth: "100%"` child forces the child to
+ * re-derive its width from the parent on every layout pass instead of
+ * caching a measured pixel width, keeping it full-width and stable.
+ *
+ * @param children - The content to render at full parent width.
+ */
+export function FullWidthRow({ children }: Props) {
+  return (
+    <View style={styles.row}>
+      <View style={styles.basis}>{children}</View>
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -1,16 +1,13 @@
-import React, { useCallback } from "react";
-import { Pressable } from "react-native";
-import { PressedStateContext } from "../contexts/PressedStateContext";
+import React from "react";
+import { TouchableOpacity } from "react-native";
 
 type Props = {
   children?: React.ReactNode;
   style?: Record<string, unknown>;
-  pressedStyle?: Record<string, unknown>;
   testID?: string;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   onPress?: () => void;
-  testOnly_pressed?: boolean;
 };
 
 export function PressableView({
@@ -19,36 +16,19 @@ export function PressableView({
   testID,
   accessibilityLabel,
   accessibilityHint,
-  pressedStyle,
   onPress,
-  testOnly_pressed = false,
 }: Props) {
   return (
-    <Pressable
-      testOnly_pressed={testOnly_pressed}
+    <TouchableOpacity
+      activeOpacity={1}
       onPress={onPress}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}
       accessible={!!(testID || accessibilityLabel)}
-      style={useCallback(
-        ({ pressed }) => [
-          style,
-          pressed && {
-            opacity: 1,
-          },
-          pressed && pressedStyle,
-        ],
-        [style, pressedStyle]
-      )}
+      style={style}
     >
-      {({ pressed }) => {
-        return (
-          <PressedStateContext.Provider value={pressed}>
-            {children}
-          </PressedStateContext.Provider>
-        );
-      }}
-    </Pressable>
+      {children}
+    </TouchableOpacity>
   );
 }

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -83,10 +83,6 @@ export const useTextLabel = ({ label, entry }): string => {
   return prepareHebrewText(label, isRTL);
 };
 
-/**
- * use `otherProps.state` to set focused or default styles (focusedStyles or normalStyles) to the text component
- * for mobile buttons state using usePressedState() and passing isPressed to `state`
- * */
 export const withFocusedStyles = ({ style, otherProps }) => {
   const state = R.path(["state"], otherProps);
 

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { PressableView } from "../../PressableView";
-import { usePressedState } from "../../../hooks";
 
 import { ActionButtonController } from "../../ActionButtonsCore/components";
 
@@ -21,137 +20,7 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
-type ActionButtonContentProps = {
-  style: any;
-  children: React.ReactNode;
-  action: any;
-  focusedStyles: any;
-  entry: any;
-  props: Record<string, any>;
-  actionContext: any;
-  actionState: any;
-  isActive: boolean;
-  onPress: () => any;
-};
-
-const ActionButtonContent = ({
-  children,
-  action,
-  entry,
-  actionContext,
-  actionState,
-  isActive,
-}: ActionButtonContentProps) => {
-  const isPressed = usePressedState();
-
-  const supportsEntryState =
-    typeof actionContext?.initialEntryState === "function";
-
-  const shouldRenderAsset = Boolean(
-    supportsEntryState ? actionState?.mobileButtonAssets : false
-  );
-
-  const shouldRenderLabel = Boolean(
-    supportsEntryState && resolveLabelText(actionState?.label)
-  );
-
-  const _cloneChildrenWithState = useCallback(
-    (nodes?: React.ReactNode): React.ReactNode => {
-      return React.Children.map(nodes, (child) => {
-        if (!isValidElement(child)) {
-          return child;
-        }
-
-        const role = child.props.mobileActionRole;
-
-        const nextChildren = _cloneChildrenWithState(child.props.children);
-
-        // Prevents of the asset rendering when the action doesn't provide asset for current entry state
-        if (role === "asset" && !shouldRenderAsset) {
-          return null;
-        }
-
-        // Prevents of the label rendering when the action doesn't provide label for current entry state.
-        // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
-        if (role === "label" && !shouldRenderLabel) {
-          return null;
-        }
-
-        // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
-        if (
-          role === "label_container" &&
-          React.Children.count(nextChildren) === 0
-        ) {
-          return null;
-        }
-
-        const nextProps: Partial<ChildElementProps> = {};
-
-        // Inject asset or uri to Asset component with role asset
-        if (role === "asset") {
-          const resolvedAsset = selectByAssetFlavour(
-            actionState,
-            action.flavour,
-            isActive
-          );
-
-          if (typeof resolvedAsset === "function") {
-            const AssetComponent = resolvedAsset as CellActionAssetComponent;
-
-            nextProps.asset = (
-              <AssetComponent
-                flavour={action.flavour || "flavour_1"}
-                width={action.width}
-                height={action.height}
-              />
-            );
-          } else {
-            nextProps.uri = resolvedAsset;
-          }
-        }
-
-        // Inject state and entry to Text component with role label
-        // Use isPressed state for mobile buttons to set focused state on mobile
-        if (role === "label") {
-          nextProps.state = isActive || isPressed ? "focused" : "default";
-          nextProps.entry = entry;
-        }
-
-        if (nextChildren !== child.props.children) {
-          nextProps.children = nextChildren;
-        }
-
-        return React.cloneElement(child, nextProps);
-      });
-    },
-    [
-      shouldRenderAsset,
-      shouldRenderLabel,
-      actionState,
-      action.flavour,
-      action.width,
-      action.height,
-      isActive,
-      isPressed,
-      entry,
-    ]
-  );
-
-  if (!shouldRenderAsset && !shouldRenderLabel) {
-    return null;
-  }
-
-  return _cloneChildrenWithState(children);
-};
-
-export const ActionButton = ({
-  style,
-  children,
-  action,
-  focusedStyles,
-  entry,
-  ...props
-}) => {
+export const ActionButton = ({ style, children, action, entry, ...props }) => {
   return (
     <ActionButtonController
       action={action}
@@ -162,28 +31,105 @@ export const ActionButton = ({
         );
       }}
     >
-      {(renderProps) => (
-        <PressableView
-          testOnly_pressed={props.testOnly_pressed}
-          testID={props.testID || `${entry?.id}`}
-          style={style}
-          pressedStyle={focusedStyles}
-          onPress={renderProps.onPress}
-          accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
-          accessibilityHint={props.accessibilityHint}
-        >
-          <ActionButtonContent
-            style={style}
-            action={action}
-            focusedStyles={focusedStyles}
-            entry={entry}
-            props={props}
-            {...renderProps}
+      {({ actionContext, actionState, isActive, onPress }) => {
+        const supportsEntryState =
+          typeof actionContext?.initialEntryState === "function";
+
+        const shouldRenderAsset = Boolean(
+          supportsEntryState ? actionState?.mobileButtonAssets : false
+        );
+
+        const shouldRenderLabel = Boolean(
+          supportsEntryState && resolveLabelText(actionState?.label)
+        );
+
+        const _cloneChildrenWithState = (
+          nodes?: React.ReactNode
+        ): React.ReactNode => {
+          return React.Children.map(nodes, (child) => {
+            if (!isValidElement(child)) {
+              return child;
+            }
+
+            const role = child.props.mobileActionRole;
+
+            const nextChildren = _cloneChildrenWithState(child.props.children);
+
+            // Prevents of the asset rendering when the action doesn't provide asset for current entry state
+            if (role === "asset" && !shouldRenderAsset) {
+              return null;
+            }
+
+            // Prevents of the label rendering when the action doesn't provide label for current entry state.
+            // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
+            if (role === "label" && !shouldRenderLabel) {
+              return null;
+            }
+
+            // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
+            if (
+              role === "label_container" &&
+              React.Children.count(nextChildren) === 0
+            ) {
+              return null;
+            }
+
+            const nextProps: Partial<ChildElementProps> = {};
+
+            // Inject asset or uri to Asset component with role asset
+            if (role === "asset") {
+              const resolvedAsset = selectByAssetFlavour(
+                actionState,
+                action.flavour,
+                isActive
+              );
+
+              if (typeof resolvedAsset === "function") {
+                const AssetComponent =
+                  resolvedAsset as CellActionAssetComponent;
+
+                nextProps.asset = (
+                  <AssetComponent
+                    flavour={action.flavour || "flavour_1"}
+                    width={action.width}
+                    height={action.height}
+                  />
+                );
+              } else {
+                nextProps.uri = resolvedAsset;
+              }
+            }
+
+            // Inject state and entry to Text component with role label
+            if (role === "label") {
+              nextProps.state = isActive ? "focused" : "default";
+              nextProps.entry = entry;
+            }
+
+            if (nextChildren !== child.props.children) {
+              nextProps.children = nextChildren;
+            }
+
+            return React.cloneElement(child, nextProps);
+          });
+        };
+
+        if (!shouldRenderAsset && !shouldRenderLabel) {
+          return null;
+        }
+
+        return (
+          <PressableView
+            testID={props.testID || `${entry?.id}`}
+            style={isActive ? { ...style, ...props.focusedStyles } : style}
+            onPress={onPress}
+            accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
+            accessibilityHint={props.accessibilityHint}
           >
-            {children}
-          </ActionButtonContent>
-        </PressableView>
-      )}
+            {_cloneChildrenWithState(children)}
+          </PressableView>
+        );
+      }}
     </ActionButtonController>
   );
 };

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

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

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,3 +1 @@
 export { useAsyncRendering } from "./useAsyncRendering";
-
-export { usePressedState } from "./usePressedState";

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,
     ]);