@applicaster/zapp-react-native-ui-components 12.0.0-rc.5 → 12.0.0-rc.50

package/Components/Image/utils/index.ts

@@ -0,0 +1,39 @@
+import FastImage, { Source } from "@applicaster/react-native-fast-image";
+import { useMemo } from "react";
+import { ImageRequireSource } from "react-native";
+
+function getSourceCache(cache: Source["cache"]) {
+  return cache || FastImage.cacheControl.web;
+}
+
+export const useImageSource = (source?: Source | ImageRequireSource) => {
+  return useMemo(() => {
+    if (source) {
+      if (typeof source === "number") {
+        return source;
+      }
+
+      return {
+        uri: source.uri,
+        headers: source.headers,
+        priority: source.priority,
+        cache: getSourceCache(source?.cache),
+        maxWidth: source.maxWidth,
+        maxHeight: source.maxHeight,
+      };
+    }
+
+    return undefined;
+  }, [
+    ...(typeof source === "object"
+      ? [
+          source?.uri,
+          source?.priority,
+          source?.cache,
+          source?.headers,
+          source?.maxWidth,
+          source?.maxHeight,
+        ]
+      : []),
+  ]);
+};

package/Components/Layout/TV/__tests__/index.test.tsx

@@ -12,19 +12,7 @@ jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
   useRiverInitialState: () => ({}),
 }));
 
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
-  useCurrentScreenData: jest.fn(() => ({
-    navigations: [
-      {
-        category: "menu",
-        navigation_type: "menu",
-        styles: {
-          hide_secondary_level_menu: false,
-        },
-      },
-    ],
-  })),
-}));
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen");
 
 const Layout = require("..").default;
 
@@ -125,25 +113,4 @@ describe("Layout TV", () => {
       expect(bgComponent.props.testProp).toBe(true);
     });
   });
-
-  describe("props passed to navbar component", () => {
-    it("passes correct props", () => {
-      const { getByTestId } = render(
-        <Layout
-          Components={Components}
-          ComponentsExtraProps={{
-            NavBar: { testProp: true },
-          }}
-        >
-          <Screen />
-        </Layout>,
-        { wrapper }
-      );
-
-      const navbarComponent = getByTestId("nav-bar-component");
-      expect(navbarComponent.props.isVisible).toBe(isNavBarVisible);
-      expect(navbarComponent.props.menuPlugin).toBe(plugins[0]);
-      expect(navbarComponent.props.testProp).toBe(true);
-    });
-  });
 });

package/Components/Layout/TV/index.tsx

@@ -1,10 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useIsNavBarVisible,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import {
@@ -43,7 +40,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
-  const { title } = useNavbarState();
+  const { title, visible } = useNavbarState();
   const { activeRiver, currentRoute } = navigator;
 
   const {
@@ -80,10 +77,22 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
     []
   );
 
-  const navBarVisible = useIsNavBarVisible();
-
   const [navBarReady, setNavBarReady] = React.useState(false);
 
+  const navBarContainer = (
+    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
+      <NavBar
+        ref={ComponentsExtraProps?.NavBar?.ref}
+        isVisible={visible && !routeIsPlayerScreen(currentRoute)}
+        menuPlugin={menuPlugin}
+        navigationProps={navigationProps}
+        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
+      />
+    </NavBarContainer>
+  );
+
+  const isTVOS = isApplePlatform();
+
   if (!appReady) {
     return null;
   }
@@ -96,18 +105,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
           backgroundImageUrl={backgroundImageUrl}
           {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
         >
-          {!isApplePlatform() ? (
-            <NavBarContainer isVisible={navBarVisible} onReady={setNavBarReady}>
-              <NavBar
-                ref={ComponentsExtraProps?.NavBar?.ref}
-                isVisible={navBarVisible && !routeIsPlayerScreen(currentRoute)}
-                menuPlugin={menuPlugin}
-                navigationProps={navigationProps}
-                {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-              />
-            </NavBarContainer>
-          ) : null}
-
+          {!isTVOS ? navBarContainer : null}
           {navBarReady ? (
             /**
              Need to re-mount this component on each navigation event
@@ -118,23 +116,9 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               <ScreenContainer>{children}</ScreenContainer>
             </PathnameContext.Provider>
           ) : null}
-
-          {isApplePlatform() ? (
-            /**
-             Render NavBarContainer over ScreenContainer to let tvOS native
-             focus manager works correctly to focus nav bar items first
-            **/
-            <NavBarContainer isVisible={navBarVisible} onReady={setNavBarReady}>
-              <NavBar
-                ref={ComponentsExtraProps?.NavBar?.ref}
-                isVisible={navBarVisible && !routeIsPlayerScreen(currentRoute)}
-                menuPlugin={menuPlugin}
-                navigationProps={navigationProps}
-                {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
-              />
-            </NavBarContainer>
-          ) : null}
-
+          {/** Render NavBarContainer over ScreenContainer to let tvOS native
+          focus manager works correctly to focus nav bar items first **/}
+          {isTVOS ? navBarContainer : null}
           <TransitionOverlay />
         </Components.Background>
       </ScreenLayoutContextProvider>

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -152,7 +152,6 @@ export const BorderContainerView = (props: Props) => {
     ...updatedPaddings,
     width: updatedWidth,
     height: updatedHeight,
-    ...borderStyleForMissingBorder,
   };
 
   return (

package/Components/MasterCell/DefaultComponents/CellBadge/index.tsx

@@ -1,6 +1,7 @@
 import {
   compact,
   ifElseFocusedSelected,
+  ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { getPositionStyles } from "./utils";
@@ -12,9 +13,15 @@ type Props = {
   value: Function;
   state: string;
   visible?: Boolean;
+  isMobile?: Boolean;
 };
 
-export const CellBadge = ({ value, state, visible = true }: Props) => {
+export const CellBadge = ({
+  value,
+  state,
+  visible = true,
+  isMobile = false,
+}: Props) => {
   if (!value("cell_badge_switch") || !visible) {
     return null;
   }
@@ -45,13 +52,19 @@ export const CellBadge = ({ value, state, visible = true }: Props) => {
         data: [
           {
             func: () => {
-              return ifElseFocusedSelected(
-                state,
-                value("cell_badge_focused"),
-                value("cell_badge_selected"),
-                value("cell_badge_focused_selected"),
-                value("cell_badge_default")
-              );
+              return isMobile
+                ? ifElseSelected(
+                    state,
+                    value("cell_badge_selected"),
+                    value("cell_badge_default")
+                  )
+                : ifElseFocusedSelected(
+                    state,
+                    value("cell_badge_focused"),
+                    value("cell_badge_selected"),
+                    value("cell_badge_focused_selected"),
+                    value("cell_badge_default")
+                  );
             },
             args: [],
             propName: "uri",

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageStyle, View } from "react-native";
 import * as R from "ramda";
-import ImageComponent from "@applicaster/zapp-react-native-ui-components/Components/FastImage";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { useImageSourceWithDefault, useCheckFailedUri } from "./hooks";
+import useImageSize from "./hooks/useImageSize";
 
 type Source = {
   uri: string;
@@ -19,32 +19,13 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(ImageComponent, R.equals);
-
-const normalize = Math.ceil;
+const MemoizedImage = React.memo(QBImage, R.equals);
 
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
   source?.uri?.startsWith("file://");
 
-const isValidSize = (size: unknown): boolean =>
-  toFiniteNumberWithDefault(0, size) > 0;
-
-const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
-  const { width, height } = style;
-
-  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
-    return source;
-  }
-
-  return {
-    ...source,
-    maxWidth: normalize(width),
-    maxHeight: normalize(height),
-  };
-};
-
 export default function Image({
   style,
   uri,
@@ -82,10 +63,12 @@ export default function Image({
 
   const applyMaxSize = toBooleanWithDefaultFalse(otherProps?.applyMaxSize);
 
-  const sourceWithMaxSizes = React.useMemo(
-    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
-    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
-  );
+  const sourceWithMaxSizes = useImageSize({
+    style,
+    applyMaxSize,
+    source,
+    withDimensions,
+  });
 
   if (isFailedToLoadUri(uri) || !isValidExternalSource(source)) {
     return <View style={style} />;

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ImageStyle } from "react-native";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Source = {
+  uri: string;
+};
+
+type Props = Record<string, any> & {
+  style: ImageStyle;
+  uri?: string;
+  placeholderImage?: string;
+  entry?: ZappEntry | ZappFeed;
+  withDimensions: (source: Source) => Source;
+};
+
+const normalize = Math.ceil;
+
+const isValidSize = (size: unknown): boolean =>
+  toFiniteNumberWithDefault(0, size) > 0;
+
+type WidthDimensions = { aspectRatio?: number; width: number; height?: number };
+type HeightDimensions = {
+  aspectRatio?: number;
+  width?: number;
+  height: number;
+};
+type FullDimensions = { aspectRatio?: number; width: number; height: number };
+type Dimensions = WidthDimensions | HeightDimensions | FullDimensions;
+
+const calculateDimensions = ({ aspectRatio, width, height }: Dimensions) => {
+  if (aspectRatio) {
+    return {
+      width: width || height * aspectRatio,
+      height: height || width / aspectRatio,
+    };
+  }
+
+  return { width, height };
+};
+
+const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
+  const { width, height } = calculateDimensions(style);
+
+  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
+    return source;
+  }
+
+  return {
+    ...source,
+    maxWidth: normalize(width),
+    maxHeight: normalize(height),
+  };
+};
+
+export default function useImageSize(props: Props) {
+  const { style, applyMaxSize, source, withDimensions } = props;
+
+  const sourceWithMaxSizes = React.useMemo(
+    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
+    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
+  );
+
+  return sourceWithMaxSizes;
+}

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -18,6 +18,7 @@ type LiveImageProps = {
   imageKey?: string;
   state: "focused" | "unfocused" | "selected";
   audio_muted_by_default?: boolean;
+  uri: string; // cover image url
 };
 
 const DEFAULT_PLAYER_IDENTIFIER = "QuickBrickPlayerPlugin";
@@ -176,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]
@@ -209,10 +223,11 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   return (
     <>
-      <Image {...props} />
+      <Image {...props} applyMaxSize />
       {isShouldRender && (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
+            uri={props.uri}
             playerId={cellUUID}
             playerPluginId={playerPluginId}
             screenConfig={screenConfig}

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { isNil } from "ramda";
-import { Image as RNImage, ImageStyle, View } from "react-native";
+import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
   IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 import { useGetImageDimensions } from "./hooks";
 import {
@@ -59,7 +60,7 @@ const SecondaryImageComponent = (props: Props) => {
 
   return (
     <View style={style} onLayout={onAsyncRender}>
-      <RNImage
+      <Image
         {...props}
         source={{ uri }}
         style={{

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -23,7 +23,11 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
-  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
+  const isSelected = React.useMemo(
+    () => cellState === "selected",
+    [item?.id, cellState]
+  );
+
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -1,6 +1,7 @@
-import { path, pathOr } from "ramda";
+import { path } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
+  getColorFromData,
   getKeyForLabel,
   mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
@@ -48,15 +49,12 @@ export const CollapsibleTextContainer = ({
       ]),
       {
         func: (data) => {
-          const value = getValue("background_color");
-
-          // check if value is a reference to an extension
-          if (value.startsWith("extensions")) {
-            return pathOr(value, value.split("."), data);
-          } else {
-            // return default value
-            return additionalStyles.backgroundColor;
-          }
+          return getColorFromData({
+            data,
+            getValue,
+            key: "background_color",
+            defaultColor: additionalStyles.backgroundColor,
+          });
         },
         propName: "backgroundColor",
       },

package/Components/MasterCell/utils/index.ts

@@ -125,13 +125,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action.module.context._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
+
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
+
+    return false;
   });
 
   return filteredChildren;

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