@applicaster/zapp-react-native-ui-components 15.0.0-rc.129 → 15.0.0-rc.131

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { TouchableOpacity } from "react-native";
+
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { masterCellLogger } from "../logger";
+import {
+  buildLegacySelection,
+  resolveIsActive,
+  resolveLabelText,
+} from "./mobile/MobileActionButtons/helpers";
+
+type ChildElementProps = {
+  children?: React.ReactNode;
+  mobileActionRole?: string;
+  state?: string;
+  [key: string]: unknown;
+};
+
+type Props = {
+  children?: React.ReactNode;
+  item: ZappEntry | ZappFeed;
+  action?: {
+    identifier?: string;
+  };
+  style?: Record<string, unknown>;
+  focusedStyles?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+};
+
+const isValidElement = (
+  child: React.ReactNode
+): child is React.ReactElement<ChildElementProps> =>
+  React.isValidElement(child);
+
+export function PressableView({
+  children,
+  item,
+  action,
+  style = {},
+  focusedStyles = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+}: Props) {
+  const actionContext = useActions(action?.identifier);
+
+  const actionDisabled =
+    typeof actionContext?.isActionAvailable === "function" &&
+    !actionContext.isActionAvailable(item);
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function" && !actionDisabled;
+
+  const [actionState, setActionState] = useState(() =>
+    supportsEntryState ? actionContext.initialEntryState(item) : null
+  );
+
+  useEffect(() => {
+    if (supportsEntryState) {
+      setActionState(actionContext.initialEntryState(item));
+    }
+  }, [supportsEntryState, item, actionContext]);
+
+  useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext.addListener(String(item?.id), (nextState) => {
+        setActionState(nextState);
+      });
+    }
+
+    if (typeof actionContext?.addListeners === "function") {
+      return actionContext.addListeners(({ entryState, entry }) => {
+        if (entry?.id === item?.id) {
+          setActionState(entryState);
+        }
+      });
+    }
+
+    return undefined;
+  }, [actionContext, item?.id]);
+
+  const legacySelected = useMemo(() => {
+    if (!actionContext || supportsEntryState) {
+      return false;
+    }
+
+    return buildLegacySelection(item, actionContext);
+  }, [actionContext, supportsEntryState, item]);
+
+  const isActive = resolveIsActive(actionState, legacySelected);
+
+  const labelText = supportsEntryState
+    ? resolveLabelText(actionState?.label)
+    : "";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState ? actionState?.asset : false
+  );
+
+  const shouldRenderLabel = Boolean(labelText);
+
+  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);
+
+      if (role === "asset" && !shouldRenderAsset) {
+        return null;
+      }
+
+      if (role === "label" && !shouldRenderLabel) {
+        return null;
+      }
+
+      if (
+        role === "label_container" &&
+        React.Children.count(nextChildren) === 0
+      ) {
+        return null;
+      }
+
+      const nextProps: Partial<ChildElementProps> = {};
+
+      if (role === "asset") {
+        nextProps.state = isActive ? "active" : "inactive";
+      }
+
+      if (role === "label") {
+        nextProps.state = isActive ? "focused" : "default";
+      }
+
+      if (nextChildren !== child.props.children) {
+        nextProps.children = nextChildren;
+      }
+
+      return React.cloneElement(child, nextProps);
+    });
+  };
+
+  const onPress = useCallback(async () => {
+    if (!actionContext) {
+      return;
+    }
+
+    if (supportsEntryState) {
+      return actionContext.invokeAction(item, {
+        updateState: setActionState,
+      });
+    }
+
+    const favouritesAction = legacySelected
+      ? actionContext.removeFavourite
+      : actionContext.addFavourite;
+
+    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
+
+    return toggleAction?.(item);
+  }, [actionContext, supportsEntryState, item, legacySelected]);
+
+  if (!actionContext) {
+    masterCellLogger.warning(
+      `You're missing an action plugin(${action?.identifier}) required by your mobile action button.`
+    );
+
+    return null;
+  }
+
+  if (actionDisabled) {
+    return null;
+  }
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID || `${item?.id}`}
+      accessibilityLabel={accessibilityLabel || `${item?.id}`}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={isActive ? { ...style, ...focusedStyles } : style}
+    >
+      {cloneChildrenWithState(children)}
+    </TouchableOpacity>
+  );
+}

package/Components/MasterCell/DefaultComponents/index.ts

@@ -16,12 +16,14 @@ import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,

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

@@ -0,0 +1,46 @@
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
+  if (!value(`${prefix}_asset_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Image",
+    style: {
+      width: toNumberWithDefaultZero(value(`${prefix}_asset_width`)),
+      height: toNumberWithDefaultZero(value(`${prefix}_asset_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_asset_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_asset_margin_left`)),
+      backgroundColor: "transparent",
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      source: {
+        context: actionIdentifier,
+      },
+      state: "inactive",
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};

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

@@ -0,0 +1,126 @@
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { Asset } from "./Asset";
+import { Spacer } from "./Spacer";
+import { TextLabelsContainer } from "./TextLabelsContainer";
+import { getContentDirection, getContentsAlignment } from "./helpers";
+
+const displayModeStyle = ({ value, prefix }) => {
+  const mode = value(`${prefix}_display_mode`) || "dynamic";
+
+  if (mode === "fixed") {
+    return {
+      width: toNumberWithDefault(140, value(`${prefix}_width`)),
+    };
+  }
+
+  if (mode === "fill") {
+    return {
+      flex: 1,
+    };
+  }
+
+  return {};
+};
+
+type Props = {
+  index: number;
+  value: Function;
+  stylePrefix: string;
+  specificPrefix: string;
+  spacingStyle: Record<string, unknown>;
+};
+
+export const Button = ({
+  index,
+  value,
+  stylePrefix,
+  specificPrefix,
+  spacingStyle,
+}: Props) => {
+  if (!value(`${specificPrefix}_button_enabled`)) {
+    return null;
+  }
+
+  const testID = `mobile_action_button_${index + 1}`;
+  const actionIdentifier = value(`${specificPrefix}_assign_action`);
+  const assetAlignment = value(`${stylePrefix}_asset_alignment`) || "left";
+
+  const contentsAlignment =
+    value(`${stylePrefix}_contents_alignment`) || "center";
+
+  return {
+    type: "PressableView",
+    style: {
+      flexDirection: getContentDirection(assetAlignment),
+      alignItems: "center",
+      justifyContent: getContentsAlignment(contentsAlignment),
+
+      marginTop: toNumberWithDefaultZero(value(`${stylePrefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${stylePrefix}_margin_left`)),
+
+      paddingTop: toNumberWithDefaultZero(value(`${stylePrefix}_padding_top`)),
+      paddingRight: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_right`)
+      ),
+      paddingBottom: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_bottom`)
+      ),
+      paddingLeft: toNumberWithDefaultZero(
+        value(`${stylePrefix}_padding_left`)
+      ),
+
+      borderWidth: toNumberWithDefaultZero(value(`${stylePrefix}_border_size`)),
+      borderRadius: toNumberWithDefaultZero(
+        value(`${stylePrefix}_corner_radius`)
+      ),
+      borderColor: value(`${stylePrefix}_border_color`),
+      backgroundColor: value(`${stylePrefix}_background_color`),
+
+      ...displayModeStyle({ value, prefix: stylePrefix }),
+      ...spacingStyle,
+    },
+    additionalProps: {
+      action: {
+        identifier: actionIdentifier,
+      },
+      focusedStyles: {
+        backgroundColor: value(`${stylePrefix}_focused_background_color`),
+        borderColor: value(`${stylePrefix}_focused_border_color`),
+      },
+      testID,
+    },
+    elements: compact([
+      Asset({
+        prefix: stylePrefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+      Spacer(),
+      TextLabelsContainer({
+        prefix: stylePrefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+    data: [
+      {
+        func: (x) => x,
+        args: [],
+        propName: "item",
+      },
+    ],
+  };
+};

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

@@ -0,0 +1,23 @@
+type Props = {
+  style: Record<string, unknown>;
+  contentStyle: Record<string, unknown>;
+  elements: Array<Record<string, unknown>>;
+};
+
+export const ButtonContainerView = ({
+  style,
+  contentStyle,
+  elements,
+}: Props) => {
+  return {
+    type: "View",
+    style,
+    elements: [
+      {
+        type: "View",
+        style: contentStyle,
+        elements,
+      },
+    ],
+  };
+};

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

@@ -0,0 +1,16 @@
+type Props = {
+  enabled?: boolean;
+};
+
+export const Spacer = ({ enabled = false }: Props = {}) => {
+  if (!enabled) {
+    return null;
+  }
+
+  return {
+    type: "View",
+    style: {
+      flex: 1,
+    },
+  };
+};

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

@@ -0,0 +1,67 @@
+import { Platform } from "react-native";
+
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabel = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  if (!value(`${prefix}_label_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Text",
+    style: {
+      color: value(`${prefix}_font_color`),
+      fontSize: toNumberWithDefaultZero(value(`${prefix}_font_size`)),
+      lineHeight: toNumberWithDefaultZero(value(`${prefix}_line_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_margin_top`)),
+      marginRight: toNumberWithDefaultZero(value(`${prefix}_margin_right`)),
+      marginBottom: toNumberWithDefaultZero(value(`${prefix}_margin_bottom`)),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_margin_left`)),
+      fontFamily:
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_font_family`)
+          : value(`${prefix}_android_font_family`),
+      letterSpacing: toNumberWithDefaultZero(
+        Platform.OS === "ios"
+          ? value(`${prefix}_ios_letter_spacing`)
+          : value(`${prefix}_android_letter_spacing`)
+      ),
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      label: {
+        context: actionIdentifier,
+        name: "label_1",
+      },
+      normalStyles: {
+        color: value(`${prefix}_font_color`),
+      },
+      focusedStyles: {
+        color: value(`${prefix}_focused_font_color`),
+      },
+      state: "default",
+      mobileActionRole: "label",
+      transformText: value(`${prefix}_text_transform`) || "default",
+      numberOfLines: value(`${prefix}_number_of_lines`),
+      testID: testID ? `${testID}-label` : undefined,
+    },
+  };
+};

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

@@ -0,0 +1,32 @@
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { TextLabel } from "./TextLabel";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const TextLabelsContainer = ({
+  prefix,
+  value,
+  actionIdentifier,
+  testID,
+}: Props) => {
+  return {
+    type: "View",
+    additionalProps: {
+      mobileActionRole: "label_container",
+    },
+    elements: compact([
+      TextLabel({
+        prefix,
+        value,
+        actionIdentifier,
+        testID,
+      }),
+    ]),
+  };
+};