@applicaster/zapp-react-native-ui-components 16.0.0-rc.56 → 16.0.0-rc.58

package/Components/ModalComponent/index.tsx

@@ -1,7 +1,18 @@
 import React, { useCallback, useState } from "react";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
 
 import { BasicMeasurementsPortal as MeasurementsPortal } from "@applicaster/zapp-react-native-ui-components/Components/MeasurmentsPortal";
 import { BottomSheetModalContent } from "./BottomSheetModalContent";
+import { showTextInputAction } from "./showTextInput";
+
+actionExecutor.registerAction("showTextInput", showTextInputAction);
+
+export { SortableList, type SortableListProps } from "./SortableList";
+
+export {
+  TextInputContent,
+  type TextInputContentProps,
+} from "./TextInputContent";
 
 export type PluginConfiguration = {
   [key: string]: any;

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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  AudioPlayerTrackItem,
+  VARIANT_QUEUED_ITEM,
+  ItemData,
+} from "../AudioPlayer/Components/Item";
+import type { CellRenderer, RenderItemArgs } from "./types";
+import {
+  MenuItem,
+  OPERATIONS,
+  hasOperation,
+} from "@applicaster/zapp-react-native-utils/modalState";
+
+function mapMenuItemToDynamicData(
+  item: MenuItem,
+  operations: string[]
+): ItemData {
+  const hasRemove = hasOperation(operations, OPERATIONS.REMOVE);
+  const hasReorder = hasOperation(operations, OPERATIONS.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={item.id}
+        configuration={VARIANT_QUEUED_ITEM}
+        data={mapMenuItemToDynamicData(item, operations)}
+        onPress={() => onPress(item)}
+        onLeadingButtonPress={handleRemove}
+        onTrailingButtonPress={handleDrag}
+        renderHandle={renderHandle}
+      />
+    );
+  },
+};

package/Components/ModalComponent/presets/index.ts

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,28 @@
+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, onPress, context }) => (
+    <AudioPlayerTrackItem
+      key={item.id}
+      configuration={VARIANT_PLAYLIST_ITEM}
+      data={mapMenuItemToPlaylistData(item, context?.behavior)}
+      onPress={() => onPress(item)}
+      onTrailingButtonPress={
+        item.secondaryAction?.action
+          ? () =>
+              onPress({
+                id: `${item.id}_secondary`,
+                title: item.title,
+                action: item.secondaryAction!.action,
+              })
+          : undefined
+      }
+    />
+  ),
+};

package/Components/ModalComponent/presets/standardCell.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import type { CellRenderer } from "./types";
+
+export const standardCell: CellRenderer = {
+  renderItem: ({ item, onPress, context }) => {
+    if (!item) {
+      return null;
+    }
+
+    const {
+      theme,
+      ButtonComponent,
+      current_selection,
+      iconBaseProps,
+      itemBaseProps,
+      labelBaseProps,
+      getSelectedItemIcon,
+      getDefaultItemIcon,
+      iconPlacement,
+    } = context;
+
+    return (
+      <ButtonComponent
+        key={item.id}
+        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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,43 @@
+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/ModalComponent/utils.ts

@@ -1,4 +1,8 @@
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { PluginConfiguration } from "./";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemLabelProps } from "./Button/ItemLabel";
@@ -6,7 +10,8 @@ import { ItemProps } from "./Button/Item";
 
 export function defaultItemProps(
   config: PluginConfiguration,
-  maxWidth: number
+  maxWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemProps {
   const {
     modal_bottom_sheet_item_background_color,
@@ -24,19 +29,31 @@ export function defaultItemProps(
     modal_bottom_sheet_item_padding_top,
   } = config;
 
+  const bgDefault = blockItemStyle?.background?.default;
+
   return {
-    backgroundColor: modal_bottom_sheet_item_background_color,
+    backgroundColor:
+      bgDefault?.backgroundColor || modal_bottom_sheet_item_background_color,
     focusedBackgroundColor: modal_bottom_sheet_item_focus_background_color,
     selectedBackgroundColor: modal_bottom_sheet_item_selected_background_color,
     focusedSelectedBackgroundColor:
       modal_bottom_sheet_item_focused_selected_background_color,
-    borderRadius: modal_bottom_sheet_item_corner_radius,
+    borderRadius: toNumberWithDefault(
+      modal_bottom_sheet_item_corner_radius,
+      bgDefault?.borderRadius
+    ),
     marginBottom: modal_bottom_sheet_item_margin_bottom,
     marginTop: modal_bottom_sheet_item_margin_top,
     marginLeft: modal_bottom_sheet_item_margin_left,
     marginRight: modal_bottom_sheet_item_margin_right,
-    paddingTop: modal_bottom_sheet_item_padding_top,
-    paddingBottom: modal_bottom_sheet_item_padding_bottom,
+    paddingTop: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_top,
+      bgDefault?.paddingTop
+    ),
+    paddingBottom: toNumberWithDefault(
+      modal_bottom_sheet_item_padding_bottom,
+      bgDefault?.paddingBottom
+    ),
     paddingRight: modal_bottom_sheet_item_padding_right,
     paddingLeft: modal_bottom_sheet_item_padding_left,
     maxWidth,
@@ -45,7 +62,8 @@ export function defaultItemProps(
 
 export function defaultItemLabelProps(
   config: PluginConfiguration,
-  sheetWidth: number
+  sheetWidth: number,
+  blockItemStyle?: Record<string, any>
 ): ItemLabelProps {
   const {
     modal_bottom_sheet_item_label_android_letter_spacing,
@@ -72,15 +90,48 @@ export function defaultItemLabelProps(
     modal_bottom_sheet_item_padding_right,
   } = config;
 
-  const maxWidth =
+  const iconWidth = toNumberWithDefaultZero(modal_bottom_sheet_item_icon_width);
+
+  const iconMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_left
+  );
+
+  const iconMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_icon_margin_right
+  );
+
+  const itemMarginLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_left
+  );
+
+  const itemMarginRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_margin_right
+  );
+
+  const itemPaddingLeft = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_left
+  );
+
+  const itemPaddingRight = toNumberWithDefaultZero(
+    modal_bottom_sheet_item_padding_right
+  );
+
+  const calculatedMaxWidth =
     sheetWidth -
-    (modal_bottom_sheet_item_icon_width +
-      modal_bottom_sheet_item_icon_margin_left +
-      modal_bottom_sheet_item_icon_margin_right +
-      modal_bottom_sheet_item_margin_left +
-      modal_bottom_sheet_item_margin_right +
-      modal_bottom_sheet_item_padding_left +
-      modal_bottom_sheet_item_padding_right);
+    (iconWidth +
+      iconMarginLeft +
+      iconMarginRight +
+      itemMarginLeft +
+      itemMarginRight +
+      itemPaddingLeft +
+      itemPaddingRight);
+
+  const maxWidth =
+    Number.isNaN(calculatedMaxWidth) || calculatedMaxWidth <= 0
+      ? sheetWidth
+      : calculatedMaxWidth;
+
+  const label1Default = blockItemStyle?.textLabel1?.default;
 
   return {
     fontFamily: platformSelect({
@@ -91,8 +142,11 @@ export function defaultItemLabelProps(
       ios: modal_bottom_sheet_item_label_ios_letter_spacing,
       android: modal_bottom_sheet_item_label_android_letter_spacing,
     }),
-    fontSize: modal_bottom_sheet_item_label_font_size,
-    color: modal_bottom_sheet_item_label_font_color,
+    fontSize: toNumberWithDefault(
+      modal_bottom_sheet_item_label_font_size,
+      label1Default?.fontSize
+    ),
+    color: label1Default?.fontColor || modal_bottom_sheet_item_label_font_color,
     focusColor: modal_bottom_sheet_item_label_focus_font_color,
     hoverSelectedColor: modal_bottom_sheet_item_label_hover_selected_font_color,
     selectedColor: modal_bottom_sheet_item_label_selected_font_color,
@@ -146,7 +200,8 @@ export function getItemLabelProps(
   width: number,
   labelProps?:
     | ((theme: PluginConfiguration, width: number) => ItemLabelProps)
-    | ItemLabelProps
+    | ItemLabelProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (labelProps) {
     return typeof labelProps === "function"
@@ -154,7 +209,7 @@ export function getItemLabelProps(
       : labelProps;
   }
 
-  return defaultItemLabelProps(theme, width);
+  return defaultItemLabelProps(theme, width, blockItemStyle);
 }
 
 export function getItemProps(
@@ -162,7 +217,8 @@ export function getItemProps(
   width: number,
   itemProps?:
     | ((theme: PluginConfiguration, width: number) => ItemProps)
-    | ItemProps
+    | ItemProps,
+  blockItemStyle?: Record<string, any>
 ) {
   if (itemProps) {
     return typeof itemProps === "function"
@@ -170,5 +226,5 @@ export function getItemProps(
       : itemProps;
   }
 
-  return defaultItemProps(theme, width);
+  return defaultItemProps(theme, width, blockItemStyle);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.56",
+  "version": "16.0.0-rc.58",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,12 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.56",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.56",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.56",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.56",
+    "@applicaster/applicaster-types": "16.0.0-rc.58",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.58",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.58",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.58",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
+    "react-native-sortables": "1.7.1",
     "url": "^0.11.0",
     "uuid": "^3.3.2"
   },