@applicaster/zapp-react-native-ui-components 16.0.0-rc.12 → 16.0.0-rc.120

package/Components/MasterCell/utils/index.ts

@@ -1,22 +1,23 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
-import validateColor from "validate-color";
+import memoizee from "memoizee";
+
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { masterCellLogger } from "../logger";
-import { getCellState } from "../../Cell/utils";
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { getColorFromData } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { get } from "@applicaster/zapp-react-native-utils/utils";
-import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
+import { pathOr, get, isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 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";
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+import { masterCellLogger } from "../logger";
+import { getCellState } from "../../Cell/utils";
+import { isCellSelected, useBehaviorUpdate } from "./behaviorProvider";
 import { DataProvider } from "../DefaultComponents/DataProvider";
 
 const hasElementSpecificViewType = (viewType) => (element) => {
-  if (R.isNil(element)) {
+  if (isNil(element)) {
     return false;
   }
 
@@ -28,12 +29,20 @@ const hasElementSpecificViewType = (viewType) => (element) => {
   return hasElementsSpecificViewType(viewType)(element.elements);
 };
 
+export const hasElementsSpecificViewType = (viewType) => (elements) => {
+  if (isNilOrEmpty(elements)) {
+    return false;
+  }
+
+  return R.any(hasElementSpecificViewType(viewType))(elements);
+};
+
 const logWarning = (
   colorValueFromCellStyle,
   colorFromProp,
   colorValueFromEntry
 ) => {
-  if (R.isNil(colorValueFromEntry)) {
+  if (isNil(colorValueFromEntry)) {
     masterCellLogger.warn({
       message: `Cannot resolve property ${colorValueFromCellStyle} from the entry.`,
       data: {
@@ -44,15 +53,10 @@ const logWarning = (
   }
 };
 
-export const hasElementsSpecificViewType = (viewType) => (elements) => {
-  if (R.isNil(elements) || R.isEmpty(elements)) {
-    return false;
-  }
-
-  return R.any(hasElementSpecificViewType(viewType))(elements);
-};
-
-function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
+export function resolveColorForProp(
+  entry: any,
+  colorFromProp: string | undefined
+) {
   if (!colorFromProp) {
     return undefined;
   }
@@ -62,9 +66,7 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
     colorFromProp.split(".")
   );
 
-  const color = colorFromProp.replace(".00", "").replace(".0", ""); // https://github.com/dreamyguy/validate-color/issues/44
-
-  if (nestedEntryValue === undefined && !validateColor(color)) {
+  if (nestedEntryValue === undefined && !isValidColor(colorFromProp)) {
     logWarning(colorFromProp, colorFromProp, nestedEntryValue);
 
     return undefined;
@@ -86,36 +88,73 @@ function resolveColorForProp(entry: any, colorFromProp: string | undefined) {
 
 const getColorKeys = memoizee((style) => {
   const styleKeys = Object.keys(style);
-  const colorKeys = styleKeys.filter((key) => /color/i.test(key));
 
-  return colorKeys;
+  return styleKeys.filter((key) => /color/i.test(key));
 });
 
-export const resolveColor = memoizee(
-  (entry, style) => {
-    if (style === null || style === undefined) {
-      return style;
-    }
+/**
+ * A color style value is either a literal color (e.g. "#FFFFFF") or a
+ * data-mapping path into the entry. Data mappings always point at the entry
+ * `extensions` object (e.g. "extensions.brandColor"), so we only need to do a
+ * path lookup when the value starts with "extensions" — everything else is a
+ * literal color and can be returned as-is.
+ *
+ * This avoids the previous, very expensive approach that ran `validateColor`
+ * on every value and memoized on a full `fast-json-stable-stringify` of the
+ * entire entry.
+ */
+const EXTENSIONS_PREFIX = "extensions";
+
+const isDataMappingPath = (value: string): boolean =>
+  typeof value === "string" && value.startsWith(EXTENSIONS_PREFIX);
 
-    return getColorKeys(style).reduce(
-      (acc, value) => {
-        if (acc[value] && typeof acc[value] === "string") {
-          const colorStyle = resolveColorForProp(entry, acc[value]);
+export const resolveColor = (
+  entry,
+  style,
+  allowDynamicColorsOutsideExtensions
+) => {
+  if (style === null || style === undefined) {
+    return style;
+  }
+
+  const colorKeys = getColorKeys(style);
+
+  if (colorKeys.length === 0) {
+    return style;
+  }
+
+  return colorKeys.reduce(
+    (acc, key) => {
+      const value = acc[key];
 
-          acc[value] = colorStyle;
-        }
+      // 1. The Expensive Edge-Case (Only for the app with root mappings)
+      if (allowDynamicColorsOutsideExtensions && isNotEmptyString(value)) {
+        const possibleColor = resolveColorForProp(entry, value);
+
+        acc[key] = isValidColor(possibleColor) ? possibleColor : null;
 
         return acc;
-      },
-      { ...style }
-    );
-  },
-  {
-    normalizer: (args) => {
-      return [stringify(args[0]), stringify(args[1])].join("|");
+      }
+
+      // 2. The Fast Path (For 99% of apps)
+      if (isDataMappingPath(value)) {
+        // resolve the mapped color from the entry; fall back to null
+        // (RN ignores null style values) when the path is missing
+        const possibleColor = pathOr(null, value.split("."), entry);
+
+        acc[key] = possibleColor;
+
+        return acc;
+      }
+
+      // 3. Default Case: Treat as a raw color string
+      acc[key] = value;
+
+      return acc;
     },
-  }
-);
+    { ...style }
+  );
+};
 
 export function isVideoPreviewEnabled({
   enable_video_preview = false,
@@ -238,7 +277,7 @@ const recursiveCloneElement = (focused: boolean) => (element) => {
 };
 
 export const recursiveCloneElementsWithState = (focused: boolean, children) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
@@ -252,7 +291,7 @@ export const cloneChildrenWithIds = (
   ids: string[],
   children: React.ReactElement[]
 ) => {
-  if (R.isNil(children) || R.isEmpty(children)) {
+  if (isNilOrEmpty(children)) {
     return undefined;
   }
 
@@ -347,3 +386,21 @@ export function getEntryState(state, selected) {
 
   return selected ? "selected" : "default";
 }
+
+/**
+ * Drops focused (pressed) variants of a cell state, so a non-interactive cell
+ * always renders its idle look. `selected` is kept – it is not touch feedback.
+ */
+export function withoutFocusedState(
+  state?: CellState | null
+): CellState | null | undefined {
+  if (state === "focused_selected") {
+    return "selected";
+  }
+
+  if (state === "focused") {
+    return "default";
+  }
+
+  return state;
+}

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { useEntryActionState } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  isActionAvailableFor,
+  RegisteredAction,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { Button } from "../Button";
+
+export type ActionButtonProps = {
+  entry: ZappEntry;
+  item: RegisteredAction;
+  configuration: any;
+  width: number;
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+type Props = ActionButtonProps & {
+  onPress?: (item: any) => void;
+};
+
+/**
+ * Unified action button for the modal bottom sheet.
+ *
+ * Every item is a `RegisteredAction` resolved from the registry (entry actions,
+ * registry actions and legacy context-provider actions alike), so the button
+ * simply reads `item.action` and drives it through `useEntryActionState`
+ * (backed by the action's observable / `addListener`).
+ */
+export function ActionButton(props: Props) {
+  const { item, entry, onPress: onItemPress, component } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+        ...(component ? { component } : {}),
+      });
+    },
+    [invokeAction, item, onItemPress, component]
+  );
+
+  if (!isActionAvailableFor(action, entry as ZappEntry)) return null;
+
+  return (
+    <Button {...props} item={state} onPress={onPress} label={state?.label} />
+  );
+}
+
+// Explicitly set display name for the component
+ActionButton.displayName = "ActionButton";

package/Components/ModalComponent/ActionsBottomSheet/__tests__/openActionsBottomSheet.test.ts

@@ -0,0 +1,38 @@
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { boundActionButton } from "../boundActionButton";
+import { openActionsBottomSheet } from "../openActionsBottomSheet";
+
+jest.mock("@applicaster/zapp-react-native-utils/modalState", () => ({
+  openBottomSheetModal: jest.fn(),
+}));
+
+jest.mock("../boundActionButton", () => ({
+  boundActionButton: jest.fn(() => jest.fn()),
+}));
+
+describe("openActionsBottomSheet", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("binds the List component into the sheet row button", () => {
+    const entry = { id: "entry-1" } as ZappEntry;
+
+    const component = {
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actions = [
+      { identifier: "entry_action_0", action: { invokeAction: jest.fn() } },
+    ];
+
+    openActionsBottomSheet({
+      entry,
+      actions: actions as any,
+      component: component as any,
+    });
+
+    expect(boundActionButton).toHaveBeenCalledWith(entry, component);
+    expect(openBottomSheetModal).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ModalComponent/ActionsBottomSheet/boundActionButton.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { ActionButton, ActionButtonProps } from "./ActionButton";
+
+/**
+ * Binds an entry to the sheet's row button.
+ *
+ * `BottomSheetModalContent` renders `buttonComponent` per item and does not
+ * know about entries, so the entry is closed over here instead.
+ */
+export const boundActionButton = (
+  entry: ZappEntry | ZappFeed,
+  component?: ZappUIComponent & { parent?: ZappUIComponent }
+) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} component={component} />
+  );
+
+  ActionButtonWithEntry.displayName = "ActionButtonWithEntry";
+
+  return ActionButtonWithEntry;
+};
+
+boundActionButton.displayName = "boundActionButton";

package/Components/ModalComponent/ActionsBottomSheet/index.ts

@@ -0,0 +1,9 @@
+export { ActionButton } from "./ActionButton";
+
+export type { ActionButtonProps } from "./ActionButton";
+
+export { boundActionButton } from "./boundActionButton";
+
+export { openActionsBottomSheet } from "./openActionsBottomSheet";
+
+export type { OpenActionsBottomSheetArgs } from "./openActionsBottomSheet";

package/Components/ModalComponent/ActionsBottomSheet/openActionsBottomSheet.ts

@@ -0,0 +1,61 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { openBottomSheetModal } from "@applicaster/zapp-react-native-utils/modalState";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { boundActionButton } from "./boundActionButton";
+
+const { log_warning } = createLogger({
+  subsystem: "ActionsBottomSheet",
+  category: "Presentation",
+});
+
+export type OpenActionsBottomSheetArgs = {
+  /** Entry the actions act on; bound into every row button. */
+  entry: ZappEntry | ZappFeed;
+  /** Already resolved and merged actions, in the order they should appear. */
+  actions: RegisteredAction[];
+  title?: string;
+  summary?: string;
+  /** List that opened the sheet; forwarded into row invokeAction context. */
+  component?: ZappUIComponent & { parent?: ZappUIComponent };
+};
+
+/**
+ * Presents a list of resolved actions in the shared bottom sheet.
+ *
+ * This is the core entry point for "show these actions in a sheet": the
+ * open-modal-bottom-sheet plugin uses it for its configured list, and the
+ * player overflow uses it for the actions that did not fit on the overlay.
+ * Neither has to know about the other, and neither needs the plugin installed.
+ */
+export function openActionsBottomSheet({
+  entry,
+  actions,
+  title,
+  summary,
+  component,
+}: OpenActionsBottomSheetArgs): void {
+  if (!actions?.length) {
+    // Every action resolved away - unavailable for this entry, or not
+    // invokable. An empty sheet looks broken, so say why and stay put.
+    log_warning(
+      "openActionsBottomSheet: nothing to present - not opening the sheet",
+      { entryId: (entry as ZappEntry)?.id }
+    );
+
+    return;
+  }
+
+  openBottomSheetModal({
+    modalBottomSheetContentProps: {
+      // TODO: should be optional - the button handles its own tap, but
+      //  BottomSheetModalContent still requires an onPress.
+      onPress: noop,
+      items: actions,
+      buttonComponent: boundActionButton(entry, component),
+      title,
+      summary,
+    },
+  });
+}