@applicaster/zapp-react-native-utils 12.0.0-alpha.9004455836 → 12.0.0-alpha.9233494544

package/cellUtils/__tests__/cellUtils.test.ts

@@ -14,6 +14,7 @@ import {
   castAndFallbackColor,
   compact,
   getValue,
+  getColorFromData,
 } from "../";
 
 import {
@@ -23,6 +24,7 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
+  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -388,3 +390,60 @@ describe("getValue", () => {
     expect(getValue({ value })(value)).toBeNull();
   });
 });
+
+describe("getColorFromData", () => {
+  it("should return value directly if valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: "background_color",
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return valid rgba color name", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: "component_background_color",
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe("rgba(255, 255, 255, 0)");
+  });
+
+  it("should return path value if path value is set and is valid color", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: VAL.colorKeyPath,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe("#123456");
+  });
+
+  it("should return defaultColor if key value and path value are invalid", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: VAL.invalidColorKey,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe(defaultColor);
+  });
+
+  it("should return defaultColor if path does not exist", () => {
+    const result = getColorFromData({
+      data: entry,
+      key: VAL.invalidColorKeyPath,
+      getValue: getValue(componentStyle),
+      defaultColor,
+    });
+
+    expect(result).toBe(defaultColor);
+  });
+});

package/cellUtils/__tests__/fixtures.ts

@@ -1,5 +1,7 @@
 /* eslint-disable max-len */
 
+export const defaultColor = "#ffffff";
+
 export const entry = {
   type: {
     value: "video",
@@ -26,7 +28,9 @@ export const entry = {
     type: "video/mp4",
     src: "https://wino-feed.s3.amazonaws.com/movieFeed/Ford+v+Ferrari.mp4",
   },
+  background_color: "#123456",
   extensions: {
+    background_color: "#123456",
     free: false,
     duration: 9000,
     section: "New Releases",
@@ -46,7 +50,11 @@ export const componentStyle = {
   horizontal_list_cell_width: "400",
   cell_plugin_configuration_id: "267bd05a-08bd-4675-bdd3-9b73899773f0",
   horizontal_list_scaled_switch: false,
+  background_color: "#123456",
   component_background_color: "rgba(255, 255, 255, 0)",
+  background_color_1: "extensions.background_color",
+  background_color_2: "invalidColorKey",
+  background_color_3: "extensions.invalidColorKeyPath",
   component_padding_left: "",
   horizontal_list_next_offset: 20,
   component_margin_bottom: "",
@@ -93,6 +101,11 @@ export const VAL = {
   upper: "STRING",
   width: 400,
   height: 225,
+  colorKey: "background_color",
+  colorKeyRgba: "component_background_color",
+  colorKeyPath: "background_color_1",
+  invalidColorKey: "background_color_2",
+  invalidColorKeyPath: "background_color_3",
 };
 
 export const TRANSFORM = {

package/cellUtils/index.ts

@@ -1,5 +1,6 @@
 import * as R from "ramda";
 import dayjs from "dayjs";
+import validateColor from "validate-color";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
 import { transformColorCode as fixColorHexCode } from "../transform";
@@ -181,8 +182,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
@@ -443,3 +444,33 @@ export const toResizeMode = (
     resizeMode: "contain",
   };
 };
+
+type GetColorFromData = {
+  data: Record<string, any>;
+  key: string;
+  getValue: Function;
+  defaultColor: string;
+};
+
+export const getColorFromData = ({
+  data,
+  key,
+  getValue,
+  defaultColor,
+}: GetColorFromData): string => {
+  const value = getValue(key);
+
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  if (validateColor(value.replace(".00", ""))) {
+    return value;
+  }
+
+  const pathValue = R.path(value.split("."), data);
+
+  if (pathValue && validateColor(pathValue)) {
+    return pathValue;
+  }
+
+  return defaultColor;
+};

package/focusManager/index.ts

@@ -86,7 +86,7 @@ export const isFocusable = (component: ZappEntry | ZappUIComponent | any) =>
 
 type Props = {
   component: ZappUIComponent;
-  zappPipesData: ZappPipesData;
+  zappPipesData?: ZappPipesData;
 } & Record<string, any>;
 
 export const useIsFocusable = (props: Props): void => {

package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`subscriber can be invoked without args 1`] = `
+exports[`functionUtils subscriber can be invoked without args 1`] = `
 Object {
   "handlers": Object {},
   "invokeHandler": [Function],
@@ -9,7 +9,7 @@ Object {
 }
 `;
 
-exports[`subscriber returns the original object with additional methods 1`] = `
+exports[`functionUtils subscriber returns the original object with additional methods 1`] = `
 Object {
   "foo": "bar",
   "handlers": Object {},