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

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/index.ts

@@ -1,173 +1,68 @@
-import * as R from "ramda";
-
+import memoizee from "memoizee";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { getEnabledButtonSlots } from "../../../ActionButtonsCore/selectors";
+import {
+  insertBetweenLabelContainers,
+  insertBetweenLabels,
+} from "../../../ActionButtonsCore/placement";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
   prefix: string
 ): number => {
-  const button1Key = `${prefix}_button_1_button_enabled`;
-  const button2Key = `${prefix}_button_2_button_enabled`;
-  const button3Key = `${prefix}_button_3_button_enabled`;
-
-  return R.toPairs(configuration).filter(
-    ([key, value]) =>
-      [button1Key, button2Key, button3Key].includes(key) && value
-  ).length;
+  return getEnabledButtonSlots(configuration, `${prefix}_button`).length;
 };
 
 export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
-  index: number
-): string => {
-  const match = `${prefix}_button_\\d_assign_action`;
-  const re = new RegExp(match);
-
-  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
-
-  return rejectNils(
-    R.toPairs(configuration)
-      .filter(([key]) => R.startsWith(`${prefix}_button`, key))
-      .map(([key, value]) => {
-        const matched = key.match(re);
-
-        return matched ? value : undefined;
-      })
-  );
-};
-
-type Label = {
-  name: string;
-};
+  slot: number
+): string | undefined => {
+  const value = configuration[
+    `${prefix}_button_${slot}_assign_action`
+  ] as string;
 
-type LabelContainer = {
-  elements: Array<Label>;
+  return value == null || value === "" ? undefined : value;
 };
 
-type LabelExtraContainer = {
-  elements: Array<LabelContainer>;
-};
-
-const withButtons = (labelName, buttons, labels) => {
-  return labels.reduce((acc, label) => {
-    if (label.name === labelName) {
-      return [...acc, label, buttons];
-    }
-
-    return [...acc, label];
-  }, []);
-};
-
-const withButtonsInContainer = (labelName, buttons, views) => {
-  return views.map((view) => {
-    return {
-      ...view,
-      elements: view.elements.reduce((acc, label) => {
-        if (label.name === labelName) {
-          return [...acc, label, buttons];
-        }
-
-        return [...acc, label];
-      }, []),
-    };
-  });
-};
+export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
 
 export const insertButtonsBetweenLabels = (
   configuration: Record<string, unknown>,
   buttons,
-  labels: Label[] = []
-) => {
-  if (R.isNil(buttons)) {
-    return labels;
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labels = []
+) =>
+  insertBetweenLabels(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labels
   );
 
-  if (position === "on_top") {
-    return [buttons, ...labels];
-  }
-
-  const labelsWithButtons = withButtons(position, buttons, labels);
-
-  if (R.equals(labelsWithButtons, labels)) {
-    // put buttons after all labels by default
-    return [...labels, buttons];
-  }
-
-  return labelsWithButtons;
-};
-
 export const insertButtonsBetweenLabelContainers = (
   configuration: Record<string, unknown>,
   buttons,
-  labelContainers: Array<LabelExtraContainer> = []
-) => {
-  if (R.isNil(buttons)) {
-    return labelContainers;
-  }
-
-  if (R.isEmpty(labelContainers)) {
-    return [buttons];
-  }
-
-  const position = R.pathOr(
-    undefined,
-    ["tv_buttons_container_position"],
-    configuration
+  labelContainers = []
+) =>
+  insertBetweenLabelContainers(
+    {
+      position: configuration.tv_buttons_container_position as
+        | string
+        | undefined,
+      allowOnTop: true,
+      appendWhenMissing: true,
+    },
+    buttons,
+    labelContainers
   );
 
-  if (position === "on_top") {
-    const firstContainerLabels = R.lensPath([0, "elements"]);
-
-    return R.over(firstContainerLabels, R.prepend(buttons), labelContainers);
-  }
-
-  const labelContainersWithButtons = labelContainers.map((labelContainer) => {
-    return {
-      ...labelContainer,
-      elements: withButtonsInContainer(
-        position,
-        buttons,
-        labelContainer.elements
-      ),
-    };
-  });
-
-  if (R.equals(labelContainersWithButtons, labelContainers)) {
-    // put buttons in last container
-    const lastContainerLabels = R.lensPath([
-      labelContainers.length - 1,
-      "elements",
-    ]);
-
-    return R.over(lastContainerLabels, R.append(buttons), labelContainers);
-  }
-
-  return labelContainersWithButtons;
-};
-
-export const mapSelfAlignment = (horizontalPosition) => {
-  switch (horizontalPosition) {
-    case "left":
-      return "flex-start";
-    case "right":
-      return "flex-end";
-    case "center":
-      return "center";
-    default:
-      return "flex-start";
-  }
-};
-
 export const getTextTransform = (textTransform: string) => {
-  if (R.isNil(textTransform) || R.isEmpty(textTransform)) {
+  if (textTransform == null || textTransform === "") {
     return "none";
   }
 

package/Components/MasterCell/elementMapper.tsx

@@ -19,6 +19,7 @@ const focusableTypes = new Set([
   "View",
   "ButtonContainerView",
   "FocusableView",
+  "PressableView",
   "CollapsibleTextContainer",
   "BorderContainerView",
 ]);

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