@applicaster/zapp-react-native-ui-components 15.1.6-alpha.2015591222 → 15.1.6

package/Components/ModalComponent/__tests__/showTextInput.test.ts

@@ -1,95 +0,0 @@
-import {
-  actionExecutor,
-  ActionResult,
-} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
-import { TextInputContent } from "../TextInputContent";
-import { showTextInputAction } from "../showTextInput";
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor",
-  () => ({
-    actionExecutor: {
-      handleAction: jest.fn().mockResolvedValue("success"),
-    },
-    ActionResult: { Success: "success", Error: "error" },
-  })
-);
-
-jest.mock("../TextInputContent", () => ({
-  TextInputContent: function MockTextInputContent() {
-    return null;
-  },
-}));
-
-describe("showTextInputAction", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("delegates to openBottomSheet with TextInputContent as body-only component", async () => {
-    const action = {
-      type: "showTextInput",
-      options: {
-        headerTitle: "Create Playlist",
-        inputLabel: "Name your playlist",
-        defaultValue: "",
-        buttonLabel: "Create",
-        actions: [
-          {
-            type: "sendCloudEvent",
-            options: {
-              url: "https://example.com/events",
-              type: "com.applicaster.collection.create.v1",
-              data: {},
-            },
-          },
-          {
-            type: "showToast",
-            options: {
-              message: "Playlist created.",
-            },
-          },
-        ],
-      },
-    };
-
-    const result = await showTextInputAction(action as any);
-
-    expect(result).toBe(ActionResult.Success);
-    expect(actionExecutor.handleAction).toHaveBeenCalledTimes(1);
-
-    expect(actionExecutor.handleAction).toHaveBeenCalledWith(
-      {
-        type: "openBottomSheet",
-        options: {
-          header: {
-            title: "Create Playlist",
-          },
-          content: {
-            component: TextInputContent,
-            props: {
-              inputLabel: "Name your playlist",
-              defaultValue: "",
-              buttonLabel: "Create",
-              actions: action.options.actions,
-            },
-          },
-        },
-      },
-      undefined
-    );
-  });
-
-  it("returns Error when required options are missing", async () => {
-    const action = {
-      type: "showTextInput",
-      options: {
-        headerTitle: "Create Playlist",
-      },
-    };
-
-    const result = await showTextInputAction(action as any);
-    expect(result).toBe(ActionResult.Error);
-    expect(actionExecutor.handleAction).not.toHaveBeenCalled();
-  });
-});

package/Components/ModalComponent/presets/__tests__/getCell.test.ts

@@ -1,66 +0,0 @@
-import { getCell } from "../index";
-import { standardCell } from "../standardCell";
-import { selectableCell } from "../selectableCell";
-import { dynamicCollectionCell } from "../dynamicCollectionCell";
-import { mapMenuItemToPlaylistData } from "../../AudioPlayer/Components/Item";
-
-describe("getCell", () => {
-  it("returns selectable cell for collection_selector", () => {
-    expect(getCell("collection_selector")).toBe(selectableCell);
-  });
-
-  it("returns selectable cell for preference_editor", () => {
-    expect(getCell("preference_editor")).toBe(selectableCell);
-  });
-
-  it("returns standard cell when role is undefined", () => {
-    expect(getCell(undefined)).toBe(standardCell);
-  });
-
-  it("returns standard cell for unknown roles", () => {
-    expect(getCell("unknown_role")).toBe(standardCell);
-  });
-
-  it("returns the dynamic collection cell for dynamic_collection", () => {
-    expect(getCell("dynamic_collection")).toBe(dynamicCollectionCell);
-  });
-
-  it("does not use behavior to select the cell family", () => {
-    expect(getCell(undefined, { selectMode: "multi" })).toBe(standardCell);
-
-    expect(getCell("collection_selector", { selectMode: "single" })).toBe(
-      selectableCell
-    );
-  });
-});
-
-describe("mapMenuItemToPlaylistData", () => {
-  const item = {
-    title: "Playlist 1",
-    summary: "5 items",
-    icon: "https://example.com/icon.png",
-  };
-
-  it("defaults to multiSelect trailing button when selectMode is multi or undefined", () => {
-    const data1 = mapMenuItemToPlaylistData(item, { selectMode: "multi" });
-    expect(data1.trailingButton).toBe("multiSelect");
-
-    const data2 = mapMenuItemToPlaylistData(item);
-    expect(data2.trailingButton).toBe("multiSelect");
-  });
-
-  it("omits trailing button when behavior selectMode is none", () => {
-    const data = mapMenuItemToPlaylistData(item, { selectMode: "none" });
-    expect(data.trailingButton).toBeUndefined();
-  });
-
-  it("omits trailing button when item trailingButton is explicitly none", () => {
-    const itemWithNone = { ...item, trailingButton: "none" };
-
-    const data = mapMenuItemToPlaylistData(itemWithNone, {
-      selectMode: "multi",
-    });
-
-    expect(data.trailingButton).toBeUndefined();
-  });
-});

package/Components/ModalComponent/presets/dynamicCollectionCell.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import {
-  AudioPlayerTrackItem,
-  VARIANT_QUEUED_ITEM,
-  ItemData,
-} from "../AudioPlayer/Components/Item";
-import type { CellRenderer, RenderItemArgs } from "./types";
-import { MenuItem } from "@applicaster/zapp-react-native-utils/modalState";
-
-function mapMenuItemToDynamicData(
-  item: MenuItem,
-  operations: string[]
-): ItemData {
-  const hasRemove = operations.includes("remove");
-  const hasReorder = operations.includes("reorder");
-
-  const title =
-    typeof item?.title === "string"
-      ? item.title
-      : item?.title != null
-        ? String(item.title)
-        : "";
-
-  const summary =
-    typeof item?.summary === "string"
-      ? item.summary
-      : item?.summary != null
-        ? String(item.summary)
-        : "";
-
-  return {
-    imageUri: item?.icon,
-    textLabel1: title,
-    textLabel2: summary,
-    leadingButton: hasRemove ? "remove" : undefined,
-    trailingButton: hasReorder ? "drag" : undefined,
-    isSelected: item?.isSelected,
-  };
-}
-
-export const dynamicCollectionCell: CellRenderer = {
-  renderItem: ({
-    item,
-    index,
-    onPress,
-    context,
-    renderHandle,
-  }: RenderItemArgs) => {
-    const { editableCollection } = context;
-    const operations = editableCollection?.operations || [];
-
-    const handleRemove = () => {
-      if (editableCollection?.remove) {
-        editableCollection.remove(index);
-      }
-    };
-
-    const handleDrag = () => {
-      // Drag is managed by SortableList drag handle context
-    };
-
-    return (
-      <AudioPlayerTrackItem
-        key={index}
-        configuration={VARIANT_QUEUED_ITEM}
-        data={mapMenuItemToDynamicData(item, operations)}
-        onPress={() => onPress(item)}
-        onLeadingButtonPress={handleRemove}
-        onTrailingButtonPress={handleDrag}
-        renderHandle={renderHandle}
-      />
-    );
-  },
-};

package/Components/ModalComponent/presets/index.ts

@@ -1,27 +0,0 @@
-import type { SelectionBehavior } from "@applicaster/zapp-react-native-utils/modalState";
-import { selectableCell } from "./selectableCell";
-import { standardCell } from "./standardCell";
-import type { CellRenderer } from "./types";
-
-export type { CellRenderer, RenderItemArgs, SheetRenderContext } from "./types";
-
-export { standardCell } from "./standardCell";
-
-export { selectableCell } from "./selectableCell";
-
-import { dynamicCollectionCell } from "./dynamicCollectionCell";
-
-const SELECTION_ROLES = new Set(["collection_selector", "preference_editor"]);
-
-/**
- * Resolve the row cell from feed role (+ behavior for future config only).
- * Unknown / none -> standard Button cell.
- */
-export const getCell = (
-  role?: string,
-  _behavior?: SelectionBehavior
-): CellRenderer => {
-  if (role === "dynamic_collection") return dynamicCollectionCell;
-
-  return role && SELECTION_ROLES.has(role) ? selectableCell : standardCell;
-};

package/Components/ModalComponent/presets/selectableCell.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import {
-  AudioPlayerTrackItem,
-  mapMenuItemToPlaylistData,
-  VARIANT_PLAYLIST_ITEM,
-} from "../AudioPlayer/Components/Item";
-import type { CellRenderer } from "./types";
-
-export const selectableCell: CellRenderer = {
-  renderItem: ({ item, index, onPress, context }) => (
-    <AudioPlayerTrackItem
-      key={index}
-      configuration={VARIANT_PLAYLIST_ITEM}
-      data={mapMenuItemToPlaylistData(item, context?.behavior)}
-      onPress={() => onPress(item)}
-      onTrailingButtonPress={
-        item.secondaryAction?.action
-          ? () =>
-              onPress({
-                title: item.title,
-                action: item.secondaryAction!.action,
-              })
-          : undefined
-      }
-    />
-  ),
-};

package/Components/ModalComponent/presets/standardCell.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import type { CellRenderer } from "./types";
-
-export const standardCell: CellRenderer = {
-  renderItem: ({ item, index, onPress, context }) => {
-    if (!item) {
-      return null;
-    }
-
-    const {
-      theme,
-      ButtonComponent,
-      current_selection,
-      iconBaseProps,
-      itemBaseProps,
-      labelBaseProps,
-      getSelectedItemIcon,
-      getDefaultItemIcon,
-      iconPlacement,
-    } = context;
-
-    return (
-      <ButtonComponent
-        key={index}
-        configuration={theme}
-        selectedItem={current_selection}
-        item={item}
-        onPress={onPress}
-        label={
-          theme[(item as any)?.label] ?? ((item as any)?.label || item?.title)
-        }
-        iconBaseProps={iconBaseProps}
-        itemBaseProps={itemBaseProps}
-        labelBaseProps={labelBaseProps}
-        selectedItemIcon={getSelectedItemIcon(theme)}
-        defaultItemIcon={getDefaultItemIcon(theme)}
-        iconPlacement={iconPlacement}
-      />
-    );
-  },
-};

package/Components/ModalComponent/presets/types.ts

@@ -1,35 +0,0 @@
-import type React from "react";
-import type {
-  MenuItem,
-  SelectionBehavior,
-} from "@applicaster/zapp-react-native-utils/modalState";
-import type { EditableCollection } from "@applicaster/zapp-react-native-utils/modalState/EditableCollection";
-
-/**
- * Extra props row renderers need.
- */
-export type SheetRenderContext = {
-  theme: any;
-  ButtonComponent: React.ComponentType<any>;
-  current_selection?: any;
-  iconBaseProps: any;
-  itemBaseProps: any;
-  labelBaseProps: any;
-  getSelectedItemIcon: (theme: any) => any;
-  getDefaultItemIcon: (theme: any) => any;
-  iconPlacement?: "left" | "right";
-  editableCollection?: EditableCollection | null;
-  behavior?: SelectionBehavior;
-};
-
-export type RenderItemArgs = {
-  item: MenuItem;
-  index: number;
-  onPress: (item: MenuItem) => void;
-  context: SheetRenderContext;
-  renderHandle?: (children: React.ReactElement) => React.ReactElement;
-};
-
-export type CellRenderer = {
-  renderItem: (args: RenderItemArgs) => React.ReactNode;
-};

package/Components/ModalComponent/showTextInput.ts

@@ -1,43 +0,0 @@
-import {
-  actionExecutor,
-  ActionResult,
-} from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
-import { TextInputContent } from "./TextInputContent";
-
-/**
- * Opens a text-input bottom sheet driven by action.options.
- * Uses openBottomSheet with content.component as body-only UI;
- * standard ModalHeader (dismiss x) is provided by ModalComponent.
- */
-export async function showTextInputAction(
-  action: ActionType,
-  context?: Record<string, any>
-): Promise<ActionResult> {
-  const { headerTitle, inputLabel, defaultValue, buttonLabel, actions } =
-    action.options || {};
-
-  if (!headerTitle || !buttonLabel || !actions || !actions.length) {
-    return ActionResult.Error;
-  }
-
-  return actionExecutor.handleAction(
-    {
-      type: "openBottomSheet",
-      options: {
-        header: {
-          title: headerTitle,
-        },
-        content: {
-          component: TextInputContent,
-          props: {
-            inputLabel,
-            defaultValue: defaultValue ?? "",
-            buttonLabel,
-            actions,
-          },
-        },
-      },
-    },
-    context
-  );
-}

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -1,112 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  hidden?: boolean;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const NOTIF_DURATION = 4500;
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    bottom: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingBottom: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-export const NotificationView = (props: Props) => {
-  const { children, hidden, dismiss, previousOnline, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [open, setOpen] = React.useState<boolean | null>(null);
-
-  const timeout = React.useRef<NodeJS.Timeout>();
-  const wentOnline = !previousOnline && props.online;
-
-  const onClose = () => {
-    setOpen(false);
-    dismiss();
-  };
-
-  const closeNotification = () => {
-    clearTimeout(timeout.current as NodeJS.Timeout);
-
-    timeout.current = setTimeout(() => {
-      setOpen(false);
-    }, NOTIF_DURATION);
-  };
-
-  const openNotification = () => {
-    if (!open && !hidden) {
-      setOpen(true);
-    }
-  };
-
-  const handleNotificationChange = () => {
-    if (open !== null) {
-      openNotification();
-    }
-
-    closeNotification();
-  };
-
-  React.useEffect(() => {
-    handleNotificationChange();
-  }, [hidden, online]);
-
-  const showOnlineMsg = wentOnline || online;
-
-  const MSG = showOnlineMsg
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const EXTRA_MSG = showOnlineMsg
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {open ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{MSG}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { useNetworkStatusLocalizations } from "./utils";
-
-type Props = {
-  children?: React.ReactNode;
-  online?: boolean;
-  previousOnline?: boolean;
-  dismiss: () => void;
-};
-
-const DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE = 4500; // ms
-
-const styles: Record<any, React.CSSProperties> = {
-  body: {
-    position: "absolute",
-    top: 0,
-    width: 1920,
-    height: 200,
-    background:
-      "linear-gradient(180deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,1) 49%, rgba(0,0,0,0.85) 100%)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "column",
-    color: "#fff",
-    paddingTop: 15,
-  },
-  title: {
-    fontSize: 28,
-    margin: 0,
-    padding: 0,
-  },
-  subtitle: {
-    fontSize: 20,
-    margin: 0,
-    padding: 0,
-  },
-};
-
-let timer: NodeJS.Timeout;
-
-export const NotificationView = (props: Props) => {
-  const { children, dismiss, previousOnline = true, online } = props;
-
-  const theme = useTheme<BaseThemePropertiesTV>();
-  const storedLocalizations = useNetworkStatusLocalizations();
-
-  const [shown, setShown] = React.useState<boolean>(false);
-
-  const onClose = () => {
-    setShown(false);
-    dismiss();
-  };
-
-  React.useEffect(() => {
-    if (previousOnline && online) {
-      return;
-    }
-
-    if (!previousOnline && !online) {
-      return;
-    }
-
-    if (previousOnline && !online) {
-      // went to offline
-      clearTimeout(timer);
-      setShown(true);
-    }
-
-    if (!previousOnline && online) {
-      // back to online
-      setShown(true);
-
-      timer = setTimeout(() => {
-        setShown(false);
-      }, DURATION_TO_HIDE_AFTER_BACK_TO_ONLINE);
-    }
-  }, [online, previousOnline]);
-
-  const title = online
-    ? (theme?.online_notification_title ??
-      storedLocalizations?.online_notification_title)
-    : (theme?.offline_notification_title ??
-      storedLocalizations?.offline_notification_title);
-
-  const subtitle = online
-    ? (theme?.online_notification_subtitle ??
-      storedLocalizations?.online_notification_subtitle)
-    : (theme?.offline_notification_subtitle ??
-      storedLocalizations?.offline_notification_subtitle);
-
-  return (
-    <div onClick={onClose}>
-      {children}
-      {shown ? (
-        <div style={styles.body}>
-          <div style={styles.title}>
-            <h2>{title}</h2>
-          </div>
-
-          <h4 style={styles.subtitle}>{subtitle}</h4>
-        </div>
-      ) : null}
-    </div>
-  );
-};