@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2226592390 → 16.0.0-alpha.2295427024

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/ActionButtonsCore/__tests__/placement.test.ts

@@ -6,54 +6,28 @@ import {
 describe("ActionButtonsCore placement", () => {
   const buttons = { type: "View", name: "buttons" };
 
-  const slots = [
-    { name: "text_label_1", element: { type: "View", id: "label_1" } },
-    { name: "text_label_2", element: { type: "View", id: "label_2" } },
-    { name: "text_label_3", element: { type: "View", id: "label_3" } },
+  const above_labels = [
+    { name: "above_label_1" },
+    { name: "above_label_2" },
+    { name: "above_label_3" },
   ];
 
-  const labels = slots.map((slot) => slot.element);
+  const below_labels = [
+    { name: "below_label_1" },
+    { name: "below_label_2" },
+    { name: "below_label_3" },
+  ];
 
   it("inserts buttons after the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "below_text_label_2" }, buttons, slots)
-    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
+    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
   });
 
   it("inserts buttons before the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "above_text_label_2" }, buttons, slots)
-    ).toEqual([labels[0], buttons, labels[1], labels[2]]);
-  });
-
-  it("inserts buttons after the matching label on a plain name match", () => {
-    expect(
-      insertBetweenLabels({ position: "text_label_2" }, buttons, slots)
-    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
-  });
-
-  it("keeps the slot when its label is empty (null element)", () => {
-    const slotsWithEmpty = [
-      { name: "text_label_1", element: { id: "label_1" } },
-      { name: "text_label_2", element: null },
-      { name: "text_label_3", element: { id: "label_3" } },
-    ];
-
-    expect(
-      insertBetweenLabels(
-        { position: "above_text_label_2" },
-        buttons,
-        slotsWithEmpty
-      )
-    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
-
-    expect(
-      insertBetweenLabels(
-        { position: "below_text_label_2" },
-        buttons,
-        slotsWithEmpty
-      )
-    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
+    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
   });
 
   it("prepends buttons only when on_top is allowed", () => {
@@ -61,17 +35,17 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "on_top", allowOnTop: true },
         buttons,
-        slots
+        below_labels
       )
-    ).toEqual([buttons, ...labels]);
+    ).toEqual([buttons, ...below_labels]);
 
     expect(
       insertBetweenLabels(
         { position: "on_top", allowOnTop: false },
         buttons,
-        slots
+        below_labels
       )
-    ).toEqual(labels);
+    ).toEqual(below_labels);
   });
 
   it("appends buttons when appendWhenMissing is enabled", () => {
@@ -79,9 +53,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: true },
         buttons,
-        slots
+        below_labels
       )
-    ).toEqual([...labels, buttons]);
+    ).toEqual([...below_labels, buttons]);
   });
 
   it("returns labels unchanged when appendWhenMissing is disabled", () => {
@@ -89,9 +63,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: false },
         buttons,
-        slots
+        below_labels
       )
-    ).toEqual(labels);
+    ).toEqual(below_labels);
   });
 
   const labelContainers = [

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -17,11 +17,6 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
-type Slot = {
-  name: string;
-  element?: unknown;
-};
-
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -105,14 +100,8 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  slots: Slot[] = []
+  labels: Label[] = []
 ) => {
-  // Slots are defined by the canonical label list, so an empty (null) label
-  // still keeps its position — buttons placed above/below it survive.
-  const labels = slots
-    .map((slot) => slot.element)
-    .filter((element) => element != null);
-
   if (buttons == null) {
     return labels;
   }
@@ -121,31 +110,14 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  let inserted = false;
-  const result: unknown[] = [];
-
-  for (const { name, element } of slots) {
-    if (position === `above_${name}`) {
-      result.push(buttons);
-      inserted = true;
-    }
-
-    if (element != null) {
-      result.push(element);
-    }
-
-    // Insert after on `below_*` or a plain label-name match.
-    if (position === `below_${name}` || position === name) {
-      result.push(buttons);
-      inserted = true;
-    }
-  }
+  const labelsWithButtons = withButtons(position, buttons, labels);
+  const inserted = labelsWithButtons.length !== labels.length;
 
-  if (!inserted) {
-    return appendWhenMissing ? [...labels, buttons] : labels;
+  if (!inserted && appendWhenMissing) {
+    return [...labels, buttons];
   }
 
-  return result;
+  return inserted ? labelsWithButtons : [...labels];
 };
 
 export const insertBetweenLabelContainers = (

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

@@ -1,14 +1,13 @@
-import React, { PropsWithChildren } from "react";
+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 = PropsWithChildren<{
+type Props = {
   enable_video_preview: boolean;
   player_screen_id: string;
-  uri?: string;
-}>;
+};
 
 export const ImageContainer = (props: Props) => {
   const isActive = useIsScreenActive();

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { TouchableOpacity, ViewStyle } from "react-native";
+import { TouchableOpacity } from "react-native";
 
 type Props = {
   children?: React.ReactNode;
-  style?: ViewStyle | ViewStyle[];
+  style?: Record<string, unknown>;
   testID?: string;
   accessibilityLabel?: string;
   accessibilityHint?: string;
@@ -12,7 +12,7 @@ type Props = {
 
 export function PressableView({
   children,
-  style,
+  style = {},
   testID,
   accessibilityLabel,
   accessibilityHint,

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
 import { PressableView } from "../../PressableView";
 
 import { ActionButtonController } from "../../ActionButtonsCore/components";
@@ -16,22 +15,6 @@ type ChildElementProps = {
   entry?: any;
 };
 
-const styles = StyleSheet.create({
-  pressableView: {
-    flexDirection: "row",
-    overflow: "hidden",
-  },
-  maxWidthFull: {
-    width: "100%",
-  },
-  innerWrapper: {
-    flexDirection: "row",
-    flexGrow: 0,
-    flexShrink: 1,
-    overflow: "hidden",
-  },
-});
-
 const isValidElement = (
   child: React.ReactNode
 ): child is React.ReactElement<ChildElementProps> =>
@@ -138,33 +121,12 @@ export const ActionButton = ({ style, children, action, entry, ...props }) => {
         return (
           <PressableView
             testID={props.testID || `${entry?.id}`}
-            style={[
-              isActive
-                ? {
-                    ...(style as ViewStyle),
-                    ...(props.focusedStyles as ViewStyle),
-                  }
-                : (style as ViewStyle),
-              styles.pressableView,
-            ]}
+            style={isActive ? { ...style, ...props.focusedStyles } : style}
             onPress={onPress}
             accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
             accessibilityHint={props.accessibilityHint}
           >
-            <View
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                width: props.displayMode === "fill" ? "100%" : undefined,
-                maxWidth: (style as ViewStyle).maxWidth,
-                ...((style as ViewStyle).maxWidth
-                  ? styles.maxWidthFull
-                  : undefined),
-              }}
-            >
-              <View style={[styles.innerWrapper, props.alignment]}>
-                {_cloneChildrenWithState(children)}
-              </View>
-            </View>
+            {_cloneChildrenWithState(children)}
           </PressableView>
         );
       }}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import { ImageContainer } from "../../ImageContainer";
 
 type Props = {
@@ -10,24 +10,13 @@ type Props = {
   cellUUID?: string;
 };
 
-const styles = StyleSheet.create({
-  assetContainer: {
-    flexShrink: 0,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
-
 export const AssetComponent = (props: Props & Record<string, unknown>) => {
   return props.asset && React.isValidElement(props.asset) ? (
-    <View style={[styles.assetContainer, props.style]} testID={props.testID}>
+    <View style={props.style} testID={props.testID}>
       {React.cloneElement(props.asset, { cellUUID: props.cellUUID })}
     </View>
   ) : (
-    <ImageContainer
-      style={[styles.assetContainer, props.style]}
-      {...(props as any)}
-      uri={props.uri}
-    />
+    // @ts-ignore
+    <ImageContainer {...props} uri={props.uri} />
   );
 };

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

@@ -10,34 +10,23 @@ import {
   getPressableStyles,
   getTextLabelStyles,
 } from "./utils";
-import { ViewStyle } from "react-native";
 
-const displayModeStyle = (value, isVertical: boolean) => {
+const displayModeStyle = (value) => {
   const mode = value("display_mode") || "dynamic";
 
-  const defaultStyle = {
-    flexShrink: 1,
-  };
+  if (mode === "fixed") {
+    return {
+      width: toNumberWithDefault(140, value("width")),
+    };
+  }
 
-  switch (mode) {
-    case "fixed":
-      return {
-        ...defaultStyle,
-        width: toNumberWithDefault(140, value("width")),
-        maxWidth: toNumberWithDefault(140, value("width")),
-      };
-    case "fill":
-      return {
-        ...defaultStyle,
-        width: isVertical ? "100%" : undefined,
-        flex: !isVertical ? 1 : undefined,
-      };
-    case "dynamic":
-    default:
-      return {
-        ...defaultStyle,
-      };
+  if (mode === "fill") {
+    return {
+      flex: 1,
+    };
   }
+
+  return {};
 };
 
 type Props = {
@@ -45,8 +34,7 @@ type Props = {
   value: Function;
   stylePrefix: string;
   specificPrefix: string;
-  spacingStyle: ViewStyle;
-  isVertical: boolean;
+  spacingStyle: Record<string, unknown>;
 };
 
 export const Button = ({
@@ -55,9 +43,8 @@ export const Button = ({
   stylePrefix,
   specificPrefix,
   spacingStyle,
-  isVertical,
 }: Props) => {
-  // Retrieves values depending to the slot
+  // Retrives values depending to the slot
   const getSlotBasedValue = (property: string) =>
     value(`${specificPrefix}_${property}`);
 
@@ -81,27 +68,21 @@ export const Button = ({
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = getSlotBasedValue("assign_action");
   const assetAlignment = getValue("asset_alignment") || "left";
-
   const actionAssetFlavour = getValue("action_asset_flavour");
   const contentsAlignment = getValue("contents_alignment") || "center";
-  const displayMode = getValue("display_mode") || "dynamic";
 
   return {
     type: "MobileActionButton",
     style: {
-      // alignContent: "center", Why do we need this?
+      flexDirection: getContentDirection(assetAlignment),
+      alignContent: "center",
+      alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
+      justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
       ...getPressableStyles(getValue),
-      ...displayModeStyle(getValue, isVertical),
+      ...displayModeStyle(getValue),
       ...spacingStyle,
     },
     additionalProps: {
-      displayMode,
-      alignment: {
-        alignContent: "center",
-        flexDirection: getContentDirection(assetAlignment),
-        alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
-        justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
-      },
       action: {
         identifier: actionIdentifier,
         flavour: actionAssetFlavour,
@@ -133,8 +114,7 @@ export const Button = ({
                 color: getValue("focused_font_color"),
               },
               transformText: getValue("text_transform") || "default",
-              numberOfLines: getValue("number_of_lines") || 1,
-              ellipseMode: "tail",
+              numberOfLines: getValue("number_of_lines"),
             },
             actionIdentifier,
             testID,

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

@@ -14,9 +14,6 @@ export const TextLabelsContainer = ({
 }: Props) => {
   return {
     type: "View",
-    style: {
-      flexShrink: 1,
-    },
     additionalProps: {
       mobileActionRole: "label_container",
     },

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

@@ -6,7 +6,6 @@ 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";
@@ -43,24 +42,9 @@ 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",
-    ...(isOverImage
+    ...(placement === "over_image"
       ? {
           position: "absolute",
           zIndex: 10,
@@ -72,22 +56,32 @@ export const MobileActionButtons = ({
             value(`${CONTAINER_PREFIX}_over_image_position`) as string
           ),
         }
-      : containerPaddings),
+      : {}),
   };
 
   const contentStyle = {
-    ...(isOverImage ? containerPaddings : {}),
-    flexDirection: isVertical ? "column" : "row",
-    width: isVertical ? "100%" : undefined,
-    alignSelf: !isOverImage ? model.container.horizontalAlign : undefined,
+    flexDirection: model.container.stacking === "vertical" ? "column" : "row",
+    alignSelf:
+      placement !== "over_image" ? 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 spacingStyle: ViewStyle = {
+      const {
+        container: { stacking, verticalGutter, horizontalGutter },
+      } = model;
+
+      const isVertical = stacking === "vertical";
+      const gutter = isVertical ? verticalGutter : horizontalGutter;
+
+      const spacingStyle = {
         [isVertical ? "marginBottom" : "marginRight"]: isNotLast ? gutter : 0,
       };
 
@@ -97,7 +91,6 @@ export const MobileActionButtons = ({
         stylePrefix,
         specificPrefix,
         spacingStyle,
-        isVertical,
       });
 
       if (!button) return null;

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

@@ -5,19 +5,14 @@ import {
 } from "..";
 
 describe("mobile action insertion helpers", () => {
-  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 labels = [{ name: "text_label_1" }, { name: "text_label_2" }];
   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,
-      slots
+      labels
     );
 
     expect(result).toEqual([labels[0], buttons, labels[1]]);
@@ -27,7 +22,7 @@ describe("mobile action insertion helpers", () => {
     const result = insertButtonsBetweenLabels(
       { mobile_buttons_container_position: "unknown" },
       buttons,
-      slots
+      labels
     );
 
     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,
-  slots = [] // { name, element } per canonical text label slot
+  labels = []
 ) =>
   insertBetweenLabels(
     {
@@ -19,7 +19,7 @@ export const insertButtonsBetweenLabels = (
       appendWhenMissing: false,
     },
     buttons,
-    slots
+    labels // "text_label_1", "text_label_2", "text_label_3", "text_label_4"
   );
 
 export const insertButtonsBetweenLabelContainers = (