@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1291347678 → 13.0.0-alpha.1313712178

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Image as RnImage, ImageStyle } from "react-native";
-import * as R from "ramda";
+import { equals, omit } from "ramda";
 
 import { useImageSource } from "./hooks";
 
@@ -17,7 +17,7 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(RnImage, R.equals);
+const MemoizedImage = React.memo(RnImage, equals);
 
 function Image({
   style,
@@ -44,11 +44,12 @@ function Image({
 
   return (
     <MemoizedImage
+      key={_source?.uri || "no-image"}
       style={style as ImageStyle}
       onError={React.useCallback(() => setErrorState(true), [])}
       // as we have defaults as "" for placeholder image, we need to pass undefined to source to not throw warnings
       source={_source?.uri ? _source : undefined}
-      {...R.omit(["source"], otherProps)}
+      {...omit(["source"], otherProps)}
     />
   );
 }

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
@@ -7,9 +7,13 @@ import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
 
+const getSourceContext = path(["source", "context"]);
+const getSourceUri = path(["source", "uri"]);
+const getState = path(["state"]);
+
 export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 
@@ -34,7 +38,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -56,7 +60,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = R.path(["source", "uri"], otherProps);
+  const uriFromSource = getSourceUri(otherProps);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -72,8 +76,8 @@ export const useImageSourceWithDefault = ({
   placeholderImage,
   otherProps,
 }): Return => {
-  const uriContext = R.path(["source", "context"], otherProps);
-  const uriState = R.path(["state"], otherProps);
+  const uriContext = getSourceContext(otherProps);
+  const uriState = getState(otherProps);
 
   const action = useActions(uriContext);
 

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const.ts

@@ -0,0 +1,3 @@
+export const PREFIX = "tv_buttons";
+
+export const BUTTON_PREFIX = `${PREFIX}_button`;

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -1,4 +1,4 @@
-import * as R from "ramda";
+import { times } from "@applicaster/zapp-react-native-utils/utils";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { Button } from "./Button";
@@ -9,13 +9,14 @@ import {
 } from "./utils";
 
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { PREFIX, BUTTON_PREFIX } from "./const";
 
 export {
   insertButtonsBetweenLabels,
   insertButtonsBetweenLabelContainers,
 } from "./utils";
 
-const PREFIX = "tv_buttons";
+const buttonId = (index: number) => `${BUTTON_PREFIX}_${index}`;
 
 type Props = {
   value: Function;
@@ -42,7 +43,6 @@ export const TvActionButtons = ({
     return null;
   }
 
-  const prefix1Button = `${PREFIX}_button_1`;
   const independentStyles = value(`${PREFIX}_container_independent_styles`);
 
   return {
@@ -73,11 +73,11 @@ export const TvActionButtons = ({
       buttonsCount,
     },
     elements: compact(
-      R.times((index) => {
-        const prefixSpecificButton = `${PREFIX}_button_${index + 1}`;
+      times((index) => {
+        const prefixSpecificButton = buttonId(index + 1);
 
         return Button({
-          prefix: independentStyles ? prefixSpecificButton : prefix1Button,
+          prefix: independentStyles ? prefixSpecificButton : buttonId(1),
           value,
           platformValue,
           pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),

package/Components/MasterCell/utils/behaviorProvider.ts

@@ -6,6 +6,7 @@ import React, { useEffect } from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { BehaviorSubject } from "rxjs";
 import { masterCellLogger } from "../logger";
+import get from "lodash/get";
 
 const parseContextKey = (key: string): string | null => {
   if (!key?.startsWith("@{ctx/")) return null;
@@ -72,11 +73,13 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
 // We cant use async in this function (its inside render),
 // so we rely on useBehaviorUpdate to update current value and trigger re-render
 export const isCellSelected = (
-  id: string | number,
+  item: ZappEntry,
   behavior?: Behavior
 ): boolean => {
   if (!behavior) return false;
 
+  const id = behavior.selector ? get(item, behavior.selector) : item.id;
+
   if (behavior.selection_source === "now_playing") {
     const player = playerManager.getActivePlayer();
 

package/Components/MasterCell/utils/index.ts

@@ -190,24 +190,24 @@ export const getFocusedButtonId = (focusable) => {
   });
 };
 
-export const isSelected = (id: string | number, behavior?: Behavior) => {
-  return isCellSelected(id, behavior);
+export const isSelected = (item: ZappEntry, behavior?: Behavior) => {
+  return isCellSelected(item, behavior);
 };
 
 export const useCellState = ({
-  id,
+  item,
   behavior,
   focused,
 }: {
-  id: string | number;
+  item: ZappEntry;
   behavior: Behavior;
   focused: boolean;
 }): CellState => {
   const lastUpdate = useBehaviorUpdate(behavior);
 
   const _isSelected = useMemo(
-    () => isSelected(id, behavior),
-    [behavior, id, lastUpdate]
+    () => isSelected(item, behavior),
+    [behavior, item, lastUpdate]
   );
 
   return getCellState({ focused, selected: _isSelected });

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -1,23 +1,16 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { View, LayoutChangeEvent, ScrollView } from "react-native";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { View, ScrollView, StyleSheet, Platform } from "react-native";
 import { Button } from "./Button";
 import { ItemIconProps } from "./Button/ItemIcon";
 import { ItemProps } from "./Button/Item";
 import { ItemLabelProps } from "./Button/ItemLabel";
-import {
-  defaultItemIconProps,
-  defaultItemLabelProps,
-  defaultItemProps,
-} from "./utils";
+import { getItemIconProps, getItemLabelProps, getItemProps } from "./utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
+import type { PluginConfiguration } from "./";
+
 import { ModalHeader } from "./Header";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type ModalComponentProps = {
   items: any[];
@@ -30,32 +23,48 @@ type ModalComponentProps = {
   maxHeight?: number;
   dismiss: () => void;
   buttonComponent?: React.ComponentType;
+  iconProps?: ItemIconProps | ((theme: PluginConfiguration) => ItemIconProps);
+  itemProps?:
+    | ItemProps
+    | ((theme: PluginConfiguration, width: number) => ItemProps);
+  labelProps?:
+    | ItemLabelProps
+    | ((theme: PluginConfiguration, width: number) => ItemLabelProps);
+  getSelectedItemIcon: (
+    theme: PluginConfiguration
+  ) => ItemIconProps["asset"] | null;
+  getDefaultItemIcon: (
+    theme: PluginConfiguration
+  ) => ItemIconProps["asset"] | null;
+  iconPlacement?: "left" | "right";
 };
 
+const styles = StyleSheet.create({
+  container: {
+    maxHeight: "100%",
+  },
+});
+
 export function BottomSheetModalContent(props: ModalComponentProps) {
   const {
     items,
     currentRoute,
-    maxHeight,
     current_selection = null,
     onPress,
     dismiss,
     summary,
     title,
     buttonComponent: ButtonComponent = Button,
+    getSelectedItemIcon = (theme) =>
+      theme.modal_bottom_sheet_item_selected_icon,
+    getDefaultItemIcon = () => null,
+    iconPlacement,
   } = props;
 
-  const [headerHeight, setHeaderHeight] = useState(0);
   const route = useRef(currentRoute);
   const theme = useTheme<BaseThemePropertiesMobile>();
-
-  const maxContentHeight = maxHeight
-    ? maxHeight - headerHeight - Number(theme.modal_bottom_sheet_padding_top)
-    : undefined;
-
-  const onHeaderLayout = useCallback((event: LayoutChangeEvent) => {
-    setHeaderHeight(event.nativeEvent.layout.height);
-  }, []);
+  const paddingTop = Number(theme.modal_bottom_sheet_padding_top);
+  const paddingBottom = Number(theme.modal_bottom_sheet_padding_bottom);
 
   useEffect(() => {
     if (currentRoute !== route.current) {
@@ -64,55 +73,62 @@ export function BottomSheetModalContent(props: ModalComponentProps) {
   }, [currentRoute]);
 
   const iconBaseProps = useMemo<ItemIconProps>(() => {
-    return defaultItemIconProps(theme);
-  }, [theme]);
+    return getItemIconProps(theme, props.iconProps);
+  }, [theme, props.iconProps]);
 
   const itemBaseProps = useMemo<ItemProps>(() => {
-    return defaultItemProps(theme, props.width);
-  }, [theme, props.width]);
+    return getItemProps(theme, props.width, props.itemProps);
+  }, [theme, props.width, props.itemProps]);
 
   const labelBaseProps = useMemo<ItemLabelProps>(() => {
-    return defaultItemLabelProps(theme, props.width);
-  }, [theme, props.width]);
+    return getItemLabelProps(theme, props.width, props.labelProps);
+  }, [theme, props.width, props.labelProps]);
+
+  const handlePress = useCallback(
+    (item: any) => {
+      onPress(item);
+      dismiss();
+    },
+    [onPress, dismiss]
+  );
 
-  const handlePress = (item: any) => {
-    onPress(item);
-    dismiss();
-  };
+  const bottomInset = useSafeAreaInsets().bottom;
 
   return (
     <View
-      style={{
-        paddingTop: Number(theme.modal_bottom_sheet_padding_top),
-      }}
+      style={[
+        styles.container,
+        {
+          paddingTop: paddingTop,
+        },
+      ]}
     >
       <ModalHeader
-        width={props.width}
         dismiss={dismiss}
         configuration={theme}
-        onLayout={onHeaderLayout}
         summary={summary}
         title={title}
       />
       <ScrollView
-        bounces={false}
-        style={{ maxHeight: maxContentHeight }}
         contentContainerStyle={{
-          paddingBottom: Number(theme.modal_bottom_sheet_padding_bottom),
-          paddingTop: Number(theme.modal_bottom_sheet_padding_top),
+          paddingBottom:
+            Platform.OS === "ios" ? paddingBottom + bottomInset : paddingBottom,
         }}
       >
         {items.map((item, index) => (
           <ButtonComponent
             key={index}
-            width={props.width}
             configuration={theme}
             selectedItem={current_selection}
             item={item}
             onPress={handlePress}
+            label={theme[item?.label] ?? item?.label}
             iconBaseProps={iconBaseProps}
             itemBaseProps={itemBaseProps}
             labelBaseProps={labelBaseProps}
+            selectedItemIcon={getSelectedItemIcon(theme)}
+            defaultItemIcon={getDefaultItemIcon(theme)}
+            iconPlacement={iconPlacement}
           />
         ))}
       </ScrollView>

package/Components/ModalComponent/Button/Item.tsx

@@ -5,7 +5,7 @@ export type ItemProps = {
   backgroundColor: string;
   focusedBackgroundColor: string;
   selectedBackgroundColor?: string;
-  focusectedBackgroundColor?: string;
+  focusedSelectedBackgroundColor?: string;
   borderRadius: number;
   marginBottom: number;
   marginLeft: number;
@@ -15,6 +15,7 @@ export type ItemProps = {
   paddingBottom: number;
   paddingRight: number;
   paddingLeft: number;
+  maxWidth: number;
   focused?: boolean;
   selected?: boolean;
   children?: ReactChild[];
@@ -33,11 +34,11 @@ function getBackgroundColor({
   backgroundColor,
   focusedBackgroundColor,
   selectedBackgroundColor,
-  focusectedBackgroundColor,
+  focusedSelectedBackgroundColor,
 }) {
   switch (true) {
     case selected && focused:
-      return focusectedBackgroundColor;
+      return focusedSelectedBackgroundColor;
     case selected && !focused:
       return selectedBackgroundColor;
     case !selected && focused:
@@ -51,7 +52,7 @@ export function Item(props: ItemProps) {
   const {
     backgroundColor,
     focusedBackgroundColor,
-    focusectedBackgroundColor,
+    focusedSelectedBackgroundColor,
     selectedBackgroundColor,
     children,
     focused,
@@ -68,7 +69,7 @@ export function Item(props: ItemProps) {
           backgroundColor: getBackgroundColor({
             selected,
             focused,
-            focusectedBackgroundColor,
+            focusedSelectedBackgroundColor,
             focusedBackgroundColor,
             selectedBackgroundColor,
             backgroundColor,

package/Components/ModalComponent/Button/assets.ts

@@ -1,4 +1,4 @@
 /* eslint-disable max-len */
 
 export const defaultSelectedAsset: string =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGsSURBVHgB7drdaYRAFIbhk2yuBTuwlXSQDrKdrOnErSSlpATBe0nOBxEMEXV+nDnjfg8MwiK4vKjMDIoQERERERERERHRY+j7vtHxJvTfb5wvHd/DMLyLpyc5IcTRw6eOZvrtcrlcq6q6i6PTBVqKM/GJdKpAa3EmrpGe5ST2xIFxHF/FwSnuoL1x1L2u66s4KD7QkXGg6EBHx4FiA6WIA0UGShUHiguUMg4UFSh1HCgmUI44UESgXHEgaCatf/wWslLeeY1GMsWBF/GEOHpodeouGkl8Vso7rtFIxjjg9YhNcea/+W4nrFyjkcxxwDnQUpxJrEhW4oBToLU4k9BIluKA60t6M6i+kzrfF7e1OODziLV6uG2d53onWYwDvi/pViJGshoHvCeKsSJZjgNBM+nQSNbjQPBSwzdSCXEgylrMNVIpcSDaYnVvJPWhA9OAZuO87HEg6mreIdIWE3Eg+nZHhEhm4sAh+0EBkUzFgcM2zDwimYsDh+4oOkQyGQcO33LdEclsHEiyJ70SyXScpBAJX3vNRif01yxSJ7SMH1USEREREREREREV7Ad//SBSU+GIIAAAAABJRU5ErkJggg==";
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAA+0lEQVR4nO3a3QnCQBBF4ZRiSXZgKVqKnVnCQBpQwb0QJA752ZjszPlg3/JwOU8b2K4DAAAAAAAAkIOZnczsvPeOQypxHmb27Pv+sveeQxnG0SFSMRaHSIUXJ32kKXHKue+99e+I4yCOgzgO4jiI4yCOgzgO4jiajfMedd366t50nK3/b0LE2SpSqDi1I4WMUytSs3G6z/jbhOGLIzUdR7aKFCKO1I4UKo7UihQyjqyNFDqOLI2UIo7MjZQqjkyNVL7LFUdmRMoXRypEihtHVkSKH0cWRMoTR2ZEyhdHJkTKG0ecSMSRkUjE+TaIRJxfeFQJAAAAAAAANOwFT0Mt2UgcaMoAAAAASUVORK5CYII=";

package/Components/ModalComponent/Button/index.tsx

@@ -3,12 +3,10 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { Item, ItemProps } from "./Item";
 import { ItemIcon, ItemIconProps } from "./ItemIcon";
 import { ItemLabel, ItemLabelProps } from "./ItemLabel";
-import * as assets from "./assets";
 import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
-  width: number;
   selectedItem?: any;
   item: any; // Adjust type as needed
   onPress: (item: any) => void; // Adjust type as needed
@@ -17,6 +15,9 @@ type ButtonProps = {
   labelBaseProps?: ItemLabelProps;
   disabled?: boolean;
   label?: string | Record<string, string>;
+  iconPlacement?: "left" | "right";
+  selectedItemIcon?: ItemIconProps["asset"];
+  defaultItemIcon?: ItemIconProps["asset"];
 };
 
 const styles = StyleSheet.create({
@@ -31,81 +32,63 @@ export function Button({
   item,
   onPress,
   configuration,
-  width,
   iconBaseProps,
-  itemBaseProps,
+  itemBaseProps: itemProps,
   labelBaseProps,
   label,
+  iconPlacement = "left",
+  defaultItemIcon,
+  selectedItemIcon,
   disabled = false,
 }: ButtonProps) {
   const [focused, setFocused] = useState(false);
 
-  const selected = useMemo(
-    () => selectedItem && item.value === selectedItem?.value,
-    [selectedItem, selectedItem]
-  );
-
-  const itemProps = useMemo<ItemProps>(
-    () => ({
-      ...itemBaseProps,
-      width,
-    }),
-    [configuration, width]
-  );
+  const selected = selectedItem && item.value === selectedItem?.value;
 
-  const itemIconProps = useMemo<ItemIconProps>(
-    () => ({
-      ...iconBaseProps,
-      asset: configuration[item.asset] ?? assets[item.asset] ?? item.asset,
-    }),
-    [configuration, item.asset]
+  const itemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
+    () => configuration[item.asset] ?? item.asset ?? defaultItemIcon,
+    [item.asset, defaultItemIcon]
   );
 
-  const selectedItemIconProps = useMemo<ItemIconProps>(
-    () => ({
-      ...iconBaseProps,
-      asset:
-        configuration["modal_bottom_sheet_item_selected_icon"] ||
-        defaultSelectedAsset,
-      marginRight: 10,
-    }),
-    [configuration]
+  const selectedItemIconPropsAssets = useMemo<ItemIconProps["asset"]>(
+    () => selectedItemIcon || defaultSelectedAsset,
+    [selectedItemIcon]
   );
 
-  const itemLabelProps = useMemo<ItemLabelProps>(
-    () => ({
-      ...labelBaseProps,
-      label: label ?? configuration[item?.label] ?? item?.label ?? null,
-    }),
-    [configuration, item?.label]
-  );
+  const renderItemIcon =
+    itemIconPropsAssets && itemIconPropsAssets.length > 0 ? (
+      <ItemIcon {...iconBaseProps} asset={itemIconPropsAssets} />
+    ) : null;
 
   if (disabled) return null;
 
   return (
-    <View style={{ maxWidth: width }}>
-      <TouchableOpacity
-        activeOpacity={1}
-        onPress={() => onPress(item)}
-        onPressIn={() => setFocused(true)}
-        onPressOut={() => setFocused(false)}
-      >
-        <Item {...itemProps} focused={focused} selected={selected}>
-          <View style={styles.label_icon_container}>
-            {itemIconProps.asset && itemIconProps.asset.length > 0 ? (
-              <ItemIcon {...itemIconProps} />
-            ) : null}
-            {itemLabelProps.label ? (
-              <ItemLabel
-                {...itemLabelProps}
-                focused={focused}
-                selected={selected}
-              />
-            ) : null}
-          </View>
-          {selected ? <ItemIcon {...selectedItemIconProps} /> : null}
-        </Item>
-      </TouchableOpacity>
-    </View>
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={() => onPress(item)}
+      onPressIn={() => setFocused(true)}
+      onPressOut={() => setFocused(false)}
+    >
+      <Item {...itemProps} focused={focused} selected={selected}>
+        <View style={styles.label_icon_container}>
+          {iconPlacement === "left" && renderItemIcon}
+
+          {label ? (
+            <ItemLabel
+              {...labelBaseProps}
+              label={label ?? null}
+              focused={focused}
+              selected={selected}
+            />
+          ) : null}
+        </View>
+
+        {selected ? (
+          <ItemIcon {...iconBaseProps} asset={selectedItemIconPropsAssets} />
+        ) : (
+          iconPlacement === "right" && renderItemIcon
+        )}
+      </Item>
+    </TouchableOpacity>
   );
 }

package/Components/ModalComponent/Header/index.tsx

@@ -8,13 +8,18 @@ import { PluginConfiguration } from "../index";
 type Props = {
   dismiss: () => void;
   configuration: PluginConfiguration;
-  width: number;
   onLayout?: (event: LayoutChangeEvent) => void;
   summary?: string;
   title?: string;
 };
 
 const styles = StyleSheet.create({
+  noFlex: {
+    flex: 0,
+  },
+  flex: {
+    flex: 1,
+  },
   container: {
     flexDirection: "row",
     alignItems: "center",
@@ -22,7 +27,7 @@ const styles = StyleSheet.create({
 });
 
 export function ModalHeader(props: Props) {
-  const { configuration, dismiss, width, onLayout, summary, title } = props;
+  const { configuration, dismiss, onLayout, summary, title } = props;
 
   const closeButtonProps = useMemo<CloseButtonProps>(
     () => ({
@@ -55,15 +60,11 @@ export function ModalHeader(props: Props) {
 
   return (
     <View onLayout={onLayout} style={styles.container}>
-      <View
-        style={{
-          width: width - buttonsContainerWidth,
-        }}
-      >
+      <View style={styles.flex}>
         {title ? <Title {...titleProps} /> : null}
         {summary ? <Title {...summaryProps} /> : null}
       </View>
-      <View style={{ width: buttonsContainerWidth }}>
+      <View style={[styles.noFlex, { width: buttonsContainerWidth }]}>
         <CloseButton {...closeButtonProps} />
       </View>
     </View>