@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/ModalComponent/AudioPlayer/Components/Item.tsx

@@ -12,7 +12,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({
   row: {
@@ -133,6 +140,7 @@ export interface SecondaryAction {
 }
 
 export interface MenuItem {
+  trailingButton?: ItemButtonAction;
   title: string;
   summary?: string;
   icon?: string;
@@ -191,14 +199,18 @@ export type ItemData = {
   leadingButton?: ItemButtonAction;
   /** Button 1 (right most) — hardcoded action decides icon. */
   trailingButton?: ItemButtonAction;
+  isSelected?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerTrackItemProps = {
   configuration: ItemConfiguration;
   data: ItemData;
   focused?: boolean;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
+  onPress?: () => void;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -234,9 +246,9 @@ const CONTAINER_SPEC_LARGE_IMAGE: ContainerSpec = {
 
 const CONTAINER_SPEC_DEFAULT: ContainerSpec = {
   paddingTop: 8,
-  paddingRight: 10,
+  paddingRight: 20,
   paddingBottom: 8,
-  paddingLeft: 10,
+  paddingLeft: 20,
   horizontalGutter: 12,
   verticalGutter: 2,
 };
@@ -297,16 +309,6 @@ const DEFAULT_THUMB_ASSET =
 const DEFAULT_EQUALIZER_ASSET =
   "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAI0lEQVR42mNgGNTgPxTQzwB0DVQ3gKCBowbQwYAhkBIHBAAA9TvPMeOFaLMAAAAASUVORK5CYII=";
 
-const BUTTON_ASSETS: Record<ItemButtonAction, string> = {
-  playPause:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAdklEQVR42u3ZwRUAERAEUfkn3TaF5TFTrSuCf3CgjZGg6ast7G8YaAlcB8JAj8F1MRR2G63CUNglNAqsRvmB1TAfsBoXcMABV4MFKEci4IADNrkAed2H80R66SHqvUvglh/ktoZcL5H7MHKBx/5xYH+RsP90t5t2UpF6+22a+AAAAABJRU5ErkJggg==",
-  drag: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAIklEQVR42mNgGAWjYGiC/2SCwWPBaByMxsFoHIyCUTDYAAAqhk7AVXdZJwAAAABJRU5ErkJggg==",
-  multiSelect:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAWklEQVR42t2VUQ4AIAhCvf+lrQsULJJZbH7GM1cS0Uk5dd0Qqcz4GJSCSs0pSCkAHNoWBfkTgIxpgGK+ujyEKABqRGyn9FO1A+yfrf+qsGxTSx5YEs2WyU9oAKBJKg8Kfq4dAAAAAElFTkSuQmCC",
-  remove:
-    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAUklEQVR42mNgGPbgPx5AVYOJlSPJcGqrJU8DKXooCVui9FIacXj1UyNl4DWDLhYgc8nA+INpeFgwtCOZ5vmALjmZ5mURXUpTutQHdKnRRgEMAACwjWWprU1B+AAAAABJRU5ErkJggg==",
-};
-
 function getTextTransformStyle(
   textTransform: TextTransform
 ): "none" | "lowercase" | "uppercase" | "capitalize" {
@@ -324,32 +326,35 @@ function resolveContainerSpec(image: ImageConfiguration): ContainerSpec {
     : CONTAINER_SPEC_DEFAULT;
 }
 
-function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
+export function mapMenuItemToNowPlayingData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     nowPlayingLabel: "Now Playing",
     trailingButton: "playPause",
+    isSelected: item.isSelected,
   };
 }
 
-function mapMenuItemToQueuedData(item: MenuItem): ItemData {
+export function mapMenuItemToQueuedData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
     leadingButton: "remove",
     trailingButton: "drag",
+    isSelected: item.isSelected,
   };
 }
 
-function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
+export function mapMenuItemToPlaylistData(item: MenuItem): ItemData {
   return {
     imageUri: item.icon,
     textLabel1: item.title,
     textLabel2: item.summary ?? "",
-    trailingButton: "multiSelect",
+    trailingButton: item.trailingButton || ("multiSelect" as ItemButtonAction),
+    isSelected: item.isSelected,
   };
 }
 
@@ -362,6 +367,7 @@ type ItemContainerProps = {
   background: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ItemContainer({
@@ -369,23 +375,25 @@ function ItemContainer({
   background,
   focused,
   children,
+  onPress,
 }: ItemContainerProps) {
   const container = resolveContainerSpec(image);
   const bg = focused ? background.focusedColor : background.defaultColor;
 
   return (
-    <View
-      style={{
-        backgroundColor: bg,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor: pressed ? background.focusedColor : bg,
         borderRadius: background.cornerRadius,
         paddingTop: container.paddingTop,
         paddingRight: container.paddingRight,
         paddingBottom: container.paddingBottom,
         paddingLeft: container.paddingLeft,
-      }}
+      })}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -486,27 +494,205 @@ function NowPlayingRow({
 type ItemButtonProps = {
   action: ItemButtonAction;
   focused?: boolean;
+  onPress?: () => void;
+  isSelected?: boolean;
 };
 
-function ItemButton({ action, focused = false }: ItemButtonProps) {
+function ItemButton({
+  action,
+  focused = false,
+  onPress,
+  isSelected = false,
+}: ItemButtonProps) {
   const layout = BUTTON_LAYOUT_SPEC[action];
 
+  const renderIcon = () => {
+    switch (action) {
+      case "playPause": {
+        const iconSize = layout.assetWidth;
+        const iconRadius = iconSize / 2;
+
+        return (
+          <View
+            style={{
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconRadius,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            {isSelected ? (
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  width: 10,
+                  height: 16,
+                }}
+              >
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+                <View
+                  style={{
+                    width: 3.5,
+                    height: 16,
+                    backgroundColor: "#1e1e1e",
+                    borderRadius: 1,
+                  }}
+                />
+              </View>
+            ) : (
+              <View
+                style={{
+                  width: 0,
+                  height: 0,
+                  backgroundColor: "transparent",
+                  borderStyle: "solid",
+                  borderLeftWidth: 14,
+                  borderRightWidth: 0,
+                  borderTopWidth: 8,
+                  borderBottomWidth: 8,
+                  borderLeftColor: "#1e1e1e",
+                  borderRightColor: "transparent",
+                  borderTopColor: "transparent",
+                  borderBottomColor: "transparent",
+                  marginLeft: 3,
+                }}
+              />
+            )}
+          </View>
+        );
+      }
+
+      case "drag": {
+        return (
+          <View
+            style={{
+              width: 20,
+              height: 12,
+              justifyContent: "space-between",
+            }}
+          >
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+            <View
+              style={{
+                height: 2,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "remove": {
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              borderWidth: 1.5,
+              borderColor: "rgba(255, 255, 255, 0.7)",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 10,
+                height: 1.5,
+                backgroundColor: "rgba(255, 255, 255, 0.7)",
+                borderRadius: 1,
+              }}
+            />
+          </View>
+        );
+      }
+
+      case "multiSelect": {
+        if (!isSelected) {
+          return (
+            <View
+              style={{
+                width: layout.assetWidth,
+                height: layout.assetHeight,
+                borderRadius: layout.assetWidth / 2,
+                borderWidth: 1.5,
+                borderColor: "rgba(255, 255, 255, 0.7)",
+                backgroundColor: "transparent",
+              }}
+            />
+          );
+        }
+
+        return (
+          <View
+            style={{
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: "#FFFFFF",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <View
+              style={{
+                width: 6,
+                height: 10,
+                borderBottomWidth: 2,
+                borderRightWidth: 2,
+                borderColor: "#1e1e1e",
+                transform: [{ rotate: "45deg" }],
+                marginTop: -2,
+              }}
+            />
+          </View>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
   return (
-    <View
-      style={{
-        paddingTop: layout.paddingTop,
-        paddingRight: layout.paddingRight,
-        paddingBottom: layout.paddingBottom,
-        paddingLeft: layout.paddingLeft,
-        opacity: focused ? 0.7 : 1,
-      }}
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        {
+          paddingTop: layout.paddingTop,
+          paddingRight: layout.paddingRight,
+          paddingBottom: layout.paddingBottom,
+          paddingLeft: layout.paddingLeft,
+          opacity: pressed || focused ? 0.7 : 1,
+        },
+      ]}
     >
-      <Image
-        source={{ uri: BUTTON_ASSETS[action] }}
-        style={{ width: layout.assetWidth, height: layout.assetHeight }}
-        resizeMode="contain"
-      />
-    </View>
+      {renderIcon()}
+    </Pressable>
   );
 }
 
@@ -515,6 +701,9 @@ type ItemButtonsProps = {
   trailingButton?: ItemButtonAction;
   focusedLeadingButton?: boolean;
   focusedTrailingButton?: boolean;
+  onLeadingButtonPress?: () => void;
+  onTrailingButtonPress?: () => void;
+  isSelected?: boolean;
 };
 
 function ItemButtons({
@@ -522,6 +711,9 @@ function ItemButtons({
   trailingButton,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+  isSelected = false,
 }: ItemButtonsProps) {
   if (!leadingButton && !trailingButton) {
     return null;
@@ -531,28 +723,41 @@ function ItemButtons({
     <View style={styles.buttonsRow}>
       {leadingButton ? (
         <>
-          <ItemButton action={leadingButton} focused={focusedLeadingButton} />
+          <ItemButton
+            action={leadingButton}
+            focused={focusedLeadingButton}
+            onPress={onLeadingButtonPress}
+            isSelected={isSelected}
+          />
           <View style={{ width: BUTTONS_CONTAINER_HORIZONTAL_GUTTER }} />
         </>
       ) : null}
       {trailingButton ? (
-        <ItemButton action={trailingButton} focused={focusedTrailingButton} />
+        <ItemButton
+          action={trailingButton}
+          focused={focusedTrailingButton}
+          onPress={onTrailingButtonPress}
+          isSelected={isSelected}
+        />
       ) : null}
     </View>
   );
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerTrackItem
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function AudioPlayerTrackItem({
   configuration,
   data,
   focused = false,
   focusedLeadingButton = false,
   focusedTrailingButton = false,
-}: ItemProps) {
+  onPress,
+  onLeadingButtonPress,
+  onTrailingButtonPress,
+}: AudioPlayerTrackItemProps) {
   const {
     background,
     image,
@@ -566,7 +771,12 @@ export function Item({
   const showNowPlaying = !!data.nowPlayingLabel;
 
   return (
-    <ItemContainer image={image} background={background} focused={focused}>
+    <ItemContainer
+      image={image}
+      background={background}
+      focused={focused}
+      onPress={onPress}
+    >
       <View style={styles.row}>
         <ItemThumbnail configuration={image} imageUri={data.imageUri} />
         <View style={{ width: container.horizontalGutter }} />
@@ -594,6 +804,9 @@ export function Item({
           trailingButton={data.trailingButton}
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
+          onLeadingButtonPress={onLeadingButtonPress}
+          onTrailingButtonPress={onTrailingButtonPress}
+          isSelected={data.isSelected}
         />
       </View>
     </ItemContainer>
@@ -663,47 +876,3 @@ export const VARIANT_PLAYLIST_ITEM: ItemConfiguration = {
   textLabel1: DEFAULT_TEXT_LABEL_1_CONFIGURATION,
   textLabel2: DEFAULT_TEXT_LABEL_2_CONFIGURATION,
 };
-
-export default function App() {
-  // Hardcoded core mock data objects matching user types framework
-  const sharedMockItem: MenuItem = {
-    title: "Content Title",
-    summary: "Artist",
-    icon: "https://picsum.photos/200",
-    action: { type: "PLAY_AUDIO" },
-    secondaryAction: { action: { type: "OPEN_CONTEXT_MENU" } },
-  };
-
-  const playlistMockItem: MenuItem = {
-    title: "Playlist Name",
-    summary: "12 Songs",
-    icon: "https://picsum.photos/201",
-    isSelected: true,
-    action: { type: "NAVIGATE_PLAYLIST" },
-  };
-
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Item Building Block</Text>
-
-      <Text style={styles.demoLabel}>Now Playing</Text>
-      <Item
-        configuration={VARIANT_NOW_PLAYING}
-        data={mapMenuItemToNowPlayingData(sharedMockItem)}
-      />
-
-      <Text style={styles.demoLabel}>Queued Item</Text>
-      <Item
-        configuration={VARIANT_QUEUED_ITEM}
-        data={mapMenuItemToQueuedData(sharedMockItem)}
-        focused
-      />
-
-      <Text style={styles.demoLabel}>Playlist Item</Text>
-      <Item
-        configuration={VARIANT_PLAYLIST_ITEM}
-        data={mapMenuItemToPlaylistData(playlistMockItem)}
-      />
-    </View>
-  );
-}

package/Components/ModalComponent/AudioPlayer/Components/index.ts

@@ -1,7 +1,9 @@
-export { Item as AudioPlayerItem } from "./Item";
+export { AudioPlayerAction } from "./Action";
 
-export { Item as AudioPlayerHeader } from "./Header";
+export { AudioPlayerButton } from "./Button";
 
-export { Item as AudioPlayerButton } from "./Button";
+export { AudioPlayerHeader } from "./Header";
 
-export { Item as AudioPlayerAction } from "./Action";
+export { AudioPlayerTrackItem } from "./Item";
+
+export { AudioPlayerInput } from "./Input";

package/Components/ModalComponent/BottomSheetDragArea.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { PanGestureHandler } from "react-native-gesture-handler";
+import { View } from "react-native";
+import { useBottomSheet } from "@applicaster/zapp-react-native-utils/bottomSheet";
+
+/**
+ * Turns its children into a drag zone for the enclosing DraggableBottomSheet:
+ * dragging here moves/dismisses the sheet (used for the modal header bar).
+ * Outside a sheet (no context) it renders children unchanged.
+ */
+export const BottomSheetDragArea = ({
+  children,
+}: {
+  children: React.ReactElement;
+}) => {
+  const sheet = useBottomSheet();
+
+  // Outside a sheet (no context) render children unchanged.
+  if (!sheet) return children;
+
+  return (
+    <PanGestureHandler
+      simultaneousHandlers={[sheet.masterDrawerRef]}
+      shouldCancelWhenOutside={false}
+      onGestureEvent={sheet.onDragGestureEvent}
+      onHandlerStateChange={sheet.onDragStateChange}
+    >
+      {/* Old-API PanGestureHandler needs a host-component child; children may
+          be a function component (e.g. ModalHeader), so wrap in a View. */}
+      <View>{children}</View>
+    </PanGestureHandler>
+  );
+};

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -6,11 +6,11 @@ import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
 import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-
 import type { PluginConfiguration } from "./";
 
 import { ModalHeader as DefaultModalHeader } from "./Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { BottomSheetDragArea } from "./BottomSheetDragArea";
 
 type ModalComponentProps = {
   items: any[];
@@ -55,8 +55,7 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
     dismiss,
     summary,
     title,
-    headerComponent: ModalHeader = DefaultModalHeader,
-
+    headerComponent = DefaultModalHeader,
     scrollViewContent = null,
 
     buttonComponent: ButtonComponent = Button,
@@ -72,6 +71,8 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
   const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
+  const Header = headerComponent;
+
   useEffect(() => {
     if (currentRoute !== route.current) {
       props.dismiss();
@@ -107,13 +108,20 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
         paddingTop: paddingTop,
       }}
     >
-      <ModalHeader
-        dismiss={dismiss}
-        configuration={theme}
-        summary={summary}
-        title={title}
-      />
+      {Header ? (
+        <BottomSheetDragArea>
+          <Header
+            dismiss={dismiss}
+            configuration={theme}
+            summary={summary}
+            title={title}
+          />
+        </BottomSheetDragArea>
+      ) : null}
       <ScrollView
+        overScrollMode="never"
+        bounces={false}
+        showsVerticalScrollIndicator={false}
         contentContainerStyle={{
           paddingBottom: paddingBottom + bottomInset,
         }}
@@ -123,7 +131,6 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
               scrollViewContent.renderItem(item, index)
             )
           : null}
-
         {!scrollViewContent &&
           items.map((item, index) =>
             item ? (

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();
+  });
+});