@applicaster/zapp-react-native-ui-components 15.0.0-rc.14 → 15.0.0-rc.140

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,261 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { TouchableOpacity } from "react-native";
+
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { masterCellLogger } from "../logger";
+import {
+  buildLegacySelection,
+  resolveIsActive,
+  resolveLabelText,
+} from "./mobile/MobileActionButtons/helpers";
+
+type ChildElementProps = {
+  children?: React.ReactNode;
+  mobileActionRole?: string;
+  uri?: string;
+  state?: "default" | "focused";
+};
+
+type Props = {
+  children?: React.ReactNode;
+  item: ZappEntry | ZappFeed;
+  action?: {
+    identifier?: string;
+    flavour?: "flavour_1" | "flavour_2";
+  };
+  style?: Record<string, unknown>;
+  focusedStyles?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+};
+
+const isValidElement = (
+  child: React.ReactNode
+): child is React.ReactElement<ChildElementProps> =>
+  React.isValidElement(child);
+
+/** retrieves asset uri for a given flavour,
+ * if flavour is not provided, returns the default asset from `asset` or selected state asset (if available)
+ * asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array.
+ * mobileButtonAssets asset can be:
+ *  provided as asset path,
+ *  provided as [default || flavour_1, alternative || flavour_2] array,
+ *  provided as [[] as flavour_1, [] as flavour_2] array for multiple flavours, where each flavour can be either a path or [default, alternative] array.
+ *
+ * isActive reflect the state of the action and can be used to render different asset for active/inactive state if asset is provided as array
+ *
+ * */
+const selectByAssetFlavour = (
+  actionState: {
+    asset?: string | [string, string];
+    mobileButtonAssets?: [string, string] | [string, string][];
+  },
+  flavour?: "flavour_1" | "flavour_2",
+  isActive?: boolean
+) => {
+  if (actionState.mobileButtonAssets) {
+    if (flavour) {
+      if (flavour === "flavour_1") {
+        if (typeof actionState.mobileButtonAssets[0] === "string") {
+          return actionState.mobileButtonAssets[0];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[0])) {
+          return actionState.mobileButtonAssets[0][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[0];
+      } else if (flavour === "flavour_2") {
+        if (typeof actionState.mobileButtonAssets[1] === "string") {
+          return actionState.mobileButtonAssets[1];
+        }
+
+        if (Array.isArray(actionState.mobileButtonAssets[1])) {
+          return actionState.mobileButtonAssets[1][isActive ? 1 : 0];
+        }
+
+        return actionState.mobileButtonAssets[1];
+      }
+    }
+
+    return Array.isArray(actionState.mobileButtonAssets[0])
+      ? actionState.mobileButtonAssets[0][isActive ? 1 : 0]
+      : actionState.mobileButtonAssets[0];
+  } else {
+    return typeof actionState?.asset === "string"
+      ? actionState.asset
+      : actionState.asset[isActive ? 1 : 0];
+  }
+};
+
+export function PressableView({
+  children,
+  item,
+  action,
+  style = {},
+  focusedStyles = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+}: Props) {
+  const actionContext = useActions(action?.identifier);
+
+  const actionDisabled =
+    typeof actionContext?.isActionAvailable === "function" &&
+    !actionContext.isActionAvailable(item);
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function" && !actionDisabled;
+
+  const [actionState, setActionState] = useState(() =>
+    supportsEntryState ? actionContext.initialEntryState(item) : null
+  );
+
+  useEffect(() => {
+    if (supportsEntryState) {
+      setActionState(actionContext.initialEntryState(item));
+    }
+  }, [supportsEntryState, item, actionContext]);
+
+  useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext.addListener(String(item?.id), (nextState) => {
+        setActionState(nextState);
+      });
+    }
+
+    if (typeof actionContext?.addListeners === "function") {
+      return actionContext.addListeners(({ entryState, entry }) => {
+        if (entry?.id === item?.id) {
+          setActionState(entryState);
+        }
+      });
+    }
+
+    return undefined;
+  }, [actionContext, item?.id]);
+
+  const legacySelected = useMemo(() => {
+    if (!actionContext || supportsEntryState) {
+      return false;
+    }
+
+    return buildLegacySelection(item, actionContext);
+  }, [actionContext, supportsEntryState, item]);
+
+  const isActive = resolveIsActive(actionState, legacySelected);
+
+  const labelText = supportsEntryState
+    ? resolveLabelText(actionState?.label)
+    : "";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState
+      ? actionState?.asset && actionState?.mobileButtonAssets
+      : false
+  );
+
+  const shouldRenderLabel = Boolean(labelText);
+
+  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);
+
+      if (role === "asset" && !shouldRenderAsset) {
+        return null;
+      }
+
+      if (role === "label" && !shouldRenderLabel) {
+        return null;
+      }
+
+      if (
+        role === "label_container" &&
+        React.Children.count(nextChildren) === 0
+      ) {
+        return null;
+      }
+
+      const nextProps: Partial<ChildElementProps> = {};
+
+      if (role === "asset") {
+        if (action.flavour) {
+          nextProps.uri = selectByAssetFlavour(
+            actionState,
+            action.flavour,
+            isActive
+          );
+        }
+      }
+
+      if (role === "label") {
+        nextProps.state = isActive ? "focused" : "default";
+      }
+
+      if (nextChildren !== child.props.children) {
+        nextProps.children = nextChildren;
+      }
+
+      return React.cloneElement(child, nextProps);
+    });
+  };
+
+  const onPress = useCallback(async () => {
+    if (!actionContext) {
+      return;
+    }
+
+    if (supportsEntryState) {
+      return actionContext.invokeAction(item, {
+        updateState: setActionState,
+      });
+    }
+
+    const favouritesAction = legacySelected
+      ? actionContext.removeFavourite
+      : actionContext.addFavourite;
+
+    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
+
+    return toggleAction?.(item);
+  }, [actionContext, supportsEntryState, item, legacySelected]);
+
+  if (!actionContext) {
+    masterCellLogger.warning(
+      `You're missing an action plugin(${action?.identifier}) required by your mobile action button.`
+    );
+
+    return null;
+  }
+
+  if (actionDisabled) {
+    return null;
+  }
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID || `${item?.id}`}
+      accessibilityLabel={accessibilityLabel || `${item?.id}`}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={isActive ? { ...style, ...focusedStyles } : style}
+    >
+      {cloneChildrenWithState(children)}
+    </TouchableOpacity>
+  );
+}

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

@@ -3,8 +3,8 @@ import { isNil } from "ramda";
 import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
-  IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
+  IMAGE_SIZING_FIT,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
@@ -25,49 +25,51 @@ interface Props {
   fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
-  onAsyncRender: () => void;
+  onAsyncRender?: () => void;
 }
 
 /** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageDynamic = withAsyncRenderHOC(
+  (props: Props & { onAsyncRender: () => void }) => {
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
+    const imageDimension = useGetImageDimensions(
+      uri,
+      style.width as number,
+      isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+    );
 
-  const containerHeight = imageDimension?.height;
+    const containerHeight = imageDimension?.height;
 
-  const containerWidth = style?.width;
+    const containerWidth = style?.width;
 
-  if (isNil(imageDimension?.aspectRatio)) {
-    return null;
-  }
+    if (isNil(imageDimension?.aspectRatio)) {
+      return null;
+    }
 
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      <Image
-        {...props}
-        source={{ uri }}
-        style={{
-          ...getStyle({
-            imageSizing,
-            fitPosition,
-            displayMode,
-            imageDimension,
-            containerHeight,
-            containerWidth,
-          }),
-          borderRadius: style.borderRadius,
-          aspectRatio: imageDimension.aspectRatio,
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
+    );
+  }
+);
 
 /** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
 const SecondaryImageFixed = (props: Props) => {
@@ -79,7 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender,
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -89,7 +90,7 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style} onLayout={onAsyncRender}>
+    <View style={style}>
       {isNil(imageDimension?.aspectRatio) ? null : (
         <Image
           {...props}
@@ -128,4 +129,4 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
-export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);
+export const SecondaryImage = SecondaryImageComponent;

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

@@ -10,6 +10,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri={undefined}
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -23,6 +27,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri="someurl"
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -36,6 +44,93 @@ describe("SecondaryImage - Image", () => {
         uri="someUrl"
         displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode without image until loaded", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="fixed"
+        uri="someurl"
+        style={{ width: 100, height: 100, borderRadius: 5 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render in dynamic mode without image", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={null}
+        style={{ width: 100, height: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode with known dimensions", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage dynamic mode should call onAsyncRender when provided", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="dynamic"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+  });
+
+  it("SecondaryImage fixed mode should not use async render props", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
       />
     );
 

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -1,9 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
 exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
+exports[`SecondaryImage - Image SecondaryImage should not render in dynamic mode without image 1`] = `null`;
+
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
   onLayout={[Function]}
@@ -17,6 +53,10 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 >
   <Image
     displayMode="dynamic"
+    fitPosition="center"
+    fixedHeight={0}
+    fixedWidth={0}
+    imageSizing="fill"
     onAsyncRender={[Function]}
     source={
       {
@@ -35,3 +75,49 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   />
 </View>
 `;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 5,
+      "height": 100,
+      "width": 100,
+    }
+  }
+/>
+`;