@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.131

package/Components/MasterCell/hoc/__tests__/withAsyncRender.test.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { Text, View } from "react-native";
+import { withAsyncRenderHOC } from "../withAsyncRender";
+
+describe("withAsyncRenderHOC", () => {
+  // Test component that requires onAsyncRender
+  const TestComponent = ({
+    onAsyncRender,
+    text,
+  }: {
+    onAsyncRender: () => void;
+    text?: string;
+  }) => {
+    React.useEffect(() => {
+      onAsyncRender();
+    }, [onAsyncRender]);
+
+    return (
+      <View>
+        <Text>{text || "Test"}</Text>
+      </View>
+    );
+  };
+
+  it("should wrap component and provide onAsyncRender callback", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="Hello" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("Hello")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementRegistrate on mount", () => {
+    const mockRegistrate = jest.fn();
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    render(<WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />);
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call emitAsyncElementLayout when onAsyncRender is called", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithAsyncCall = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Async Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithAsyncCall);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger onLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    view.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalled();
+  });
+
+  it("should return unsubscribe function from emitAsyncElementRegistrate", () => {
+    const mockUnsubscribe = jest.fn();
+    const mockRegistrate = jest.fn(() => mockUnsubscribe);
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const { unmount } = render(
+      <WrappedComponent emitAsyncElementRegistrate={mockRegistrate} />
+    );
+
+    expect(mockRegistrate).toHaveBeenCalledTimes(1);
+
+    // Unmount should trigger cleanup
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  it("should work without emitAsyncElementRegistrate prop", () => {
+    const WrappedComponent = withAsyncRenderHOC(TestComponent);
+
+    const wrapper = render(<WrappedComponent text="No Registration" />);
+
+    expect(wrapper.toJSON()).not.toBeNull();
+    expect(wrapper.getByText("No Registration")).toBeDefined();
+  });
+
+  it("should work without emitAsyncElementLayout prop", () => {
+    const ComponentWithLayout = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View onLayout={onAsyncRender}>
+          <Text>Test Layout</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithLayout);
+
+    const wrapper = render(<WrappedComponent />);
+
+    // Should not throw when calling onLayout without emitAsyncElementLayout
+    const view = wrapper.UNSAFE_getByType(View);
+    expect(() => view.props.onLayout()).not.toThrow();
+  });
+
+  it("should pass through all other props to wrapped component", () => {
+    const ComponentWithProps = ({
+      customProp,
+      anotherProp,
+    }: {
+      onAsyncRender: () => void;
+      customProp: string;
+      anotherProp: number;
+    }) => {
+      return (
+        <View>
+          <Text>{customProp}</Text>
+          <Text>{anotherProp}</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithProps);
+
+    const wrapper = render(
+      <WrappedComponent customProp="custom value" anotherProp={42} />
+    );
+
+    expect(wrapper.getByText("custom value")).toBeDefined();
+    expect(wrapper.getByText("42")).toBeDefined();
+  });
+
+  it("should call emitAsyncElementLayout multiple times if onAsyncRender is called multiple times", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithMultipleCalls = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      return (
+        <View>
+          <View onLayout={onAsyncRender} testID="view1">
+            <Text>First</Text>
+          </View>
+          <View onLayout={onAsyncRender} testID="view2">
+            <Text>Second</Text>
+          </View>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithMultipleCalls);
+
+    const wrapper = render(
+      <WrappedComponent emitAsyncElementLayout={mockLayout} />
+    );
+
+    // Trigger both onLayout callbacks
+    const view1 = wrapper.getByTestId("view1");
+    const view2 = wrapper.getByTestId("view2");
+
+    view1.props.onLayout();
+    view2.props.onLayout();
+
+    expect(mockLayout).toHaveBeenCalledTimes(2);
+  });
+
+  it("should handle components that use onAsyncRender in effects", () => {
+    const mockLayout = jest.fn();
+
+    const ComponentWithEffect = ({
+      onAsyncRender,
+    }: {
+      onAsyncRender: () => void;
+    }) => {
+      React.useEffect(() => {
+        // Simulate async operation completing
+        const timer = setTimeout(() => {
+          onAsyncRender();
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [onAsyncRender]);
+
+      return (
+        <View>
+          <Text>Effect Component</Text>
+        </View>
+      );
+    };
+
+    const WrappedComponent = withAsyncRenderHOC(ComponentWithEffect);
+
+    render(<WrappedComponent emitAsyncElementLayout={mockLayout} />);
+
+    // The effect should have been triggered
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        expect(mockLayout).toHaveBeenCalled();
+        resolve(true);
+      }, 10);
+    });
+  });
+});

package/Components/MasterCell/hoc/withAsyncRender.tsx

@@ -6,12 +6,12 @@ type withAsyncRenderHOCProps = {
   emitAsyncElementLayout?: () => void;
 };
 
-type withAsyncRenderHOCT = (
-  Component: React.ComponentType<{ onAsyncRender: () => void }>
-) => React.FC<withAsyncRenderHOCProps>;
-
-export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
-  const WithAsyncRender = (props: withAsyncRenderHOCProps) => {
+export const withAsyncRenderHOC = <P extends { onAsyncRender: () => void }>(
+  Component: React.ComponentType<P>
+): React.FC<Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps> => {
+  const WithAsyncRender = (
+    props: Omit<P, "onAsyncRender"> & withAsyncRenderHOCProps
+  ) => {
     const { emitAsyncElementRegistrate = noop, emitAsyncElementLayout = noop } =
       props;
 
@@ -27,7 +27,9 @@ export const withAsyncRenderHOC: withAsyncRenderHOCT = (Component) => {
       }
     }, [emitAsyncElementLayout]);
 
-    return <Component {...props} onAsyncRender={onAsyncRender} />;
+    return (
+      <Component {...(props as unknown as P)} onAsyncRender={onAsyncRender} />
+    );
   };
 
   return WithAsyncRender;

package/Components/MasterCell/index.tsx

@@ -103,6 +103,8 @@ export function masterCellBuilder({
         wrapperRef,
         cellUUID,
         skipButtons,
+        hasFocusableInside,
+        entry: item,
       })
     );
 

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

@@ -32,14 +32,16 @@ describe("resolveColor", () => {
       color: "invalid_path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
 
     expect(loggerSpy).toHaveBeenCalledWith(
       expect.objectContaining({
         message: "Cannot resolve property invalid_path from the entry.",
         data: {
+          colorFromProp: "invalid_path",
           configurationValue: "invalid_path",
-          entry,
         },
       })
     );
@@ -102,7 +104,9 @@ describe("resolveColor", () => {
       color: "not.exist.path",
     };
 
-    expect(resolveColor(entry, style)).toEqual(style);
+    expect(resolveColor(entry, style)).toEqual({
+      color: undefined,
+    });
   });
 
   it("not modify style with empty path", () => {
@@ -112,4 +116,79 @@ describe("resolveColor", () => {
 
     expect(resolveColor(entry, style)).toEqual(style);
   });
+
+  describe("memoization", () => {
+    beforeEach(() => {
+      // Clear memoization cache before each test
+      resolveColor.clear && resolveColor.clear();
+    });
+
+    it("hits cache with same entry and style references", () => {
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry, style);
+
+      expect(result1).toBe(result2); // Same object reference
+    });
+
+    it("hits cache with new references but equal entry/style values", () => {
+      const entryClone = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+      const styleClone = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entryClone, styleClone);
+
+      expect(result1).toBe(result2);
+    });
+
+    it("misses cache when entry is new object", () => {
+      const entry2 = { extensions: { color: "blue" } }; // Same values, different object
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(entry, style);
+      const result2 = resolveColor(entry2, style);
+
+      expect(result1).not.toBe(result2); // Different object references
+    });
+
+    it("misses cache when entry property changes", () => {
+      const myEntry = {
+        extensions: {
+          color: "red",
+          green_color: "green",
+        },
+      };
+
+      const style = { color: "extensions.color" };
+
+      const result1 = resolveColor(myEntry, style);
+
+      myEntry.extensions.color = "blue"; // Change property
+      const result2 = resolveColor(myEntry, style);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ color: "blue" });
+      expect(result1).not.toBe(result2);
+    });
+
+    it("misses cache when style changes", () => {
+      const style1 = { color: "extensions.color" };
+      const style2 = { backgroundColor: "extensions.color" };
+
+      const result1 = resolveColor(entry, style1);
+      const result2 = resolveColor(entry, style2);
+
+      expect(result1).toEqual({ color: "red" });
+      expect(result2).toEqual({ backgroundColor: "red" });
+      expect(result1).not.toBe(result2);
+    });
+  });
 });

package/Components/MasterCell/utils/index.ts

@@ -7,9 +7,12 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import { masterCellLogger } from "../logger";
 import { getCellState } from "../../Cell/utils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
+import { get } from "@applicaster/zapp-react-native-utils/utils";
 import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import memoizee from "memoizee";
+import stringify from "fast-json-stable-stringify";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
   if (R.isNil(element)) {
@@ -24,21 +27,21 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
-const logWarning = R.curry(
-  (colorValueFromCellStyle, style, entry, colorValueFromEntry) => {
-    if (R.isNil(colorValueFromEntry)) {
-      masterCellLogger.warn({
-        message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
-        data: {
-          configurationValue: colorValueFromCellStyle,
-          entry,
-        },
-      });
-    }
-
-    return style;
+const logWarning = (
+  colorValueFromCellStyle,
+  colorFromProp,
+  colorValueFromEntry
+) => {
+  if (R.isNil(colorValueFromEntry)) {
+    masterCellLogger.warn({
+      message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
+      data: {
+        configurationValue: colorValueFromCellStyle,
+        colorFromProp,
+      },
+    });
   }
-);
+};
 
 export const hasElementsSpecificViewType = (viewType) => (elements) => {
   if (R.isNil(elements) || R.isEmpty(elements)) {
@@ -48,14 +51,22 @@ export const hasElementsSpecificViewType = (viewType) => (elements) => {
   return R.any(hasElementSpecificViewType(viewType))(elements);
 };
 
-function resolveColorForProp(entry, style, colorProp) {
-  const colorFromProp = style[colorProp];
-  const nestedEntryValue = R.path(colorFromProp.split("."), entry);
+function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+  if (!colorFromProp) {
+    return undefined;
+  }
+
+  const nestedEntryValue: string | undefined = get(
+    entry,
+    colorFromProp.split(".")
+  );
 
   const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
 
   if (nestedEntryValue === undefined && !validateColor(color)) {
-    logWarning(colorFromProp, style, entry, nestedEntryValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
+
+    return undefined;
   }
 
   const colorValue = getColorFromData({
@@ -64,27 +75,46 @@ function resolveColorForProp(entry, style, colorProp) {
   });
 
   if (!colorValue) {
-    logWarning(colorProp, style, entry, colorValue);
+    logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
-    return style;
+    return undefined;
   }
 
-  return { ...style, [colorProp]: colorValue };
+  return colorValue;
 }
 
-export function resolveColor(entry, style) {
-  if (style === null || style === undefined) {
-    return style;
-  }
-
-  // TODO can be optimized to remove 3 O(n) loops
+const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
   const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys.reduce((acc, value) => {
-    return { ...style, ...resolveColorForProp(entry, acc, value) };
-  }, style);
-}
+  return colorKeys;
+});
+
+export const resolveColor = memoizee(
+  (entry, style) => {
+    if (style === null || style === undefined) {
+      return style;
+    }
+
+    return getColorKeys(style).reduce(
+      (acc, value) => {
+        if (acc[value] && typeof acc[value] === "string") {
+          const colorStyle = resolveColorForProp(entry, acc[value]);
+
+          acc[value] = colorStyle;
+        }
+
+        return acc;
+      },
+      { ...style }
+    );
+  },
+  {
+    normalizer: (args) => {
+      return [stringify(args[0]), stringify(args[1])].join("|");
+    },
+  }
+);
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,