@applicaster/zapp-react-native-ui-components 16.0.0-alpha.2851031376 → 16.0.0-alpha.2963644197

package/Components/ModalComponent/Header/__tests__/CloseButton.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { CloseButton, CloseButtonProps } from "../CloseButton";
+
+jest.mock("@applicaster/zapp-react-native-ui-components/Components", () => {
+  const { Image } = require("react-native");
+
+  return { QBImage: Image };
+});
+
+const mockGetButtonA11yProps = jest.fn(() => ({
+  accessible: true,
+  accessibilityLabel: "Close",
+  accessibilityHint: "Closes the sheet",
+  accessibilityRole: "button",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager",
+  () => ({
+    AccessibilityManager: {
+      getInstance: () => ({
+        getButtonAccessibilityProps: mockGetButtonA11yProps,
+      }),
+    },
+  })
+);
+
+const baseProps: CloseButtonProps = {
+  enabled: true,
+  close: jest.fn(),
+  asset: "close.png",
+  assetFocused: "close_focused.png",
+  height: 24,
+  width: 24,
+  marginTop: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+};
+
+describe("ModalComponent Header CloseButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders as an accessible button reachable by screen readers", () => {
+    render(<CloseButton {...baseProps} />);
+
+    const button = screen.getByTestId("closeButton");
+
+    expect(button.props.accessible).toBe(true);
+    expect(button.props.accessibilityRole).toBe("button");
+    expect(button.props.accessibilityLabel).toBe("Close");
+    expect(mockGetButtonA11yProps).toHaveBeenCalledWith("close");
+  });
+
+  it("invokes close on press", () => {
+    const close = jest.fn();
+    render(<CloseButton {...baseProps} close={close} />);
+
+    fireEvent.press(screen.getByTestId("closeButton"));
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when disabled", () => {
+    render(<CloseButton {...baseProps} enabled={false} />);
+
+    expect(screen.queryByTestId("closeButton")).toBeNull();
+  });
+});

package/Components/ModalComponent/Header/index.tsx

@@ -4,6 +4,7 @@ import { Title, TitleProps } from "./Title";
 import { CloseButton, CloseButtonProps } from "./CloseButton";
 import { getCloseButtonProps, getTitleProps } from "./utils";
 import { PluginConfiguration } from "../index";
+import { useModalBlocksStyle } from "../ModalBlocksStyleContext";
 
 type Props = {
   dismiss: () => void;
@@ -28,6 +29,14 @@ const styles = StyleSheet.create({
 
 export function ModalHeader(props: Props) {
   const { configuration, dismiss, onLayout, summary, title } = props;
+  const modalBlocksStyle = useModalBlocksStyle();
+  const headerBlock = modalBlocksStyle?.header;
+
+  const containerStyle = useMemo(() => {
+    const bg = headerBlock?.container?.default?.backgroundColor;
+
+    return [styles.container, bg ? { backgroundColor: bg } : null];
+  }, [headerBlock?.container?.default?.backgroundColor]);
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -37,13 +46,17 @@ export function ModalHeader(props: Props) {
     [configuration, dismiss]
   );
 
-  const titleProps = useMemo<TitleProps>(
-    () => ({
-      ...getTitleProps(configuration, "title"),
+  const titleProps = useMemo<TitleProps>(() => {
+    const baseProps = getTitleProps(configuration, "title");
+    const titleOverride = headerBlock?.title?.default;
+
+    return {
+      ...baseProps,
       text: title,
-    }),
-    [configuration, title]
-  );
+      ...(titleOverride?.fontColor ? { color: titleOverride.fontColor } : {}),
+      ...(titleOverride?.fontSize ? { fontSize: titleOverride.fontSize } : {}),
+    };
+  }, [configuration, title, headerBlock?.title?.default]);
 
   const summaryProps = useMemo<TitleProps>(
     () => ({
@@ -59,7 +72,7 @@ export function ModalHeader(props: Props) {
     configuration.modal_bottom_sheet_close_margin_right;
 
   return (
-    <View onLayout={onLayout} style={styles.container}>
+    <View onLayout={onLayout} style={containerStyle}>
       <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}

package/Components/ModalComponent/Header/utils.ts

@@ -18,7 +18,7 @@ export function getCloseButtonProps(config: PluginConfiguration) {
   return {
     asset: modal_bottom_sheet_close_asset,
     assetFocused: modal_bottom_sheet_close_focus_asset,
-    enabled: modal_bottom_sheet_close_switch,
+    enabled: modal_bottom_sheet_close_switch !== false,
     width: modal_bottom_sheet_close_width,
     height: modal_bottom_sheet_close_height,
     marginTop: modal_bottom_sheet_close_margin_top,

package/Components/ModalComponent/ModalBlocksStyleContext.tsx

@@ -0,0 +1,10 @@
+import React, { useContext } from "react";
+import type { ModalBlocksConfig } from "@applicaster/zapp-react-native-utils/configurationUtils/modalBlocksParser";
+
+export const ModalBlocksStyleContext = React.createContext<
+  ModalBlocksConfig | Record<string, any> | undefined
+>(undefined);
+
+export const useModalBlocksStyle = () => {
+  return useContext(ModalBlocksStyleContext);
+};

package/Components/ModalComponent/SortableList.tsx

@@ -0,0 +1,157 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import Sortable from "react-native-sortables";
+import { Text, View, ViewStyle } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
+
+const DEFAULT_HEADERS: any[] = [];
+const DEFAULT_SORTABLE_DATA: any[] = [];
+
+const renderHeaderComponent = (component: any) => {
+  if (!component) return null;
+  if (React.isValidElement(component)) return component;
+
+  if (typeof component === "function") {
+    const HeaderComponent = component;
+
+    return <HeaderComponent />;
+  }
+
+  return null;
+};
+
+const SortableListHeader = ({
+  title,
+  style,
+}: {
+  title?: string;
+  style?: ViewStyle;
+}) => {
+  const displayTitle = typeof title === "string" ? title : String(title ?? "");
+
+  return (
+    <View style={style}>
+      {displayTitle ? <Text>{displayTitle}</Text> : null}
+    </View>
+  );
+};
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+const defaultKeyExtractor = (item, index) =>
+  `sortable-item-${item?.id ?? item?.title ?? index}`;
+
+export const SortableList = ({
+  scrollViewStyle,
+  contentContainerStyle,
+  itemStyle,
+  headerStyle,
+  columns = 1,
+  rowGap = 0,
+  columnGap = 0,
+  keyExtractor = defaultKeyExtractor,
+  renderItem,
+  sortableData = DEFAULT_SORTABLE_DATA,
+  headers = DEFAULT_HEADERS,
+  onDragEnd,
+}: SortableListProps) => {
+  const scrollableRef = useAnimatedRef<Animated.ScrollView>();
+
+  const [localData, setLocalData] = useState(sortableData);
+
+  useEffect(() => {
+    setLocalData((localData) =>
+      localData !== sortableData ? sortableData : localData
+    );
+  }, [sortableData]);
+
+  const handleDragEnd = useCallback(
+    (params: any) => {
+      if (params?.data) {
+        setLocalData(params.data);
+      }
+
+      if (onDragEnd) {
+        onDragEnd(params);
+      }
+    },
+    [onDragEnd]
+  );
+
+  const _renderItem = useCallback(
+    ({ item, index }) => (
+      <View key={keyExtractor(item, index)} style={itemStyle}>
+        {renderItem({
+          item,
+          index,
+          renderHandle: (children) => (
+            <Sortable.Handle>{children}</Sortable.Handle>
+          ),
+        })}
+      </View>
+    ),
+    [itemStyle, keyExtractor, renderItem]
+  );
+
+  const renderHeader = useMemo(
+    () =>
+      (headers || []).map((header, idx) => (
+        <View key={`static-header-${idx}`} style={headerStyle}>
+          {header.title ? (
+            <SortableListHeader title={header.title} />
+          ) : (
+            renderHeaderComponent(header.component)
+          )}
+        </View>
+      )),
+    [headers, headerStyle]
+  );
+
+  return (
+    <Animated.ScrollView
+      ref={scrollableRef}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {renderHeader}
+      <Sortable.Grid
+        scrollableRef={scrollableRef}
+        customHandle
+        columns={columns}
+        rowGap={rowGap}
+        columnGap={columnGap}
+        data={localData}
+        keyExtractor={keyExtractor}
+        onDragEnd={handleDragEnd}
+        renderItem={_renderItem}
+      />
+    </Animated.ScrollView>
+  );
+};

package/Components/ModalComponent/SortableList.web.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { ViewStyle } from "react-native";
+
+export type SortableListProps = {
+  scrollViewStyle?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  itemStyle?: ViewStyle;
+  headerStyle?: ViewStyle;
+  columns?: number;
+  rowGap?: number;
+  columnGap?: number;
+  spacing?: number;
+  keyExtractor?: (item: any, index?: number) => string;
+  renderItem: ({
+    item,
+    index,
+    renderHandle,
+  }: {
+    item: any;
+    index: number;
+    renderHandle: (children: React.ReactElement) => React.ReactElement;
+  }) => React.ReactNode;
+  sortableData?: any[];
+  headers?: { index: number; title?: string; component: any }[];
+  onDragEnd?: (params: {
+    fromIndex?: number;
+    toIndex?: number;
+    from?: number;
+    to?: number;
+    data: any[];
+  }) => void;
+};
+
+export const SortableList = (_props: SortableListProps) => null;

package/Components/ModalComponent/TextInputContent.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
+import {
+  AudioPlayerInput,
+  VARIANT_NAME_PLAYLIST_INPUT,
+} from "./AudioPlayer/Components/Input";
+import {
+  AudioPlayerButton,
+  VARIANT_TEXT_ONLY,
+} from "./AudioPlayer/Components/Button";
+import { logger } from "@applicaster/zapp-react-native-utils/logger";
+
+export type TextInputContentProps = {
+  /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
+  dismiss?: () => void;
+  width?: number;
+  maxHeight?: number;
+  currentRoute?: boolean;
+  inputLabel?: string;
+  defaultValue?: string;
+  buttonLabel: string;
+  validationLabel?: string;
+  maxLength?: number;
+  actions: ActionType[];
+  actionContext?: Record<string, any>;
+};
+
+// Spacing mirrors the `component_style_*` keys in text input component.
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "transparent", // component_style_background_color
+    paddingLeft: 40, // component_style_padding_left
+    paddingRight: 40, // component_style_padding_right
+    paddingTop: 0, // component_style_padding_top
+    paddingBottom: 0, // component_style_padding_bottom
+    marginTop: 20, // component_style_margin_top
+    marginBottom: 20, // component_style_margin_bottom
+  },
+  inputWrap: {
+    // Gap down to the submit button; owned by the modal, not the reference.
+    marginBottom: 24,
+  },
+});
+
+/**
+ * Modal body only — input + submit.
+ * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
+ */
+export function TextInputContent(props: TextInputContentProps) {
+  const {
+    inputLabel,
+    defaultValue = "",
+    buttonLabel,
+    actions,
+    actionContext,
+    maxLength = 255,
+    validationLabel,
+  } = props;
+
+  const [textValue, setTextValue] = useState(defaultValue);
+  const [submitting, setSubmitting] = useState(false);
+
+  const validationMessage =
+    textValue.length > maxLength
+      ? validationLabel || "Too many characters"
+      : undefined;
+
+  if (!validationLabel) {
+    logger.warn(
+      "Modal/TextInputContent: Validation label (validationLabel) is not provided, using default message 'Too many characters'."
+    );
+  }
+
+  const onSubmit = useCallback(async () => {
+    if (submitting) {
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      const updatedActions = (actions || []).map((item) => {
+        if (item.type === "sendCloudEvent" || item.options?.data) {
+          return {
+            ...item,
+            options: {
+              ...item.options,
+              data: {
+                ...(item.options?.data || {}),
+                name: textValue,
+              },
+            },
+          };
+        }
+
+        return item;
+      });
+
+      if (actionContext) {
+        await actionExecutor.handleActions(updatedActions, actionContext);
+      } else {
+        await actionExecutor.handleActions(updatedActions);
+      }
+
+      await actionExecutor.handleAction({ type: "dismissBottomSheet" });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [submitting, actions, textValue, actionContext]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.inputWrap}>
+        <AudioPlayerInput
+          configuration={VARIANT_NAME_PLAYLIST_INPUT}
+          data={{
+            placeholder: inputLabel || "",
+            label: inputLabel,
+          }}
+          value={textValue}
+          validationMessage={validationMessage}
+          onChangeText={setTextValue}
+          onClearPress={() => setTextValue("")}
+        />
+      </View>
+      <AudioPlayerButton
+        configuration={VARIANT_TEXT_ONLY}
+        data={{ title: buttonLabel }}
+        onPress={onSubmit}
+        disabled={!!validationMessage || submitting}
+      />
+    </View>
+  );
+}

package/Components/ModalComponent/__tests__/BottomSheetDragArea.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, screen } from "@testing-library/react-native";
+import { BottomSheetDragArea } from "../BottomSheetDragArea";
+import { BottomSheetContext } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+// Reveal PanGestureHandler and capture its props.
+jest.mock("react-native-gesture-handler", () => {
+  const { View } = require("react-native");
+  const actual = jest.requireActual("react-native-gesture-handler");
+
+  return {
+    __esModule: true,
+    ...actual,
+    PanGestureHandler: ({
+      children,
+      onGestureEvent,
+      onHandlerStateChange,
+      simultaneousHandlers,
+    }: any) => (
+      <View
+        testID="drag-pan"
+        onGestureEvent={onGestureEvent}
+        onHandlerStateChange={onHandlerStateChange}
+        simultaneousHandlers={simultaneousHandlers}
+      >
+        {children}
+      </View>
+    ),
+  };
+});
+
+const makeValue = () => ({
+  scrollRef: React.createRef<any>(),
+  masterDrawerRef: React.createRef<any>(),
+  drawerRef: React.createRef<any>(),
+  onScroll: jest.fn(),
+  setBodyDragEnabled: jest.fn(),
+  onDragGestureEvent: jest.fn(),
+  onDragStateChange: jest.fn(),
+});
+
+describe("BottomSheetDragArea", () => {
+  it("wraps children in a sheet-wired PanGestureHandler when inside a sheet", () => {
+    const value = makeValue();
+
+    render(
+      <BottomSheetContext.Provider value={value}>
+        <BottomSheetDragArea>
+          <Text testID="child">hi</Text>
+        </BottomSheetDragArea>
+      </BottomSheetContext.Provider>
+    );
+
+    const pan = screen.getByTestId("drag-pan");
+    expect(pan.props.onGestureEvent).toBe(value.onDragGestureEvent);
+    expect(pan.props.onHandlerStateChange).toBe(value.onDragStateChange);
+
+    expect(pan.props.simultaneousHandlers).toEqual([value.masterDrawerRef]);
+
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+
+  it("renders children bare when used outside a sheet", () => {
+    render(
+      <BottomSheetDragArea>
+        <Text testID="child">hi</Text>
+      </BottomSheetDragArea>
+    );
+
+    expect(screen.queryByTestId("drag-pan")).toBeNull();
+    expect(screen.getByTestId("child")).toBeTruthy();
+  });
+});