@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5786305091 → 12.0.0-alpha.9151207838

package/Components/AnimatedInOut/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Animated, EasingFunction, StyleProp, ViewStyle } from "react-native";
-
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle =
@@ -35,11 +36,16 @@ function getAnimation(config: AnimatedInConfig, phase: "in" | "out") {
   return config[phase] || config;
 }
 
-export function AnimatedInOut(props: Props) {
-  const { visible, animationConfig, children } = props;
-
+export function AnimatedInOut({
+  visible,
+  animationConfig,
+  staticStyles = {},
+  children,
+}: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(null);
+  const [animating, setAnimating] = React.useState(undefined);
+
+  const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
   function startAnimation(toValue, config) {
     if (animating) {
@@ -55,7 +61,7 @@ export function AnimatedInOut(props: Props) {
       delay,
       useNativeDriver: true,
     }).start(() => {
-      setAnimating(null);
+      setAnimating(undefined);
       onAnimationEnd();
     });
 
@@ -63,12 +69,14 @@ export function AnimatedInOut(props: Props) {
   }
 
   React.useEffect(() => {
-    if (visible) {
+    if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
-    } else {
+    }
+
+    if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, animating]);
+  }, [visible, previousVisible]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -77,7 +85,7 @@ export function AnimatedInOut(props: Props) {
   return (
     <Animated.View
       renderToHardwareTextureAndroid={animating}
-      style={[styles(animatedValue), props?.staticStyles || {}]}
+      style={[styles(animatedValue), staticStyles]}
     >
       {children}
     </Animated.View>

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -23,6 +23,7 @@ type Props = {
       audio_player_summary_color?: string;
       audio_player_rtl?: boolean;
       magic_background?: boolean;
+      audio_player_background_image_query?: string;
       start_time?: string;
       end_time?: string;
     };
@@ -33,6 +34,7 @@ type Props = {
     audio_player_summary_color?: string;
     audio_player_rtl?: string;
     magic_background?: string;
+    audio_player_background_image_query?: string;
     audio_player_background_image?: string;
     audio_player_artwork_aspect_ratio?: string;
     lg_tv_audio_player_title_font_family?: string;
@@ -73,6 +75,11 @@ export function AudioPlayer(props: Props) {
     const channelIcon = getProp("audio_player_channel_icon");
     const rtlFlag = getProp("audio_player_rtl");
     const magicBackground = getProp("magic_background");
+
+    const audioPlayerBackgroundImageQuery = getProp(
+      "audio_player_background_image_query"
+    );
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -149,7 +156,8 @@ export function AudioPlayer(props: Props) {
       runTimeFontSize,
       artworkAspectRatio,
       channelIcon,
-      magicBackground
+      magicBackground,
+      audioPlayerBackgroundImageQuery,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/__tests__/__snapshots__/audioPlayer.test.js.snap

@@ -5,6 +5,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
   config={
     Object {
       "artworkAspectRatio": "1:1",
+      "audioPlayerBackgroundImageQuery": "",
       "backgroundColor": "black",
       "backgroundImage": "https://example.com",
       "channelIcon": "https://example.com",
@@ -26,6 +27,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -47,6 +49,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -68,6 +71,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",
@@ -96,6 +100,7 @@ exports[`<AudioPlayer /> renders correctly 1`] = `
     config={
       Object {
         "artworkAspectRatio": "1:1",
+        "audioPlayerBackgroundImageQuery": "",
         "backgroundColor": "black",
         "backgroundImage": "https://example.com",
         "channelIcon": "https://example.com",

package/Components/AudioPlayer/helpers.tsx

@@ -5,6 +5,7 @@ const defaults = {
   audio_player_artwork_aspect_ratio: "1:1",
   audio_player_rtl: false,
   magic_background: false,
+  audio_player_background_image_query: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/Image/Image.android.tsx

@@ -1,3 +1,35 @@
-import FastImage from "@applicaster/react-native-fast-image";
+import React from "react";
 
-export const QBImage = FastImage;
+import FastImage, {
+  FastImageProps,
+} from "@applicaster/react-native-fast-image";
+
+export const QBImage = (props: FastImageProps) => {
+  const source = React.useMemo(() => {
+    if (typeof props.source === "number") {
+      return props.source;
+    }
+
+    return {
+      uri: props.source.uri,
+      headers: props.source.headers,
+      priority: props.source.priority,
+      cache: props.source.cache,
+      maxWidth: props.source.maxWidth,
+      maxHeight: props.source.maxHeight,
+    };
+  }, [
+    ...(typeof props.source === "object"
+      ? [
+          props.source?.uri,
+          props.source?.priority,
+          props.source?.cache,
+          props.source?.headers,
+          props.source?.maxWidth,
+          props.source?.maxHeight,
+        ]
+      : []),
+  ]);
+
+  return <FastImage {...props} source={source} />;
+};

package/Components/MasterCell/utils/index.ts

@@ -285,8 +285,8 @@ export const useBehaviorUpdate = (behavior: Behavior) => {
       }
     }
   }, [behavior]);
-
-  useEffect(() => {
+  
+   useEffect(() => {
     if (!behavior) {
       return;
     }

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -1,43 +1,17 @@
-import React, { useEffect, useCallback, ReactNode, useReducer } from "react";
-import { View, StyleSheet, LayoutChangeEvent } from "react-native";
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+/* eslint react/prop-types: off */
 
-const { log_debug } = createLogger({
-  subsystem: "MeasurementsPortal",
-  category: "UIComponents",
-});
-
-type LayoutDimensions = {
-  width: number;
-  height: number;
-};
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import * as R from "ramda";
+import { v4 } from "uuid";
 
-type MeasurementResult = {
-  width: number;
-  height: number;
-  index?: number;
-};
-
-type MeasurementsPortalProps = {
+type Props = {
   Component: React.ElementType;
-  onLayout: (event: LayoutChangeEvent) => void;
-  componentProps?: Record<string, any>;
-  onLoadFinished?: () => void;
+  onLayout: (LayoutChangeEvent) => void;
+  componentProps?: Record<any, any>;
 };
 
-type MeasurementPortalContextValue = {
-  measureComponent: (
-    comp: React.ElementType,
-    props: Record<string, any>
-  ) => Promise<MeasurementResult>;
-  measuringInProgress: boolean;
-};
-
-type MeasurementsPortalContextProviderProps = {
-  children: ReactNode;
-};
-
-const isError = (possibleError: any): boolean => possibleError instanceof Error;
+const isError = (possibleError): boolean => possibleError instanceof Error;
 
 const styles = StyleSheet.create({
   container: {
@@ -51,245 +25,100 @@ const styles = StyleSheet.create({
   wrapper: {},
 });
 
-type State = {
-  component: React.ElementType;
-  componentProps: Record<string, any> | null;
-  measureComponentCallback: ((result: MeasurementResult) => void) | null;
-  onLoadFinishedIsCalled: boolean;
-  measuringInProgress: boolean;
-  layout: LayoutDimensions;
-};
-
-type Action =
-  | { type: "SET_COMPONENT"; payload: React.ElementType }
-  | { type: "SET_COMPONENT_PROPS"; payload: Record<string, any> | null }
-  | {
-      type: "SET_MEASURE_CALLBACK";
-      payload: ((result: MeasurementResult) => void) | null;
-    }
-  | { type: "SET_ON_LOAD_FINISHED"; payload: boolean }
-  | { type: "SET_MEASURING_PROGRESS"; payload: boolean }
-  | { type: "SET_LAYOUT"; payload: LayoutDimensions };
-
-const MEASUREMENT_ACTIONS = {
-  setComponent: "SET_COMPONENT",
-  setComponentProps: "SET_COMPONENT_PROPS",
-  setMeasureCallback: "SET_MEASURE_CALLBACK",
-  setOnLoadFinished: "SET_ON_LOAD_FINISHED",
-  setMeasuringProgress: "SET_MEASURING_PROGRESS",
-  setLayout: "SET_LAYOUT",
-} as const;
-
-const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case MEASUREMENT_ACTIONS.setComponent:
-      return { ...state, component: action.payload };
-    case MEASUREMENT_ACTIONS.setComponentProps:
-      return { ...state, componentProps: action.payload };
-    case MEASUREMENT_ACTIONS.setMeasureCallback:
-      return { ...state, measureComponentCallback: action.payload };
-    case MEASUREMENT_ACTIONS.setOnLoadFinished:
-      return { ...state, onLoadFinishedIsCalled: action.payload };
-    case MEASUREMENT_ACTIONS.setMeasuringProgress:
-      return { ...state, measuringInProgress: action.payload };
-    case MEASUREMENT_ACTIONS.setLayout:
-      return { ...state, layout: action.payload };
-    default:
-      return state;
-  }
-};
-
-const initialState: State = {
-  component: null,
-  componentProps: null,
-  measureComponentCallback: null,
-  onLoadFinishedIsCalled: false,
-  measuringInProgress: false,
-  layout: { width: 0, height: 0 },
-};
-
-/**
- * Handles layout changes for the MeasurementsPortal component
- */
-const onLayout =
-  (dispatch) =>
-  ({ nativeEvent: { layout: newLayout } }: LayoutChangeEvent) => {
-    log_debug("Rendered measurement layout", { newLayout });
-    dispatch({ type: MEASUREMENT_ACTIONS.setLayout, payload: newLayout });
-  };
-
-/**
- * MeasurementsPortal is a component that is used to measure the size of a component
- * It is not rendered to the main tree, but it actually uses a component and its props to measure the size of the component.
- * The <Component> comes from the measureComponent method of the MeasurementPortalContext.
- */
-const MeasurementsPortal = ({
-  Component,
-  onLayout,
-  componentProps,
-}: MeasurementsPortalProps) => {
-  if (!Component) {
-    return null;
-  }
-
+const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
   return (
     <View style={styles.container} testID="MeasurementsPortal">
-      <View style={styles.wrapper} onLayout={onLayout}>
+      <View style={styles.wrapper} onLayout={onLayout} key={v4()}>
         <Component {...componentProps} />
       </View>
     </View>
   );
 };
 
-const MeasurementPortalContext =
-  React.createContext<MeasurementPortalContextValue | null>(null);
-
-/**
- * The MeasurementsPortalContextProvider provides a measureComponent method, and a measuringInProgress flag
- * With these we can pre-render a component and measure its size before rendering it to the main tree to avoid layout shifts
- */
-const MeasurementsPortalContextProvider = ({
-  children,
-}: MeasurementsPortalContextProviderProps) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  const onLoadFinishedRef =
-    React.useRef<MeasurementsPortalProps["onLoadFinished"]>(null);
+const MeasurementPortalContext = React.createContext(null);
 
-  /**
-   * Finalize resolves the promise created by measureComponent and finalizes the measurement process
-   * It resolves with the measurement result (width/height/index) to the measureComponentCallback
-   */
-  const finalize = useCallback(() => {
-    if (state.measureComponentCallback) {
-      log_debug("Finalize measurement process", {
-        layout: state.layout,
-        componentProps: state.componentProps,
-      });
+const MeasurementsPortalContextProvider = ({ children }) => {
+  const Component = React.useRef(View);
+  const [measuringInProgress, setMeasuringInProgress] = React.useState(false);
 
-      state.measureComponentCallback({
-        width: state.layout.width,
-        height: state.layout.height,
-        index: state.componentProps?.index,
-      });
-    }
+  const measureComponentCallback = React.useRef(null);
+  const componentProps = React.useRef(null);
+  const onLoadFinishedIsCalled = React.useRef(null);
 
-    dispatch({ type: MEASUREMENT_ACTIONS.setMeasureCallback, payload: null });
-
-    dispatch({
-      type: MEASUREMENT_ACTIONS.setMeasuringProgress,
-      payload: false,
-    });
+  const setComponent = (comp) => {
+    Component.current = comp;
+  };
 
-    dispatch({ type: MEASUREMENT_ACTIONS.setOnLoadFinished, payload: false });
-  }, [state.layout, state.componentProps, state.measureComponentCallback]);
+  const setMeasureComponentCallback = (cb) => {
+    measureComponentCallback.current = cb;
+  };
 
-  useEffect(() => {
-    log_debug("Measurement portal updated", {
-      measureComponentCallback: state.measureComponentCallback,
-      onLoadFinishedIsCalled: state.onLoadFinishedIsCalled,
-      layout: state.layout,
+  const finalize = ({ width, height }) => {
+    measureComponentCallback?.current?.({
+      width,
+      height,
+      index: componentProps.current.index,
     });
 
-    if (
-      state.measureComponentCallback &&
-      state.layout.width > 0 &&
-      state.layout.height > 0 &&
-      onLoadFinishedRef.current
-    ) {
-      finalize();
-    }
-  }, [state.measureComponentCallback, state.layout, finalize]);
-
-  /**
-   * Utility function that takes, a component and its props, measures the rendered size of the component
-   * and creates a promise that does not get resolved with the measurement result (width/height/index)
-   * until the onLoadFinished callback is called
-   */
-  const measureComponent = useCallback(
-    (
-      comp: React.ElementType,
-      props: { onLoadFinished: () => void; [key: string]: any }
-    ): Promise<MeasurementResult> => {
-      return new Promise((resolve) => {
-        log_debug("Measuring process started", { comp, props });
-
-        dispatch({
-          type: MEASUREMENT_ACTIONS.setMeasureCallback,
-          payload: resolve,
-        });
-
-        dispatch({
-          type: MEASUREMENT_ACTIONS.setMeasuringProgress,
-          payload: true,
-        });
-
-        dispatch({
-          type: MEASUREMENT_ACTIONS.setOnLoadFinished,
-          payload: false,
-        });
-
-        dispatch({
-          type: MEASUREMENT_ACTIONS.setLayout,
-          payload: { width: 0, height: 0 },
-        });
-
-        onLoadFinishedRef.current =
-          // eslint-disable-next-line react/prop-types
-          props.onLoadFinished as MeasurementsPortalProps["onLoadFinished"];
-
-        const handleOnLoadFinish = (...args: any[]) => {
-          if (args?.[0]?.error && isError(args[0].error)) {
-            log_debug(
-              "Component called onLoadFinish with an error, completing measurement process",
-              { args }
-            );
-
-            finalize();
-
-            return;
-          }
-
-          log_debug(
-            "Component called onLoadFinish, completing measurement process",
-            { args }
-          );
+    setMeasureComponentCallback(null);
+    setMeasuringInProgress(false);
+    onLoadFinishedIsCalled.current = false;
+  };
 
-          dispatch({
-            type: MEASUREMENT_ACTIONS.setOnLoadFinished,
-            payload: true,
-          });
+  const setComponentProps = (props) => {
+    const handleOnLoadFinish = (...args) => {
+      const error = R.path([0, "error"], args);
+
+      if (isError(error)) {
+        finalize({ width: 0, height: 0 });
+      } else {
+        onLoadFinishedIsCalled.current = true;
+        props.onLoadFinished(...args);
+      }
+    };
+
+    componentProps.current = {
+      ...props,
+      onLoadFinished: handleOnLoadFinish,
+    };
+  };
 
-          onLoadFinishedRef.current?.apply(null, args);
-        };
+  const measureComponent = React.useCallback(async (comp, props) => {
+    return new Promise((resolve) => {
+      setMeasureComponentCallback(resolve);
+      setMeasuringInProgress(true);
 
-        dispatch({
-          type: MEASUREMENT_ACTIONS.setComponentProps,
-          payload: { ...props, onLoadFinished: handleOnLoadFinish },
-        });
+      setComponentProps(props);
+      setComponent(comp);
+    });
+  }, []);
 
-        dispatch({ type: MEASUREMENT_ACTIONS.setComponent, payload: comp });
-      });
+  const onLayout = ({
+    nativeEvent: {
+      layout: { width, height },
     },
-    []
-  );
-
-  const contextValue = React.useMemo(
-    () => ({
-      measureComponent,
-      measuringInProgress: state.measuringInProgress,
-    }),
-    [measureComponent, state.measuringInProgress]
-  );
+  }) => {
+    if (measureComponentCallback.current && onLoadFinishedIsCalled.current) {
+      finalize({
+        width,
+        height,
+      });
+    }
+  };
 
   return (
     <>
       <MeasurementsPortal
-        Component={state.component}
-        componentProps={state.componentProps}
-        onLayout={onLayout(dispatch)}
+        Component={Component.current}
+        componentProps={componentProps.current}
+        onLayout={onLayout}
       />
-      <MeasurementPortalContext.Provider value={contextValue}>
+      <MeasurementPortalContext.Provider
+        value={{
+          measureComponent,
+          measuringInProgress,
+        }}
+      >
         {children}
       </MeasurementPortalContext.Provider>
     </>

package/Components/ModalComponent/BottomSheetModalContent.tsx

@@ -0,0 +1,121 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { View, LayoutChangeEvent, ScrollView } 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 { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+import { ModalHeader } from "./Header";
+
+type ModalComponentProps = {
+  items: any[];
+  current_selection?: any;
+  onPress: (item: any) => void;
+  width: number;
+  currentRoute: boolean;
+  summary?: string;
+  title?: string;
+  maxHeight?: number;
+  dismiss: () => void;
+  buttonComponent?: React.ComponentType;
+};
+
+export function BottomSheetModalContent(props: ModalComponentProps) {
+  const {
+    items,
+    currentRoute,
+    maxHeight,
+    current_selection = null,
+    onPress,
+    dismiss,
+    summary,
+    title,
+    buttonComponent: ButtonComponent = Button,
+  } = 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);
+  }, []);
+
+  useEffect(() => {
+    if (currentRoute !== route.current) {
+      props.dismiss();
+    }
+  }, [currentRoute]);
+
+  const iconBaseProps = useMemo<ItemIconProps>(() => {
+    return defaultItemIconProps(theme);
+  }, [theme]);
+
+  const itemBaseProps = useMemo<ItemProps>(() => {
+    return defaultItemProps(theme, props.width);
+  }, [theme, props.width]);
+
+  const labelBaseProps = useMemo<ItemLabelProps>(() => {
+    return defaultItemLabelProps(theme, props.width);
+  }, [theme, props.width]);
+
+  const handlePress = (item: any) => {
+    onPress(item);
+    dismiss();
+  };
+
+  return (
+    <View
+      style={{
+        paddingTop: Number(theme.modal_bottom_sheet_padding_top),
+      }}
+    >
+      <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),
+        }}
+      >
+        {items.map((item, index) => (
+          <ButtonComponent
+            key={index}
+            width={props.width}
+            configuration={theme}
+            selectedItem={current_selection}
+            item={item}
+            onPress={handlePress}
+            iconBaseProps={iconBaseProps}
+            itemBaseProps={itemBaseProps}
+            labelBaseProps={labelBaseProps}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}