@applicaster/zapp-react-native-ui-components 16.0.0-rc.70 → 16.0.0-rc.72

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,10 +2,22 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import {
+  observeEntryState,
+  RegisteredActionValue,
+} from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { masterCellLogger } from "../logger";
 
 import Image from "./Image";
 type Props = {
   item: ZappEntry | ZappFeed;
+  /**
+   * Already resolved action value. Pass it when the caller took the action out
+   * of `uiActionsRegistry` (entry actions have no plugin context to look up),
+   * and this skips the `useActions` lookup entirely.
+   */
+  actionContext?: RegisteredActionValue;
   flavour?: "flavour_1" | "flavour_2";
   asset?: {
     props: {};
@@ -32,6 +44,19 @@ function isStringAsset(asset) {
   return typeof asset === "string" || Array.isArray(asset);
 }
 
+/**
+ * `CellActionEntryState["asset"]` is either something `Image` can take (a URI,
+ * or a per-flavour array) or a component to render. A plain object is neither -
+ * a locale/state map reaches us that way - and handing one to JSX throws
+ * "Element type is invalid", so it has to be recognised rather than assumed.
+ */
+function isComponentAsset(asset): boolean {
+  return (
+    typeof asset === "function" ||
+    (typeof asset === "object" && asset !== null && "$$typeof" in asset)
+  );
+}
+
 function getAssetValue(asset, flavour, fallbackAsset = null) {
   if (!asset) {
     return null;
@@ -55,26 +80,52 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
 export const ActionButton = React.memo(function ActionButtonComponent(
   props: Props
 ) {
-  const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
-  const actionContext = useActions(action?.identifier);
+  const {
+    item,
+    action,
+    asset,
+    flavour = "flavour_1",
+    cellUUID,
+    actionContext: providedActionContext,
+  } = props;
+
+  // Passing `undefined` makes `useActions` a no-op lookup instead of warning
+  // about a plugin that was never meant to be there. Callers are expected to
+  // either always or never provide the context for a given mounted button -
+  // `useActions` already branches on plugin presence internally, so a value
+  // that appears mid-life would change the hook count either way.
+  const lookedUpActionContext = useActions(
+    providedActionContext ? undefined : action?.identifier
+  );
+
+  const actionContext = providedActionContext ?? lookedUpActionContext;
 
   // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
 
-  // Note: in theory initialization is not needed anymore, we are using useEffect
-  const [actionState, setActionState] = React.useState(
-    actionDisabled || !actionContext
-      ? null
-      : actionContext.initialEntryState(item)
+  const [actionState, setActionState] = React.useState(() =>
+    actionDisabled ? null : actionContext?.initialEntryState?.(item)
   );
 
+  // `observeEntryState` is the one way to follow an action's state: it uses the
+  // action's own stream when it has one, and otherwise builds an equivalent one
+  // from `initialEntryState` + `addListener`. Reading only the latter pair
+  // leaves stream-backed actions - playback speed, sleep timer - frozen at the
+  // value they had when the button mounted.
   useEffect(() => {
-    if (!((actionDisabled || !actionContext) && actionState !== null)) {
-      setActionState(actionContext.initialEntryState(item));
+    if (actionDisabled || !actionContext) {
+      return undefined;
     }
-  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
+
+    const subscription = observeEntryState(actionContext, item).subscribe(
+      setActionState
+    );
+
+    return () => subscription.unsubscribe();
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -82,15 +133,30 @@ export const ActionButton = React.memo(function ActionButtonComponent(
         setActionState(state);
       },
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionContext, item]);
+
+  // An asset that is present but of a shape nothing can render (a locale or
+  // state map, say) drops the button for good - unlike a missing asset, which
+  // is usually just state that has not loaded yet. Reported from an effect so
+  // it is said once per action/entry rather than on every render.
+  const unrenderableAsset =
+    Boolean(actionState?.asset) &&
+    !isStringAsset(actionState?.asset) &&
+    !isComponentAsset(actionState?.asset);
 
   useEffect(() => {
-    if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(String(item.id), (state) => {
-        setActionState(state);
+    if (unrenderableAsset) {
+      masterCellLogger.warning({
+        message: `ActionButton: the asset of action "${action?.identifier}" is neither an image source nor a component - the button is not rendered`,
+        data: {
+          identifier: action?.identifier,
+          entryId: item?.id,
+          assetType: typeof actionState?.asset,
+        },
       });
     }
-  }, [item?.id, setActionState, actionContext]);
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [unrenderableAsset, action?.identifier, item?.id]);
 
   if (actionDisabled || !actionContext) return null;
   const AssetComponent = actionState?.asset;
@@ -98,12 +164,22 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   // Default state is not yet ready
   if (!AssetComponent) return null;
 
+  // Neither an image source nor a component - nothing renderable.
+  if (!isStringAsset(AssetComponent) && !isComponentAsset(AssetComponent)) {
+    return null;
+  }
+
   return (
     <TouchableOpacity
       activeOpacity={1}
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
-      accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
+      accessibilityLabel={
+        props?.accessibilityLabel ||
+        (typeof actionState?.label === "string" ? actionState.label : null) ||
+        `${item?.id}`
+      }
       accessibilityHint={props?.accessibilityHint}
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}

package/Components/ModalComponent/ActionsBottomSheet/ActionButton.tsx

@@ -0,0 +1,54 @@
+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;
+};
+
+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 } = props;
+
+  const action = item?.action;
+
+  const { state, invokeAction } = useEntryActionState(action, entry);
+
+  const onPress = React.useCallback(
+    (_item) => {
+      invokeAction({
+        context: "toast",
+        dismiss: () => onItemPress?.(item),
+      });
+    },
+    [invokeAction, item, onItemPress]
+  );
+
+  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/boundActionButton.tsx

@@ -0,0 +1,21 @@
+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) => {
+  const ActionButtonWithEntry = (props: ActionButtonProps) => (
+    <ActionButton {...props} entry={entry as ZappEntry} />
+  );
+
+  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,58 @@
+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;
+};
+
+/**
+ * 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,
+}: 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),
+      title,
+      summary,
+    },
+  });
+}

package/Hooks/useEntryActionsExpander.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+
+import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutorContext";
+import {
+  buildEntryActions,
+  EntryActionDeps,
+} from "@applicaster/zapp-react-native-utils/entryActions";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useScreenStateStore } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useScreenStateStore";
+import {
+  useCurrentScreenData,
+  useScreenContext,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { RegisteredAction } from "@applicaster/zapp-react-native-utils/uiActionsRegistrator";
+
+import { ZappPipesEntryContext } from "../Contexts";
+
+/**
+ * Expands `entry.extensions.entry_action` into invokable actions, against the
+ * screen this hook is called from.
+ *
+ * Entry actions are data on the entry, not an installed capability, so there is
+ * nothing to look up by identifier: the surface showing the entry expands them.
+ * That also decides which screen they execute against — the one whose tree this
+ * hook runs in, rather than whichever screen happened to be current when a
+ * global provider was registered.
+ *
+ * Pass the result to `resolveActionIdentifiers` / `resolvePlayerActions` as
+ * `expandEntryActions`.
+ */
+export function useEntryActionsExpander(): (
+  entry: ZappEntry | ZappFeed
+) => RegisteredAction[] {
+  const { pathname } = useRoute();
+
+  const { context: screenEntryContext } = React.useContext(
+    ZappPipesEntryContext.Context
+  );
+
+  const screenData = useCurrentScreenData();
+  const screenState = useScreenContext()?.options;
+  const screenStateStore = useScreenStateStore();
+  const actionExecutor = React.useContext(ActionExecutorContext);
+
+  // Read through a ref so the returned expander keeps a stable identity: it
+  // feeds `useMemo` dependency lists on surfaces that re-resolve their actions
+  // on every registry change.
+  const depsRef = React.useRef<EntryActionDeps>();
+
+  depsRef.current = {
+    actionExecutor,
+    actionContext: {
+      screenData,
+      screenState,
+      screenRoute: pathname,
+      screenStateStore,
+      screenEntry: screenEntryContext?.data,
+    },
+  };
+
+  return React.useCallback(
+    (entry: ZappEntry | ZappFeed) => buildEntryActions(entry, depsRef.current),
+    []
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.70",
+  "version": "16.0.0-rc.72",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.70",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.70",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.70",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.70",
+    "@applicaster/applicaster-types": "16.0.0-rc.72",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.72",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.72",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.72",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",