@applicaster/zapp-react-native-ui-components 16.0.0-rc.8 → 16.0.0-rc.80

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

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { PressableView } from "../../PressableView";
+import { usePressedState } from "../../../hooks";
 
 import { ActionButtonController } from "../../ActionButtonsCore/components";
 
@@ -20,7 +21,137 @@ const isValidElement = (
 ): child is React.ReactElement<ChildElementProps> =>
   React.isValidElement(child);
 
-export const ActionButton = ({ style, children, action, entry, ...props }) => {
+type ActionButtonContentProps = {
+  style: any;
+  children: React.ReactNode;
+  action: any;
+  focusedStyles: any;
+  entry: any;
+  props: Record<string, any>;
+  actionContext: any;
+  actionState: any;
+  isActive: boolean;
+  onPress: () => any;
+};
+
+const ActionButtonContent = ({
+  children,
+  action,
+  entry,
+  actionContext,
+  actionState,
+  isActive,
+}: ActionButtonContentProps) => {
+  const isPressed = usePressedState();
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState ? actionState?.mobileButtonAssets : false
+  );
+
+  const shouldRenderLabel = Boolean(
+    supportsEntryState && resolveLabelText(actionState?.label)
+  );
+
+  const _cloneChildrenWithState = useCallback(
+    (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
+        // Use isPressed state for mobile buttons to set focused state on mobile
+        if (role === "label") {
+          nextProps.state = isActive || isPressed ? "focused" : "default";
+          nextProps.entry = entry;
+        }
+
+        if (nextChildren !== child.props.children) {
+          nextProps.children = nextChildren;
+        }
+
+        return React.cloneElement(child, nextProps);
+      });
+    },
+    [
+      shouldRenderAsset,
+      shouldRenderLabel,
+      actionState,
+      action.flavour,
+      action.width,
+      action.height,
+      isActive,
+      isPressed,
+      entry,
+    ]
+  );
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return _cloneChildrenWithState(children);
+};
+
+export const ActionButton = ({
+  style,
+  children,
+  action,
+  focusedStyles,
+  entry,
+  ...props
+}) => {
   return (
     <ActionButtonController
       action={action}
@@ -31,105 +162,28 @@ export const ActionButton = ({ style, children, action, entry, ...props }) => {
         );
       }}
     >
-      {({ 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}
+      {(renderProps) => (
+        <PressableView
+          testOnly_pressed={props.testOnly_pressed}
+          testID={props.testID || `${entry?.id}`}
+          style={style}
+          pressedStyle={focusedStyles}
+          onPress={renderProps.onPress}
+          accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
+          accessibilityHint={props.accessibilityHint}
+        >
+          <ActionButtonContent
+            style={style}
+            action={action}
+            focusedStyles={focusedStyles}
+            entry={entry}
+            props={props}
+            {...renderProps}
           >
-            {_cloneChildrenWithState(children)}
-          </PressableView>
-        );
-      }}
+            {children}
+          </ActionButtonContent>
+        </PressableView>
+      )}
     </ActionButtonController>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { ImageContainer } from "../../ImageContainer";
 
 type Props = {
@@ -10,13 +10,24 @@ type Props = {
   cellUUID?: string;
 };
 
+const styles = StyleSheet.create({
+  assetContainer: {
+    flexShrink: 0,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
+
 export const AssetComponent = (props: Props & Record<string, unknown>) => {
   return props.asset && React.isValidElement(props.asset) ? (
-    <View style={props.style} testID={props.testID}>
+    <View style={[styles.assetContainer, props.style]} testID={props.testID}>
       {React.cloneElement(props.asset, { cellUUID: props.cellUUID })}
     </View>
   ) : (
-    // @ts-ignore
-    <ImageContainer {...props} uri={props.uri} />
+    <ImageContainer
+      style={[styles.assetContainer, props.style]}
+      {...(props as any)}
+      uri={props.uri}
+    />
   );
 };

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

@@ -1,4 +1,7 @@
-import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import {
+  toNumberWithDefault,
+  toNumberWithDefaultZero,
+} from "@applicaster/zapp-react-native-utils/numberUtils";
 import { compact } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { Asset } from "./Asset";
@@ -10,23 +13,37 @@ import {
   getPressableStyles,
   getTextLabelStyles,
 } from "./utils";
+import { ViewStyle } from "react-native";
+import { Spacer } from "./Spacer";
 
-const displayModeStyle = (value) => {
+const displayModeStyle = (value, isVertical: boolean) => {
   const mode = value("display_mode") || "dynamic";
 
-  if (mode === "fixed") {
-    return {
-      width: toNumberWithDefault(140, value("width")),
-    };
-  }
+  const defaultStyle = {
+    flexShrink: 1,
+  };
 
-  if (mode === "fill") {
-    return {
-      flex: 1,
-    };
-  }
+  const width = toNumberWithDefault(140, value("width"));
 
-  return {};
+  switch (mode) {
+    case "fixed":
+      return {
+        ...defaultStyle,
+        width,
+        maxWidth: width,
+      };
+    case "fill":
+      return {
+        ...defaultStyle,
+        width: isVertical ? "100%" : undefined,
+        flex: !isVertical ? 1 : undefined,
+      };
+    case "dynamic":
+    default:
+      return {
+        ...defaultStyle,
+      };
+  }
 };
 
 type Props = {
@@ -34,7 +51,8 @@ type Props = {
   value: Function;
   stylePrefix: string;
   specificPrefix: string;
-  spacingStyle: Record<string, unknown>;
+  spacingStyle: ViewStyle;
+  isVertical: boolean;
 };
 
 export const Button = ({
@@ -43,8 +61,9 @@ export const Button = ({
   stylePrefix,
   specificPrefix,
   spacingStyle,
+  isVertical,
 }: Props) => {
-  // Retrives values depending to the slot
+  // Retrieves values depending to the slot
   const getSlotBasedValue = (property: string) =>
     value(`${specificPrefix}_${property}`);
 
@@ -68,21 +87,30 @@ export const Button = ({
   const testID = `mobile_action_button_${index + 1}`;
   const actionIdentifier = getSlotBasedValue("assign_action");
   const assetAlignment = getValue("asset_alignment") || "left";
+
+  const hasHorizontalAlignment = ["left", "right"].includes(assetAlignment);
+  const vGutter = toNumberWithDefaultZero(getValue("vertical_gutter"));
+  const hGutter = toNumberWithDefaultZero(getValue("horizontal_gutter"));
   const actionAssetFlavour = getValue("action_asset_flavour");
   const contentsAlignment = getValue("contents_alignment") || "center";
+  const displayMode = getValue("display_mode") || "dynamic";
 
   return {
     type: "MobileActionButton",
     style: {
-      flexDirection: getContentDirection(assetAlignment),
-      alignContent: "center",
-      alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
-      justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
+      // alignContent: "center", Why do we need this?
       ...getPressableStyles(getValue),
-      ...displayModeStyle(getValue),
+      ...displayModeStyle(getValue, isVertical),
       ...spacingStyle,
     },
     additionalProps: {
+      displayMode,
+      alignment: {
+        alignContent: "center",
+        flexDirection: getContentDirection(assetAlignment),
+        alignItems: getContentsAlignment(contentsAlignment, assetAlignment),
+        justifyContent: getContentsAlignment(contentsAlignment, assetAlignment),
+      },
       action: {
         identifier: actionIdentifier,
         flavour: actionAssetFlavour,
@@ -102,7 +130,12 @@ export const Button = ({
             testID,
           })
         : null,
-
+      Spacer({
+        enabled: assetEnabled && labelEnabled,
+        style: hasHorizontalAlignment
+          ? { width: hGutter }
+          : { height: vGutter },
+      }),
       labelEnabled
         ? TextLabelsContainer({
             style: getTextLabelStyles(getValue),
@@ -114,7 +147,8 @@ export const Button = ({
                 color: getValue("focused_font_color"),
               },
               transformText: getValue("text_transform") || "default",
-              numberOfLines: getValue("number_of_lines"),
+              numberOfLines: getValue("number_of_lines") || 1,
+              ellipsizeMode: "tail",
             },
             actionIdentifier,
             testID,

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

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

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

@@ -14,6 +14,9 @@ export const TextLabelsContainer = ({
 }: Props) => {
   return {
     type: "View",
+    style: {
+      flexShrink: 1,
+    },
     additionalProps: {
       mobileActionRole: "label_container",
     },
@@ -26,7 +29,6 @@ export const TextLabelsContainer = ({
             context: actionIdentifier,
             name: "label_1",
           },
-          state: "default",
           mobileActionRole: "label",
           testID: testID ? `${testID}-label` : undefined,
           ...extraProps,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text as RNText, TouchableOpacity, View } from "react-native";
+import { Pressable, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -8,6 +8,11 @@ import { elementMapper } from "../../../../elementMapper";
 import { defaultComponents } from "../../../index";
 import { MobileActionButtons } from "..";
 import { AssetComponent } from "../AssetComponent";
+import { usePressedState } from "../../../../hooks/usePressedState";
+
+jest.mock("../../../../hooks/usePressedState", () => ({
+  usePressedState: jest.fn(),
+}));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
   useActions: jest.fn(),
@@ -136,6 +141,7 @@ const baseNode = {
       borderColor: "rgba(4,4,4,1)",
     },
     testID: "mobile-action-button",
+    testOnly_pressed: false,
   },
   elements: [
     {
@@ -190,14 +196,20 @@ const baseNode = {
 describe("MobileActionButton", () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    (usePressedState as jest.Mock).mockReturnValue(false);
   });
 
-  const renderNode = (node = baseNode) =>
-    render(
+  const renderNode = ({ node = baseNode, pressed = false } = {}) => {
+    if (pressed) {
+      node.props.testOnly_pressed = true;
+    }
+
+    return render(
       <React.Fragment>
         {elementMapper(defaultComponents)(node as never)}
       </React.Fragment>
     );
+  };
 
   it("renders nested image and text children through elementMapper", () => {
     mockUseActions.mockReturnValue(buildActionContext());
@@ -210,12 +222,13 @@ describe("MobileActionButton", () => {
   });
 
   it("applies focused styles when action entry state is active", () => {
+    (usePressedState as jest.Mock).mockReturnValue(true);
     mockUseActions.mockReturnValue(buildActionContext({ active: true }));
 
-    const { getByTestId, getByText } = renderNode();
+    const { getByTestId, getByText } = renderNode({ pressed: true });
 
     expect(
-      getByTestId("mobile-action-button").props.style.backgroundColor
+      getByTestId("mobile-action-button").props.style[2].backgroundColor
     ).toBe("rgba(3,3,3,1)");
 
     expect(getByText("Play").props.style).toEqual(
@@ -253,6 +266,8 @@ describe("MobileActionButton", () => {
       })
     );
 
+    node.props.testOnly_pressed = false;
+
     const { UNSAFE_getAllByType, UNSAFE_getByType, getByTestId, getByText } =
       render(
         <React.Fragment>
@@ -260,14 +275,14 @@ describe("MobileActionButton", () => {
         </React.Fragment>
       );
 
-    const pressable = UNSAFE_getByType(TouchableOpacity);
+    const pressable = UNSAFE_getByType(Pressable);
     const label = getByText("Play");
     const asset = getByTestId("mobile_action_button_1-asset");
 
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style).toMatchObject({
+    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,
@@ -278,15 +293,11 @@ describe("MobileActionButton", () => {
       height: 24,
     });
 
-    expect(label.props.style).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          color: "rgba(10,10,10,1)",
-          fontSize: 15,
-          lineHeight: 24,
-        }),
-      ])
-    );
+    expect(label.props.style[0]).toMatchObject({
+      color: "rgba(10,10,10,1)",
+      fontSize: 15,
+      lineHeight: 24,
+    });
 
     expect(UNSAFE_getAllByType(View).length).toBeGreaterThan(0);
     expect(UNSAFE_getAllByType(RNText).length).toBeGreaterThan(0);
@@ -324,7 +335,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalled();
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
@@ -339,7 +350,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour1);
+      renderNode({ node: nodeWithFlavour1 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_1" }),
@@ -356,7 +367,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: MockAssetComponent })
       );
 
-      renderNode(nodeWithFlavour2);
+      renderNode({ node: nodeWithFlavour2 });
 
       expect(MockAssetComponent).toHaveBeenCalledWith(
         expect.objectContaining({ flavour: "flavour_2" }),
@@ -369,7 +380,7 @@ describe("MobileActionButton", () => {
         buildActionContext({ mobileButtonAssets: undefined })
       );
 
-      const { queryByTestId } = renderNode(nodeWithFlavour1);
+      const { queryByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(queryByTestId("mobile-action-button-asset")).toBeNull();
     });
@@ -385,7 +396,7 @@ describe("MobileActionButton", () => {
         })
       );
 
-      const { getByTestId } = renderNode(nodeWithFlavour1);
+      const { getByTestId } = renderNode({ node: nodeWithFlavour1 });
 
       expect(getByTestId("mobile-action-button-asset")).toBeTruthy();
     });

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/index.test.ts

@@ -241,10 +241,21 @@ describe("MobileActionButtons", () => {
     expect(overImageResult?.additionalProps?.contentStyle).toMatchObject({
       flexDirection: "column",
       alignItems: "center",
-      marginTop: 5,
-      marginRight: 6,
-      marginBottom: 7,
-      marginLeft: 8,
+      paddingTop: 5,
+      paddingRight: 6,
+      paddingBottom: 7,
+      paddingLeft: 8,
+    });
+
+    expect(overImageResult?.style).toMatchObject({
+      alignItems: "flex-end",
+      bottom: 0,
+      justifyContent: "flex-start",
+      left: 0,
+      position: "absolute",
+      right: 0,
+      top: 0,
+      zIndex: 10,
     });
 
     expect(