@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5114122134 → 12.0.0-alpha.5208030571

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/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

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

package/Components/ModalComponent/Button/Item.tsx

@@ -0,0 +1,82 @@
+import React, { ReactChild } from "react";
+import { View, StyleSheet } from "react-native";
+
+export type ItemProps = {
+  backgroundColor: string;
+  focusedBackgroundColor: string;
+  selectedBackgroundColor?: string;
+  focusectedBackgroundColor?: string;
+  borderRadius: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+  marginTop: number;
+  paddingTop: number;
+  paddingBottom: number;
+  paddingRight: number;
+  paddingLeft: number;
+  focused?: boolean;
+  selected?: boolean;
+  children?: ReactChild[];
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+});
+
+function getBackgroundColor({
+  selected,
+  focused,
+  backgroundColor,
+  focusedBackgroundColor,
+  selectedBackgroundColor,
+  focusectedBackgroundColor,
+}) {
+  switch (true) {
+    case selected && focused:
+      return focusectedBackgroundColor;
+    case selected && !focused:
+      return selectedBackgroundColor;
+    case !selected && focused:
+      return focusedBackgroundColor;
+    default:
+      return backgroundColor;
+  }
+}
+
+export function Item(props: ItemProps) {
+  const {
+    backgroundColor,
+    focusedBackgroundColor,
+    focusectedBackgroundColor,
+    selectedBackgroundColor,
+    children,
+    focused,
+    selected,
+    ...itemStyles
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        itemStyles,
+        {
+          backgroundColor: getBackgroundColor({
+            selected,
+            focused,
+            focusectedBackgroundColor,
+            focusedBackgroundColor,
+            selectedBackgroundColor,
+            backgroundColor,
+          }),
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}

package/Components/ModalComponent/Button/ItemIcon.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+
+export type ItemIconProps = {
+  width: number;
+  height: number;
+  asset?: string | string[] | CellActionAssetComponent;
+  flavour?: "flavour_1" | "flavour_2";
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+};
+
+function isImageAsset(asset) {
+  return typeof asset === "string" || Array.isArray(asset);
+}
+
+function getImageAsset(asset, flavour) {
+  if (typeof asset === "string") return asset;
+
+  if (flavour) {
+    const flavourIndex = Number(flavour.replace("flavour_", ""));
+    if (flavourIndex > -1) return asset?.[flavourIndex - 1];
+  }
+
+  return asset?.[0];
+}
+
+export function ItemIcon(props: ItemIconProps) {
+  const { width, height, asset, flavour, ...styles } = props;
+
+  if (isImageAsset(asset)) {
+    const imageAsset = getImageAsset(asset, flavour);
+
+    return (
+      <View style={styles}>
+        <QBImage
+          fadeDuration={0}
+          source={{ uri: imageAsset }}
+          style={{ width, height }}
+        />
+      </View>
+    );
+  }
+
+  const AssetComponent = asset as CellActionAssetComponent;
+
+  return (
+    <View style={styles}>
+      <AssetComponent
+        width={width}
+        height={height}
+        style={styles}
+        flavour={flavour}
+      />
+    </View>
+  );
+}

package/Components/ModalComponent/Button/ItemLabel.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { textTransform } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+export type ItemLabelProps = {
+  label?: string | Record<string, string>;
+  fontFamily: string;
+  letterSpacing: number;
+  fontSize: number;
+  color: string;
+  focusColor: string;
+  selectedColor?: string;
+  hoverSelectedColor?: string;
+  lineHeight: number;
+  marginBottom: number;
+  marginTop: number;
+  marginLeft: number;
+  marginRight: number;
+  transform: string;
+  maxWidth: number;
+  focused?: boolean;
+  selected?: boolean;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "center",
+  },
+});
+
+function getColor({
+  selected,
+  focused,
+  color,
+  selectedColor,
+  focusColor,
+  hoverSelectedColor,
+}) {
+  switch (true) {
+    case selected && focused:
+      return hoverSelectedColor;
+    case selected && !focused:
+      return selectedColor;
+    case !selected && focused:
+      return focusColor;
+    default:
+      return color;
+  }
+}
+
+export function ItemLabel(props: ItemLabelProps) {
+  const {
+    label,
+    fontFamily,
+    letterSpacing,
+    fontSize,
+    color,
+    selectedColor,
+    focusColor,
+    hoverSelectedColor,
+    lineHeight,
+    marginBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    transform,
+    maxWidth,
+    focused,
+    selected,
+  } = props;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginBottom, marginLeft, marginRight, marginTop, maxWidth },
+      ]}
+    >
+      <Text
+        style={{
+          fontFamily,
+          fontSize,
+          letterSpacing,
+          color: getColor({
+            selected,
+            focused,
+            color,
+            selectedColor,
+            hoverSelectedColor,
+            focusColor,
+          }),
+          lineHeight,
+        }}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {textTransform(transform, label)}
+      </Text>
+    </View>
+  );
+}

package/Components/ModalComponent/Button/assets.ts

@@ -0,0 +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==";

package/Components/ModalComponent/Button/index.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo, useState } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { Item, ItemProps } from "./Item";
+import { ItemIcon, ItemIconProps } from "./ItemIcon";
+import { ItemLabel, ItemLabelProps } from "./ItemLabel";
+import { defaultSelectedAsset } from "./assets";
+import * as assets from "./assets";
+
+type ButtonProps = {
+  configuration: any;
+  width: number;
+  selectedItem?: any;
+  item: any; // Adjust type as needed
+  onPress: (item: any) => void; // Adjust type as needed
+  iconBaseProps?: ItemIconProps;
+  itemBaseProps?: ItemProps;
+  labelBaseProps?: ItemLabelProps;
+  disabled?: boolean;
+  label?: string | Record<string, string>;
+};
+
+const styles = StyleSheet.create({
+  label_icon_container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+});
+
+export function Button({
+  selectedItem,
+  item,
+  onPress,
+  configuration,
+  width,
+  iconBaseProps,
+  itemBaseProps,
+  labelBaseProps,
+  label,
+  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 itemIconProps = useMemo<ItemIconProps>(
+    () => ({
+      ...iconBaseProps,
+      asset: configuration[item.asset] ?? assets[item.asset] ?? item.asset,
+    }),
+    [configuration, item.asset]
+  );
+
+  const selectedItemIconProps = useMemo<ItemIconProps>(
+    () => ({
+      ...iconBaseProps,
+      asset:
+        configuration["modal_bottom_sheet_item_selected_icon"] ||
+        defaultSelectedAsset,
+      marginRight: 10,
+    }),
+    [configuration]
+  );
+
+  const itemLabelProps = useMemo<ItemLabelProps>(
+    () => ({
+      ...labelBaseProps,
+      label: label ?? configuration[item?.label] ?? item?.label ?? null,
+    }),
+    [configuration, item?.label]
+  );
+
+  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} />
+            )}
+            {itemLabelProps.label && (
+              <ItemLabel
+                {...itemLabelProps}
+                focused={focused}
+                selected={selected}
+              />
+            )}
+          </View>
+          {selected && <ItemIcon {...selectedItemIconProps} />}
+        </Item>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/Components/ModalComponent/Header/CloseButton.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+import { TouchableOpacity } from "react-native";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+// @ts-ignore
+import { defaultCloseAsset } from "./assets";
+
+export type CloseButtonProps = {
+  enabled: boolean;
+  close: () => void;
+  asset: string | undefined;
+  assetFocused: string | undefined;
+  height: number;
+  width: number;
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+};
+
+export function CloseButton(props: CloseButtonProps) {
+  const {
+    enabled,
+    width,
+    height,
+    marginBottom,
+    marginTop,
+    marginLeft,
+    marginRight,
+    asset,
+    assetFocused,
+    close,
+  } = props;
+
+  const [focused, setFocus] = React.useState(null);
+
+  const uri = useMemo(
+    () => (focused ? assetFocused : asset) || defaultCloseAsset,
+    [asset, assetFocused, focused]
+  );
+
+  if (!enabled) return null;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      style={{
+        marginBottom,
+        marginTop,
+        marginLeft,
+        marginRight,
+      }}
+      onPress={close}
+      onPressIn={() => setFocus(true)}
+      onPressOut={() => setFocus(false)}
+    >
+      <QBImage fadeDuration={0} source={{ uri }} style={{ width, height }} />
+    </TouchableOpacity>
+  );
+}