@applicaster/zapp-react-native-ui-components 12.0.0-rc.10 → 12.0.0-rc.100

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,11 +1,23 @@
 import React from "react";
-import { Text } from "react-native";
+import RN from "react-native";
 import { Provider } from "react-redux";
 import TestRenderer from "react-test-renderer";
-import configureStore from "redux-mock-store";
-import CustomText from "../Text";
+import configureStoreFn from "redux-mock-store";
 
-const mockStore = configureStore();
+const mockUseIsRTL = jest.fn(() => true);
+const mockGetIsRTL = jest.fn(() => true);
+const mockUseLocalizedStrings = jest.fn(() => ({}));
+const mockGetUILanguage = jest.fn(() => "he-HE");
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+  getIsRTL: mockGetIsRTL,
+  useLocalizedStrings: mockUseLocalizedStrings,
+  getUILanguage: mockGetUILanguage,
+}));
+
+const CustomText = require("../Text").default;
+const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -22,7 +34,7 @@ const getRenderedText = (label: string, store: any) => {
     </Provider>
   );
 
-  return testRenderer.root.findByType(Text).props.children;
+  return testRenderer.root.findByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -34,7 +46,7 @@ describe("RTL app: Hebrew text contains english word", () => {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
-      countryCode: "HE",
+      countryCode: "IL",
     },
   });
 
@@ -47,18 +59,22 @@ describe("RTL app: Hebrew text contains english word", () => {
 
   it("Hebrew text contains not first english word", () => {
     const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
-
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
     const renderedText = getRenderedText(textWithoutEnglishWord, store);
-
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
 
 describe("LTR app: English text", () => {
+  beforeAll(() => {
+    mockUseIsRTL.mockReturnValue(false);
+    mockGetIsRTL.mockReturnValue(false);
+    mockGetUILanguage.mockReturnValue("en-US");
+  });
+
   const englishText = "Test sentence";
 
   const store = mockStore({
@@ -71,7 +87,6 @@ describe("LTR app: English text", () => {
 
   it("English text", () => {
     const renderedText = getRenderedText(englishText, store);
-
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -61,7 +61,10 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,6 +7,10 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -17,6 +21,7 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
+  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -26,10 +31,13 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         filteredChildren
       )}

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,10 @@ 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,
+            valueFromLayout: additionalStyles.backgroundColor,
+          });
         },
         propName: "backgroundColor",
       },

package/Components/MasterCell/dataAdapter.ts

@@ -37,14 +37,28 @@ function retrieveData(entry, func, args) {
  */
 
 export function configInflater(
-  entry,
-  { type, style, additionalProps = {}, data = [], elements }
+  entry: any,
+  {
+    type,
+    style,
+    additionalProps = {},
+    data = [],
+    elements,
+  }: {
+    type: any;
+    style: any;
+    additionalProps?: Record<string, any>;
+    data?: Array<{ propName: string; func: Function; args: any[] }>;
+    elements?: any[];
+  }
 ) {
-  const props = R.reduce(
-    (acc, curr) =>
-      R.assoc(curr.propName, retrieveData(entry, curr.func, curr.args), acc),
-    additionalProps,
-    data
+  const props = data.reduce(
+    (acc, curr) => {
+      acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
+
+      return acc;
+    },
+    { ...additionalProps }
   );
 
   let adjustedElements;

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -53,7 +53,7 @@ export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
       measure(viewRef?.current, ({ width, height }) => {
         setDimensions({
           width,
-          height,
+          height: Math.ceil(height),
         });
       });
     })

package/Components/MasterCell/index.tsx

@@ -52,6 +52,8 @@ export function masterCellBuilder({
   const { View } = componentsMap;
   const elementsBuilder = dataAdapter(cellConfiguration);
 
+  // This is very expensive operation
+  // Keep calls to minimum
   const hasFocusableInside = hasFocusableInsideBuilder(elementsBuilder);
 
   /**
@@ -84,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item, entryIsSelected]
+      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/__tests__/insertBetween.test.js

@@ -9,4 +9,13 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
+
+  it("insertBetween", () => {
+    const separator = (index) => `separator:${index}`;
+    const items = [1, 2, 3];
+
+    const result = insertBetween(separator, items);
+
+    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo } from "react";
 import * as R from "ramda";
+import validateColor from "validate-color";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -9,6 +10,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 import { PushTopicManager } from "@applicaster/zapp-react-native-bridge/PushNotifications/PushTopicManager";
 import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 import { getCellState } from "../../Cell/utils";
+import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -47,44 +49,29 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-const isColorOrEmpty = (value) =>
-  value === null ||
-  value === undefined ||
-  value === "" ||
-  value.startsWith("#") ||
-  value.startsWith("rgba") ||
-  value === "transparent";
-
 function resolveColorForProp(entry, style, colorProp) {
-  const colorValue = style[colorProp];
-
-  if (isColorOrEmpty(colorValue)) {
-    return style;
+  const colorFromProp = style[colorProp];
+  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+
+  if (
+    nestedEntryValue === undefined &&
+    !validateColor(colorFromProp.replace(".00", "")) // https://github.com/dreamyguy/validate-color/issues/44
+  ) {
+    logWarning(colorFromProp, style, entry, nestedEntryValue);
   }
 
-  const pathParts = colorValue.split(".");
-  let nestedEntryValue = entry;
-
-  for (const part of pathParts) {
-    if (nestedEntryValue === null || typeof nestedEntryValue !== "object") {
-      logWarning(colorValue, style, entry, nestedEntryValue);
-
-      return style;
-    }
-
-    nestedEntryValue = nestedEntryValue[part];
-  }
+  const colorValue = getColorFromData({
+    data: entry,
+    valueFromLayout: colorFromProp,
+  });
 
-  if (nestedEntryValue === undefined) {
-    logWarning(colorValue, style, entry, nestedEntryValue);
+  if (!colorValue) {
+    logWarning(colorProp, style, entry, colorValue);
 
     return style;
   }
 
-  // After successful traversal, set the value.
-  style[colorProp] = nestedEntryValue;
-
-  return style;
+  return { ...style, [colorProp]: colorValue };
 }
 
 export function resolveColor(entry, style) {
@@ -125,13 +112,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/MeasurmentsPortal/BasicMeasurementsPortal.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
+import { MeasurementPortalContext } from "./MeasurementsPortal";
 
 type Props = {
   Component: React.ElementType;
@@ -19,13 +20,16 @@ const _MeasurementsPortal = (
   { Component, onLayout, componentProps, containerStyle }: Props,
   ref
 ) => (
-  <View
-    onLayout={onLayout}
-    style={[styles.container, containerStyle]}
-    ref={ref}
-  >
-    <Component {...componentProps} />
-  </View>
+  // hack for cell to determine if cell is in measurement mode
+  <MeasurementPortalContext.Provider value={{}}>
+    <View
+      onLayout={onLayout}
+      style={[styles.container, containerStyle]}
+      ref={ref}
+    >
+      <Component {...componentProps} />
+    </View>
+  </MeasurementPortalContext.Provider>
 );
 
 export const MeasurementsPortal = React.forwardRef(_MeasurementsPortal);

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -35,7 +35,16 @@ const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
   );
 };
 
-const MeasurementPortalContext = React.createContext(null);
+type MeasurementPortalContextType = {
+  measureComponent?: (
+    comp: React.ElementType,
+    props: Record<any, any>
+  ) => Promise<any>;
+  measuringInProgress?: boolean;
+};
+
+const MeasurementPortalContext =
+  React.createContext<null | MeasurementPortalContextType>(null);
 
 const MeasurementsPortalContextProvider = ({ children }) => {
   const Component = React.useRef(View);

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