@applicaster/zapp-react-native-ui-components 15.1.14 → 15.1.15-rc.0

package/Components/GeneralContentScreen/GeneralContentScreenHookAdapter.tsx

@@ -11,6 +11,20 @@ type HookComponentProps = HookPluginProps & {
 function GeneralContentScreenHookComponent(props: HookComponentProps) {
   const { hookPlugin, focused, parentFocus } = props;
 
+  const componentsMapExtraPropsMemo = React.useMemo(
+    () => ({
+      safeArea: {
+        edges: {
+          top: "additive",
+          bottom: "additive",
+          left: "off",
+          right: "off",
+        },
+      },
+    }),
+    []
+  );
+
   if (!hookPlugin?.screen_id) {
     log_error(
       "GeneralContentScreenHookAdapter: This component should only be used as a hook, but no hookPlugin was provided."
@@ -26,6 +40,7 @@ function GeneralContentScreenHookComponent(props: HookComponentProps) {
         isScreenWrappedInContainer={false}
         focused={focused}
         parentFocus={parentFocus}
+        componentsMapExtraProps={componentsMapExtraPropsMemo}
       />
     </HookContentFocusGroup>
   );

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -54,6 +55,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -78,8 +80,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  isActionAvailableFor,
+  RegisteredAction,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { Button } from "../Button";
+
+export type ActionButtonProps = {
+  entry: ZappEntry;
+  item: RegisteredAction;
+  configuration: any;
+  width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+type Props = ActionButtonProps & {
+  onPress?: (item: any) => void;
+};
+
+/**
+ * Unified action button for the modal bottom sheet.
+ *
+ * Every item is a `RegisteredAction` resolved from the registry (entry actions,
+ * registry actions and legacy context-provider actions alike), so the button
+ * simply reads `item.action` and drives it through `useEntryActionState`
+ * (backed by the action's observable / `addListener`).
+ */
+export function ActionButton(props: Props) {
+  const { item, entry, onPress: onItemPress, component } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
+      });
+    },
+    [invokeAction, item, onItemPress, component]
+  );
+
+  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
+
+  return (
+    <Button {...props} item={state} onPress={onPress} label={state?.label} />
+  );
+}
+
+// Explicitly set display name for the component
+ActionButton.displayName = "ActionButton";

package/Components/ModalComponent/ActionsBottomSheet/__tests__/openActionsBottomSheet.test.ts

@@ -0,0 +1,38 @@
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { boundActionButton } from "../boundActionButton";
+import { openActionsBottomSheet } from "../openActionsBottomSheet";
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../boundActionButton", () => ({
+  boundActionButton: jest.fn(() => jest.fn()),
+}));
+
+describe("openActionsBottomSheet", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("binds the List component into the sheet row button", () => {
+    const entry = { id: "entry-1" } as ZappEntry;
+
+    const component = {
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actions = [
+      { identifier: "entry_action_0", action: { invokeAction: jest.fn() } },
+    ];
+
+    openActionsBottomSheet({
+      entry,
+      actions: actions as any,
+      component: component as any,
+    });
+
+    expect(boundActionButton).toHaveBeenCalledWith(entry, component);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ActionButton, ActionButtonProps } from "./ActionButton";
+
+/**
+ * Binds an entry to the sheet's row button.
+ *
+ * `BottomSheetModalContent` renders `buttonComponent` per item and does not
+ * know about entries, so the entry is closed over here instead.
+ */
+export const boundActionButton = (
+  entry: ZappEntry | ZappFeed,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
+  );
+
+  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
+
+  return ActionButtonWithEntry;
+};
+
+boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -0,0 +1,9 @@
+export { ActionButton } from "./ActionButton";
+
+export type { ActionButtonProps } from "./ActionButton";
+
+export { boundActionButton } from "./boundActionButton";
+
+export { openActionsBottomSheet } from "./openActionsBottomSheet";
+
+export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -0,0 +1,61 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { boundActionButton } from "./boundActionButton";
+
+const { log_warning } = createLogger({
+  subsystem: "ActionsBottomSheet",
+  category: "Presentation",
+});
+
+export type OpenActionsBottomSheetArgs = {
+  /** Entry the actions act on; bound into every row button. */
+  entry: ZappEntry | ZappFeed;
+  /** Already resolved and merged actions, in the order they should appear. */
+  actions: RegisteredAction[];
+  title?: string;
+  summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+/**
+ * Presents a list of resolved actions in the shared bottom sheet.
+ *
+ * This is the core entry point for "show these actions in a sheet": the
+ * open-modal-bottom-sheet plugin uses it for its configured list, and the
+ * player overflow uses it for the actions that did not fit on the overlay.
+ * Neither has to know about the other, and neither needs the plugin installed.
+ */
+export function openActionsBottomSheet({
+  entry,
+  actions,
+  title,
+  summary,
+  component,
+}: OpenActionsBottomSheetArgs): void {
+  if (!actions?.length) {
+    // Every action resolved away - unavailable for this entry, or not
+    // invokable. An empty sheet looks broken, so say why and stay put.
+    log_warning(
+      "openActionsBottomSheet: nothing to present - not opening the sheet",
+      { entryId: (entry as ZappEntry)?.id }
+    );
+
+    return;
+  }
+
+  openBottomSheetModal({
+    modalBottomSheetContentProps: {
+      // TODO: should be optional - the button handles its own tap, but
+      //  BottomSheetModalContent still requires an onPress.
+      onPress: noop,
+      items: actions,
+      buttonComponent: boundActionButton(entry, component),
+      title,
+      summary,
+    },
+  });
+}

package/Components/ModalComponent/AudioPlayer/Components/Button.tsx

@@ -9,7 +9,14 @@
  */
 
 import React from "react";
-import { Image, Platform, StyleSheet, Text, View } from "react-native";
+import {
+  Image,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 
 const styles = StyleSheet.create({
   container: {
@@ -25,24 +32,6 @@ const styles = StyleSheet.create({
   title: {
     textAlign: "center",
   },
-  demoScreen: {
-    flex: 1,
-    backgroundColor: "#1C1C1E",
-    paddingTop: 64,
-    paddingHorizontal: 24,
-    gap: 12,
-  },
-  demoHeading: {
-    color: "#FFFFFF",
-    fontSize: 20,
-    fontWeight: "600",
-    marginBottom: 8,
-  },
-  demoLabel: {
-    color: "#999999",
-    fontSize: 13,
-    marginTop: 8,
-  },
 });
 
 // ---------------------------------------------------------------------------
@@ -92,6 +81,8 @@ export type LeadingIconConfiguration = {
   enabled: boolean;
   /** Decides which icon will be displayed when enabled */
   actionType?: ButtonActionType;
+  /** Optional Studio / modal-blocks asset URI (overrides actionType mapping) */
+  asset?: string;
 };
 
 export type IconsConfiguration = {
@@ -148,11 +139,12 @@ export type ButtonData = {
   disabled?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerButtonProps = {
   configuration: ButtonConfiguration;
   data: ButtonData;
   disabled?: boolean;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -170,7 +162,7 @@ const ACTION_ICON_ASSETS: Record<ButtonActionType, string> = {
   confirm:
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJElEQVR42mNgGAWjYBSQCv4TwKMWDHELho/hNE/3o2AUDDcAAPv0QMAyy1CtAAAAAElFTkSuQmCC",
   cancel:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAUjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAASElEQVR42mNgGAWjGvynkVoUTf+pqA6nxv8UqiHbEooNx2cQ1QzHZiDVDcdlCcOQsoCmQUTTSKZpMqV5RqNLUUHTwm4UDBMAALBLQ73LTvoyAAAAAElFTkSuQmCC",
 };
 
 function getTextTransformStyle(
@@ -180,7 +172,9 @@ function getTextTransformStyle(
 }
 
 function shouldShowLeadingIcon(leadingIcon: LeadingIconConfiguration) {
-  return leadingIcon.enabled && !!leadingIcon.actionType;
+  return (
+    leadingIcon.enabled && (!!leadingIcon.actionType || !!leadingIcon.asset)
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -192,6 +186,7 @@ type ButtonContainerProps = {
   disabled: boolean;
   configuration: BackgroundConfiguration;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ButtonContainer({
@@ -199,19 +194,22 @@ function ButtonContainer({
   disabled,
   configuration,
   children,
+  onPress,
 }: ButtonContainerProps) {
-  const backgroundColor = disabled
+  const defaultBgColor = disabled
     ? configuration.inactiveColor
     : focused
       ? configuration.focusedColor
       : configuration.defaultColor;
 
   return (
-    <View
-      style={[
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      style={({ pressed }) => [
         styles.container,
         {
-          backgroundColor,
+          backgroundColor:
+            pressed && !disabled ? configuration.focusedColor : defaultBgColor,
           borderRadius: configuration.cornerRadius,
           paddingTop: configuration.paddingTop,
           paddingRight: configuration.paddingRight,
@@ -221,7 +219,7 @@ function ButtonContainer({
       ]}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -274,7 +272,7 @@ function ButtonTitle({
 }
 
 type ButtonLeadingIconProps = {
-  actionType: ButtonActionType;
+  actionType?: ButtonActionType;
   configuration: IconsConfiguration;
 };
 
@@ -282,9 +280,17 @@ function ButtonLeadingIcon({
   actionType,
   configuration,
 }: ButtonLeadingIconProps) {
+  const asset =
+    configuration.leadingIcon.asset ||
+    (actionType ? ACTION_ICON_ASSETS[actionType] : undefined);
+
+  if (!asset) {
+    return null;
+  }
+
   return (
     <Image
-      source={{ uri: ACTION_ICON_ASSETS[actionType] }}
+      source={{ uri: asset }}
       style={{
         width: configuration.width,
         height: configuration.height,
@@ -295,20 +301,32 @@ function ButtonLeadingIcon({
 }
 
 // ---------------------------------------------------------------------------
-// Item — single building block driven by configuration + data
+// AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
-export function Item({
+import { useModalBlocksStyle } from "../../ModalBlocksStyleContext";
+import { mergeButtonConfiguration } from "../utils/mergeStyles";
+
+export function AudioPlayerButton({
   configuration,
   data,
   disabled,
   focused = false,
-}: ItemProps) {
+  onPress,
+}: AudioPlayerButtonProps) {
+  const modalBlocksStyle = useModalBlocksStyle();
+  const buttonBlock = modalBlocksStyle?.button;
+  const actionBlock = modalBlocksStyle?.action;
+
+  const effectiveConfig = React.useMemo(() => {
+    return mergeButtonConfiguration(configuration, buttonBlock, actionBlock);
+  }, [configuration, buttonBlock, actionBlock]);
+
   const {
-    background: backgroundConfiguration,
-    title: titleConfiguration,
+    background: effectiveBgConfig,
+    title: effectiveTitleConfig,
     icons: iconsConfiguration,
-  } = configuration;
+  } = effectiveConfig;
 
   const { title } = data;
   const isDisabled = disabled ?? data.disabled ?? false;
@@ -320,7 +338,8 @@ export function Item({
     <ButtonContainer
       focused={focused}
       disabled={isDisabled}
-      configuration={backgroundConfiguration}
+      configuration={effectiveBgConfig}
+      onPress={onPress}
     >
       <View style={styles.contentRow}>
         {showIcon ? (
@@ -329,14 +348,14 @@ export function Item({
               actionType={leadingIcon.actionType}
               configuration={iconsConfiguration}
             />
-            <View style={{ width: backgroundConfiguration.horizontalGutter }} />
+            <View style={{ width: effectiveBgConfig.horizontalGutter }} />
           </>
         ) : null}
         <ButtonTitle
           title={title}
           focused={focused}
           disabled={isDisabled}
-          configuration={titleConfiguration}
+          configuration={effectiveTitleConfig}
         />
       </View>
     </ButtonContainer>
@@ -344,7 +363,7 @@ export function Item({
 }
 
 // ---------------------------------------------------------------------------
-// Snack demo — two Button variants from configuration only
+// Variant configurations
 // ---------------------------------------------------------------------------
 
 export const VARIANT_TEXT_ONLY: ButtonConfiguration = {
@@ -364,61 +383,3 @@ export const VARIANT_WITH_ICON: ButtonConfiguration = {
     },
   },
 };
-
-export const VARIANT_UPPERCASE_TITLE: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: {
-    ...DEFAULT_TITLE_CONFIGURATION,
-    textTransform: "uppercase",
-  },
-  icons: DEFAULT_ICONS_CONFIGURATION,
-};
-
-export const VARIANT_LARGE_ICON: ButtonConfiguration = {
-  background: DEFAULT_BACKGROUND_CONFIGURATION,
-  title: DEFAULT_TITLE_CONFIGURATION,
-  icons: {
-    width: 32,
-    height: 32,
-    leadingIcon: {
-      enabled: true,
-      actionType: "addToQueue",
-    },
-  },
-};
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Button Building Block</Text>
-
-      <Text style={styles.demoLabel}>Variant 1 — Text only (confirmation)</Text>
-      <Item configuration={VARIANT_TEXT_ONLY} data={{ title: "Confirm" }} />
-
-      <Text style={styles.demoLabel}>Variant 2 — Leading icon + text</Text>
-      <Item
-        configuration={VARIANT_WITH_ICON}
-        data={{ title: "Add To Playlist" }}
-      />
-
-      <Text style={styles.demoLabel}>Inactive state</Text>
-      <Item
-        configuration={VARIANT_TEXT_ONLY}
-        data={{ title: "Unavailable" }}
-        disabled
-      />
-
-      <Text style={styles.demoLabel}>Custom title config — uppercase</Text>
-      <Item
-        configuration={VARIANT_UPPERCASE_TITLE}
-        data={{ title: "Save Changes" }}
-      />
-
-      <Text style={styles.demoLabel}>Custom icons config — 32×32</Text>
-      <Item
-        configuration={VARIANT_LARGE_ICON}
-        data={{ title: "Add To Queue" }}
-      />
-    </View>
-  );
-}