@applicaster/zapp-react-native-ui-components 15.1.0-rc.8 → 16.0.0-alpha.1833861900

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

@@ -135,17 +135,11 @@ export const BorderContainerView = (props: Props) => {
 
   const isImageOnlyCell = useMemo(
     () =>
-      !hasFocusableInside(entry) &&
-      !hasTextLabels &&
       state === "focused" &&
-      !isMeasurement?.measuringInProgress,
-    [
-      hasFocusableInside,
-      entry,
-      hasTextLabels,
-      state,
-      isMeasurement?.measuringInProgress,
-    ]
+      !hasTextLabels &&
+      !isMeasurement?.measuringInProgress &&
+      !hasFocusableInside(entry),
+    [entry, hasTextLabels, state, isMeasurement?.measuringInProgress]
   );
 
   useEffect(() => {

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/ButtonContainerView/components/HorizontalSeparator.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { View } from "react-native";
+
+import type { HorizontalSeparatorProps } from "../types";
+
+export const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
+  <View style={{ width }} />
+);

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { View } from "react-native";
+import { ContainerProps } from "./types";
+
+export function ButtonContainerView({
+  style,
+  contentStyle,
+  children,
+}: ContainerProps) {
+  return (
+    <View style={style} pointerEvents="box-none">
+      <View style={contentStyle}>{children}</View>
+    </View>
+  );
+}

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

@@ -0,0 +1,58 @@
+import React from "react";
+import { View } from "react-native";
+import * as R from "ramda";
+import { useInitialFocus } from "@applicaster/zapp-react-native-utils/focusManager";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
+
+import {
+  cloneChildrenWithIds,
+  insertBetween,
+  unwrapDataProviderChild,
+  useFilterChildren,
+} from "../../utils";
+
+import type { ContainerProps, ContainerChildren } from "./types";
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
+
+const generateId = (cellUUID, suffixId) => `${cellUUID}--${suffixId}`;
+
+export function ButtonContainerView({
+  style,
+  children,
+  ...otherProps
+}: ContainerProps) {
+  const isRTL = useIsRTL();
+
+  const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
+  const filteredChildren = useFilterChildren<ContainerChildren>(children);
+
+  const buttonIds = filteredChildren.map((child) => {
+    const wrappedChild = unwrapDataProviderChild(child) as ContainerChildren;
+    const { cellUUID, suffixId } = wrappedChild.props;
+
+    return generateId(cellUUID, suffixId);
+  });
+
+  useInitialFocus(otherProps.state === "focused", R.head(buttonIds));
+
+  if (R.isEmpty(filteredChildren)) {
+    return null;
+  }
+
+  return (
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
+      {insertBetween(
+        (index) => (
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
+        ),
+        cloneChildrenWithIds(buttonIds, filteredChildren)
+      )}
+    </View>
+  );
+}

package/Components/MasterCell/DefaultComponents/{tv/ButtonContainerView/index.tsx → ButtonContainerView/index.tv.tsx}

@@ -1,20 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import * as R from "ramda";
-import { useFilterChildren, insertBetween } from "../../../utils";
-import type {
-  HorizontalSeparatorProps,
-  ContainerProps,
-  ContainerChildren,
-} from "./types";
+import { insertBetween, useFilterChildren } from "../../utils";
+import type { ContainerProps, ContainerChildren } from "./types";
 import {
   useIsRTL,
   applyRTLStylesIfNeeded,
 } from "@applicaster/zapp-react-native-utils/localizationUtils";
-
-const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
-  <View style={{ width }} />
-);
+import { HorizontalSeparator } from "./components/HorizontalSeparator";
 
 export function ButtonContainerView({
   style,
@@ -23,7 +16,6 @@ export function ButtonContainerView({
 }: ContainerProps) {
   const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
-
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
 
   if (R.isEmpty(filteredChildren)) {

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.web.ts

@@ -0,0 +1 @@
+export { ButtonContainerView } from "./index.tv";

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

@@ -0,0 +1,40 @@
+import { ReactElement, ReactNode } from "react";
+import { ViewStyle } from "react-native";
+
+export type ContainerChildProps = {
+  item: any;
+  pluginIdentifier: string;
+  cellUUID: string;
+  suffixId: string;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+};
+
+export type ContainerProps = Record<string, any> & {
+  buttonsToggleEnabled: boolean;
+  skipButtons: boolean;
+  style: ViewStyle;
+  contentStyle?: ViewStyle;
+  children: ContainerChildren[];
+};
+
+export type ButtonProps = Record<string, any> & {
+  style: ViewStyle;
+  children?: ReactNode;
+  item: any;
+  cellUUID: string;
+  groupId?: string;
+  suffixId: string;
+  normalStyles?: ViewStyle;
+  focusedStyles?: ViewStyle;
+  nextFocusLeft?: string;
+  nextFocusRight?: string;
+  pluginIdentifier: string;
+  disableFocus?: boolean;
+};
+
+export type HorizontalSeparatorProps = {
+  width: number;
+};
+
+export type ContainerChildren = ReactElement<ContainerChildProps>;

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

@@ -0,0 +1,163 @@
+import React from "react";
+import { View } from "react-native";
+
+type Props = Record<string, any> & {
+  children?: React.ReactNode;
+};
+
+/**
+ * Creates the provider payload from the resolved runtime props.
+ * `children` is structural and is therefore excluded. `_dataKey` is produced
+ * by `configInflater` from the data mapping propName and identifies the prop
+ * that carries the resolved entry value.
+ */
+const createDataProviderProps = ({ children: _children, ...props }: Props) => ({
+  _dataKey: props._dataKey,
+  [props._dataKey as string]: props[props._dataKey as string],
+});
+
+/**
+ * Merges provider values into an element's existing `dataProviderProps`
+ * without overwriting keys that were supplied explicitly.
+ */
+const mergeDataProviderProps = (
+  targetProps: Record<string, unknown>,
+  forwardedProps: Record<string, unknown>
+) => {
+  const dataProviderProps = Object.keys(forwardedProps).reduce(
+    (acc, key) => {
+      if (typeof acc[key] === "undefined") {
+        acc[key] = forwardedProps[key];
+      }
+
+      return acc;
+    },
+    { ...(targetProps.dataProviderProps as Record<string, unknown>) } as Record<
+      string,
+      unknown
+    >
+  );
+
+  return {
+    dataProviderProps: dataProviderProps,
+    ...(targetProps[dataProviderProps._dataKey as string] === undefined
+      ? {
+          [dataProviderProps._dataKey as string]:
+            forwardedProps[dataProviderProps._dataKey as string],
+        }
+      : {}),
+  };
+};
+
+/**
+ * Applies the provider props to the wrapped child's direct children only.
+ * The shallow stop is intentional: descendants below this level must receive
+ * data explicitly from their parent component instead of implicit propagation.
+ */
+const cloneSecondLevel = (
+  nodes: React.ReactNode,
+  forwardedProps: Record<string, unknown>
+) =>
+  React.Children.map(nodes, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type === View) {
+      return child;
+    }
+
+    return React.cloneElement(
+      child,
+      mergeDataProviderProps(
+        child.props as Record<string, unknown>,
+        forwardedProps
+      ) as never
+    );
+  });
+
+/**
+ * Specification:
+ * `DataProvider` bridges MasterCell node-tree `data` mappings into runtime
+ * React props for a shallow wrapped subtree under `dataProviderProps`.
+ *
+ * Purpose:
+ * Use `DataProvider` when a subtree root and that root's direct children must
+ * receive the same resolved runtime prop without propagating that prop deeper
+ * into the tree.
+ *
+ * Input contract:
+ * - `DataProvider` receives runtime props from normal MasterCell inflation.
+ * - The values under `dataProviderProps` are derived from the resolved props
+ *   it receives.
+ * - The inner keys are not hardcoded and may include `entry`, `item`, or any
+ *   other prop name produced by the node-tree `data` mapping.
+ *
+ * Forwarding contract:
+ * - inject the mapped value as a direct prop on the wrapped child
+ * - inject `dataProviderProps` into the wrapped child
+ * - inject both the direct prop and `dataProviderProps` into that child's
+ *   direct children
+ * - stop at that level
+ * - do not overwrite explicit keys that already exist inside
+ *   `dataProviderProps` on wrapped elements
+ *
+ * Non-forwarded props:
+ * - `children`
+ *
+ * Example:
+ *
+ * ```ts
+ * {
+ *   type: "DataProvider",
+ *   data: [
+ *     {
+ *       func: "identity",
+ *       args: [],
+ *       propName: "entry",
+ *     },
+ *   ],
+ *   elements: [
+ *     {
+ *       type: "ButtonContainerView",
+ *       elements: [Button({ ... })],
+ *     },
+ *   ],
+ * }
+ * ```
+ *
+ * Expected runtime result:
+ * - `ButtonContainerView` receives `entry` and `dataProviderProps.entry`
+ * - each direct `Button` child receives `entry` and `dataProviderProps.entry`
+ * - deeper descendants such as `Asset` or `TextLabel` do not receive
+ *   `entry` or `dataProviderProps.entry` unless their parent passes it
+ *   explicitly
+ */
+export const DataProvider = ({ children, ...props }: Props) => {
+  const forwardedProps = createDataProviderProps(props);
+
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
+        const injectedChildren = cloneSecondLevel(
+          child.props.children,
+          forwardedProps
+        );
+
+        return React.cloneElement(child, {
+          ...mergeDataProviderProps(
+            child.props as Record<string, unknown>,
+            forwardedProps
+          ),
+          ...(typeof injectedChildren !== "undefined"
+            ? { children: injectedChildren }
+            : {}),
+        });
+      })}
+    </>
+  );
+};