@symbiote-native/vue 0.3.7 → 0.4.0

package/build/components/touchable.js

@@ -11,14 +11,20 @@
 // Inputs arrive as attrs (untyped), narrowed with runtime guards. The handlers read attrs LIVE
 // (they fire on events, not render) so a re-supplied callback / timing is always honored.
 import { defineComponent, h } from '@vue/runtime-core';
-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 { dlog, } from '@symbiote-native/engine';
+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 {} from '@symbiote-native/engine';
 import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
 import { Animated } from '../modules/animated/index.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function numberOr(value, fallback) {
     return typeof value === 'number' ? value : fallback;
 }
+// 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);
+}
 function forwardExcept(attrs, handled) {
     const result = {};
     for (const key of Object.keys(attrs)) {
@@ -41,8 +47,9 @@ export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttr
     // One Animated.Value per mount, resting at full opacity. Held by identity in setup scope (an
     // engine object, never a reactive ref). The Animated.View leaf commits it every frame.
     const opacity = new Animated.Value(RESTING_OPACITY);
-    let pressInTimer;
-    let activatedAt;
+    // The shared press-scheduling cell (delayPressIn timer + activation clock), persisted across
+    // renders in setup scope; the handlers are rebuilt each render over live attrs.
+    const runtime = createTouchableFeedbackRuntime();
     function setOpacityTo(toValue, duration) {
         Animated.timing(opacity, {
             toValue,
@@ -51,51 +58,27 @@ export const TouchableOpacity = defineComponent((_props, { slots, attrs: rawAttr
             useNativeDriver: false,
         }).start();
     }
-    function clearPressInTimer() {
-        if (pressInTimer !== undefined) {
-            clearTimeout(pressInTimer);
-            pressInTimer = undefined;
-        }
-    }
-    function activate(event) {
-        activatedAt = Date.now();
-        setOpacityTo(numberOr(rawAttrs.activeOpacity, DEFAULT_ACTIVE_OPACITY), OPACITY_ACTIVE_DURATION_MS);
-        emit('pressIn', event);
-    }
-    function deactivate(event) {
-        activatedAt = undefined;
-        setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
-        emit('pressOut', event);
-    }
-    function handlePressIn(event) {
-        const delayPressIn = numberOr(rawAttrs.delayPressIn, 0);
-        if (delayPressIn > 0) {
-            dlog(`TouchableOpacity pressIn deferred ${delayPressIn}ms`);
-            pressInTimer = setTimeout(() => {
-                pressInTimer = undefined;
-                activate(event);
-            }, delayPressIn);
-            return;
-        }
-        activate(event);
-    }
-    function handlePressOut(event) {
-        if (pressInTimer !== undefined) {
-            clearPressInTimer();
-            activate(event);
-        }
-        const heldFor = activatedAt === undefined ? 0 : Date.now() - activatedAt;
-        const wait = computePressOutWait(heldFor, numberOr(rawAttrs.minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS), numberOr(rawAttrs.delayPressOut, 0));
-        if (wait > 0) {
-            dlog(`TouchableOpacity pressOut deferred ${wait}ms`);
-            setTimeout(() => deactivate(event), wait);
-            return;
-        }
-        deactivate(event);
-    }
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);
         const style = attrs.style;
+        // Rebuilt each render so a re-supplied delay/opacity is honored (Vue's live-attr idiom); the
+        // shared machine owns the scheduling, the adapter supplies the Animated fade + emit.
+        const { handlePressIn, handlePressOut } = createTouchableFeedbackHandlers({
+            delayPressIn: numberOr(attrs.delayPressIn, 0),
+            delayPressOut: numberOr(attrs.delayPressOut, 0),
+            minPressDuration: numberOr(attrs.minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS),
+            schedule: scheduleTimeout,
+            now: Date.now,
+        }, runtime, {
+            activate(event) {
+                setOpacityTo(numberOr(attrs.activeOpacity, DEFAULT_ACTIVE_OPACITY), OPACITY_ACTIVE_DURATION_MS);
+                emit('pressIn', event);
+            },
+            deactivate(event) {
+                setOpacityTo(RESTING_OPACITY, OPACITY_INACTIVE_DURATION_MS);
+                emit('pressOut', event);
+            },
+        });
         const pressableProps = {
             ...forwardExcept(attrs, TOUCHABLE_OPACITY_HANDLED),
             ...emitPressableEvents(emit),
@@ -119,10 +102,7 @@ export const TouchableHighlight = defineComponent((_props, { slots, attrs: rawAt
         const underlayColor = typeof attrs.underlayColor === 'string' ? attrs.underlayColor : DEFAULT_UNDERLAY_COLOR;
         const style = attrs.style;
         function pressedStyle({ pressed }) {
-            if (!pressed)
-                return style;
-            const overlay = { backgroundColor: underlayColor, opacity: activeOpacity };
-            return [style, overlay];
+            return highlightPressedStyle(pressed, style, underlayColor, activeOpacity);
         }
         const pressableProps = {
             ...forwardExcept(attrs, TOUCHABLE_HIGHLIGHT_HANDLED),