@rootnative/inertia 0.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -0
- package/LICENSE +21 -0
- package/README.md +131 -0
- package/dist/gestureLayer/index.d.mts +119 -0
- package/dist/gestureLayer/index.d.ts +119 -0
- package/dist/gestureLayer/index.js +346 -0
- package/dist/gestureLayer/index.js.map +1 -0
- package/dist/gestureLayer/index.mjs +344 -0
- package/dist/gestureLayer/index.mjs.map +1 -0
- package/dist/index.d.mts +507 -0
- package/dist/index.d.ts +507 -0
- package/dist/index.js +1546 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +1515 -0
- package/dist/index.mjs.map +1 -0
- package/dist/motion/Image.d.mts +12 -0
- package/dist/motion/Image.d.ts +12 -0
- package/dist/motion/Image.js +1138 -0
- package/dist/motion/Image.js.map +1 -0
- package/dist/motion/Image.mjs +1132 -0
- package/dist/motion/Image.mjs.map +1 -0
- package/dist/motion/Pressable.d.mts +15 -0
- package/dist/motion/Pressable.d.ts +15 -0
- package/dist/motion/Pressable.js +1138 -0
- package/dist/motion/Pressable.js.map +1 -0
- package/dist/motion/Pressable.mjs +1132 -0
- package/dist/motion/Pressable.mjs.map +1 -0
- package/dist/motion/ScrollView.d.mts +12 -0
- package/dist/motion/ScrollView.d.ts +12 -0
- package/dist/motion/ScrollView.js +1138 -0
- package/dist/motion/ScrollView.js.map +1 -0
- package/dist/motion/ScrollView.mjs +1132 -0
- package/dist/motion/ScrollView.mjs.map +1 -0
- package/dist/motion/Text.d.mts +11 -0
- package/dist/motion/Text.d.ts +11 -0
- package/dist/motion/Text.js +1138 -0
- package/dist/motion/Text.js.map +1 -0
- package/dist/motion/Text.mjs +1132 -0
- package/dist/motion/Text.mjs.map +1 -0
- package/dist/motion/View.d.mts +11 -0
- package/dist/motion/View.d.ts +11 -0
- package/dist/motion/View.js +1138 -0
- package/dist/motion/View.js.map +1 -0
- package/dist/motion/View.mjs +1132 -0
- package/dist/motion/View.mjs.map +1 -0
- package/dist/testing/index.d.mts +57 -0
- package/dist/testing/index.d.ts +57 -0
- package/dist/testing/index.js +19 -0
- package/dist/testing/index.js.map +1 -0
- package/dist/testing/index.mjs +16 -0
- package/dist/testing/index.mjs.map +1 -0
- package/dist/touch/index.d.mts +146 -0
- package/dist/touch/index.d.ts +146 -0
- package/dist/touch/index.js +166 -0
- package/dist/touch/index.js.map +1 -0
- package/dist/touch/index.mjs +164 -0
- package/dist/touch/index.mjs.map +1 -0
- package/dist/types-cU43dEmH.d.mts +339 -0
- package/dist/types-cU43dEmH.d.ts +339 -0
- package/dist/useGesture-BnY65PlQ.d.ts +84 -0
- package/dist/useGesture-DxtXdz-K.d.mts +84 -0
- package/jest-preset.js +33 -0
- package/jest-setup.js +213 -0
- package/llms.txt +142 -0
- package/package.json +151 -0
- package/src/__type-tests__/animate.test-d.tsx +88 -0
- package/src/__type-tests__/variants.test-d.tsx +67 -0
- package/src/config/MotionConfig.tsx +30 -0
- package/src/config/MotionConfigContext.ts +53 -0
- package/src/config/index.ts +9 -0
- package/src/gestureLayer/index.ts +21 -0
- package/src/gestureLayer/useGestureLayer.ts +285 -0
- package/src/gestures/focusVisibility.ts +61 -0
- package/src/gestures/index.ts +1 -0
- package/src/index.ts +72 -0
- package/src/layout/index.ts +16 -0
- package/src/layout/resolveLayout.ts +54 -0
- package/src/layout/sharedRegistry.ts +111 -0
- package/src/layout/useSharedLayout.ts +289 -0
- package/src/motion/Image.tsx +9 -0
- package/src/motion/Pressable.tsx +12 -0
- package/src/motion/ScrollView.tsx +9 -0
- package/src/motion/Text.tsx +8 -0
- package/src/motion/View.tsx +8 -0
- package/src/motion/createMotionComponent.tsx +1306 -0
- package/src/motion/index.ts +26 -0
- package/src/motion/installCheck.ts +65 -0
- package/src/presence/Presence.tsx +165 -0
- package/src/presence/PresenceContext.ts +28 -0
- package/src/presence/index.ts +6 -0
- package/src/testing/index.ts +78 -0
- package/src/touch/index.ts +18 -0
- package/src/touch/useTouchDrag.ts +289 -0
- package/src/transitions/easing.ts +53 -0
- package/src/transitions/index.ts +7 -0
- package/src/transitions/keys.ts +32 -0
- package/src/transitions/resolve.ts +169 -0
- package/src/transitions/resolveSequence.ts +87 -0
- package/src/transitions/runtime.ts +63 -0
- package/src/transitions/sig.ts +40 -0
- package/src/transitions/spring.ts +42 -0
- package/src/types.ts +383 -0
- package/src/values/index.ts +26 -0
- package/src/values/useAnimation.ts +69 -0
- package/src/values/useBooleanSpring.ts +33 -0
- package/src/values/useColorTransition.ts +72 -0
- package/src/values/useGesture.ts +144 -0
- package/src/values/useMotionValue.ts +33 -0
- package/src/values/useScroll.ts +72 -0
- package/src/values/useShadow.ts +116 -0
- package/src/values/useSpring.ts +98 -0
- package/src/values/useTransform.ts +132 -0
- package/src/values/useVariants.ts +60 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,1515 @@
|
|
|
1
|
+
import { Image, Pressable, ScrollView, Text, View, Platform } from 'react-native';
|
|
2
|
+
import { createContext, forwardRef, useRef, useState, useEffect, useMemo, useContext, useCallback, Children, isValidElement } from 'react';
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, interpolateColor, reanimatedVersion, useReducedMotion, withSequence, LinearTransition, runOnJS, withRepeat, withTiming, withSpring, withDelay, withDecay, Easing, useAnimatedReaction, useDerivedValue, Extrapolation, useAnimatedScrollHandler, interpolate } from 'react-native-reanimated';
|
|
4
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
+
import { isWorkletFunction } from 'react-native-worklets';
|
|
6
|
+
|
|
7
|
+
// src/motion/Image.tsx
|
|
8
|
+
var DEFAULT_MOTION_CONFIG = {
|
|
9
|
+
reducedMotion: "user"
|
|
10
|
+
};
|
|
11
|
+
var MotionConfigContext = createContext(
|
|
12
|
+
DEFAULT_MOTION_CONFIG
|
|
13
|
+
);
|
|
14
|
+
function useMotionConfig() {
|
|
15
|
+
return useContext(MotionConfigContext);
|
|
16
|
+
}
|
|
17
|
+
function useShouldReduceMotion() {
|
|
18
|
+
const { reducedMotion } = useMotionConfig();
|
|
19
|
+
const osReduced = useReducedMotion();
|
|
20
|
+
if (reducedMotion === "never") return false;
|
|
21
|
+
if (reducedMotion === "always") return true;
|
|
22
|
+
return osReduced;
|
|
23
|
+
}
|
|
24
|
+
function MotionConfig({
|
|
25
|
+
reducedMotion = "user",
|
|
26
|
+
children
|
|
27
|
+
}) {
|
|
28
|
+
const value = useMemo(
|
|
29
|
+
() => ({ reducedMotion }),
|
|
30
|
+
[reducedMotion]
|
|
31
|
+
);
|
|
32
|
+
return /* @__PURE__ */ jsx(MotionConfigContext.Provider, { value, children });
|
|
33
|
+
}
|
|
34
|
+
var modality = "keyboard";
|
|
35
|
+
var installed = false;
|
|
36
|
+
function setKeyboard() {
|
|
37
|
+
modality = "keyboard";
|
|
38
|
+
}
|
|
39
|
+
function setPointer() {
|
|
40
|
+
modality = "pointer";
|
|
41
|
+
}
|
|
42
|
+
function ensureInstalled() {
|
|
43
|
+
if (installed) return;
|
|
44
|
+
if (Platform.OS !== "web") return;
|
|
45
|
+
if (typeof document === "undefined") return;
|
|
46
|
+
document.addEventListener("keydown", setKeyboard, true);
|
|
47
|
+
document.addEventListener("mousedown", setPointer, true);
|
|
48
|
+
document.addEventListener("pointerdown", setPointer, true);
|
|
49
|
+
document.addEventListener("touchstart", setPointer, true);
|
|
50
|
+
installed = true;
|
|
51
|
+
}
|
|
52
|
+
function isFocusVisible() {
|
|
53
|
+
if (Platform.OS !== "web") return true;
|
|
54
|
+
ensureInstalled();
|
|
55
|
+
return modality === "keyboard";
|
|
56
|
+
}
|
|
57
|
+
function ensureWorkletEasing(easing) {
|
|
58
|
+
if (!easing) return void 0;
|
|
59
|
+
const fn = isEasingFactory(easing) ? easing.factory() : easing;
|
|
60
|
+
if (isWorkletFunction(fn)) return fn;
|
|
61
|
+
const wrapped = (t) => {
|
|
62
|
+
"worklet";
|
|
63
|
+
return fn(t);
|
|
64
|
+
};
|
|
65
|
+
return wrapped;
|
|
66
|
+
}
|
|
67
|
+
function isEasingFactory(value) {
|
|
68
|
+
return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// src/transitions/spring.ts
|
|
72
|
+
var DEFAULT_SPRING = {
|
|
73
|
+
tension: 170,
|
|
74
|
+
friction: 26,
|
|
75
|
+
mass: 1
|
|
76
|
+
};
|
|
77
|
+
function springToReanimated(t) {
|
|
78
|
+
"worklet";
|
|
79
|
+
return {
|
|
80
|
+
stiffness: t.tension ?? DEFAULT_SPRING.tension,
|
|
81
|
+
damping: t.friction ?? DEFAULT_SPRING.friction,
|
|
82
|
+
mass: t.mass ?? DEFAULT_SPRING.mass,
|
|
83
|
+
velocity: t.velocity,
|
|
84
|
+
restSpeedThreshold: t.restSpeedThreshold,
|
|
85
|
+
restDisplacementThreshold: t.restDisplacementThreshold
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
// src/layout/resolveLayout.ts
|
|
90
|
+
function resolveLayoutTransition(layout) {
|
|
91
|
+
if (!layout) return void 0;
|
|
92
|
+
const cfg = layout === true ? { type: "spring" } : layout;
|
|
93
|
+
if (cfg.type === "no-animation") return void 0;
|
|
94
|
+
if (cfg.type === "timing") {
|
|
95
|
+
let builder2 = LinearTransition.duration(cfg.duration ?? 300);
|
|
96
|
+
const easing = ensureWorkletEasing(cfg.easing);
|
|
97
|
+
if (easing) builder2 = builder2.easing(easing);
|
|
98
|
+
if (cfg.delay) builder2 = builder2.delay(cfg.delay);
|
|
99
|
+
return builder2;
|
|
100
|
+
}
|
|
101
|
+
const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
|
|
102
|
+
const { stiffness, damping, mass } = springToReanimated({
|
|
103
|
+
...DEFAULT_SPRING,
|
|
104
|
+
...spring
|
|
105
|
+
});
|
|
106
|
+
let builder = LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
|
|
107
|
+
if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
|
|
108
|
+
return builder;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// src/layout/sharedRegistry.ts
|
|
112
|
+
var REGISTRY = /* @__PURE__ */ new Map();
|
|
113
|
+
var SHARED_LAYOUT_TTL_MS = 1e3;
|
|
114
|
+
var now = () => Date.now();
|
|
115
|
+
function registerLayout(id, rect) {
|
|
116
|
+
REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
|
|
117
|
+
}
|
|
118
|
+
function releaseLayout(id, rect) {
|
|
119
|
+
REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
|
|
120
|
+
}
|
|
121
|
+
function consumeLayout(id) {
|
|
122
|
+
const entry = REGISTRY.get(id);
|
|
123
|
+
if (!entry) return void 0;
|
|
124
|
+
REGISTRY.delete(id);
|
|
125
|
+
if (entry.expiresAt < now()) return void 0;
|
|
126
|
+
return entry.rect;
|
|
127
|
+
}
|
|
128
|
+
function useSharedLayout(options) {
|
|
129
|
+
const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
|
|
130
|
+
const dx = useSharedValue(0);
|
|
131
|
+
const dy = useSharedValue(0);
|
|
132
|
+
const sx = useSharedValue(1);
|
|
133
|
+
const sy = useSharedValue(1);
|
|
134
|
+
const lastRectRef = useRef(null);
|
|
135
|
+
const consumedRef = useRef(false);
|
|
136
|
+
const transitionRef = useRef(transition);
|
|
137
|
+
transitionRef.current = transition;
|
|
138
|
+
const reducedMotionRef = useRef(shouldReduceMotion);
|
|
139
|
+
reducedMotionRef.current = shouldReduceMotion;
|
|
140
|
+
const setRef = useCallback(
|
|
141
|
+
(node) => {
|
|
142
|
+
if (typeof userRef === "function") userRef(node);
|
|
143
|
+
else if (userRef) userRef.current = node;
|
|
144
|
+
},
|
|
145
|
+
[userRef]
|
|
146
|
+
);
|
|
147
|
+
const onLayout = useCallback(
|
|
148
|
+
(event) => {
|
|
149
|
+
userOnLayout?.(event);
|
|
150
|
+
if (!layoutId) return;
|
|
151
|
+
const { x, y, width, height } = event.nativeEvent.layout;
|
|
152
|
+
const rect = { x, y, width, height };
|
|
153
|
+
lastRectRef.current = rect;
|
|
154
|
+
let source;
|
|
155
|
+
if (!consumedRef.current) {
|
|
156
|
+
consumedRef.current = true;
|
|
157
|
+
source = consumeLayout(layoutId);
|
|
158
|
+
}
|
|
159
|
+
registerLayout(layoutId, rect);
|
|
160
|
+
if (source) {
|
|
161
|
+
applyFlip({
|
|
162
|
+
source,
|
|
163
|
+
target: rect,
|
|
164
|
+
dx,
|
|
165
|
+
dy,
|
|
166
|
+
sx,
|
|
167
|
+
sy,
|
|
168
|
+
transition: transitionRef.current,
|
|
169
|
+
shouldReduceMotion: reducedMotionRef.current
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
// dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
|
|
174
|
+
// exhaustive-deps would flag them — including them is harmless and
|
|
175
|
+
// silences the warning.
|
|
176
|
+
[layoutId, userOnLayout, dx, dy, sx, sy]
|
|
177
|
+
);
|
|
178
|
+
useEffect(() => {
|
|
179
|
+
consumedRef.current = false;
|
|
180
|
+
}, [layoutId]);
|
|
181
|
+
useEffect(() => {
|
|
182
|
+
return () => {
|
|
183
|
+
if (!layoutId) return;
|
|
184
|
+
const rect = lastRectRef.current;
|
|
185
|
+
if (!rect) return;
|
|
186
|
+
releaseLayout(layoutId, rect);
|
|
187
|
+
};
|
|
188
|
+
}, [layoutId]);
|
|
189
|
+
return useMemo(
|
|
190
|
+
() => ({
|
|
191
|
+
flip: { dx, dy, sx, sy },
|
|
192
|
+
setRef,
|
|
193
|
+
onLayout
|
|
194
|
+
}),
|
|
195
|
+
[dx, dy, sx, sy, setRef, onLayout]
|
|
196
|
+
);
|
|
197
|
+
}
|
|
198
|
+
function applyFlip(args) {
|
|
199
|
+
const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
|
|
200
|
+
const sourceCenterX = source.x + source.width / 2;
|
|
201
|
+
const sourceCenterY = source.y + source.height / 2;
|
|
202
|
+
const targetCenterX = target.x + target.width / 2;
|
|
203
|
+
const targetCenterY = target.y + target.height / 2;
|
|
204
|
+
const deltaX = sourceCenterX - targetCenterX;
|
|
205
|
+
const deltaY = sourceCenterY - targetCenterY;
|
|
206
|
+
const scaleX = target.width > 0 ? source.width / target.width : 1;
|
|
207
|
+
const scaleY = target.height > 0 ? source.height / target.height : 1;
|
|
208
|
+
if (shouldReduceMotion) {
|
|
209
|
+
dx.value = 0;
|
|
210
|
+
dy.value = 0;
|
|
211
|
+
sx.value = 1;
|
|
212
|
+
sy.value = 1;
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
if (transition?.type === "no-animation") {
|
|
216
|
+
dx.value = 0;
|
|
217
|
+
dy.value = 0;
|
|
218
|
+
sx.value = 1;
|
|
219
|
+
sy.value = 1;
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
if (transition?.type === "timing") {
|
|
223
|
+
const duration = transition.duration ?? 300;
|
|
224
|
+
dx.value = withSequence(
|
|
225
|
+
withTiming(deltaX, { duration: 0 }),
|
|
226
|
+
withTiming(0, { duration })
|
|
227
|
+
);
|
|
228
|
+
dy.value = withSequence(
|
|
229
|
+
withTiming(deltaY, { duration: 0 }),
|
|
230
|
+
withTiming(0, { duration })
|
|
231
|
+
);
|
|
232
|
+
sx.value = withSequence(
|
|
233
|
+
withTiming(scaleX, { duration: 0 }),
|
|
234
|
+
withTiming(1, { duration })
|
|
235
|
+
);
|
|
236
|
+
sy.value = withSequence(
|
|
237
|
+
withTiming(scaleY, { duration: 0 }),
|
|
238
|
+
withTiming(1, { duration })
|
|
239
|
+
);
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
|
|
243
|
+
const springParams = springToReanimated(springCfg);
|
|
244
|
+
dx.value = withSequence(
|
|
245
|
+
withTiming(deltaX, { duration: 0 }),
|
|
246
|
+
withSpring(0, springParams)
|
|
247
|
+
);
|
|
248
|
+
dy.value = withSequence(
|
|
249
|
+
withTiming(deltaY, { duration: 0 }),
|
|
250
|
+
withSpring(0, springParams)
|
|
251
|
+
);
|
|
252
|
+
sx.value = withSequence(
|
|
253
|
+
withTiming(scaleX, { duration: 0 }),
|
|
254
|
+
withSpring(1, springParams)
|
|
255
|
+
);
|
|
256
|
+
sy.value = withSequence(
|
|
257
|
+
withTiming(scaleY, { duration: 0 }),
|
|
258
|
+
withSpring(1, springParams)
|
|
259
|
+
);
|
|
260
|
+
}
|
|
261
|
+
var PresenceContext = createContext(null);
|
|
262
|
+
function usePresence() {
|
|
263
|
+
return useContext(PresenceContext);
|
|
264
|
+
}
|
|
265
|
+
function Presence({ children }) {
|
|
266
|
+
const incoming = useMemo(() => {
|
|
267
|
+
const out = [];
|
|
268
|
+
Children.forEach(children, (child) => {
|
|
269
|
+
if (!isValidElement(child)) return;
|
|
270
|
+
if (child.key === null) {
|
|
271
|
+
if (__DEV__) {
|
|
272
|
+
console.warn(
|
|
273
|
+
"[inertia] <Presence> children must have a `key`. Skipping a keyless child."
|
|
274
|
+
);
|
|
275
|
+
}
|
|
276
|
+
return;
|
|
277
|
+
}
|
|
278
|
+
out.push(child);
|
|
279
|
+
});
|
|
280
|
+
return out;
|
|
281
|
+
}, [children]);
|
|
282
|
+
const [exiting, setExiting] = useState(
|
|
283
|
+
() => /* @__PURE__ */ new Map()
|
|
284
|
+
);
|
|
285
|
+
const prevIncomingRef = useRef(incoming);
|
|
286
|
+
if (prevIncomingRef.current !== incoming) {
|
|
287
|
+
const prev = prevIncomingRef.current;
|
|
288
|
+
prevIncomingRef.current = incoming;
|
|
289
|
+
const incomingKeys = new Set(incoming.map((el) => el.key));
|
|
290
|
+
let next = null;
|
|
291
|
+
const ensureMutable = () => {
|
|
292
|
+
if (!next) next = new Map(exiting);
|
|
293
|
+
return next;
|
|
294
|
+
};
|
|
295
|
+
for (const oldEl of prev) {
|
|
296
|
+
const key = oldEl.key;
|
|
297
|
+
if (!incomingKeys.has(key) && !exiting.has(key)) {
|
|
298
|
+
ensureMutable().set(key, oldEl);
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
for (const el of incoming) {
|
|
302
|
+
const key = el.key;
|
|
303
|
+
if (exiting.has(key)) {
|
|
304
|
+
ensureMutable().delete(key);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
if (next) setExiting(next);
|
|
308
|
+
}
|
|
309
|
+
const handleRemove = useCallback((key) => {
|
|
310
|
+
setExiting((prev) => {
|
|
311
|
+
if (!prev.has(key)) return prev;
|
|
312
|
+
const next = new Map(prev);
|
|
313
|
+
next.delete(key);
|
|
314
|
+
return next;
|
|
315
|
+
});
|
|
316
|
+
}, []);
|
|
317
|
+
const renderList = [];
|
|
318
|
+
for (const el of incoming) {
|
|
319
|
+
renderList.push({
|
|
320
|
+
key: el.key,
|
|
321
|
+
element: el,
|
|
322
|
+
isPresent: true
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
for (const [key, el] of exiting) {
|
|
326
|
+
if (!renderList.some((entry) => entry.key === key)) {
|
|
327
|
+
renderList.push({ key, element: el, isPresent: false });
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
return /* @__PURE__ */ jsx(Fragment, { children: renderList.map(({ key, element, isPresent }) => /* @__PURE__ */ jsx(
|
|
331
|
+
PresenceItem,
|
|
332
|
+
{
|
|
333
|
+
itemKey: key,
|
|
334
|
+
isPresent,
|
|
335
|
+
onRemove: handleRemove,
|
|
336
|
+
children: element
|
|
337
|
+
},
|
|
338
|
+
key
|
|
339
|
+
)) });
|
|
340
|
+
}
|
|
341
|
+
function PresenceItem({
|
|
342
|
+
itemKey,
|
|
343
|
+
isPresent,
|
|
344
|
+
onRemove,
|
|
345
|
+
children
|
|
346
|
+
}) {
|
|
347
|
+
const value = useMemo(
|
|
348
|
+
() => ({
|
|
349
|
+
isPresent,
|
|
350
|
+
safeToRemove: () => onRemove(itemKey)
|
|
351
|
+
}),
|
|
352
|
+
[isPresent, itemKey, onRemove]
|
|
353
|
+
);
|
|
354
|
+
return /* @__PURE__ */ jsx(PresenceContext.Provider, { value, children });
|
|
355
|
+
}
|
|
356
|
+
var DEFAULT_TIMING_DURATION = 250;
|
|
357
|
+
function buildSpring(cfg, toValue, cb) {
|
|
358
|
+
return withSpring(toValue, springToReanimated(cfg), cb);
|
|
359
|
+
}
|
|
360
|
+
function buildTiming(cfg, toValue, cb) {
|
|
361
|
+
return withTiming(
|
|
362
|
+
toValue,
|
|
363
|
+
{
|
|
364
|
+
duration: cfg.duration ?? DEFAULT_TIMING_DURATION,
|
|
365
|
+
easing: ensureWorkletEasing(cfg.easing) ?? Easing.inOut(Easing.ease)
|
|
366
|
+
},
|
|
367
|
+
cb
|
|
368
|
+
);
|
|
369
|
+
}
|
|
370
|
+
function buildDecay(cfg, cb) {
|
|
371
|
+
return withDecay(
|
|
372
|
+
{
|
|
373
|
+
velocity: cfg.velocity ?? 0,
|
|
374
|
+
deceleration: cfg.deceleration,
|
|
375
|
+
clamp: cfg.clamp
|
|
376
|
+
},
|
|
377
|
+
cb
|
|
378
|
+
);
|
|
379
|
+
}
|
|
380
|
+
function buildOne(cfg, toValue, cb) {
|
|
381
|
+
if (cfg.type === "no-animation") {
|
|
382
|
+
if (cb) cb(true, toValue);
|
|
383
|
+
return toValue;
|
|
384
|
+
}
|
|
385
|
+
if (cfg.type === "decay") return buildDecay(cfg, cb);
|
|
386
|
+
if (cfg.type === "timing") return buildTiming(cfg, toValue, cb);
|
|
387
|
+
return buildSpring(cfg, toValue, cb);
|
|
388
|
+
}
|
|
389
|
+
function applyRepeat(animation, repeat) {
|
|
390
|
+
if (repeat === void 0) return animation;
|
|
391
|
+
if (repeat === "infinite") {
|
|
392
|
+
return withRepeat(animation, -1, true);
|
|
393
|
+
}
|
|
394
|
+
if (typeof repeat === "number") {
|
|
395
|
+
return withRepeat(animation, repeat, true);
|
|
396
|
+
}
|
|
397
|
+
const count = repeat.count === "infinite" ? -1 : repeat.count;
|
|
398
|
+
const alternate = repeat.alternate ?? true;
|
|
399
|
+
return withRepeat(animation, count, alternate);
|
|
400
|
+
}
|
|
401
|
+
function applyDelay(animation, delay) {
|
|
402
|
+
if (!delay || delay <= 0) return animation;
|
|
403
|
+
return withDelay(delay, animation);
|
|
404
|
+
}
|
|
405
|
+
function resolveTransition(config, toValue, callback) {
|
|
406
|
+
const cfg = config ?? { type: "spring" };
|
|
407
|
+
const base = buildOne(cfg, toValue, callback);
|
|
408
|
+
const repeated = applyRepeat(base, repeatOf(cfg));
|
|
409
|
+
return applyDelay(repeated, delayOf(cfg));
|
|
410
|
+
}
|
|
411
|
+
function repeatOf(cfg) {
|
|
412
|
+
if (cfg.type === "no-animation" || cfg.type === "decay") return void 0;
|
|
413
|
+
return cfg.repeat;
|
|
414
|
+
}
|
|
415
|
+
function stripRepeat(cfg) {
|
|
416
|
+
if (!cfg) return cfg;
|
|
417
|
+
if (cfg.type === "no-animation" || cfg.type === "decay") return cfg;
|
|
418
|
+
if (cfg.repeat === void 0) return cfg;
|
|
419
|
+
const next = { ...cfg };
|
|
420
|
+
delete next.repeat;
|
|
421
|
+
return next;
|
|
422
|
+
}
|
|
423
|
+
function delayOf(cfg) {
|
|
424
|
+
if (cfg.type === "no-animation") return void 0;
|
|
425
|
+
return cfg.delay;
|
|
426
|
+
}
|
|
427
|
+
function isStepObject(v) {
|
|
428
|
+
return typeof v === "object" && v !== null && !Array.isArray(v) && "to" in v;
|
|
429
|
+
}
|
|
430
|
+
function resolveAnimatableValue(value, base, factory) {
|
|
431
|
+
if (Array.isArray(value)) {
|
|
432
|
+
const steps = value;
|
|
433
|
+
const stepBase = stripRepeat(base);
|
|
434
|
+
const animations = steps.map(
|
|
435
|
+
(step2, i) => resolveStep(step2, stepBase, factory?.("step", i))
|
|
436
|
+
);
|
|
437
|
+
const seq = withSequence(...animations);
|
|
438
|
+
return applyRepeat(seq, base ? repeatOf(base) : void 0);
|
|
439
|
+
}
|
|
440
|
+
const step = value;
|
|
441
|
+
const cb = factory?.("animation", void 0);
|
|
442
|
+
if (isStepObject(step)) {
|
|
443
|
+
return resolveStep(step, base, cb);
|
|
444
|
+
}
|
|
445
|
+
return resolveTransition(base, step, cb);
|
|
446
|
+
}
|
|
447
|
+
function resolveStep(step, base, cb) {
|
|
448
|
+
if (isStepObject(step)) {
|
|
449
|
+
const { to, ...override } = step;
|
|
450
|
+
const merged = mergeTransition(base, override);
|
|
451
|
+
return resolveTransition(merged, to, cb);
|
|
452
|
+
}
|
|
453
|
+
return resolveTransition(base, step, cb);
|
|
454
|
+
}
|
|
455
|
+
function mergeTransition(base, override) {
|
|
456
|
+
if (override.type && base && override.type !== base.type) {
|
|
457
|
+
return override;
|
|
458
|
+
}
|
|
459
|
+
return { ...base ?? { type: "spring" }, ...override };
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
// src/transitions/keys.ts
|
|
463
|
+
var TRANSITION_CONFIG_KEYS = /* @__PURE__ */ new Set([
|
|
464
|
+
"type",
|
|
465
|
+
"tension",
|
|
466
|
+
"friction",
|
|
467
|
+
"mass",
|
|
468
|
+
"velocity",
|
|
469
|
+
"restSpeedThreshold",
|
|
470
|
+
"restDisplacementThreshold",
|
|
471
|
+
"duration",
|
|
472
|
+
"easing",
|
|
473
|
+
"delay",
|
|
474
|
+
"repeat",
|
|
475
|
+
"deceleration",
|
|
476
|
+
"clamp"
|
|
477
|
+
]);
|
|
478
|
+
function isTopLevelTransition(t) {
|
|
479
|
+
if (t === null || typeof t !== "object") return false;
|
|
480
|
+
const keys = Object.keys(t);
|
|
481
|
+
if (keys.length === 0) return false;
|
|
482
|
+
return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
|
|
483
|
+
}
|
|
484
|
+
var DEFAULT_TIMING_DURATION2 = 250;
|
|
485
|
+
function buildReleaseAnimation(transition, toValue) {
|
|
486
|
+
"worklet";
|
|
487
|
+
if (transition.type === "no-animation") return toValue;
|
|
488
|
+
if (transition.type === "decay") {
|
|
489
|
+
const cfg = { velocity: transition.velocity ?? 0 };
|
|
490
|
+
if (transition.deceleration !== void 0) {
|
|
491
|
+
cfg.deceleration = transition.deceleration;
|
|
492
|
+
}
|
|
493
|
+
if (transition.clamp !== void 0) cfg.clamp = transition.clamp;
|
|
494
|
+
return withDecay(cfg);
|
|
495
|
+
}
|
|
496
|
+
if (transition.type === "timing") {
|
|
497
|
+
const e = transition.easing;
|
|
498
|
+
const easingFn = e && typeof e === "object" && "factory" in e ? e.factory() : e ?? Easing.inOut(Easing.ease);
|
|
499
|
+
return withTiming(toValue, {
|
|
500
|
+
duration: transition.duration ?? DEFAULT_TIMING_DURATION2,
|
|
501
|
+
easing: easingFn
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
return withSpring(toValue, springToReanimated(transition));
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
// src/transitions/sig.ts
|
|
508
|
+
function stableSig(value) {
|
|
509
|
+
if (value === void 0) return "";
|
|
510
|
+
try {
|
|
511
|
+
return stableStringify(value);
|
|
512
|
+
} catch {
|
|
513
|
+
return String(value);
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
function stableStringify(v) {
|
|
517
|
+
if (v === null || typeof v !== "object") {
|
|
518
|
+
if (typeof v === "function" || v === void 0) return "null";
|
|
519
|
+
return JSON.stringify(v);
|
|
520
|
+
}
|
|
521
|
+
if (Array.isArray(v)) {
|
|
522
|
+
return "[" + v.map(stableStringify).join(",") + "]";
|
|
523
|
+
}
|
|
524
|
+
const obj = v;
|
|
525
|
+
const keys = Object.keys(obj).sort();
|
|
526
|
+
return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
|
|
527
|
+
}
|
|
528
|
+
var alreadyChecked = false;
|
|
529
|
+
function ensureReanimatedInstalled() {
|
|
530
|
+
if (!__DEV__ || alreadyChecked) return;
|
|
531
|
+
if (typeof process !== "undefined" && process.env?.NODE_ENV === "test") {
|
|
532
|
+
return;
|
|
533
|
+
}
|
|
534
|
+
alreadyChecked = true;
|
|
535
|
+
const version = reanimatedVersion;
|
|
536
|
+
if (version) {
|
|
537
|
+
const major = parseInt(version.split(".")[0] ?? "0", 10);
|
|
538
|
+
if (major < 4) {
|
|
539
|
+
console.error(
|
|
540
|
+
`[inertia] react-native-reanimated v${version} is installed, but @rootnative/inertia requires v4.0.0 or later. Upgrade with \`pnpm add react-native-reanimated@^4\` (or your package manager's equivalent).`
|
|
541
|
+
);
|
|
542
|
+
return;
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
const probe = function probe2() {
|
|
546
|
+
"worklet";
|
|
547
|
+
return 0;
|
|
548
|
+
};
|
|
549
|
+
if (typeof probe.__workletHash !== "number") {
|
|
550
|
+
console.error(
|
|
551
|
+
`[inertia] The Reanimated worklets babel plugin is not configured. Add \`'react-native-worklets/plugin'\` as the LAST entry in the \`plugins\` array of your \`babel.config.js\`, then restart Metro with a fresh cache: \`npx expo start -c\` or \`npx react-native start --reset-cache\`.`
|
|
552
|
+
);
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
var TRANSFORM_KEYS = [
|
|
556
|
+
"translateX",
|
|
557
|
+
"translateY",
|
|
558
|
+
"scale",
|
|
559
|
+
"scaleX",
|
|
560
|
+
"scaleY",
|
|
561
|
+
"rotate",
|
|
562
|
+
"rotateX",
|
|
563
|
+
"rotateY"
|
|
564
|
+
];
|
|
565
|
+
var ROTATION_KEYS = /* @__PURE__ */ new Set(["rotate", "rotateX", "rotateY"]);
|
|
566
|
+
var NUMERIC_TOP_LEVEL_KEYS = [
|
|
567
|
+
"opacity",
|
|
568
|
+
"width",
|
|
569
|
+
"height",
|
|
570
|
+
"borderRadius",
|
|
571
|
+
"shadowOpacity",
|
|
572
|
+
"shadowRadius",
|
|
573
|
+
"elevation"
|
|
574
|
+
];
|
|
575
|
+
var COLOR_KEYS = [
|
|
576
|
+
"backgroundColor",
|
|
577
|
+
"borderColor",
|
|
578
|
+
"color",
|
|
579
|
+
"tintColor",
|
|
580
|
+
"shadowColor"
|
|
581
|
+
];
|
|
582
|
+
var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
|
|
583
|
+
var ALL_KEYS = [
|
|
584
|
+
...TRANSFORM_KEYS,
|
|
585
|
+
...NUMERIC_TOP_LEVEL_KEYS,
|
|
586
|
+
...COLOR_KEYS,
|
|
587
|
+
...SHADOW_OFFSET_KEYS
|
|
588
|
+
];
|
|
589
|
+
var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
|
|
590
|
+
var COLOR_KEY_SET = new Set(COLOR_KEYS);
|
|
591
|
+
var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
|
|
592
|
+
var GESTURE_LAYER_NAMES = [
|
|
593
|
+
"hovered",
|
|
594
|
+
"focused",
|
|
595
|
+
"focusVisible",
|
|
596
|
+
"pressed"
|
|
597
|
+
];
|
|
598
|
+
var GESTURE_LAYER_NAME_SET = new Set(GESTURE_LAYER_NAMES);
|
|
599
|
+
var EXITING_POINTER_EVENTS_STYLE = { pointerEvents: "none" };
|
|
600
|
+
var DEFAULT_RESTING = {
|
|
601
|
+
translateX: 0,
|
|
602
|
+
translateY: 0,
|
|
603
|
+
scale: 1,
|
|
604
|
+
scaleX: 1,
|
|
605
|
+
scaleY: 1,
|
|
606
|
+
rotate: 0,
|
|
607
|
+
rotateX: 0,
|
|
608
|
+
rotateY: 0,
|
|
609
|
+
opacity: 1,
|
|
610
|
+
width: 0,
|
|
611
|
+
height: 0,
|
|
612
|
+
borderRadius: 0,
|
|
613
|
+
shadowOpacity: 0,
|
|
614
|
+
shadowRadius: 0,
|
|
615
|
+
elevation: 0,
|
|
616
|
+
// 'transparent' is the only safe universal default for colors: it works as
|
|
617
|
+
// an initial seed for any color animation (no jarring opaque flash on mount
|
|
618
|
+
// when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
|
|
619
|
+
// any opaque target via Reanimated's color util.
|
|
620
|
+
backgroundColor: "transparent",
|
|
621
|
+
borderColor: "transparent",
|
|
622
|
+
color: "transparent",
|
|
623
|
+
tintColor: "transparent",
|
|
624
|
+
shadowColor: "transparent",
|
|
625
|
+
shadowOffsetWidth: 0,
|
|
626
|
+
shadowOffsetHeight: 0
|
|
627
|
+
};
|
|
628
|
+
function transitionFor(prop, transition) {
|
|
629
|
+
if (!transition) return void 0;
|
|
630
|
+
if (isTopLevelTransition(transition)) return transition;
|
|
631
|
+
if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
|
|
632
|
+
return transition[prop];
|
|
633
|
+
}
|
|
634
|
+
function gestureLayerTransitionFor(layer, transition) {
|
|
635
|
+
if (!transition) return void 0;
|
|
636
|
+
if (isTopLevelTransition(transition)) return transition;
|
|
637
|
+
return transition[layer];
|
|
638
|
+
}
|
|
639
|
+
function createMotionComponent(Component) {
|
|
640
|
+
ensureReanimatedInstalled();
|
|
641
|
+
const AnimatedComponent = Animated.createAnimatedComponent(
|
|
642
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
643
|
+
Component
|
|
644
|
+
);
|
|
645
|
+
const Motion2 = forwardRef(function Motion3(props, ref) {
|
|
646
|
+
const {
|
|
647
|
+
initial,
|
|
648
|
+
animate,
|
|
649
|
+
exit,
|
|
650
|
+
transition,
|
|
651
|
+
variants,
|
|
652
|
+
controller,
|
|
653
|
+
gesture,
|
|
654
|
+
layout,
|
|
655
|
+
layoutId,
|
|
656
|
+
onAnimationEnd,
|
|
657
|
+
style,
|
|
658
|
+
onLayout: userOnLayout,
|
|
659
|
+
...rest
|
|
660
|
+
} = props;
|
|
661
|
+
if (__DEV__ && typeof style === "function") {
|
|
662
|
+
throw new Error(
|
|
663
|
+
"[inertia] `style` must be a style object or array of style objects, not a function. The function-form `style={(state) => ...}` Pressable API is not supported \u2014 use `gesture.pressed` (or `gesture.focused`, etc.) to drive state-dependent styling instead."
|
|
664
|
+
);
|
|
665
|
+
}
|
|
666
|
+
const presence = usePresence();
|
|
667
|
+
const isExiting = presence !== null && presence.isPresent === false;
|
|
668
|
+
const shouldReduceMotion = useShouldReduceMotion();
|
|
669
|
+
const onAnimationEndRef = useRef(onAnimationEnd);
|
|
670
|
+
onAnimationEndRef.current = onAnimationEnd;
|
|
671
|
+
const variantKey = useControllerKey(controller);
|
|
672
|
+
const resolvedAnimate = resolveAnimateInput(
|
|
673
|
+
animate,
|
|
674
|
+
variants,
|
|
675
|
+
variantKey
|
|
676
|
+
);
|
|
677
|
+
const animateRecord = resolvedAnimate ?? {};
|
|
678
|
+
const initialRecord = initial && initial !== false ? initial : void 0;
|
|
679
|
+
const exitRecord = exit ? exit : void 0;
|
|
680
|
+
const [pressed, setPressed] = useState(false);
|
|
681
|
+
const [focused, setFocused] = useState(false);
|
|
682
|
+
const [focusVisible, setFocusVisible] = useState(false);
|
|
683
|
+
const [hovered, setHovered] = useState(false);
|
|
684
|
+
const touched = /* @__PURE__ */ new Set();
|
|
685
|
+
collectTouchedKeys(touched, animateRecord);
|
|
686
|
+
if (initialRecord) collectTouchedKeys(touched, initialRecord);
|
|
687
|
+
if (variants) {
|
|
688
|
+
for (const variant of Object.values(variants)) {
|
|
689
|
+
if (!variant) continue;
|
|
690
|
+
collectTouchedKeys(touched, variant);
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
if (gesture) {
|
|
694
|
+
for (const subState of [
|
|
695
|
+
gesture.pressed,
|
|
696
|
+
gesture.focused,
|
|
697
|
+
gesture.focusVisible,
|
|
698
|
+
gesture.hovered
|
|
699
|
+
]) {
|
|
700
|
+
if (!subState) continue;
|
|
701
|
+
collectTouchedKeys(touched, subState);
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
if (exitRecord) collectTouchedKeys(touched, exitRecord);
|
|
705
|
+
const activeKeysRef = useRef(null);
|
|
706
|
+
const hasTransformRef = useRef(false);
|
|
707
|
+
const hasShadowOffsetRef = useRef(false);
|
|
708
|
+
const prevActive = activeKeysRef.current;
|
|
709
|
+
let grew = prevActive === null;
|
|
710
|
+
if (!grew && prevActive) {
|
|
711
|
+
for (const k of touched) {
|
|
712
|
+
if (!prevActive.includes(k)) {
|
|
713
|
+
grew = true;
|
|
714
|
+
break;
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
if (grew) {
|
|
719
|
+
const merged = new Set(prevActive ?? []);
|
|
720
|
+
for (const k of touched) merged.add(k);
|
|
721
|
+
activeKeysRef.current = ALL_KEYS.filter((k) => merged.has(k));
|
|
722
|
+
hasTransformRef.current = activeKeysRef.current.some(
|
|
723
|
+
(k) => TRANSFORM_KEY_SET.has(k)
|
|
724
|
+
);
|
|
725
|
+
hasShadowOffsetRef.current = activeKeysRef.current.some(
|
|
726
|
+
(k) => SHADOW_OFFSET_KEY_SET.has(k)
|
|
727
|
+
);
|
|
728
|
+
}
|
|
729
|
+
const sharedValues = useAnimatableSharedValues((key) => {
|
|
730
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
731
|
+
const axis = shadowOffsetAxisFor(key);
|
|
732
|
+
if (initial === false) {
|
|
733
|
+
return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
734
|
+
}
|
|
735
|
+
return shadowOffsetAxisValue(
|
|
736
|
+
initialRecord?.shadowOffset,
|
|
737
|
+
axis
|
|
738
|
+
) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
739
|
+
}
|
|
740
|
+
if (initial === false) {
|
|
741
|
+
const a = animateRecord[key];
|
|
742
|
+
return restValue(a) ?? DEFAULT_RESTING[key];
|
|
743
|
+
}
|
|
744
|
+
return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? DEFAULT_RESTING[key];
|
|
745
|
+
});
|
|
746
|
+
const pressedProgress = useSharedValue(0);
|
|
747
|
+
const focusedProgress = useSharedValue(0);
|
|
748
|
+
const focusVisibleProgress = useSharedValue(0);
|
|
749
|
+
const hoveredProgress = useSharedValue(0);
|
|
750
|
+
const gestureSV = useSharedValue(
|
|
751
|
+
resolveGestureLayers(gesture)
|
|
752
|
+
);
|
|
753
|
+
const gestureTargetsSig = stableSig(gesture);
|
|
754
|
+
useEffect(() => {
|
|
755
|
+
gestureSV.value = resolveGestureLayers(gesture);
|
|
756
|
+
}, [gestureTargetsSig]);
|
|
757
|
+
const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
|
|
758
|
+
const baseSig = stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
|
|
759
|
+
const transitionSig = stableSig(transition);
|
|
760
|
+
const safeToRemoveRef = useRef(void 0);
|
|
761
|
+
safeToRemoveRef.current = presence?.safeToRemove;
|
|
762
|
+
useEffect(() => {
|
|
763
|
+
if (isExiting && (!exitRecord || Object.keys(exitRecord).length === 0)) {
|
|
764
|
+
safeToRemoveRef.current?.();
|
|
765
|
+
return;
|
|
766
|
+
}
|
|
767
|
+
let pending = 0;
|
|
768
|
+
let done = false;
|
|
769
|
+
const onSettle = () => {
|
|
770
|
+
if (done) return;
|
|
771
|
+
pending--;
|
|
772
|
+
if (pending <= 0) {
|
|
773
|
+
done = true;
|
|
774
|
+
if (isExiting) safeToRemoveRef.current?.();
|
|
775
|
+
}
|
|
776
|
+
};
|
|
777
|
+
let transformPending = 0;
|
|
778
|
+
for (const k of ALL_KEYS) {
|
|
779
|
+
if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
|
|
780
|
+
transformPending++;
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
|
|
784
|
+
for (const key of ALL_KEYS) {
|
|
785
|
+
const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
|
|
786
|
+
baseRecord.shadowOffset,
|
|
787
|
+
shadowOffsetAxisFor(key)
|
|
788
|
+
) : baseRecord[key];
|
|
789
|
+
if (target === void 0) continue;
|
|
790
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
791
|
+
SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
|
|
792
|
+
transition
|
|
793
|
+
);
|
|
794
|
+
if (isExiting) pending++;
|
|
795
|
+
const factory = makeKeyCallbackFactory(
|
|
796
|
+
key,
|
|
797
|
+
sharedValues[key],
|
|
798
|
+
targetEndValue(target),
|
|
799
|
+
onAnimationEndRef,
|
|
800
|
+
{
|
|
801
|
+
stepCount: stepCountOf(target),
|
|
802
|
+
totalIterations: totalIterationsOf(cfg)
|
|
803
|
+
},
|
|
804
|
+
isExiting ? onSettle : void 0,
|
|
805
|
+
TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
|
|
806
|
+
);
|
|
807
|
+
sharedValues[key].value = resolveAnimatableValue(
|
|
808
|
+
target,
|
|
809
|
+
cfg,
|
|
810
|
+
factory
|
|
811
|
+
);
|
|
812
|
+
}
|
|
813
|
+
if (isExiting && pending === 0) {
|
|
814
|
+
safeToRemoveRef.current?.();
|
|
815
|
+
}
|
|
816
|
+
}, [baseSig, transitionSig]);
|
|
817
|
+
useGestureLayerProgress(
|
|
818
|
+
pressedProgress,
|
|
819
|
+
pressed,
|
|
820
|
+
gesture?.pressed != null,
|
|
821
|
+
"pressed",
|
|
822
|
+
transition,
|
|
823
|
+
isExiting,
|
|
824
|
+
shouldReduceMotion
|
|
825
|
+
);
|
|
826
|
+
useGestureLayerProgress(
|
|
827
|
+
focusedProgress,
|
|
828
|
+
focused,
|
|
829
|
+
gesture?.focused != null,
|
|
830
|
+
"focused",
|
|
831
|
+
transition,
|
|
832
|
+
isExiting,
|
|
833
|
+
shouldReduceMotion
|
|
834
|
+
);
|
|
835
|
+
useGestureLayerProgress(
|
|
836
|
+
focusVisibleProgress,
|
|
837
|
+
focusVisible,
|
|
838
|
+
gesture?.focusVisible != null,
|
|
839
|
+
"focusVisible",
|
|
840
|
+
transition,
|
|
841
|
+
isExiting,
|
|
842
|
+
shouldReduceMotion
|
|
843
|
+
);
|
|
844
|
+
useGestureLayerProgress(
|
|
845
|
+
hoveredProgress,
|
|
846
|
+
hovered,
|
|
847
|
+
gesture?.hovered != null,
|
|
848
|
+
"hovered",
|
|
849
|
+
transition,
|
|
850
|
+
isExiting,
|
|
851
|
+
shouldReduceMotion
|
|
852
|
+
);
|
|
853
|
+
const sharedLayout = useSharedLayout({
|
|
854
|
+
layoutId,
|
|
855
|
+
userRef: ref,
|
|
856
|
+
transition: isTopLevelTransition(transition) ? transition : void 0,
|
|
857
|
+
shouldReduceMotion,
|
|
858
|
+
userOnLayout
|
|
859
|
+
});
|
|
860
|
+
const flip = sharedLayout.flip;
|
|
861
|
+
const hasLayoutId = layoutId !== void 0;
|
|
862
|
+
const animatedStyle = useAnimatedStyle(() => {
|
|
863
|
+
const activeKeys = activeKeysRef.current;
|
|
864
|
+
const hasTransform = hasTransformRef.current;
|
|
865
|
+
const hasShadowOffset = hasShadowOffsetRef.current;
|
|
866
|
+
const out = {};
|
|
867
|
+
const transform = [];
|
|
868
|
+
let shadowOffsetW = 0;
|
|
869
|
+
let shadowOffsetH = 0;
|
|
870
|
+
const ph = hoveredProgress.value;
|
|
871
|
+
const pf = focusedProgress.value;
|
|
872
|
+
const pfv = focusVisibleProgress.value;
|
|
873
|
+
const pp = pressedProgress.value;
|
|
874
|
+
const layers = gestureSV.value;
|
|
875
|
+
const hoveredLayer = layers ? layers.hovered : null;
|
|
876
|
+
const focusedLayer = layers ? layers.focused : null;
|
|
877
|
+
const focusVisibleLayer = layers ? layers.focusVisible : null;
|
|
878
|
+
const pressedLayer = layers ? layers.pressed : null;
|
|
879
|
+
for (const key of activeKeys) {
|
|
880
|
+
let v = sharedValues[key].value;
|
|
881
|
+
const isColor = COLOR_KEY_SET.has(key);
|
|
882
|
+
if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
|
|
883
|
+
const t = hoveredLayer[key];
|
|
884
|
+
v = isColor ? interpolateColor(ph, [0, 1], [v, t]) : v + (t - v) * ph;
|
|
885
|
+
}
|
|
886
|
+
if (focusedLayer && pf > 0 && focusedLayer[key] !== void 0) {
|
|
887
|
+
const t = focusedLayer[key];
|
|
888
|
+
v = isColor ? interpolateColor(pf, [0, 1], [v, t]) : v + (t - v) * pf;
|
|
889
|
+
}
|
|
890
|
+
if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
|
|
891
|
+
const t = focusVisibleLayer[key];
|
|
892
|
+
v = isColor ? interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
|
|
893
|
+
}
|
|
894
|
+
if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
|
|
895
|
+
const t = pressedLayer[key];
|
|
896
|
+
v = isColor ? interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
|
|
897
|
+
}
|
|
898
|
+
if (TRANSFORM_KEY_SET.has(key)) {
|
|
899
|
+
transform.push(
|
|
900
|
+
ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
|
|
901
|
+
);
|
|
902
|
+
} else if (key === "shadowOffsetWidth") {
|
|
903
|
+
shadowOffsetW = v;
|
|
904
|
+
} else if (key === "shadowOffsetHeight") {
|
|
905
|
+
shadowOffsetH = v;
|
|
906
|
+
} else {
|
|
907
|
+
out[key] = v;
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
if (hasLayoutId) {
|
|
911
|
+
transform.push({ translateX: flip.dx.value });
|
|
912
|
+
transform.push({ translateY: flip.dy.value });
|
|
913
|
+
transform.push({ scaleX: flip.sx.value });
|
|
914
|
+
transform.push({ scaleY: flip.sy.value });
|
|
915
|
+
}
|
|
916
|
+
if (hasTransform || hasLayoutId) out.transform = transform;
|
|
917
|
+
if (hasShadowOffset) {
|
|
918
|
+
out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
|
|
919
|
+
}
|
|
920
|
+
return out;
|
|
921
|
+
});
|
|
922
|
+
const mergedStyle = useMemo(
|
|
923
|
+
() => isExiting ? [style, animatedStyle, EXITING_POINTER_EVENTS_STYLE] : [style, animatedStyle],
|
|
924
|
+
[style, animatedStyle, isExiting]
|
|
925
|
+
);
|
|
926
|
+
const gestureHandlers = useGestureHandlers(
|
|
927
|
+
gesture,
|
|
928
|
+
rest,
|
|
929
|
+
setPressed,
|
|
930
|
+
setFocused,
|
|
931
|
+
setFocusVisible,
|
|
932
|
+
setHovered
|
|
933
|
+
);
|
|
934
|
+
const layoutSig = stableSig(layout);
|
|
935
|
+
const layoutTransition = useMemo(
|
|
936
|
+
() => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
|
|
937
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
938
|
+
[layoutSig, shouldReduceMotion]
|
|
939
|
+
);
|
|
940
|
+
return /* @__PURE__ */ jsx(
|
|
941
|
+
AnimatedComponent,
|
|
942
|
+
{
|
|
943
|
+
ref: sharedLayout.setRef,
|
|
944
|
+
...rest,
|
|
945
|
+
...gestureHandlers,
|
|
946
|
+
onLayout: sharedLayout.onLayout,
|
|
947
|
+
layout: layoutTransition,
|
|
948
|
+
style: mergedStyle
|
|
949
|
+
}
|
|
950
|
+
);
|
|
951
|
+
});
|
|
952
|
+
Motion2.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
|
|
953
|
+
return Motion2;
|
|
954
|
+
}
|
|
955
|
+
function useAnimatableSharedValues(init) {
|
|
956
|
+
const translateX = useSharedValue(init("translateX"));
|
|
957
|
+
const translateY = useSharedValue(init("translateY"));
|
|
958
|
+
const scale = useSharedValue(init("scale"));
|
|
959
|
+
const scaleX = useSharedValue(init("scaleX"));
|
|
960
|
+
const scaleY = useSharedValue(init("scaleY"));
|
|
961
|
+
const rotate = useSharedValue(init("rotate"));
|
|
962
|
+
const rotateX = useSharedValue(init("rotateX"));
|
|
963
|
+
const rotateY = useSharedValue(init("rotateY"));
|
|
964
|
+
const opacity = useSharedValue(init("opacity"));
|
|
965
|
+
const width = useSharedValue(init("width"));
|
|
966
|
+
const height = useSharedValue(init("height"));
|
|
967
|
+
const borderRadius = useSharedValue(init("borderRadius"));
|
|
968
|
+
const shadowOpacity = useSharedValue(init("shadowOpacity"));
|
|
969
|
+
const shadowRadius = useSharedValue(init("shadowRadius"));
|
|
970
|
+
const elevation = useSharedValue(init("elevation"));
|
|
971
|
+
const backgroundColor = useSharedValue(
|
|
972
|
+
init("backgroundColor")
|
|
973
|
+
);
|
|
974
|
+
const borderColor = useSharedValue(init("borderColor"));
|
|
975
|
+
const color = useSharedValue(init("color"));
|
|
976
|
+
const tintColor = useSharedValue(init("tintColor"));
|
|
977
|
+
const shadowColor = useSharedValue(init("shadowColor"));
|
|
978
|
+
const shadowOffsetWidth = useSharedValue(
|
|
979
|
+
init("shadowOffsetWidth")
|
|
980
|
+
);
|
|
981
|
+
const shadowOffsetHeight = useSharedValue(
|
|
982
|
+
init("shadowOffsetHeight")
|
|
983
|
+
);
|
|
984
|
+
const ref = useRef(null);
|
|
985
|
+
if (ref.current === null) {
|
|
986
|
+
ref.current = {
|
|
987
|
+
translateX,
|
|
988
|
+
translateY,
|
|
989
|
+
scale,
|
|
990
|
+
scaleX,
|
|
991
|
+
scaleY,
|
|
992
|
+
rotate,
|
|
993
|
+
rotateX,
|
|
994
|
+
rotateY,
|
|
995
|
+
opacity,
|
|
996
|
+
width,
|
|
997
|
+
height,
|
|
998
|
+
borderRadius,
|
|
999
|
+
shadowOpacity,
|
|
1000
|
+
shadowRadius,
|
|
1001
|
+
elevation,
|
|
1002
|
+
backgroundColor,
|
|
1003
|
+
borderColor,
|
|
1004
|
+
color,
|
|
1005
|
+
tintColor,
|
|
1006
|
+
shadowColor,
|
|
1007
|
+
shadowOffsetWidth,
|
|
1008
|
+
shadowOffsetHeight
|
|
1009
|
+
};
|
|
1010
|
+
}
|
|
1011
|
+
return ref.current;
|
|
1012
|
+
}
|
|
1013
|
+
function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, meta, onSettle, transformGroup) {
|
|
1014
|
+
if (!onAnimationEndRef.current && !onSettle) return void 0;
|
|
1015
|
+
const state = { iteration: 0 };
|
|
1016
|
+
const isTransformKey = TRANSFORM_KEY_SET.has(key);
|
|
1017
|
+
const dispatch = (rawPhase, step, finished, value) => {
|
|
1018
|
+
const isLastIteration = state.iteration >= meta.totalIterations - 1;
|
|
1019
|
+
let phase;
|
|
1020
|
+
let isTerminal = false;
|
|
1021
|
+
if (rawPhase === "step") {
|
|
1022
|
+
const isLastInPass = step !== void 0 && step === meta.stepCount - 1;
|
|
1023
|
+
if (!isLastInPass) {
|
|
1024
|
+
phase = "step";
|
|
1025
|
+
} else if (isLastIteration) {
|
|
1026
|
+
phase = "animation";
|
|
1027
|
+
isTerminal = true;
|
|
1028
|
+
} else {
|
|
1029
|
+
phase = "sequence";
|
|
1030
|
+
}
|
|
1031
|
+
} else if (isLastIteration) {
|
|
1032
|
+
phase = "animation";
|
|
1033
|
+
isTerminal = true;
|
|
1034
|
+
} else {
|
|
1035
|
+
phase = "repeat";
|
|
1036
|
+
}
|
|
1037
|
+
const reportedIteration = state.iteration;
|
|
1038
|
+
if (phase === "sequence" || phase === "repeat") state.iteration++;
|
|
1039
|
+
const fn = onAnimationEndRef.current;
|
|
1040
|
+
if (fn) {
|
|
1041
|
+
if (isTransformKey && transformGroup && phase === "animation") {
|
|
1042
|
+
transformGroup.remaining--;
|
|
1043
|
+
if (transformGroup.remaining <= 0) {
|
|
1044
|
+
fn({
|
|
1045
|
+
key: "transform",
|
|
1046
|
+
finished,
|
|
1047
|
+
value,
|
|
1048
|
+
target,
|
|
1049
|
+
phase,
|
|
1050
|
+
step,
|
|
1051
|
+
iteration: reportedIteration
|
|
1052
|
+
});
|
|
1053
|
+
}
|
|
1054
|
+
} else {
|
|
1055
|
+
fn({
|
|
1056
|
+
key,
|
|
1057
|
+
finished,
|
|
1058
|
+
value,
|
|
1059
|
+
target,
|
|
1060
|
+
phase,
|
|
1061
|
+
step,
|
|
1062
|
+
iteration: reportedIteration
|
|
1063
|
+
});
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
if (onSettle && isTerminal) onSettle();
|
|
1067
|
+
};
|
|
1068
|
+
return (rawPhase, step) => {
|
|
1069
|
+
const cb = (finished) => {
|
|
1070
|
+
"worklet";
|
|
1071
|
+
runOnJS(dispatch)(rawPhase, step, !!finished, sharedValue.value);
|
|
1072
|
+
};
|
|
1073
|
+
return cb;
|
|
1074
|
+
};
|
|
1075
|
+
}
|
|
1076
|
+
function shadowOffsetAxisFor(key) {
|
|
1077
|
+
return key === "shadowOffsetWidth" ? "width" : "height";
|
|
1078
|
+
}
|
|
1079
|
+
function shadowOffsetAxisValue(source, axis) {
|
|
1080
|
+
return source?.[axis];
|
|
1081
|
+
}
|
|
1082
|
+
function collectTouchedKeys(touched, record) {
|
|
1083
|
+
for (const k of ALL_KEYS) {
|
|
1084
|
+
if (k in record) touched.add(k);
|
|
1085
|
+
}
|
|
1086
|
+
if ("shadowOffset" in record && record.shadowOffset) {
|
|
1087
|
+
const so = record.shadowOffset;
|
|
1088
|
+
if (so.width !== void 0) touched.add("shadowOffsetWidth");
|
|
1089
|
+
if (so.height !== void 0) touched.add("shadowOffsetHeight");
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
function stepCountOf(v) {
|
|
1093
|
+
if (Array.isArray(v)) return v.length;
|
|
1094
|
+
return 1;
|
|
1095
|
+
}
|
|
1096
|
+
function totalIterationsOf(cfg) {
|
|
1097
|
+
if (!cfg || cfg.type === "no-animation" || cfg.type === "decay") return 1;
|
|
1098
|
+
const r = cfg.repeat;
|
|
1099
|
+
if (r === void 0) return 1;
|
|
1100
|
+
if (r === "infinite") return Number.POSITIVE_INFINITY;
|
|
1101
|
+
if (typeof r === "number") return r;
|
|
1102
|
+
if (r.count === "infinite") return Number.POSITIVE_INFINITY;
|
|
1103
|
+
return r.count;
|
|
1104
|
+
}
|
|
1105
|
+
function targetEndValue(v) {
|
|
1106
|
+
if (v === void 0) return void 0;
|
|
1107
|
+
if (typeof v === "number" || typeof v === "string") return v;
|
|
1108
|
+
if (Array.isArray(v)) {
|
|
1109
|
+
return v.length > 0 ? targetEndValue(v[v.length - 1]) : void 0;
|
|
1110
|
+
}
|
|
1111
|
+
if (typeof v === "object" && v !== null && "to" in v) {
|
|
1112
|
+
const to = v.to;
|
|
1113
|
+
return typeof to === "number" || typeof to === "string" ? to : void 0;
|
|
1114
|
+
}
|
|
1115
|
+
return void 0;
|
|
1116
|
+
}
|
|
1117
|
+
function useControllerKey(controller) {
|
|
1118
|
+
const [, setTick] = useState(0);
|
|
1119
|
+
useEffect(() => {
|
|
1120
|
+
if (!controller) return;
|
|
1121
|
+
const unsub = controller.subscribe(() => setTick((n) => n + 1));
|
|
1122
|
+
return unsub;
|
|
1123
|
+
}, [controller]);
|
|
1124
|
+
return controller?.current;
|
|
1125
|
+
}
|
|
1126
|
+
function resolveAnimateInput(animate, variants, controllerKey) {
|
|
1127
|
+
if (controllerKey !== void 0 && variants && controllerKey in variants) {
|
|
1128
|
+
return variants[controllerKey];
|
|
1129
|
+
}
|
|
1130
|
+
if (typeof animate === "string") {
|
|
1131
|
+
if (variants && animate in variants) return variants[animate];
|
|
1132
|
+
if (__DEV__) {
|
|
1133
|
+
console.warn(
|
|
1134
|
+
`[inertia] animate="${animate}" but no matching variant. Did you forget to pass \`variants\`?`
|
|
1135
|
+
);
|
|
1136
|
+
}
|
|
1137
|
+
return void 0;
|
|
1138
|
+
}
|
|
1139
|
+
return animate;
|
|
1140
|
+
}
|
|
1141
|
+
function restValue(v) {
|
|
1142
|
+
if (v === void 0) return void 0;
|
|
1143
|
+
if (typeof v === "number" || typeof v === "string") return v;
|
|
1144
|
+
if (Array.isArray(v)) {
|
|
1145
|
+
return v.length > 0 ? restValue(v[0]) : void 0;
|
|
1146
|
+
}
|
|
1147
|
+
if (typeof v === "object" && v !== null && "to" in v) {
|
|
1148
|
+
const to = v.to;
|
|
1149
|
+
return typeof to === "number" || typeof to === "string" ? to : void 0;
|
|
1150
|
+
}
|
|
1151
|
+
return void 0;
|
|
1152
|
+
}
|
|
1153
|
+
function resolveGestureLayers(gesture) {
|
|
1154
|
+
if (!gesture) return null;
|
|
1155
|
+
const out = {};
|
|
1156
|
+
for (const layer of GESTURE_LAYER_NAMES) {
|
|
1157
|
+
const subState = gesture[layer];
|
|
1158
|
+
if (!subState) continue;
|
|
1159
|
+
const resolved = {};
|
|
1160
|
+
for (const key of ALL_KEYS) {
|
|
1161
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
1162
|
+
const axis = shadowOffsetAxisFor(key);
|
|
1163
|
+
const so = subState.shadowOffset;
|
|
1164
|
+
const v = shadowOffsetAxisValue(so, axis);
|
|
1165
|
+
if (v !== void 0) resolved[key] = v;
|
|
1166
|
+
continue;
|
|
1167
|
+
}
|
|
1168
|
+
const raw = subState[key];
|
|
1169
|
+
if (raw === void 0) continue;
|
|
1170
|
+
const t = targetEndValue(raw);
|
|
1171
|
+
if (t !== void 0) resolved[key] = t;
|
|
1172
|
+
}
|
|
1173
|
+
out[layer] = resolved;
|
|
1174
|
+
}
|
|
1175
|
+
return out;
|
|
1176
|
+
}
|
|
1177
|
+
function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
|
|
1178
|
+
const layerCfgSig = stableSig(gestureLayerTransitionFor(layer, transition));
|
|
1179
|
+
useEffect(() => {
|
|
1180
|
+
if (!declared) return;
|
|
1181
|
+
if (isExiting) {
|
|
1182
|
+
progress.value = 0;
|
|
1183
|
+
return;
|
|
1184
|
+
}
|
|
1185
|
+
const target = active ? 1 : 0;
|
|
1186
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
|
|
1187
|
+
progress.value = resolveTransition(cfg, target);
|
|
1188
|
+
}, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
|
|
1189
|
+
}
|
|
1190
|
+
function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
|
|
1191
|
+
const hasPressed = gesture?.pressed ? 1 : 0;
|
|
1192
|
+
const hasFocused = gesture?.focused ? 1 : 0;
|
|
1193
|
+
const hasFocusVisible = gesture?.focusVisible ? 1 : 0;
|
|
1194
|
+
const hasHovered = gesture?.hovered ? 1 : 0;
|
|
1195
|
+
return useMemo(() => {
|
|
1196
|
+
if (!gesture) return {};
|
|
1197
|
+
const handlers = {};
|
|
1198
|
+
if (gesture.pressed) {
|
|
1199
|
+
handlers.onTouchStart = compose(rest.onTouchStart, () => setPressed(true));
|
|
1200
|
+
handlers.onTouchEnd = compose(rest.onTouchEnd, () => setPressed(false));
|
|
1201
|
+
handlers.onTouchCancel = compose(
|
|
1202
|
+
rest.onTouchCancel,
|
|
1203
|
+
() => setPressed(false)
|
|
1204
|
+
);
|
|
1205
|
+
handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
|
|
1206
|
+
handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
|
|
1207
|
+
}
|
|
1208
|
+
if (gesture.focused || gesture.focusVisible) {
|
|
1209
|
+
handlers.onFocus = compose(rest.onFocus, () => {
|
|
1210
|
+
if (gesture.focused) setFocused(true);
|
|
1211
|
+
if (gesture.focusVisible && isFocusVisible()) setFocusVisible(true);
|
|
1212
|
+
});
|
|
1213
|
+
handlers.onBlur = compose(rest.onBlur, () => {
|
|
1214
|
+
if (gesture.focused) setFocused(false);
|
|
1215
|
+
if (gesture.focusVisible) setFocusVisible(false);
|
|
1216
|
+
});
|
|
1217
|
+
}
|
|
1218
|
+
if (gesture.hovered) {
|
|
1219
|
+
handlers.onMouseEnter = compose(rest.onMouseEnter, () => setHovered(true));
|
|
1220
|
+
handlers.onMouseLeave = compose(
|
|
1221
|
+
rest.onMouseLeave,
|
|
1222
|
+
() => setHovered(false)
|
|
1223
|
+
);
|
|
1224
|
+
}
|
|
1225
|
+
return handlers;
|
|
1226
|
+
}, [
|
|
1227
|
+
hasPressed,
|
|
1228
|
+
hasFocused,
|
|
1229
|
+
hasFocusVisible,
|
|
1230
|
+
hasHovered,
|
|
1231
|
+
rest.onTouchStart,
|
|
1232
|
+
rest.onTouchEnd,
|
|
1233
|
+
rest.onTouchCancel,
|
|
1234
|
+
rest.onPressIn,
|
|
1235
|
+
rest.onPressOut,
|
|
1236
|
+
rest.onFocus,
|
|
1237
|
+
rest.onBlur,
|
|
1238
|
+
rest.onMouseEnter,
|
|
1239
|
+
rest.onMouseLeave
|
|
1240
|
+
]);
|
|
1241
|
+
}
|
|
1242
|
+
function compose(user, ours) {
|
|
1243
|
+
if (typeof user !== "function") return ours;
|
|
1244
|
+
return (event) => {
|
|
1245
|
+
user(event);
|
|
1246
|
+
ours(event);
|
|
1247
|
+
};
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
// src/motion/Image.tsx
|
|
1251
|
+
var MotionImage = createMotionComponent(Image);
|
|
1252
|
+
var MotionPressable = createMotionComponent(Pressable);
|
|
1253
|
+
var MotionScrollView = createMotionComponent(ScrollView);
|
|
1254
|
+
var MotionText = createMotionComponent(Text);
|
|
1255
|
+
var MotionView = createMotionComponent(View);
|
|
1256
|
+
|
|
1257
|
+
// src/motion/index.ts
|
|
1258
|
+
var Motion = {
|
|
1259
|
+
View: MotionView,
|
|
1260
|
+
Text: MotionText,
|
|
1261
|
+
Image: MotionImage,
|
|
1262
|
+
Pressable: MotionPressable,
|
|
1263
|
+
ScrollView: MotionScrollView
|
|
1264
|
+
};
|
|
1265
|
+
function useAnimation(target, transition) {
|
|
1266
|
+
const output = useSharedValue(target);
|
|
1267
|
+
const shouldReduceMotion = useShouldReduceMotion();
|
|
1268
|
+
const cfgSig = stableSig(transition);
|
|
1269
|
+
useEffect(() => {
|
|
1270
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : transition ?? { type: "spring" };
|
|
1271
|
+
output.value = resolveTransition(cfg, target);
|
|
1272
|
+
}, [target, cfgSig, shouldReduceMotion]);
|
|
1273
|
+
return output;
|
|
1274
|
+
}
|
|
1275
|
+
function useSpring(target, config) {
|
|
1276
|
+
const reanimConfig = useMemo(
|
|
1277
|
+
() => springToReanimated(config ?? {}),
|
|
1278
|
+
// Keyed on the resolved primitive fields rather than the `config` object
|
|
1279
|
+
// identity: callers routinely pass a fresh object literal each render, so
|
|
1280
|
+
// depending on `config` itself would rebuild the Reanimated config on
|
|
1281
|
+
// every render and defeat the memo.
|
|
1282
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1283
|
+
[
|
|
1284
|
+
config?.tension,
|
|
1285
|
+
config?.friction,
|
|
1286
|
+
config?.mass,
|
|
1287
|
+
config?.velocity,
|
|
1288
|
+
config?.restSpeedThreshold,
|
|
1289
|
+
config?.restDisplacementThreshold
|
|
1290
|
+
]
|
|
1291
|
+
);
|
|
1292
|
+
const isSharedTarget = isSharedValue(target);
|
|
1293
|
+
const initial = isSharedTarget ? target.value : target;
|
|
1294
|
+
const output = useSharedValue(initial);
|
|
1295
|
+
useEffect(() => {
|
|
1296
|
+
if (isSharedTarget) return;
|
|
1297
|
+
output.value = withSpring(target, reanimConfig);
|
|
1298
|
+
}, [isSharedTarget, target, reanimConfig]);
|
|
1299
|
+
useAnimatedReaction(
|
|
1300
|
+
() => {
|
|
1301
|
+
"worklet";
|
|
1302
|
+
if (!isSharedTarget) return null;
|
|
1303
|
+
return target.value;
|
|
1304
|
+
},
|
|
1305
|
+
(next, prev) => {
|
|
1306
|
+
"worklet";
|
|
1307
|
+
if (next === null || next === prev) return;
|
|
1308
|
+
output.value = withSpring(next, reanimConfig);
|
|
1309
|
+
},
|
|
1310
|
+
[isSharedTarget, reanimConfig]
|
|
1311
|
+
);
|
|
1312
|
+
return output;
|
|
1313
|
+
}
|
|
1314
|
+
function isSharedValue(v) {
|
|
1315
|
+
return typeof v === "object" && v !== null && "value" in v;
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
// src/values/useBooleanSpring.ts
|
|
1319
|
+
function useBooleanSpring(active, springConfig) {
|
|
1320
|
+
return useSpring(active ? 1 : 0, springConfig);
|
|
1321
|
+
}
|
|
1322
|
+
function useColorTransition(progress, range, options) {
|
|
1323
|
+
const key = options?.key ?? "backgroundColor";
|
|
1324
|
+
const from = range[0];
|
|
1325
|
+
const to = range[1];
|
|
1326
|
+
return useAnimatedStyle(() => {
|
|
1327
|
+
"worklet";
|
|
1328
|
+
return { [key]: interpolateColor(progress.value, [0, 1], [from, to]) };
|
|
1329
|
+
});
|
|
1330
|
+
}
|
|
1331
|
+
function useGesture(transition) {
|
|
1332
|
+
const pressed = useSharedValue(0);
|
|
1333
|
+
const focused = useSharedValue(0);
|
|
1334
|
+
const focusVisible = useSharedValue(0);
|
|
1335
|
+
const hovered = useSharedValue(0);
|
|
1336
|
+
const shouldReduceMotion = useShouldReduceMotion();
|
|
1337
|
+
const setLayer = useCallback(
|
|
1338
|
+
(sv, layer, target) => {
|
|
1339
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : layerTransition(layer, transition) ?? { type: "spring" };
|
|
1340
|
+
sv.value = resolveTransition(cfg, target);
|
|
1341
|
+
},
|
|
1342
|
+
// The transition is intentionally read on every call rather than cooked
|
|
1343
|
+
// into the dep array — a fresh literal each render would otherwise
|
|
1344
|
+
// rebuild the handler bag and break composing consumers that key off
|
|
1345
|
+
// handler identity. `transition` is read inside the callback closure;
|
|
1346
|
+
// shared values are stable so the only dep that matters is the reduce-
|
|
1347
|
+
// motion flag.
|
|
1348
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
1349
|
+
[shouldReduceMotion]
|
|
1350
|
+
);
|
|
1351
|
+
const handlers = useMemo(
|
|
1352
|
+
() => ({
|
|
1353
|
+
onPressIn: () => setLayer(pressed, "pressed", 1),
|
|
1354
|
+
onPressOut: () => setLayer(pressed, "pressed", 0),
|
|
1355
|
+
onHoverIn: () => setLayer(hovered, "hovered", 1),
|
|
1356
|
+
onHoverOut: () => setLayer(hovered, "hovered", 0),
|
|
1357
|
+
onFocus: () => {
|
|
1358
|
+
setLayer(focused, "focused", 1);
|
|
1359
|
+
if (isFocusVisible()) setLayer(focusVisible, "focusVisible", 1);
|
|
1360
|
+
},
|
|
1361
|
+
onBlur: () => {
|
|
1362
|
+
setLayer(focused, "focused", 0);
|
|
1363
|
+
setLayer(focusVisible, "focusVisible", 0);
|
|
1364
|
+
}
|
|
1365
|
+
}),
|
|
1366
|
+
[setLayer, pressed, focused, focusVisible, hovered]
|
|
1367
|
+
);
|
|
1368
|
+
return { pressed, focused, focusVisible, hovered, handlers };
|
|
1369
|
+
}
|
|
1370
|
+
function layerTransition(layer, transition) {
|
|
1371
|
+
if (!transition) return void 0;
|
|
1372
|
+
if (isTopLevelTransition(transition)) return transition;
|
|
1373
|
+
return transition[layer];
|
|
1374
|
+
}
|
|
1375
|
+
function useMotionValue(initial) {
|
|
1376
|
+
return useSharedValue(initial);
|
|
1377
|
+
}
|
|
1378
|
+
function useTransform(arg1, inputRange, outputRange, options) {
|
|
1379
|
+
let producer;
|
|
1380
|
+
if (typeof arg1 === "function") {
|
|
1381
|
+
const userFn = arg1;
|
|
1382
|
+
producer = isWorkletFunction(userFn) ? userFn : () => {
|
|
1383
|
+
"worklet";
|
|
1384
|
+
return userFn();
|
|
1385
|
+
};
|
|
1386
|
+
} else {
|
|
1387
|
+
const source = arg1;
|
|
1388
|
+
const input = inputRange;
|
|
1389
|
+
const output = outputRange;
|
|
1390
|
+
const isColor = output.length > 0 && typeof output[0] === "string";
|
|
1391
|
+
const extrapolateLeft = mapExtrapolation(options?.extrapolateLeft);
|
|
1392
|
+
const extrapolateRight = mapExtrapolation(options?.extrapolateRight);
|
|
1393
|
+
producer = isColor ? () => {
|
|
1394
|
+
"worklet";
|
|
1395
|
+
return interpolateColor(
|
|
1396
|
+
source.value,
|
|
1397
|
+
input,
|
|
1398
|
+
output
|
|
1399
|
+
);
|
|
1400
|
+
} : () => {
|
|
1401
|
+
"worklet";
|
|
1402
|
+
return interpolate(
|
|
1403
|
+
source.value,
|
|
1404
|
+
input,
|
|
1405
|
+
output,
|
|
1406
|
+
{ extrapolateLeft, extrapolateRight }
|
|
1407
|
+
);
|
|
1408
|
+
};
|
|
1409
|
+
}
|
|
1410
|
+
return useDerivedValue(producer);
|
|
1411
|
+
}
|
|
1412
|
+
function mapExtrapolation(mode) {
|
|
1413
|
+
if (mode === "identity") return Extrapolation.IDENTITY;
|
|
1414
|
+
if (mode === "extend") return Extrapolation.EXTEND;
|
|
1415
|
+
return Extrapolation.CLAMP;
|
|
1416
|
+
}
|
|
1417
|
+
function useScroll() {
|
|
1418
|
+
const scrollX = useSharedValue(0);
|
|
1419
|
+
const scrollY = useSharedValue(0);
|
|
1420
|
+
const handler = useAnimatedScrollHandler({
|
|
1421
|
+
onScroll: (event) => {
|
|
1422
|
+
"worklet";
|
|
1423
|
+
scrollX.value = event.contentOffset.x;
|
|
1424
|
+
scrollY.value = event.contentOffset.y;
|
|
1425
|
+
}
|
|
1426
|
+
});
|
|
1427
|
+
return {
|
|
1428
|
+
scrollX,
|
|
1429
|
+
scrollY,
|
|
1430
|
+
onScroll: handler
|
|
1431
|
+
};
|
|
1432
|
+
}
|
|
1433
|
+
function useShadow({
|
|
1434
|
+
from,
|
|
1435
|
+
to,
|
|
1436
|
+
progress
|
|
1437
|
+
}) {
|
|
1438
|
+
const hasOpacity = from.shadowOpacity !== void 0 || to.shadowOpacity !== void 0;
|
|
1439
|
+
const hasRadius = from.shadowRadius !== void 0 || to.shadowRadius !== void 0;
|
|
1440
|
+
const hasElevation = from.elevation !== void 0 || to.elevation !== void 0;
|
|
1441
|
+
const hasColor = from.shadowColor !== void 0 || to.shadowColor !== void 0;
|
|
1442
|
+
const hasOffset = from.shadowOffset !== void 0 || to.shadowOffset !== void 0;
|
|
1443
|
+
const opacityFrom = from.shadowOpacity ?? 0;
|
|
1444
|
+
const opacityTo = to.shadowOpacity ?? 0;
|
|
1445
|
+
const radiusFrom = from.shadowRadius ?? 0;
|
|
1446
|
+
const radiusTo = to.shadowRadius ?? 0;
|
|
1447
|
+
const elevationFrom = from.elevation ?? 0;
|
|
1448
|
+
const elevationTo = to.elevation ?? 0;
|
|
1449
|
+
const colorFrom = from.shadowColor ?? "transparent";
|
|
1450
|
+
const colorTo = to.shadowColor ?? "transparent";
|
|
1451
|
+
const offsetWFrom = from.shadowOffset?.width ?? 0;
|
|
1452
|
+
const offsetWTo = to.shadowOffset?.width ?? 0;
|
|
1453
|
+
const offsetHFrom = from.shadowOffset?.height ?? 0;
|
|
1454
|
+
const offsetHTo = to.shadowOffset?.height ?? 0;
|
|
1455
|
+
return useAnimatedStyle(() => {
|
|
1456
|
+
"worklet";
|
|
1457
|
+
const t = progress.value;
|
|
1458
|
+
const out = {};
|
|
1459
|
+
if (hasOpacity) {
|
|
1460
|
+
out.shadowOpacity = interpolate(t, [0, 1], [opacityFrom, opacityTo]);
|
|
1461
|
+
}
|
|
1462
|
+
if (hasRadius) {
|
|
1463
|
+
out.shadowRadius = interpolate(t, [0, 1], [radiusFrom, radiusTo]);
|
|
1464
|
+
}
|
|
1465
|
+
if (hasElevation) {
|
|
1466
|
+
out.elevation = interpolate(t, [0, 1], [elevationFrom, elevationTo]);
|
|
1467
|
+
}
|
|
1468
|
+
if (hasColor) {
|
|
1469
|
+
out.shadowColor = interpolateColor(t, [0, 1], [colorFrom, colorTo]);
|
|
1470
|
+
}
|
|
1471
|
+
if (hasOffset) {
|
|
1472
|
+
out.shadowOffset = {
|
|
1473
|
+
width: interpolate(t, [0, 1], [offsetWFrom, offsetWTo]),
|
|
1474
|
+
height: interpolate(t, [0, 1], [offsetHFrom, offsetHTo])
|
|
1475
|
+
};
|
|
1476
|
+
}
|
|
1477
|
+
return out;
|
|
1478
|
+
});
|
|
1479
|
+
}
|
|
1480
|
+
function useVariants(variants, initial) {
|
|
1481
|
+
const variantsRef = useRef(variants);
|
|
1482
|
+
return useMemo(() => {
|
|
1483
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
1484
|
+
let current = initial ?? (Object.keys(variantsRef.current)[0] ?? "");
|
|
1485
|
+
const controller = {
|
|
1486
|
+
get current() {
|
|
1487
|
+
return current;
|
|
1488
|
+
},
|
|
1489
|
+
transitionTo(next) {
|
|
1490
|
+
if (next === current) return;
|
|
1491
|
+
if (!(next in variantsRef.current)) {
|
|
1492
|
+
if (__DEV__) {
|
|
1493
|
+
console.warn(
|
|
1494
|
+
`[inertia] useVariants: unknown variant "${String(next)}". Known keys: ${Object.keys(variantsRef.current).join(", ")}`
|
|
1495
|
+
);
|
|
1496
|
+
}
|
|
1497
|
+
return;
|
|
1498
|
+
}
|
|
1499
|
+
current = next;
|
|
1500
|
+
for (const fn of listeners) fn(next);
|
|
1501
|
+
},
|
|
1502
|
+
subscribe(listener) {
|
|
1503
|
+
listeners.add(listener);
|
|
1504
|
+
return () => {
|
|
1505
|
+
listeners.delete(listener);
|
|
1506
|
+
};
|
|
1507
|
+
}
|
|
1508
|
+
};
|
|
1509
|
+
return controller;
|
|
1510
|
+
}, []);
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
export { Motion, MotionConfig, MotionImage, MotionPressable, MotionScrollView, MotionText, MotionView, Presence, buildReleaseAnimation, createMotionComponent, ensureWorkletEasing, resolveAnimatableValue, resolveTransition, useAnimation, useBooleanSpring, useColorTransition, useGesture, useMotionConfig, useMotionValue, usePresence, useScroll, useShadow, useShouldReduceMotion, useSpring, useTransform, useVariants };
|
|
1514
|
+
//# sourceMappingURL=index.mjs.map
|
|
1515
|
+
//# sourceMappingURL=index.mjs.map
|