@symbiote-native/react 0.2.7 → 0.2.8

package/build/components/touchable/index.js

@@ -8,10 +8,15 @@
 //     pressed-state style (RN drives this with setState, not Animated, faithfully).
 //   TouchableWithoutFeedback: no visual change, just the press wiring.
 import { createElement, useRef } from 'react';
-import { dlog } from '@symbiote-native/engine';
-import { computePressOutWait, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
+import { createTouchableFeedbackHandlers, createTouchableFeedbackRuntime, highlightPressedStyle, DEFAULT_ACTIVE_OPACITY, DEFAULT_HIGHLIGHT_CHILD_OPACITY, DEFAULT_MIN_PRESS_DURATION_MS, DEFAULT_UNDERLAY_COLOR, OPACITY_ACTIVE_DURATION_MS, OPACITY_INACTIVE_DURATION_MS, RESTING_OPACITY, } from '@symbiote-native/components';
 import { Pressable } from '../pressable/index.js';
 import { Animated } from '../../modules/animated/index.js';
+// The real setTimeout the shared feedback machine schedules its deferred activation/deactivation on
+// (core/components has no timer globals). Returns a canceller so an early release flushes the timer.
+function scheduleTimeout(callback, ms) {
+    const id = setTimeout(callback, ms);
+    return () => clearTimeout(id);
+}
 export const TouchableOpacity = props => {
     const { activeOpacity = DEFAULT_ACTIVE_OPACITY, style, 
     // className is pulled out here, like style, and applied to the inner Animated.View below —
@@ -21,10 +26,8 @@ export const TouchableOpacity = props => {
     // One Animated.Value per mount, resting at full opacity. The Animated.View leaf commits its
     // current value every frame, so timing it animates the real view.
     const opacity = useRef(new Animated.Value(RESTING_OPACITY)).current;
-    // The pending delayPressIn timer, so a release before it fires can flush it.
-    const pressInTimer = useRef(undefined);
-    // When the active visual actually started, to floor onPressOut by minPressDuration.
-    const activatedAt = useRef(undefined);
+    // The shared press-scheduling cell (delayPressIn timer + activation clock), held across renders.
+    const runtime = useRef(createTouchableFeedbackRuntime()).current;
     function setOpacityTo(toValue, duration) {
         Animated.timing(opacity, {
             toValue,
@@ -33,59 +36,24 @@ export const TouchableOpacity = props => {
             useNativeDriver: false,
         }).start();
     }
-    function clearPressInTimer() {
-        if (pressInTimer.current !== undefined) {
-            clearTimeout(pressInTimer.current);
-            pressInTimer.current = undefined;
-        }
-    }
-    function activate(event) {
-        activatedAt.current = Date.now();
-        setOpacityTo(activeOpacity, OPACITY_ACTIVE_DURATION_MS);
-        onPressIn?.(event);
-    }
-    function deactivate(event) {
-        activatedAt.current = undefined;
-        setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
-        onPressOut?.(event);
-    }
-    // RN's _createPressabilityConfig forwards delayPressIn: defer the active visual and onPressIn
-    // behind the delay (a release before it elapses flushes it synchronously).
-    function handlePressIn(event) {
-        if (delayPressIn > 0) {
-            dlog(`TouchableOpacity pressIn deferred ${delayPressIn}ms`);
-            pressInTimer.current = setTimeout(() => {
-                pressInTimer.current = undefined;
-                activate(event);
-            }, delayPressIn);
-            return;
-        }
-        activate(event);
-    }
-    // delayPressOut + minPressDuration (RN _deactivate): the press-out waits at least minPress-
-    // Duration past activation (so a fast tap holds the active visual) and at least delayPressOut.
-    function handlePressOut(event) {
-        if (pressInTimer.current !== undefined) {
-            clearPressInTimer();
-            activate(event);
-        }
-        const heldFor = activatedAt.current === undefined ? 0 : Date.now() - activatedAt.current;
-        const wait = computePressOutWait(heldFor, minPressDuration, delayPressOut);
-        if (wait > 0) {
-            dlog(`TouchableOpacity pressOut deferred ${wait}ms`);
-            setTimeout(() => deactivate(event), wait);
-            return;
-        }
-        deactivate(event);
-    }
+    // The shared machine owns the delayPressIn/minPressDuration scheduling; the adapter supplies only
+    // the native seam — the Animated opacity fade + the framework emit — as activate/deactivate.
+    const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({ delayPressIn, delayPressOut, minPressDuration, schedule: scheduleTimeout, now: Date.now }, runtime, {
+        activate(event) {
+            setOpacityTo(activeOpacity, OPACITY_ACTIVE_DURATION_MS);
+            onPressIn?.(event);
+        },
+        deactivate(event) {
+            setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+            onPressOut?.(event);
+        },
+    });
     return createElement(Pressable, { ...rest, onPressIn: handlePressIn, onPressOut: handlePressOut }, createElement(Animated.View, { style: [style, { opacity }], className }, children));
 };
 export const TouchableHighlight = props => {
     const { activeOpacity = DEFAULT_HIGHLIGHT_CHILD_OPACITY, underlayColor = DEFAULT_UNDERLAY_COLOR, style, children, ...rest } = props;
     function pressedStyle({ pressed }) {
-        if (!pressed)
-            return style;
-        return [style, { backgroundColor: underlayColor, opacity: activeOpacity }];
+        return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
     }
     return createElement(Pressable, { ...rest, style: pressedStyle }, children);
 };