@applicaster/zapp-react-native-ui-components 16.0.0-rc.4 → 16.0.0-rc.41

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

@@ -17,6 +17,11 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -100,8 +105,14 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  labels: Label[] = []
+  slots: Slot[] = []
 ) => {
+  // 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;
   }
@@ -110,14 +121,31 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  const labelsWithButtons = withButtons(position, buttons, labels);
-  const inserted = labelsWithButtons.length !== labels.length;
+  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;
+    }
+  }
 
-  if (!inserted && appendWhenMissing) {
-    return [...labels, buttons];
+  if (!inserted) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
   }
 
-  return inserted ? labelsWithButtons : [...labels];
+  return result;
 };
 
 export const insertBetweenLabelContainers = (

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

@@ -8,7 +8,7 @@ export function ButtonContainerView({
   children,
 }: ContainerProps) {
   return (
-    <View style={style}>
+    <View style={style} pointerEvents="box-none">
       <View style={contentStyle}>{children}</View>
     </View>
   );

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

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

package/Components/MasterCell/DefaultComponents/PressableView.tsx

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

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

@@ -83,6 +83,10 @@ export const useTextLabel = ({ label, entry }): string => {
   return prepareHebrewText(label, isRTL);
 };
 
+/**
+ * Uses `otherProps.state` ("focused" | "default") to select between `focusedStyles` and `normalStyles`.
+ * For mobile action buttons, map `usePressedState()` (boolean) to this state value (e.g. pressed ? "focused" : "default").
+ */
 export const withFocusedStyles = ({ style, otherProps }) => {
   const state = R.path(["state"], otherProps);
 

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

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { PressableView } from "../../PressableView";
+import { usePressedState } from "../../../hooks";
 
 import { ActionButtonController } from "../../ActionButtonsCore/components";
 
@@ -20,7 +21,137 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
-export const ActionButton = ({ style, children, action, entry, ...props }) => {
+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
+}) => {
   return (
     <ActionButtonController
       action={action}
@@ -31,105 +162,28 @@ export const ActionButton = ({ style, children, action, entry, ...props }) => {
         );
       }}
     >
-      {({ 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}
+      {(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}
           >
-            {_cloneChildrenWithState(children)}
-          </PressableView>
-        );
-      }}
+            {children}
+          </ActionButtonContent>
+        </PressableView>
+      )}
     </ActionButtonController>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { ImageContainer } from "../../ImageContainer";
 
 type Props = {
@@ -10,13 +10,24 @@ 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={props.style} testID={props.testID}>
+    <View style={[styles.assetContainer, props.style]} testID={props.testID}>
       {React.cloneElement(props.asset, { cellUUID: props.cellUUID })}
     </View>
   ) : (
-    // @ts-ignore
-    <ImageContainer {...props} uri={props.uri} />
+    <ImageContainer
+      style={[styles.assetContainer, props.style]}
+      {...(props as any)}
+      uri={props.uri}
+    />
   );
 };

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";
@@ -10,23 +13,37 @@ import {
   getPressableStyles,
   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";
 
-  if (mode === "fixed") {
-    return {
-      width: toNumberWithDefault(140, value("width")),
-    };
-  }
+  const defaultStyle = {
+    flexShrink: 1,
+  };
 
-  if (mode === "fill") {
-    return {
-      flex: 1,
-    };
-  }
+  const width = toNumberWithDefault(140, value("width"));
 
-  return {};
+  switch (mode) {
+    case "fixed":
+      return {
+        ...defaultStyle,
+        width,
+        maxWidth: width,
+      };
+    case "fill":
+      return {
+        ...defaultStyle,
+        width: isVertical ? "100%" : undefined,
+        flex: !isVertical ? 1 : undefined,
+      };
+    case "dynamic":
+    default:
+      return {
+        ...defaultStyle,
+      };
+  }
 };
 
 type Props = {
@@ -34,7 +51,8 @@ type Props = {
   value: Function;
   stylePrefix: string;
   specificPrefix: string;
-  spacingStyle: Record<string, unknown>;
+  spacingStyle: ViewStyle;
+  isVertical: boolean;
 };
 
 export const Button = ({
@@ -43,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}`);
 
@@ -68,21 +87,30 @@ 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",
-      alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
-      justifyContent: getContentsAlignment(contentsAlignment, 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),
+      },
       action: {
         identifier: actionIdentifier,
         flavour: actionAssetFlavour,
@@ -102,7 +130,12 @@ export const Button = ({
             testID,
           })
         : null,
-
+      Spacer({
+        enabled: assetEnabled && labelEnabled,
+        style: hasHorizontalAlignment
+          ? { width: hGutter }
+          : { height: vGutter },
+      }),
       labelEnabled
         ? TextLabelsContainer({
             style: getTextLabelStyles(getValue),
@@ -114,7 +147,8 @@ export const Button = ({
                 color: getValue("focused_font_color"),
               },
               transformText: getValue("text_transform") || "default",
-              numberOfLines: getValue("number_of_lines"),
+              numberOfLines: getValue("number_of_lines") || 1,
+              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

@@ -14,6 +14,9 @@ export const TextLabelsContainer = ({
 }: Props) => {
   return {
     type: "View",
+    style: {
+      flexShrink: 1,
+    },
     additionalProps: {
       mobileActionRole: "label_container",
     },
@@ -26,7 +29,6 @@ export const TextLabelsContainer = ({
             context: actionIdentifier,
             name: "label_1",
           },
-          state: "default",
           mobileActionRole: "label",
           testID: testID ? `${testID}-label` : undefined,
           ...extraProps,