@applicaster/zapp-react-native-ui-components 16.0.0-rc.7 → 16.0.0-rc.71

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/index.ts

@@ -1,15 +1,85 @@
-import {
-  toFiniteNumberWithDefault,
-  toNumber,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { isNil } from "ramda";
+import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const dimensionRegex = /\b(width|height)=(\d+)\b/gi;
+const imageResizingLogger = coreLogger
+  ?.addSubsystem("components")
+  ?.addSubsystem("ImageResizing");
 
+const TEMPLATE_REGEX = /{{(width|height)}}/gi;
+const UNRESOLVED_PLACEHOLDER_REGEX = /{{[^}]*}}?/;
+const INVALID_PLACEHOLDER_EXTRACT_REGEX = /{{([^}]*)}}?/g;
+const ALLOWED_PLACEHOLDERS = ["width", "height"];
+
+/**
+ * Merges query-param string `paramsString` into `baseUrl`.
+ * Params from `paramsString` override any existing params with the same key.
+ */
+export const mergeQueryParams = (
+  baseUrl: string,
+  paramsString: string
+): string => {
+  try {
+    const urlObj = new URL(baseUrl);
+    const newParams = new URLSearchParams(paramsString);
+
+    newParams.forEach((value, key) => {
+      urlObj.searchParams.set(key, value);
+    });
+
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return baseUrl;
+  }
+};
+
+/**
+ * Extracts unresolved placeholder names from a param pair and logs a warning.
+ */
+const logInvalidPlaceholders = (pair: string): void => {
+  const invalidNames: string[] = [];
+  let match: RegExpExecArray | null;
+
+  // Reset lastIndex before using the global regex
+  INVALID_PLACEHOLDER_EXTRACT_REGEX.lastIndex = 0;
+
+  while ((match = INVALID_PLACEHOLDER_EXTRACT_REGEX.exec(pair)) !== null) {
+    const name = match[1];
+
+    if (!ALLOWED_PLACEHOLDERS.includes(name?.toLowerCase())) {
+      invalidNames.push(name);
+    }
+  }
+
+  if (invalidNames.length > 0) {
+    imageResizingLogger?.warning({
+      message: `Image resizing: invalid placeholder(s) found: ${invalidNames.map((n) => `{{${n}}}`).join(", ")}. Allowed placeholders are: {{width}}, {{height}}. The param "${pair}" was ignored.`,
+      data: { pair, invalidNames, allowedPlaceholders: ALLOWED_PLACEHOLDERS },
+    });
+  }
+};
+
+/**
+ * Parses a dimension mapping template string (query param format) and injects
+ * the resolved width/height values into the given URL.
+ *
+ * The template uses `{{width}}` and `{{height}}` placeholders.
+ * It is treated as query-param key=value pairs (e.g. "w={{width}}&h={{height}}"
+ * or "size={{width}}x{{height}}").
+ *
+ * Resolved params are **merged** into the original URL – existing params with
+ * the same key are replaced; new ones are appended.
+ *
+ * Invalid mappings (containing unresolved placeholders like `{{heit}}` or
+ * malformed `{{heit}`) are silently dropped and logged as warnings.
+ * A leading `?` in the template is stripped.
+ */
 export const withDimensions = (
   url: Option<string>,
   width: Option<number | string>,
-  height: Option<number | string>
+  height: Option<number | string>,
+  dimensionMappingTemplate?: Option<string>
 ) => {
   if (isNil(url)) {
     return url;
@@ -22,23 +92,48 @@ export const withDimensions = (
   const newWidth = Math.trunc(toFiniteNumberWithDefault(0, width));
   const newHeight = Math.trunc(toFiniteNumberWithDefault(0, height));
 
-  return url.replace(dimensionRegex, (match, name, originalValue) => {
-    if (name.toLocaleLowerCase() === "width" && newWidth > 0) {
-      const originalWidth = toNumber(originalValue);
+  if (newWidth <= 0 && newHeight <= 0) {
+    return url;
+  }
+
+  // Strip leading `?` and whitespace from the template
+  const template = dimensionMappingTemplate?.trim()?.replace(/^\?/, "");
 
-      if (originalWidth > 0 && originalWidth > newWidth) {
-        return `${name}=${newWidth}`;
-      }
-    }
+  if (!template) {
+    return url;
+  }
 
-    if (name.toLocaleLowerCase() === "height" && newHeight > 0) {
-      const originalHeight = toNumber(originalValue);
+  // Replace {{width}} / {{height}} placeholders in the template
+  const resolvedTemplate = template.replace(TEMPLATE_REGEX, (_match, name) => {
+    if (name.toLowerCase() === "width") {
+      return newWidth > 0 ? String(newWidth) : _match;
+    }
 
-      if (originalHeight > 0 && originalHeight > newHeight) {
-        return `${name}=${newHeight}`;
-      }
+    if (name.toLowerCase() === "height") {
+      return newHeight > 0 ? String(newHeight) : _match;
     }
 
-    return match;
+    return _match;
   });
+
+  // Filter out param pairs that still contain unresolved / malformed placeholders
+  const cleanedParams = resolvedTemplate
+    .split("&")
+    .filter((pair) => {
+      if (UNRESOLVED_PLACEHOLDER_REGEX.test(pair)) {
+        logInvalidPlaceholders(pair);
+
+        return false;
+      }
+
+      return true;
+    })
+    .join("&");
+
+  if (!cleanedParams) {
+    return url;
+  }
+
+  // Parse the resolved template as query params and merge into URL
+  return mergeQueryParams(url, cleanedParams);
 };

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -14,25 +14,36 @@ type Style = {
   height: Option<number | string>;
 };
 
-const withAppliedDimensions = (style: Style) => (source: Source) => ({
-  ...source,
-  uri: withDimensions(source?.uri, style?.width, style?.height),
-});
+const withAppliedDimensions =
+  (style: Style, dimensionMappingTemplate: string) => (source: Source) => ({
+    ...source,
+    uri: withDimensions(
+      source?.uri,
+      style?.width,
+      style?.height,
+      dimensionMappingTemplate
+    ),
+  });
 
 export const withDimensionsHOC = (Component) => {
   return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
-    const useDownScalingImages = toBooleanWithDefaultFalse(
-      theme.use_downscaling_images
+    const useImageResizing = toBooleanWithDefaultFalse(
+      theme.use_image_resizing ?? theme.use_downscaling_images
     );
 
+    const dimensionMappingTemplate = theme.image_resizing_template;
+
     return (
       <Component
         {...props}
         withDimensions={
-          useDownScalingImages
-            ? withAppliedDimensions((props?.style || {}) as Style)
+          useImageResizing
+            ? withAppliedDimensions(
+                (props?.style || {}) as Style,
+                dimensionMappingTemplate
+              )
             : identity
         }
       />

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/Toggle.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useCellClick } from "@applicaster/zapp-react-native-utils/reactHooks/cell-click";
 
 type Props = {
   item: ZappEntry | ZappFeed;
@@ -15,36 +16,57 @@ type Props = {
 export const Toggle = (props: Props) => {
   const { style, item, action, cellState } = props;
 
-  const {
-    trackColor,
-    trackColorActive,
-    thumbColor,
-    thumbColorActive,
-    iosBackgroundColor,
-  } = style;
+  const { trackColor, trackColorActive, thumbColor, thumbColorActive } = style;
 
+  // `focused_selected` is the selected state with a finger on the row, so the
+  // switch has to read as on for both. Leaving it out reads a pressed selected
+  // row as off, which flips the thumb for the duration of the press.
   const isSelected = React.useMemo(
-    () => cellState === "selected",
+    () => cellState === "selected" || cellState === "focused_selected",
     [item?.id, cellState]
   );
 
   const actionContext = useActions(action?.identifier);
+  const onCellClick = useCellClick({ item: item as ZappEntry });
 
-  const [actionState, setActionState] = useState(
-    actionContext.initialEntryState(item)
+  // A form toggle has no action plugin behind the switch: it reflects the cell
+  // selection state and writes through the entry's tap actions, the same path a
+  // tap on the row takes.
+  //
+  // An empty identifier is the way to ask for that, which is why the cell
+  // manifest declares no initial_value for `toggle_action_identifier`:
+  // `castOrDefault` substitutes the default whenever the configured value is
+  // empty - and an empty string counts as empty - so any default there would be
+  // uncleanable and would force every toggle onto that plugin.
+  //
+  // The route is still decided on whether the identifier resolves to an
+  // installed action plugin rather than on the string being non-empty. App
+  // configurations saved while the old default was in the manifest still carry
+  // it, and a mistyped plugin id has to fall back the same way.
+  const hasActionPlugin = Boolean(
+    action?.identifier && actionContext?.invokeAction
+  );
+
+  const [actionState, setActionState] = useState(() =>
+    hasActionPlugin ? actionContext?.initialEntryState?.(item) : undefined
   );
 
   const onPress = useCallback(() => {
-    actionContext.invokeAction(item, {
+    if (!hasActionPlugin) {
+      onCellClick();
+
+      return;
+    }
+
+    actionContext?.invokeAction?.(item, {
       updateState: setActionState,
     });
-  }, [actionState, actionContext?.state]);
+  }, [hasActionPlugin, onCellClick, actionState, actionContext?.state]);
 
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
       thumbColor={isSelected ? thumbColorActive : thumbColor}
-      ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
       value={isSelected}
     />

package/Components/MasterCell/DefaultComponents/__tests__/Toggle.test.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Switch } from "react-native";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { Toggle } from "../Toggle";
+
+const mockOnCellClick = jest.fn();
+const mockInvokeAction = jest.fn();
+const mockInitialEntryState = jest.fn().mockReturnValue({ state: 0 });
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/cell-click", () => ({
+  useCellClick: jest.fn(() => mockOnCellClick),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => ({
+    invokeAction: mockInvokeAction,
+    initialEntryState: mockInitialEntryState,
+  })),
+}));
+
+const style = {
+  trackColor: "rgba(0,0,0,1)",
+  trackColorActive: "rgba(4,207,153,1)",
+  thumbColor: "rgba(255,255,255,1)",
+  thumbColorActive: "rgba(255,255,255,1)",
+} as any;
+
+const item = { id: "true", title: "I agree" } as any;
+
+const renderToggle = (identifier: string, cellState) =>
+  render(
+    <Toggle
+      item={item}
+      action={{ identifier }}
+      style={style}
+      cellState={cellState}
+    />
+  );
+
+describe("Toggle with an empty action identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("is on when the cell is selected", () => {
+    const { getByRole } = renderToggle("", "selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off when the cell is not selected", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
+  // A finger on a selected row resolves the cell to focused_selected. Reading
+  // that as unselected flipped the thumb for the duration of the press and let
+  // it jump back on release, which reads as a second tap.
+  it("stays on while a selected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused_selected");
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+
+  it("is off while an unselected cell is pressed", () => {
+    const { getByRole } = renderToggle("", "focused");
+
+    expect(getByRole("switch").props.value).toBe(false);
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("does not read the action plugin state", () => {
+    renderToggle("", "default");
+
+    expect(mockInitialEntryState).not.toHaveBeenCalled();
+  });
+
+  // Asserted on the Switch element rather than the rendered host component:
+  // what Toggle owns is the props it hands to Switch, and React Native rewrites
+  // them into platform-specific ones (tintColor, a style entry) underneath.
+  it("forwards every configured color to the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props).toMatchObject({
+      trackColor: { false: style.trackColor, true: style.trackColorActive },
+      thumbColor: style.thumbColor,
+    });
+  });
+
+  // ios_backgroundColor paints an opaque layer behind the track that the track
+  // color cannot cover, which on iOS reads as a halo around the switch. The
+  // switch is left on its platform default instead, so the prop must stay
+  // unset even if a style happens to carry a color for it.
+  it("does not set an iOS background color on the switch", () => {
+    const { UNSAFE_getByType } = renderToggle("", "default");
+
+    expect(UNSAFE_getByType(Switch).props.ios_backgroundColor).toBeUndefined();
+  });
+});
+
+describe("Toggle with an action plugin identifier", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("routes a change through the action plugin", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockInvokeAction).toHaveBeenCalledWith(
+      item,
+      expect.objectContaining({ updateState: expect.any(Function) })
+    );
+
+    expect(mockOnCellClick).not.toHaveBeenCalled();
+  });
+});
+
+describe("Toggle with an identifier whose action plugin is not installed", () => {
+  // The cell manifest no longer defaults toggle_action_identifier, but app
+  // configurations saved while it did still carry "firebase-push-topic-action",
+  // and a mistyped id is always possible. A toggle can therefore still arrive
+  // with a non-empty identifier it never asked for - the presence of a real
+  // action context, not the identifier string, is what decides the route.
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useActions as jest.Mock).mockReturnValue(undefined);
+  });
+
+  afterEach(() => {
+    (useActions as jest.Mock).mockReturnValue({
+      invokeAction: mockInvokeAction,
+      initialEntryState: mockInitialEntryState,
+    });
+  });
+
+  it("routes a change through the cell click path", () => {
+    const { getByRole } = renderToggle("firebase-push-topic-action", "default");
+
+    fireEvent(getByRole("switch"), "valueChange", true);
+
+    expect(mockOnCellClick).toHaveBeenCalledTimes(1);
+    expect(mockInvokeAction).not.toHaveBeenCalled();
+  });
+
+  it("still reflects the cell selection state", () => {
+    const { getByRole } = renderToggle(
+      "firebase-push-topic-action",
+      "selected"
+    );
+
+    expect(getByRole("switch").props.value).toBe(true);
+  });
+});