@applicaster/zapp-react-native-ui-components 15.1.0-rc.1 → 16.0.0-rc.1

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

@@ -1,19 +1,21 @@
 import * as React from "react";
-import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
+type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = path(["source", "context"]);
-const getSourceUri = path(["source", "uri"]);
-const getState = path(["state"]);
+const getSourceContext = (source: Source) => source?.context;
+const getSourceUri = (source: Source) => source?.uri;
 
-export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+export const useImageSource = ({
+  uri,
+  entry,
+  otherProps: { source, state: uriState },
+}): Return => {
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -38,7 +40,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -47,7 +49,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, otherProps) => {
+const getSource = (uri, showDefault, placeholderImage, source) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -60,7 +62,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -74,10 +76,9 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps,
+  otherProps: { state: uriState, source },
 }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -98,5 +99,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, otherProps);
+  return getSource(uri, showDefault, placeholderImage, source);
 };

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

@@ -1,6 +1,5 @@
 import * as React from "react";
-import merge from "lodash/merge";
-import { clone } from "@applicaster/zapp-react-native-utils/utils";
+import { merge, clone } from "@applicaster/zapp-react-native-utils/utils";
 import { Platform, View, ViewStyle } from "react-native";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { isTV, isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+type Props = {
+  children?: React.ReactNode;
+  style?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onPress?: () => void;
+};
+
+export function PressableView({
+  children,
+  style = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+  onPress,
+}: Props) {
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={style}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+}

package/Components/MasterCell/DefaultComponents/SecondaryImage/hooks/__tests__/useGetImageDimensions.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 import { useGetImageDimensions } from "../useGetImageDimensions";
@@ -13,15 +13,16 @@ jest.spyOn(Image, "getSize").mockImplementation((_uri, success) => {
 
 describe("useGetImageDimensions", () => {
   it("should return aspect ration initially when known dimensions", async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useGetImageDimensions("https://some_url.com", WIDTH, undefined)
     );
 
     expect(result.current).toBeUndefined();
-    await waitForNextUpdate();
 
-    expect(result.current).toEqual(
-      getDimension({ width: WIDTH, height: HEIGTH })
-    );
+    await waitFor(() => {
+      expect(result.current).toEqual(
+        getDimension({ width: WIDTH, height: HEIGTH })
+      );
+    });
   });
 });

package/Components/MasterCell/DefaultComponents/Text/hooks/useText.ts

@@ -45,6 +45,7 @@ export const useTextLabel = ({ label, entry }): string => {
   const [entryStateLocal, setEntryStateLocal] =
     React.useState(initialEntryState);
 
+  // For favourites
   React.useEffect(() => {
     return action?.addListeners?.(({ entryState, entry: actionEntry }) => {
       if (entry.id === actionEntry.id) {
@@ -53,6 +54,16 @@ export const useTextLabel = ({ label, entry }): string => {
     });
   }, []);
 
+  // For rest actions
+  React.useEffect(() => {
+    // Update entryStateLocal when action state changes. Example: state change when pressing the download button.
+    if (typeof action?.addListener === "function") {
+      return action.addListener(String(entry?.id), (nextState) => {
+        setEntryStateLocal(nextState);
+      });
+    }
+  }, []);
+
   if (context && name && action) {
     return prepareHebrewText(extractLabel(entryStateLocal.label, name), isRTL);
   }

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

@@ -0,0 +1,141 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { defaultComponents } from "../index";
+import { elementMapper } from "../../elementMapper";
+
+const WrapperProbe = jest.fn(({ children }) => <>{children}</>);
+const LeafProbe = jest.fn(() => null);
+
+const components = {
+  ...defaultComponents,
+  View: WrapperProbe,
+  Text: LeafProbe,
+};
+
+const entry = { id: "entry-1" };
+const item = { id: "item-1" };
+
+const renderNode = (node) =>
+  render(
+    <React.Fragment>{elementMapper(components)(node as never)}</React.Fragment>
+  );
+
+describe("DataProvider", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("injects resolved runtime props under dataProviderProps into the direct child and its direct children only", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [
+            {
+              type: "View",
+              props: {},
+              elements: [{ type: "Text", props: {} }],
+            },
+          ],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+
+    expect(LeafProbe).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        dataProviderProps: expect.anything(),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("derives the namespaced values from the resolved runtime props", () => {
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "item", item },
+      elements: [
+        {
+          type: "View",
+          props: {},
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ item }),
+      }),
+      expect.anything()
+    );
+  });
+
+  it("does not overwrite explicit dataProviderProps on the direct child", () => {
+    const explicitEntry = { id: "explicit" };
+
+    renderNode({
+      type: "DataProvider",
+      props: { _dataKey: "entry", entry },
+      elements: [
+        {
+          type: "View",
+          props: {
+            dataProviderProps: {
+              entry: explicitEntry,
+              source: "child",
+            },
+          },
+          elements: [{ type: "View", props: {} }],
+        },
+      ],
+    });
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({
+          entry: explicitEntry,
+          source: "child",
+        }),
+      }),
+      expect.anything()
+    );
+
+    expect(WrapperProbe).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        dataProviderProps: expect.objectContaining({ entry }),
+      }),
+      expect.anything()
+    );
+  });
+});

package/Components/MasterCell/DefaultComponents/index.ts

@@ -6,26 +6,29 @@ import PureImage from "./Image";
 import { CollapsibleTextContainer } from "../SharedUI/CollapsibleTextContainer/CollapsibleTextContainer";
 import { Toggle } from "./Toggle";
 import { Button } from "./Button";
-import { FocusableView } from "./FocusableView";
 import ProgressBar from "../SharedUI/ProgressBar/ProgressBar";
 import { LiveImage } from "./LiveImage";
 import { DynamicBadge } from "./DynamicBadge";
 import { SecondaryImage } from "./SecondaryImage/Image";
 import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
+import { DataProvider } from "./DataProvider";
 import { TvActionButtons } from "./tv/TvActionButtons";
-import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { TvActionButton } from "./tv/TvActionButtons/TvActionButton";
+import { ButtonContainerView } from "./ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
+import { ActionButton as MobileActionButton } from "./mobile/MobileActionButtons/ActionButton";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,
-  FocusableView,
   ProgressBar,
   Toggle,
   LiveImage,
@@ -34,5 +37,8 @@ export const defaultComponents = {
   DynamicBadge,
   SecondaryImage,
   TvActionButtons,
+  TvActionButton,
+  MobileActionButton,
   CellBadge,
+  DataProvider,
 };

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -0,0 +1,135 @@
+import React from "react";
+import { PressableView } from "../../PressableView";
+
+import { ActionButtonController } from "../../ActionButtonsCore/components";
+
+import { masterCellLogger } from "../../../logger";
+import { resolveLabelText, selectByAssetFlavour } from "./utils";
+
+type ChildElementProps = {
+  children?: React.ReactNode;
+  mobileActionRole?: "asset" | "label" | "label_container";
+  uri?: string;
+  asset?: React.ReactNode;
+  state?: "default" | "focused";
+  entry?: any;
+};
+
+const isValidElement = (
+  child: React.ReactNode
+): child is React.ReactElement<ChildElementProps> =>
+  React.isValidElement(child);
+
+export const ActionButton = ({ style, children, action, entry, ...props }) => {
+  return (
+    <ActionButtonController
+      action={action}
+      entry={entry}
+      onMissingActionContext={(identifier) => {
+        masterCellLogger.warning(
+          `You're missing an action plugin(${identifier || action?.identifier}) required by your mobile action button.`
+        );
+      }}
+    >
+      {({ actionContext, actionState, isActive, onPress }) => {
+        const supportsEntryState =
+          typeof actionContext?.initialEntryState === "function";
+
+        const shouldRenderAsset = Boolean(
+          supportsEntryState ? actionState?.mobileButtonAssets : false
+        );
+
+        const shouldRenderLabel = Boolean(
+          supportsEntryState && resolveLabelText(actionState?.label)
+        );
+
+        const _cloneChildrenWithState = (
+          nodes?: React.ReactNode
+        ): React.ReactNode => {
+          return React.Children.map(nodes, (child) => {
+            if (!isValidElement(child)) {
+              return child;
+            }
+
+            const role = child.props.mobileActionRole;
+
+            const nextChildren = _cloneChildrenWithState(child.props.children);
+
+            // Prevents of the asset rendering when the action doesn't provide asset for current entry state
+            if (role === "asset" && !shouldRenderAsset) {
+              return null;
+            }
+
+            // Prevents of the label rendering when the action doesn't provide label for current entry state.
+            // Also prevents of the label container when it doesn't have children to avoid unnecessary empty space.
+            if (role === "label" && !shouldRenderLabel) {
+              return null;
+            }
+
+            // Prevents of the label container rendering when it doesn't have children to avoid unnecessary empty space.
+            if (
+              role === "label_container" &&
+              React.Children.count(nextChildren) === 0
+            ) {
+              return null;
+            }
+
+            const nextProps: Partial<ChildElementProps> = {};
+
+            // Inject asset or uri to Asset component with role asset
+            if (role === "asset") {
+              const resolvedAsset = selectByAssetFlavour(
+                actionState,
+                action.flavour,
+                isActive
+              );
+
+              if (typeof resolvedAsset === "function") {
+                const AssetComponent =
+                  resolvedAsset as CellActionAssetComponent;
+
+                nextProps.asset = (
+                  <AssetComponent
+                    flavour={action.flavour || "flavour_1"}
+                    width={action.width}
+                    height={action.height}
+                  />
+                );
+              } else {
+                nextProps.uri = resolvedAsset;
+              }
+            }
+
+            // Inject state and entry to Text component with role label
+            if (role === "label") {
+              nextProps.state = isActive ? "focused" : "default";
+              nextProps.entry = entry;
+            }
+
+            if (nextChildren !== child.props.children) {
+              nextProps.children = nextChildren;
+            }
+
+            return React.cloneElement(child, nextProps);
+          });
+        };
+
+        if (!shouldRenderAsset && !shouldRenderLabel) {
+          return null;
+        }
+
+        return (
+          <PressableView
+            testID={props.testID || `${entry?.id}`}
+            style={isActive ? { ...style, ...props.focusedStyles } : style}
+            onPress={onPress}
+            accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
+            accessibilityHint={props.accessibilityHint}
+          >
+            {_cloneChildrenWithState(children)}
+          </PressableView>
+        );
+      }}
+    </ActionButtonController>
+  );
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -0,0 +1,33 @@
+import { AssetComponent } from "./AssetComponent";
+
+type Props = {
+  testID?: string;
+  style?: Record<string, unknown>;
+};
+
+type AssetNode = {
+  type: "ReactComponent";
+  style?: Record<string, unknown>;
+  additionalProps: {
+    component: typeof AssetComponent;
+    requiresCellUUID: true;
+    renderChildren: false;
+    mobileActionRole: "asset";
+    testID?: string;
+  };
+};
+
+/** Asset used in conjunction with ActionButton inside mobile action buttons, uri is provided by ActionButton  */
+export const Asset = ({ testID, style }: Props): AssetNode => {
+  return {
+    type: "ReactComponent",
+    style,
+    additionalProps: {
+      component: AssetComponent,
+      requiresCellUUID: true,
+      renderChildren: false,
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/AssetComponent.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { View } from "react-native";
+import { ImageContainer } from "../../ImageContainer";
+
+type Props = {
+  style?: Record<string, unknown>;
+  uri?: string;
+  asset?: React.ReactNode;
+  testID?: string;
+  cellUUID?: string;
+};
+
+export const AssetComponent = (props: Props & Record<string, unknown>) => {
+  return props.asset && React.isValidElement(props.asset) ? (
+    <View style={props.style} testID={props.testID}>
+      {React.cloneElement(props.asset, { cellUUID: props.cellUUID })}
+    </View>
+  ) : (
+    // @ts-ignore
+    <ImageContainer {...props} uri={props.uri} />
+  );
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Button.ts

@@ -0,0 +1,125 @@
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
+
+import { Asset } from "./Asset";
+import { TextLabelsContainer } from "./TextLabelsContainer";
+import {
+  getAssetStyles,
+  getContentDirection,
+  getContentsAlignment,
+  getPressableStyles,
+  getTextLabelStyles,
+} from "./utils";
+
+const displayModeStyle = (value) => {
+  const mode = value("display_mode") || "dynamic";
+
+  if (mode === "fixed") {
+    return {
+      width: toNumberWithDefault(140, value("width")),
+    };
+  }
+
+  if (mode === "fill") {
+    return {
+      flex: 1,
+    };
+  }
+
+  return {};
+};
+
+type Props = {
+  index: number;
+  value: Function;
+  stylePrefix: string;
+  specificPrefix: string;
+  spacingStyle: Record<string, unknown>;
+};
+
+export const Button = ({
+  index,
+  value,
+  stylePrefix,
+  specificPrefix,
+  spacingStyle,
+}: Props) => {
+  // Retrives values depending to the slot
+  const getSlotBasedValue = (property: string) =>
+    value(`${specificPrefix}_${property}`);
+
+  /**
+   * Retrieves values depending to the independ_style toggle:
+   * (e.g for button value button_2_label_enabled returns button_1_label_enabled when independent_style: false)
+   */
+  const getValue = (property: string) => value(`${stylePrefix}_${property}`);
+
+  const assetEnabled = getValue("asset_enabled");
+  const labelEnabled = getValue("label_enabled");
+
+  if (!getSlotBasedValue("button_enabled")) {
+    return null;
+  }
+
+  if (!assetEnabled && !labelEnabled) {
+    return null;
+  }
+
+  const testID = `mobile_action_button_${index + 1}`;
+  const actionIdentifier = getSlotBasedValue("assign_action");
+  const assetAlignment = getValue("asset_alignment") || "left";
+  const actionAssetFlavour = getValue("action_asset_flavour");
+  const contentsAlignment = getValue("contents_alignment") || "center";
+
+  return {
+    type: "MobileActionButton",
+    style: {
+      flexDirection: getContentDirection(assetAlignment),
+      alignContent: "center",
+      alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
+      justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
+      ...getPressableStyles(getValue),
+      ...displayModeStyle(getValue),
+      ...spacingStyle,
+    },
+    additionalProps: {
+      action: {
+        identifier: actionIdentifier,
+        flavour: actionAssetFlavour,
+        width: toNumberWithDefault(24, getValue("asset_width")),
+        height: toNumberWithDefault(24, getValue("asset_height")),
+      },
+      focusedStyles: {
+        backgroundColor: getValue("focused_background_color"),
+        borderColor: getValue("focused_border_color"),
+      },
+      testID,
+    },
+    elements: compact([
+      assetEnabled
+        ? Asset({
+            style: getAssetStyles(getValue),
+            testID,
+          })
+        : null,
+
+      labelEnabled
+        ? TextLabelsContainer({
+            style: getTextLabelStyles(getValue),
+            extraProps: {
+              normalStyles: {
+                color: getValue("font_color"),
+              },
+              focusedStyles: {
+                color: getValue("focused_font_color"),
+              },
+              transformText: getValue("text_transform") || "default",
+              numberOfLines: getValue("number_of_lines"),
+            },
+            actionIdentifier,
+            testID,
+          })
+        : null,
+    ]),
+  };
+};

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Spacer.ts

@@ -0,0 +1,16 @@
+type Props = {
+  enabled?: boolean;
+};
+
+export const Spacer = ({ enabled = false }: Props = {}) => {
+  if (!enabled) {
+    return null;
+  }
+
+  return {
+    type: "View",
+    style: {
+      flex: 1,
+    },
+  };
+};