@rocapine/react-native-onboarding-ui 1.36.2 → 1.37.0

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -1,8 +1,10 @@
 import React from "react";
+import { Pressable } from "react-native";
 import { evaluateCondition } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
 import { BaseBoxProps } from "./BaseBoxProps";
 import { RenderContext } from "./shared";
+import { runActions } from "./runActions";
 import { StackElementComponent } from "./StackElement";
 import { TextElementComponent } from "./TextElement";
 import { RichTextElementComponent } from "./RichTextElement";
@@ -26,6 +28,19 @@ import { KeyboardAvoidingViewElementComponent } from "./KeyboardAvoidingViewElem
 import { ProgressIndicatorElementComponent } from "./ProgressIndicatorElement";
 import { AnimatedBox } from "./AnimatedBox";
 
+// Element types that own their own press / focus / scroll handling. The generic
+// `onPress` (BaseBoxProps) is NOT wired for these — Button/RadioGroup/Checkbox/
+// DatePicker already dispatch actions or selections; Input/WheelPicker would have
+// their focus / scroll-selection intercepted by an outer Pressable.
+const PRESS_HANDLED_TYPES = new Set<UIElement["type"]>([
+  "Button",
+  "RadioGroup",
+  "CheckboxGroup",
+  "DatePicker",
+  "Input",
+  "WheelPicker",
+]);
+
 export const renderElement = (
   element: UIElement,
   ctx: RenderContext,
@@ -128,12 +143,52 @@ export const renderElement = (
     return null;
   })();
 
+  // Cast to BaseBoxProps: not every element's props type extends it (e.g.
+  // WheelPicker), but the onPress/animation/transform/flex/alignSelf fields are
+  // all optional BaseBoxProps members and simply read as undefined when absent.
+  const p = element.props as BaseBoxProps;
+
+  // Generic onPress: make any non-pressable element tappable, dispatching the
+  // same action list as Button via runActions. Skipped for PRESS_HANDLED_TYPES.
+  // A Pressable around a scroll/carousel keeps inner scrolling working — RN's
+  // gesture responder gives the scroll the touch when it pans.
+  let content: React.ReactNode = node;
+  if (
+    content !== null &&
+    p.onPress &&
+    p.onPress.length > 0 &&
+    !PRESS_HANDLED_TYPES.has(element.type)
+  ) {
+    const onPress = p.onPress;
+    // The Pressable must be layout-transparent (like AnimatedBox): forward the
+    // element's flex sizing so the wrapper participates in its parent's flex
+    // context exactly as the element would. Without this, the style-less
+    // Pressable sizes to content while the element's `flex`/`flexShrink` sit on
+    // the inner node — breaking row splits (cards overflow) and column flow.
+    // Mirror StackElement's `parentType === "XStack"` flexShrink:1 default.
+    content = (
+      <Pressable
+        key={element.id}
+        onPress={() => {
+          void runActions(onPress, ctx);
+        }}
+        style={{
+          flex: p.flex,
+          flexGrow: p.flexGrow,
+          flexShrink: p.flexShrink ?? (parentType === "XStack" ? 1 : undefined),
+          alignSelf: p.alignSelf,
+        }}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
   // Wrap only when motion is requested — zero overhead (no extra view) otherwise.
   // Cast to BaseBoxProps: not every element's props type extends it (e.g.
   // WheelPicker), but the animation/transform/flex/alignSelf fields are all
   // optional BaseBoxProps members and simply read as undefined when absent.
-  const p = element.props as BaseBoxProps;
-  if (node !== null && (p.animation || p.transform)) {
+  if (content !== null && (p.animation || p.transform)) {
     return (
       <AnimatedBox
         key={element.id}
@@ -142,10 +197,10 @@ export const renderElement = (
         flex={p.flex}
         alignSelf={p.alignSelf}
       >
-        {node}
+        {content}
       </AnimatedBox>
     );
   }
 
-  return node;
+  return content;
 };

package/src/UI/Pages/ComposableScreen/elements/runActions.ts

@@ -0,0 +1,109 @@
+import type {
+  ComposableVariableEntry,
+  ComposableVariableKind,
+} from "@rocapine/react-native-onboarding";
+import type { ButtonAction } from "./actions";
+import type { RenderContext } from "./shared";
+import { evaluateSetVariableExpression } from "./expression";
+
+// Decode a multi-select variable's stored value (JSON-encoded string[], as
+// written by CheckboxGroup) into a string array. Tolerates undefined / non-array
+// / unparseable input by returning [].
+function decodeArrayValue(raw: string | undefined): string[] {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+
+// Sequentially runs a list of press actions against the render context. Shared
+// by `Button` (its `actions`) and the generic `onPress` on every UIElement
+// (wired centrally in renderElement.tsx). Semantics:
+//   - "continue"     → advance the onboarding; terminal (stops the loop).
+//   - {setVariable}  → write a variable (expression-evaluated when valueMode === "expression").
+//   - {custom}       → invoke the host-registered customAction with the requested
+//                      variables; warns if unregistered, aborts the loop on throw.
+export async function runActions(
+  actions: ButtonAction[],
+  ctx: RenderContext
+): Promise<void> {
+  const { onContinue, setVariable, customActions, variables } = ctx;
+
+  for (const act of actions) {
+    if (act === "continue") {
+      onContinue();
+      return;
+    }
+    if (act.type === "setVariable") {
+      let value: string;
+      let kind: ComposableVariableKind | undefined;
+      if (act.valueMode === "expression") {
+        const computed = evaluateSetVariableExpression(act.value, variables);
+        value = computed.value;
+        kind = computed.kind;
+      } else {
+        value = act.value;
+        kind = act.kind;
+      }
+
+      if (act.arrayOp) {
+        // Multi-select set operation on the JSON-encoded string[] used by
+        // CheckboxGroup. value/label are the single member being added/removed.
+        const entry = variables[act.name];
+        const curValues = decodeArrayValue(entry?.value);
+        const curLabels = entry?.label ? entry.label.split(", ") : [];
+        const memberLabel = act.label ?? value;
+        const idx = curValues.indexOf(value);
+        const present = idx !== -1;
+        const add =
+          act.arrayOp === "append" || (act.arrayOp === "toggle" && !present);
+
+        let nextValues: string[];
+        let nextLabels: string[];
+        if (add) {
+          // Dedup: appending an already-present member is a no-op.
+          nextValues = present ? curValues : [...curValues, value];
+          nextLabels = present ? curLabels : [...curLabels, memberLabel];
+        } else {
+          // remove, or toggle-when-present
+          nextValues = curValues.filter((_, i) => i !== idx);
+          nextLabels =
+            present && idx < curLabels.length
+              ? curLabels.filter((_, i) => i !== idx)
+              : curLabels.filter((l) => l !== memberLabel);
+        }
+
+        setVariable(act.name, {
+          value: JSON.stringify(nextValues),
+          label: nextLabels.join(", "),
+        });
+        continue;
+      }
+
+      setVariable(act.name, { value, label: act.label, kind });
+      continue;
+    }
+    const handler = customActions[act.function];
+    if (!handler) {
+      console.warn(
+        `[ComposableScreen] No customAction registered for "${act.function}"`
+      );
+      continue;
+    }
+    const requested = act.variables ?? [];
+    const vars: Record<string, ComposableVariableEntry | undefined> = {};
+    for (const name of requested) vars[name] = variables[name];
+    try {
+      await handler({ variables: vars });
+    } catch (err) {
+      console.error(
+        `[ComposableScreen] customAction "${act.function}" threw:`,
+        err
+      );
+      return;
+    }
+  }
+}