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

package/Components/MasterCell/utils/index.ts

@@ -10,11 +10,11 @@ import { pathOr, get, isNil } from "@applicaster/zapp-react-native-utils/utils";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
-
 import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (isNil(element)) {
@@ -166,10 +166,50 @@ export function isVideoPreviewEnabled({
   return enable_video_preview && !R.isEmpty(player_screen_id);
 }
 
+export const unwrapDataProviderChild = (
+  child: React.ReactElement
+): React.ReactElement => {
+  if ((child as any)?.type !== DataProvider) {
+    return child;
+  }
+
+  const [wrappedChild] = React.Children.toArray((child as any).props.children);
+
+  return (
+    React.isValidElement(wrappedChild) ? wrappedChild : child
+  ) as React.ReactElement;
+};
+
+/**
+ * Resolves the entry value passed by DataProvider.
+ * Prefer the direct `entry` prop and fall back to `dataProviderProps[_dataKey]`
+ * for older wrappers that still read from namespaced provider props.
+ */
+const getEntryFromProps = (props: {
+  dataProviderProps?: {
+    _dataKey: string;
+    [key: string]: unknown;
+  };
+  entry?: any;
+}) => {
+  const dataProviderProps = props.dataProviderProps;
+
+  return (
+    props.entry ??
+    (dataProviderProps?._dataKey
+      ? dataProviderProps[dataProviderProps._dataKey]
+      : undefined)
+  );
+};
+
 export const useFilterChildren = <
   T extends {
     props: {
-      item: any;
+      dataProviderProps?: {
+        _dataKey: string;
+        [key: string]: unknown;
+      };
+      entry?: any;
       pluginIdentifier: string;
     };
   },
@@ -179,8 +219,13 @@ export const useFilterChildren = <
   const actions = useActions("");
 
   const filteredChildren = children.filter((child) => {
-    const item = child.props.item;
-    const actionIdentifier = child.props.pluginIdentifier;
+    const wrappedChild = unwrapDataProviderChild(
+      child as unknown as React.ReactElement
+    ) as unknown as T;
+
+    const item = getEntryFromProps(wrappedChild.props);
+
+    const actionIdentifier = wrappedChild.props.pluginIdentifier;
     const action = actions.actions[actionIdentifier];
 
     // context value of specific plugin
@@ -194,7 +239,7 @@ export const useFilterChildren = <
 
     masterCellLogger.error({
       message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
-      data: { item, action: child.props.pluginIdentifier },
+      data: { item, action: wrappedChild.props.pluginIdentifier },
     });
 
     return false;
@@ -242,7 +287,7 @@ export const recursiveCloneElementsWithState = (focused: boolean, children) => {
 const next = (currentIndex, items) => items[currentIndex + 1];
 const previous = (currentIndex, items) => items[currentIndex - 1];
 
-export const cloneElementsWithIds = (
+export const cloneChildrenWithIds = (
   ids: string[],
   children: React.ReactElement[]
 ) => {
@@ -250,12 +295,34 @@ export const cloneElementsWithIds = (
     return undefined;
   }
 
-  return React.Children.map(children, (element, index) =>
-    React.cloneElement(element, {
-      nextFocusLeft: previous(index, ids),
-      nextFocusRight: next(index, ids),
-    })
-  );
+  return React.Children.map(children, (element, index) => {
+    const nextFocusLeft = previous(index, ids);
+    const nextFocusRight = next(index, ids);
+
+    if (element?.type !== DataProvider) {
+      return React.cloneElement(element, {
+        nextFocusLeft,
+        nextFocusRight,
+      });
+    }
+
+    const wrappedChild = unwrapDataProviderChild(element) as React.ReactElement<
+      Record<string, unknown>
+    >;
+
+    if (!React.isValidElement(wrappedChild)) {
+      return element;
+    }
+
+    const injectedWrappedChild = React.cloneElement(wrappedChild, {
+      nextFocusLeft,
+      nextFocusRight,
+    });
+
+    return React.cloneElement(element, {
+      children: injectedWrappedChild,
+    });
+  });
 };
 
 export const getFocusedButtonId = (focusable) => {
@@ -295,10 +362,9 @@ export const useCellState = ({
 export const hasFocusableInsideBuilder = (elementsBuilder) => (item) => {
   const elements = elementsBuilder({ entry: item });
 
-  return R.anyPass([
-    hasElementsSpecificViewType("ButtonContainerView"),
-    hasElementsSpecificViewType("FocusableView"),
-  ])(elements);
+  return R.anyPass([hasElementsSpecificViewType("ButtonContainerView")])(
+    elements
+  );
 };
 
 export function getEntryState(state, selected) {

package/Components/ModalComponent/AudioPlayer/Components/Action.tsx

@@ -11,7 +11,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: {
@@ -123,10 +130,11 @@ export type ActionData = {
   showTrailingChevron?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerActionProps = {
   configuration: ActionConfiguration;
   data: ActionData;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -187,28 +195,32 @@ type ActionContainerProps = {
   configuration: BackgroundConfiguration;
   focused: boolean;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ActionContainer({
   configuration,
   focused,
   children,
+  onPress,
 }: ActionContainerProps) {
   return (
-    <View
-      style={{
-        backgroundColor: focused
-          ? configuration.focusedColor
-          : configuration.defaultColor,
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor:
+          pressed || focused
+            ? configuration.focusedColor
+            : configuration.defaultColor,
         borderRadius: configuration.cornerRadius,
         paddingTop: CONTAINER_SPEC.paddingTop,
         paddingRight: CONTAINER_SPEC.paddingRight,
         paddingBottom: CONTAINER_SPEC.paddingBottom,
         paddingLeft: CONTAINER_SPEC.paddingLeft,
-      }}
+      })}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -279,10 +291,15 @@ function ActionTrailingIcon({ configuration }: ActionTrailingIconProps) {
 }
 
 // ---------------------------------------------------------------------------
-// Item
+// AudioPlayerAction
 // ---------------------------------------------------------------------------
 
-export function Item({ configuration, data, focused = false }: ItemProps) {
+export function AudioPlayerAction({
+  configuration,
+  data,
+  focused = false,
+  onPress,
+}: AudioPlayerActionProps) {
   const { background, title, trailingIcon } = configuration;
   const { title: label, leadingActionType, showTrailingChevron } = data;
 
@@ -290,7 +307,11 @@ export function Item({ configuration, data, focused = false }: ItemProps) {
   const showTrailing = shouldShowTrailingIcon(showTrailingChevron);
 
   return (
-    <ActionContainer configuration={background} focused={focused}>
+    <ActionContainer
+      configuration={background}
+      focused={focused}
+      onPress={onPress}
+    >
       <View style={styles.row}>
         {showLeading ? (
           <>
@@ -309,60 +330,3 @@ export function Item({ configuration, data, focused = false }: ItemProps) {
     </ActionContainer>
   );
 }
-
-// ---------------------------------------------------------------------------
-// Demo
-// ---------------------------------------------------------------------------
-
-export default function App() {
-  return (
-    <View style={styles.demoScreen}>
-      <Text style={styles.demoHeading}>Modal Action Building Block</Text>
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text — Add To Queue (focused)
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Add To Queue", leadingActionType: "addToQueue" }}
-        focused
-      />
-
-      <Text style={styles.demoLabel}>
-        Leading icon + text + trailing chevron — Add To Playlist
-      </Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{
-          title: "Add To Playlist",
-          leadingActionType: "addToPlaylist",
-          showTrailingChevron: true,
-        }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Playlist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Playlist" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Favorite</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Favorite", leadingActionType: "favorite" }}
-      />
-
-      <Text style={styles.demoLabel}>Leading icon + text — Share</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Share", leadingActionType: "share" }}
-      />
-
-      <Text style={styles.demoLabel}>Text only — Go To Artist</Text>
-      <Item
-        configuration={DEFAULT_ACTION_CONFIGURATION}
-        data={{ title: "Go To Artist" }}
-      />
-    </View>
-  );
-}

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: {
@@ -148,11 +155,12 @@ export type ButtonData = {
   disabled?: boolean;
 };
 
-export type ItemProps = {
+export type AudioPlayerButtonProps = {
   configuration: ButtonConfiguration;
   data: ButtonData;
   disabled?: boolean;
   focused?: boolean;
+  onPress?: () => void;
 };
 
 // ---------------------------------------------------------------------------
@@ -170,7 +178,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(
@@ -192,6 +200,7 @@ type ButtonContainerProps = {
   disabled: boolean;
   configuration: BackgroundConfiguration;
   children: React.ReactNode;
+  onPress?: () => void;
 };
 
 function ButtonContainer({
@@ -199,19 +208,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 +233,7 @@ function ButtonContainer({
       ]}
     >
       {children}
-    </View>
+    </Pressable>
   );
 }
 
@@ -295,15 +307,16 @@ function ButtonLeadingIcon({
 }
 
 // ---------------------------------------------------------------------------
-// Item — single building block driven by configuration + data
+// AudioPlayerButton — single building block driven by configuration + data
 // ---------------------------------------------------------------------------
 
-export function Item({
+export function AudioPlayerButton({
   configuration,
   data,
   disabled,
   focused = false,
-}: ItemProps) {
+  onPress,
+}: AudioPlayerButtonProps) {
   const {
     background: backgroundConfiguration,
     title: titleConfiguration,
@@ -321,6 +334,7 @@ export function Item({
       focused={focused}
       disabled={isDisabled}
       configuration={backgroundConfiguration}
+      onPress={onPress}
     >
       <View style={styles.contentRow}>
         {showIcon ? (
@@ -386,39 +400,3 @@ export const VARIANT_LARGE_ICON: ButtonConfiguration = {
     },
   },
 };
-
-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>
-  );
-}