@applicaster/zapp-react-native-ui-components 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/utils/__tests__/getPluginIdentifier.test.ts

@@ -1,15 +1,9 @@
-import { getPluginIdentifier, memoizedGetPluginIdentifier } from "..";
+import { getPluginIdentifier } from "..";
 
 describe("getPluginIdentifier", () => {
   const prefix = "tv_buttons";
 
-  beforeAll(() => {
-    memoizedGetPluginIdentifier.clear();
-  });
-
-  it("returns the first valid plugin identifier", () => {
-    expect.assertions(2);
-
+  it("get first plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value",
       tv_buttons_button_1_assign_action:
@@ -19,21 +13,13 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns the second valid plugin identifier", () => {
-    expect.assertions(2);
-
+  it("get second plugin identifier", () => {
     const configuration = {
       tv_buttons_button_1_other: "value_1",
       tv_buttons_button_1_assign_action:
@@ -44,216 +30,24 @@ describe("getPluginIdentifier", () => {
     };
 
     const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns undefined when there are no assign_action keys", () => {
-    expect.assertions(2);
-
+  it("get undefined if no assign_actions at all", () => {
     const configuration = {};
-    const index = 0;
-
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("skips undefined values and returns the correct plugin identifier", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
-      tv_buttons_button_2_assign_action: undefined,
-      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("handles missing intermediate keys and returns the correct plugin identifier", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "tv_buttons_button_1_assign_action",
-      tv_buttons_button_3_assign_action: "tv_buttons_button_3_assign_action",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_3_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("skips empty string values and returns the first non-empty assign_action", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "",
-      tv_buttons_button_2_assign_action: "tv_buttons_button_2_assign_action",
-    };
 
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
-  });
-
-  it("returns undefined for negative index", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_button_2_assign_action: "b",
-    };
 
-    const index = -1;
     const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
     expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("returns undefined for out-of-bounds index", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_button_2_assign_action: "b",
-    };
-
-    const index = 5;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("ignores keys with wrong prefix or format", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: "a",
-      tv_buttons_wrongprefix_2_assign_action: "b",
-      tv_buttons_button_x_assign_action: "c",
-    };
-
-    const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("returns undefined if all assign_actions are null or empty", () => {
-    expect.assertions(2);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: null,
-      tv_buttons_button_2_assign_action: undefined,
-      tv_buttons_button_3_assign_action: "",
-    };
-
-    const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
-
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
-
-    expect(result).toBeUndefined();
-    expect(memoizedResult).toBeUndefined();
-  });
-
-  it("handles non-string values correctly", () => {
-    expect.assertions(6);
-
-    const configuration = {
-      tv_buttons_button_1_assign_action: 123,
-      tv_buttons_button_2_assign_action: true,
-      tv_buttons_button_3_assign_action: { nested: "value" },
-    };
-
-    expect(getPluginIdentifier(configuration, prefix, 0)).toEqual(123);
-    expect(getPluginIdentifier(configuration, prefix, 1)).toEqual(true);
-
-    expect(getPluginIdentifier(configuration, prefix, 2)).toEqual({
-      nested: "value",
-    });
-
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 0)).toEqual(123);
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 1)).toEqual(true);
-
-    expect(memoizedGetPluginIdentifier(configuration, prefix, 2)).toEqual({
-      nested: "value",
-    });
   });
 });
 
-describe("getPluginIdentifier - when configuration has duplicate values", () => {
-  beforeAll(() => {
-    memoizedGetPluginIdentifier.clear();
-  });
-
+describe("getPluginIdentifier - when configuration has same values for different keys", () => {
   const prefix = "tv_buttons";
 
   const configuration = {
@@ -261,35 +55,19 @@ describe("getPluginIdentifier - when configuration has duplicate values", () =>
     tv_buttons_button_2_assign_action: "navigation_action",
   };
 
-  it("returns the first plugin identifier when values are identical", () => {
-    expect.assertions(2);
-
+  it("get first plugin identifier", () => {
     const index = 0;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_1_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 
-  it("returns the second plugin identifier when values are identical", () => {
-    expect.assertions(2);
-
+  it("get second plugin identifier", () => {
     const index = 1;
-    const result = getPluginIdentifier(configuration, prefix, index);
 
-    const memoizedResult = memoizedGetPluginIdentifier(
-      configuration,
-      prefix,
-      index
-    );
+    const result = getPluginIdentifier(configuration, prefix, index);
 
     expect(result).toEqual(configuration.tv_buttons_button_2_assign_action);
-    expect(memoizedResult).toEqual(result);
   });
 });

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

@@ -1,7 +1,7 @@
 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";
 
 export const getButtonsCount = (
   configuration: Record<string, unknown>,
@@ -21,26 +21,22 @@ export const getPluginIdentifier = (
   configuration: Record<string, unknown>,
   prefix: string,
   index: number
-): string | undefined => {
-  const re = new RegExp(`${prefix}_button_\\d_assign_action`);
-  let count = 0;
-
-  for (const [key, value] of Object.entries(configuration)) {
-    if (
-      key.startsWith(`${prefix}_button`) &&
-      re.test(key) &&
-      value != null &&
-      value !== ""
-    ) {
-      if (count === index) return value as string;
-      count++;
-    }
-  }
+): string => {
+  const match = `${prefix}_button_\\d_assign_action`;
+  const re = new RegExp(match);
 
-  return undefined;
-};
+  const rejectNils = R.compose(R.path([index]), R.filter(isNotNil));
 
-export const memoizedGetPluginIdentifier = memoizee(getPluginIdentifier);
+  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;

package/Components/MasterCell/dataAdapter.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 import { functionForName } from "./MappingFunctions";
 import { resolveColor } from "./utils";
@@ -50,7 +51,8 @@ export function configInflater(
     additionalProps?: Record<string, any>;
     data?: Array<{ propName: string; func: Function; args: any[] }>;
     elements?: any[];
-  }
+  },
+  allowDynamicColorsOutsideExtensions: boolean
 ) {
   const props = data.reduce(
     (acc, curr) => {
@@ -65,13 +67,13 @@ export function configInflater(
 
   if (Array.isArray(elements)) {
     adjustedElements = elements.map((element) =>
-      configInflater(entry, element as any)
+      configInflater(entry, element as any, allowDynamicColorsOutsideExtensions)
     );
   }
 
   return {
     type,
-    style: resolveColor(entry, style),
+    style: resolveColor(entry, style, allowDynamicColorsOutsideExtensions),
     props,
     elements: adjustedElements,
   };
@@ -95,9 +97,17 @@ function resolveElementsNode(entry, state, elements) {
 }
 
 export function defaultDataAdapter(elements) {
-  return function elementsBuilder({ entry, state = "default" }) {
+  return function elementsBuilder({
+    entry,
+    state = "default",
+    allowDynamicColorsOutsideExtensions,
+  }) {
     return resolveElementsNode(entry, state, elements).map((element) =>
-      configInflater(entry, element)
+      configInflater(
+        entry,
+        element,
+        toBooleanWithDefaultFalse(allowDynamicColorsOutsideExtensions)
+      )
     );
   };
 }

package/Components/MasterCell/index.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { v4 as uuid } from "uuid";
 
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useScreenState } from "@applicaster/zapp-react-native-utils/screenState";
 import { defaultComponents } from "./DefaultComponents";
 import { defaultDataAdapter } from "./dataAdapter";
@@ -65,6 +66,7 @@ export function masterCellBuilder({
    */
   function MasterCell({ item, state, ...otherProps }: Props) {
     const { screenData } = useRoute();
+    const theme = useTheme();
 
     const screenId =
       screenData && "targetScreen" in screenData
@@ -85,8 +87,15 @@ export function masterCellBuilder({
         elementsBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
+          allowDynamicColorsOutsideExtensions:
+            theme?.allow_dynamic_colors_outside_extensions,
         }),
-      [state, item, entryIsSelected] // Assuming that item won't mutate
+      [
+        state,
+        item,
+        entryIsSelected,
+        theme?.allow_dynamic_colors_outside_extensions,
+      ] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);