@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.141

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

@@ -0,0 +1,170 @@
+type Label = {
+  name?: string;
+  elements?: Array<Label | unknown>;
+};
+
+type LabelContainer = {
+  elements?: Array<Label | unknown>;
+};
+
+type LabelExtraContainer = {
+  elements?: Array<LabelContainer | unknown>;
+};
+
+type InsertOptions = {
+  position?: string;
+  allowOnTop?: boolean;
+  appendWhenMissing?: boolean;
+};
+
+const hasLabelName = (value: unknown): value is Label =>
+  !!value &&
+  typeof value === "object" &&
+  typeof (value as Label).name === "string" &&
+  (value as Label).name !== "";
+
+const withButtons = (
+  labelName: string | undefined,
+  buttons: unknown,
+  labels: Label[]
+) =>
+  labels.reduce<Array<Label | unknown>>((acc, label) => {
+    if (!!label?.name && labelName?.includes(label.name)) {
+      // handle above_*
+      if (labelName?.startsWith("above_")) {
+        return [...acc, buttons, label];
+      }
+
+      // handle below_* or plain exact match (default: insert after (covers below_* AND plain names))
+      return [...acc, label, buttons];
+    }
+
+    return [...acc, label];
+  }, []);
+
+const withButtonsInNestedViews = (
+  labelName: string | undefined,
+  buttons: unknown,
+  views: Array<LabelContainer | unknown>
+) => {
+  const hasDirectLabels = views.some((view) => hasLabelName(view));
+
+  if (hasDirectLabels) {
+    return withButtons(labelName, buttons, views as Label[]);
+  }
+
+  return views.map((view) => {
+    if (
+      !view ||
+      typeof view !== "object" ||
+      !Array.isArray((view as LabelContainer).elements)
+    ) {
+      return view;
+    }
+
+    return {
+      ...(view as LabelContainer),
+      elements: withButtons(
+        labelName,
+        buttons,
+        (view as LabelContainer).elements || []
+      ),
+    };
+  });
+};
+
+const containsNestedLabel = (
+  labelName: string | undefined,
+  labelContainers: LabelExtraContainer[]
+) =>
+  labelContainers.some((labelContainer) =>
+    (labelContainer.elements || []).some((view) => {
+      if (hasLabelName(view)) {
+        return labelName?.includes(view.name) ?? false;
+      }
+
+      if (
+        !view ||
+        typeof view !== "object" ||
+        !Array.isArray((view as LabelContainer).elements)
+      ) {
+        return false;
+      }
+
+      return ((view as LabelContainer).elements || []).some((label) =>
+        hasLabelName(label) ? (labelName?.includes(label.name) ?? false) : false
+      );
+    })
+  );
+
+export const insertBetweenLabels = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labels: Label[] = []
+) => {
+  if (buttons == null) {
+    return labels;
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return [buttons, ...labels];
+  }
+
+  const labelsWithButtons = withButtons(position, buttons, labels);
+  const inserted = labelsWithButtons.length !== labels.length;
+
+  if (!inserted && appendWhenMissing) {
+    return [...labels, buttons];
+  }
+
+  return inserted ? labelsWithButtons : [...labels];
+};
+
+export const insertBetweenLabelContainers = (
+  { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
+  buttons: unknown,
+  labelContainers: LabelExtraContainer[] = []
+) => {
+  if (buttons == null) {
+    return labelContainers;
+  }
+
+  if (labelContainers.length === 0) {
+    return [buttons];
+  }
+
+  if (allowOnTop && position === "on_top") {
+    return labelContainers.map((labelContainer, index) =>
+      index === 0
+        ? {
+            ...labelContainer,
+            elements: [buttons, ...(labelContainer.elements || [])],
+          }
+        : labelContainer
+    );
+  }
+
+  const hasMatchingLabel = containsNestedLabel(position, labelContainers);
+
+  const labelContainersWithButtons = labelContainers.map((labelContainer) => ({
+    ...labelContainer,
+    elements: withButtonsInNestedViews(
+      position,
+      buttons,
+      labelContainer.elements || []
+    ),
+  }));
+
+  if (!hasMatchingLabel && appendWhenMissing) {
+    return labelContainers.map((labelContainer, index) =>
+      index === labelContainers.length - 1
+        ? {
+            ...labelContainer,
+            elements: [...(labelContainer.elements || []), buttons],
+          }
+        : labelContainer
+    );
+  }
+
+  return hasMatchingLabel ? labelContainersWithButtons : labelContainers;
+};

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

@@ -0,0 +1,26 @@
+export const getButtonSlotPrefix = (buttonPrefix: string, slot: number) =>
+  `${buttonPrefix}_${slot}`;
+
+export const getEnabledButtonSlots = (
+  configuration: Record<string, unknown>,
+  buttonPrefix: string,
+  maxButtons = 3
+): number[] =>
+  Array.from({ length: maxButtons }, (_, index) => index + 1).filter((slot) =>
+    Boolean(
+      configuration[`${getButtonSlotPrefix(buttonPrefix, slot)}_button_enabled`]
+    )
+  );
+
+export const getStylePrefix = ({
+  slot,
+  independentStyles,
+  buttonPrefix,
+}: {
+  slot: number;
+  independentStyles: boolean;
+  buttonPrefix: string;
+}) =>
+  independentStyles
+    ? getButtonSlotPrefix(buttonPrefix, slot)
+    : getButtonSlotPrefix(buttonPrefix, 1);

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

@@ -0,0 +1,29 @@
+import { mapSelfAlignment } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+import { ActionButtonsContainerLayout } from "./types";
+
+export const getContainerMargins = (
+  value: (key: string) => unknown,
+  prefix: string
+) => ({
+  top: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+  right: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+  bottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+  left: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+});
+
+export const buildContainerLayout = (
+  value: (key: string) => unknown,
+  prefix: string
+): ActionButtonsContainerLayout => ({
+  horizontalAlign: mapSelfAlignment(value(`${prefix}_align`)),
+  margins: getContainerMargins(value, prefix),
+  stacking:
+    value(`${prefix}_stacking`) === "vertical" ? "vertical" : "horizontal",
+  horizontalGutter: toNumberWithDefaultZero(
+    value(`${prefix}_horizontal_gutter`)
+  ),
+  verticalGutter: toNumberWithDefaultZero(value(`${prefix}_vertical_gutter`)),
+  independentStyles: Boolean(value(`${prefix}_independent_styles`)),
+});

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

@@ -0,0 +1,37 @@
+export type ActionButtonSlot = number;
+
+export type ActionButtonDescriptor = {
+  slot: ActionButtonSlot;
+  renderIndex: number;
+  specificPrefix: string;
+  stylePrefix: string;
+};
+
+export type ActionButtonsContainerLayout = {
+  horizontalAlign: string;
+  margins: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  stacking: "horizontal" | "vertical";
+  horizontalGutter: number;
+  verticalGutter: number;
+  independentStyles: boolean;
+};
+
+export type ActionButtonsModel = {
+  enabledSlots: ActionButtonSlot[];
+  buttonsCount: number;
+  container: ActionButtonsContainerLayout;
+  buttons: ActionButtonDescriptor[];
+};
+
+export type BuildActionButtonsModelOptions = {
+  configuration: Record<string, unknown>;
+  value: (key: string) => unknown;
+  containerPrefix: string;
+  buttonPrefix: string;
+  maxButtons?: number;
+};

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,8 +1,8 @@
+import * as React from "react";
 import {
   BorderContainerView,
   getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
 } from "../index";
-import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { View } from "react-native";
@@ -11,6 +11,15 @@ jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
   toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
 }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
+  () => ({
+    useAccessibilityManager: jest.fn(() => ({
+      addHeading: jest.fn(),
+    })),
+  })
+);
+
 describe("BorderContainerView", () => {
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
@@ -42,6 +51,8 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
+    const mockEntry = { id: "test-entry" } as ZappEntry;
+    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -52,6 +63,10 @@ describe("BorderContainerView", () => {
         borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
         borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
         borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
+        hasFocusableInside={mockHasFocusableInside}
+        entry={mockEntry}
+        state="focused"
+        hasTextLabels={false}
       >
         <View testID="child" />
       </BorderContainerView>

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

@@ -1,10 +1,16 @@
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import * as React from "react";
+import React, { useMemo, useContext, useEffect } from "react";
 import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
+  hasFocusableInside: (entry: ZappEntry) => boolean;
+  entry: ZappEntry;
+  state: CellState;
+  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -118,8 +124,30 @@ export const BorderContainerView = (props: Props) => {
     borderPaddingLeft,
     style,
     children,
+    hasFocusableInside,
+    entry,
+    state,
+    hasTextLabels,
   } = props;
 
+  const accessibilityManager = useAccessibilityManager();
+  const isMeasurement = useContext(MeasurementPortalContext);
+
+  const isImageOnlyCell = useMemo(
+    () =>
+      state === "focused" &&
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
+  );
+
+  useEffect(() => {
+    if (isImageOnlyCell && entry?.title) {
+      accessibilityManager.addHeading(String(entry.title));
+    }
+  }, [isImageOnlyCell, entry?.title]);
+
   const padding =
     borderPosition === "outside"
       ? {

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import * as R from "ramda";
 
 import { TouchableOpacity } from "react-native";
-// import { SvgUri } from "react-native-svg";
 
 import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -35,20 +34,6 @@ type Props = {
   cellUUID?: string;
 };
 
-// function Svg({
-//   uri,
-//   style,
-//   ...props
-// }: {
-//   uri: {},
-//   style: { width: Number, height: number },
-// }) {
-//   const width = style?.width;
-//   const height = style?.height;
-
-//   return <SvgUri width={width} height={height} uri={uri} />;
-// }
-
 const components = {
   Image,
 };

package/Components/MasterCell/DefaultComponents/Image/Image.android.tsx

@@ -32,6 +32,7 @@ export default function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [showDefault, setShowDefault] = React.useState(false);
@@ -48,7 +49,10 @@ export default function Image({
     entry,
     showDefault,
     placeholderImage: placeholderImage || "",
-    otherProps,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
   });
 
   const onError = React.useCallback(() => {

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
+import { equals } from "@applicaster/zapp-react-native-utils/utils";
 
 type Source = {
   uri: string;
@@ -25,11 +25,19 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
   const [error, setErrorState] = React.useState(null);
 
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
@@ -49,7 +57,7 @@ function Image({
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...omit(["source"], otherProps)}
+      {...otherProps}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/Image.web.tsx

@@ -23,9 +23,17 @@ function Image({
   placeholderImage,
   entry,
   withDimensions,
+  source: sourceProp,
   ...otherProps
 }: Props) {
-  const source = useImageSource({ uri, entry, otherProps });
+  const source = useImageSource({
+    uri,
+    entry,
+    otherProps: {
+      source: sourceProp,
+      state: otherProps.state,
+    },
+  });
 
   const updatedSource = source ? withDimensions(source) : { uri: "" };
 

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,19 +1,21 @@
 import * as React from "react";
-import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
+type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = path(["source", "context"]);
-const getSourceUri = path(["source", "uri"]);
-const getState = path(["state"]);
+const getSourceContext = (source: Source) => source?.context;
+const getSourceUri = (source: Source) => source?.uri;
 
-export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+export const useImageSource = ({
+  uri,
+  entry,
+  otherProps: { source, state: uriState },
+}): Return => {
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -38,7 +40,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -47,7 +49,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, otherProps) => {
+const getSource = (uri, showDefault, placeholderImage, source) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -60,7 +62,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -74,10 +76,9 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps,
+  otherProps: { state: uriState, source },
 }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -98,5 +99,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, otherProps);
+  return getSource(uri, showDefault, placeholderImage, source);
 };