@symbiote-native/react 0.2.7 → 0.3.0

package/build/components/switch/shared.js

@@ -9,51 +9,52 @@
 // JS commands the old value back down (a plain prop re-push cannot cover the no-op case: the
 // prop never changes, so the retained tree never diverges). The command name is platform-
 // specific (iOS setValue / Android setNativeValue) and arrives via `platform`.
+//
+// useSwitchLogic is a plain hook, not a component factory returning a closure: React Compiler's
+// component/hook detection only walks top-level declarations, so index.ios.ts / index.android.ts
+// each declare their OWN top-level `Switch` function that calls this hook, rather than exporting
+// whatever a factory here returns.
 import { useCallback, useLayoutEffect, useReducer, useRef } from 'react';
 import { renderSwitch, switchReducer, createInitialSwitchState, shouldSnapBack, valueFromChange, } from '@symbiote-native/components';
 import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
-import { descriptorToReact } from '../../descriptor-to-react/index.js';
-export function createSwitch(platform) {
-    return rawProps => {
-        // Switch owns its host element rather than rendering through a symbiote View, so it folds
-        // aria/role into accessibility* here; the resolved accessibility* fields (plus testID etc.)
-        // ride down to the host node via `passthrough`.
-        const props = resolveAccessibilityProps(rawProps);
-        const { value, onValueChange, disabled, trackColor, thumbColor, ios_backgroundColor, style, ...passthrough } = props;
-        const ref = useRef(null);
-        const [state, dispatch] = useReducer(switchReducer, undefined, createInitialSwitchState);
-        const handleChange = useCallback((event) => {
-            const next = valueFromChange(event);
-            dlog(`Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`);
-            if (next === undefined)
-                return;
-            onValueChange?.(next, event);
-            dispatch({ type: 'native-reported', value: next });
-        }, [onValueChange]);
-        // value is a real Fabric prop, folded to a strict boolean: RN sends `value === true`, so
-        // an undefined prop reads as "off" rather than absent.
-        const fabricValue = value === true;
-        useLayoutEffect(() => {
-            const node = ref.current;
-            if (node === null)
-                return;
-            if (!shouldSnapBack(state, fabricValue)) {
-                dlog(`Switch snap-back no-op reported=${String(state.lastNativeReport)} value=${fabricValue}`);
-                return;
-            }
-            dlog(`Switch ${platform.snapBackCommand} snap-back reported=${String(state.lastNativeReport)} value=${fabricValue}`);
-            dispatchViewCommand(node, platform.snapBackCommand, [fabricValue]);
-        }, [fabricValue, state]);
-        const descriptor = renderSwitch({
-            value: fabricValue,
-            disabled,
-            trackColor,
-            thumbColor,
-            ios_backgroundColor,
-            style,
-            passthrough: { ...passthrough, ref, onChange: handleChange },
-        }, platform);
-        return descriptorToReact(descriptor);
-    };
+export function useSwitchLogic(rawProps, platform) {
+    // Switch owns its host element rather than rendering through a symbiote View, so it folds
+    // aria/role into accessibility* here; the resolved accessibility* fields (plus testID etc.)
+    // ride down to the host node via `passthrough`.
+    const props = resolveAccessibilityProps(rawProps);
+    const { value, onValueChange, disabled, trackColor, thumbColor, ios_backgroundColor, style, ...passthrough } = props;
+    const ref = useRef(null);
+    const [state, dispatch] = useReducer(switchReducer, undefined, createInitialSwitchState);
+    const handleChange = useCallback((event) => {
+        const next = valueFromChange(event);
+        dlog(`Switch onChange value=${String(next)} eventCount=${String(event.nativeEvent.eventCount)}`);
+        if (next === undefined)
+            return;
+        onValueChange?.(next, event);
+        dispatch({ type: 'native-reported', value: next });
+    }, [onValueChange]);
+    // value is a real Fabric prop, folded to a strict boolean: RN sends `value === true`, so
+    // an undefined prop reads as "off" rather than absent.
+    const fabricValue = value === true;
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (node === null)
+            return;
+        if (!shouldSnapBack(state, fabricValue)) {
+            dlog(`Switch snap-back no-op reported=${String(state.lastNativeReport)} value=${fabricValue}`);
+            return;
+        }
+        dlog(`Switch ${platform.snapBackCommand} snap-back reported=${String(state.lastNativeReport)} value=${fabricValue}`);
+        dispatchViewCommand(node, platform.snapBackCommand, [fabricValue]);
+    }, [fabricValue, state]);
+    return renderSwitch({
+        value: fabricValue,
+        disabled,
+        trackColor,
+        thumbColor,
+        ios_backgroundColor,
+        style,
+        passthrough: { ...passthrough, ref, onChange: handleChange },
+    }, platform);
 }

package/build/components/text-input/index.js

@@ -10,7 +10,7 @@
 // (setTextAndSelection), never a plain prop re-push. See @symbiote-native/components/state/text-input.
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from 'react';
 import { dispatchViewCommand, dlog, } from '@symbiote-native/engine';
-import { blurTextInput, setInputBlurred, setInputFocused } from '../../modules/text-input-state.js';
+import { blurTextInput, setInputBlurred, setInputFocused } from '@symbiote-native/engine';
 import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
 import { descriptorToReact } from '../../descriptor-to-react/index.js';
 export const TextInput = forwardRef((rawProps, forwardedRef) => {

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);
 };