@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
|
@@ -0,0 +1,1138 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactNative = require('react-native');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var Animated = require('react-native-reanimated');
|
|
6
|
+
var reactNativeWorklets = require('react-native-worklets');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
|
|
11
|
+
var Animated__default = /*#__PURE__*/_interopDefault(Animated);
|
|
12
|
+
|
|
13
|
+
// src/motion/Pressable.tsx
|
|
14
|
+
var DEFAULT_MOTION_CONFIG = {
|
|
15
|
+
reducedMotion: "user"
|
|
16
|
+
};
|
|
17
|
+
var MotionConfigContext = react.createContext(
|
|
18
|
+
DEFAULT_MOTION_CONFIG
|
|
19
|
+
);
|
|
20
|
+
function useMotionConfig() {
|
|
21
|
+
return react.useContext(MotionConfigContext);
|
|
22
|
+
}
|
|
23
|
+
function useShouldReduceMotion() {
|
|
24
|
+
const { reducedMotion } = useMotionConfig();
|
|
25
|
+
const osReduced = Animated.useReducedMotion();
|
|
26
|
+
if (reducedMotion === "never") return false;
|
|
27
|
+
if (reducedMotion === "always") return true;
|
|
28
|
+
return osReduced;
|
|
29
|
+
}
|
|
30
|
+
var modality = "keyboard";
|
|
31
|
+
var installed = false;
|
|
32
|
+
function setKeyboard() {
|
|
33
|
+
modality = "keyboard";
|
|
34
|
+
}
|
|
35
|
+
function setPointer() {
|
|
36
|
+
modality = "pointer";
|
|
37
|
+
}
|
|
38
|
+
function ensureInstalled() {
|
|
39
|
+
if (installed) return;
|
|
40
|
+
if (reactNative.Platform.OS !== "web") return;
|
|
41
|
+
if (typeof document === "undefined") return;
|
|
42
|
+
document.addEventListener("keydown", setKeyboard, true);
|
|
43
|
+
document.addEventListener("mousedown", setPointer, true);
|
|
44
|
+
document.addEventListener("pointerdown", setPointer, true);
|
|
45
|
+
document.addEventListener("touchstart", setPointer, true);
|
|
46
|
+
installed = true;
|
|
47
|
+
}
|
|
48
|
+
function isFocusVisible() {
|
|
49
|
+
if (reactNative.Platform.OS !== "web") return true;
|
|
50
|
+
ensureInstalled();
|
|
51
|
+
return modality === "keyboard";
|
|
52
|
+
}
|
|
53
|
+
function ensureWorkletEasing(easing) {
|
|
54
|
+
if (!easing) return void 0;
|
|
55
|
+
const fn = isEasingFactory(easing) ? easing.factory() : easing;
|
|
56
|
+
if (reactNativeWorklets.isWorkletFunction(fn)) return fn;
|
|
57
|
+
const wrapped = (t) => {
|
|
58
|
+
"worklet";
|
|
59
|
+
return fn(t);
|
|
60
|
+
};
|
|
61
|
+
return wrapped;
|
|
62
|
+
}
|
|
63
|
+
function isEasingFactory(value) {
|
|
64
|
+
return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// src/transitions/spring.ts
|
|
68
|
+
var DEFAULT_SPRING = {
|
|
69
|
+
tension: 170,
|
|
70
|
+
friction: 26,
|
|
71
|
+
mass: 1
|
|
72
|
+
};
|
|
73
|
+
function springToReanimated(t) {
|
|
74
|
+
"worklet";
|
|
75
|
+
return {
|
|
76
|
+
stiffness: t.tension ?? DEFAULT_SPRING.tension,
|
|
77
|
+
damping: t.friction ?? DEFAULT_SPRING.friction,
|
|
78
|
+
mass: t.mass ?? DEFAULT_SPRING.mass,
|
|
79
|
+
velocity: t.velocity,
|
|
80
|
+
restSpeedThreshold: t.restSpeedThreshold,
|
|
81
|
+
restDisplacementThreshold: t.restDisplacementThreshold
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// src/layout/resolveLayout.ts
|
|
86
|
+
function resolveLayoutTransition(layout) {
|
|
87
|
+
if (!layout) return void 0;
|
|
88
|
+
const cfg = layout === true ? { type: "spring" } : layout;
|
|
89
|
+
if (cfg.type === "no-animation") return void 0;
|
|
90
|
+
if (cfg.type === "timing") {
|
|
91
|
+
let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
|
|
92
|
+
const easing = ensureWorkletEasing(cfg.easing);
|
|
93
|
+
if (easing) builder2 = builder2.easing(easing);
|
|
94
|
+
if (cfg.delay) builder2 = builder2.delay(cfg.delay);
|
|
95
|
+
return builder2;
|
|
96
|
+
}
|
|
97
|
+
const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
|
|
98
|
+
const { stiffness, damping, mass } = springToReanimated({
|
|
99
|
+
...DEFAULT_SPRING,
|
|
100
|
+
...spring
|
|
101
|
+
});
|
|
102
|
+
let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
|
|
103
|
+
if ("delay" in spring && spring.delay) builder = builder.delay(spring.delay);
|
|
104
|
+
return builder;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// src/layout/sharedRegistry.ts
|
|
108
|
+
var REGISTRY = /* @__PURE__ */ new Map();
|
|
109
|
+
var SHARED_LAYOUT_TTL_MS = 1e3;
|
|
110
|
+
var now = () => Date.now();
|
|
111
|
+
function registerLayout(id, rect) {
|
|
112
|
+
REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
|
|
113
|
+
}
|
|
114
|
+
function releaseLayout(id, rect) {
|
|
115
|
+
REGISTRY.set(id, { rect, expiresAt: now() + SHARED_LAYOUT_TTL_MS });
|
|
116
|
+
}
|
|
117
|
+
function consumeLayout(id) {
|
|
118
|
+
const entry = REGISTRY.get(id);
|
|
119
|
+
if (!entry) return void 0;
|
|
120
|
+
REGISTRY.delete(id);
|
|
121
|
+
if (entry.expiresAt < now()) return void 0;
|
|
122
|
+
return entry.rect;
|
|
123
|
+
}
|
|
124
|
+
function useSharedLayout(options) {
|
|
125
|
+
const { layoutId, userRef, transition, shouldReduceMotion, userOnLayout } = options;
|
|
126
|
+
const dx = Animated.useSharedValue(0);
|
|
127
|
+
const dy = Animated.useSharedValue(0);
|
|
128
|
+
const sx = Animated.useSharedValue(1);
|
|
129
|
+
const sy = Animated.useSharedValue(1);
|
|
130
|
+
const lastRectRef = react.useRef(null);
|
|
131
|
+
const consumedRef = react.useRef(false);
|
|
132
|
+
const transitionRef = react.useRef(transition);
|
|
133
|
+
transitionRef.current = transition;
|
|
134
|
+
const reducedMotionRef = react.useRef(shouldReduceMotion);
|
|
135
|
+
reducedMotionRef.current = shouldReduceMotion;
|
|
136
|
+
const setRef = react.useCallback(
|
|
137
|
+
(node) => {
|
|
138
|
+
if (typeof userRef === "function") userRef(node);
|
|
139
|
+
else if (userRef) userRef.current = node;
|
|
140
|
+
},
|
|
141
|
+
[userRef]
|
|
142
|
+
);
|
|
143
|
+
const onLayout = react.useCallback(
|
|
144
|
+
(event) => {
|
|
145
|
+
userOnLayout?.(event);
|
|
146
|
+
if (!layoutId) return;
|
|
147
|
+
const { x, y, width, height } = event.nativeEvent.layout;
|
|
148
|
+
const rect = { x, y, width, height };
|
|
149
|
+
lastRectRef.current = rect;
|
|
150
|
+
let source;
|
|
151
|
+
if (!consumedRef.current) {
|
|
152
|
+
consumedRef.current = true;
|
|
153
|
+
source = consumeLayout(layoutId);
|
|
154
|
+
}
|
|
155
|
+
registerLayout(layoutId, rect);
|
|
156
|
+
if (source) {
|
|
157
|
+
applyFlip({
|
|
158
|
+
source,
|
|
159
|
+
target: rect,
|
|
160
|
+
dx,
|
|
161
|
+
dy,
|
|
162
|
+
sx,
|
|
163
|
+
sy,
|
|
164
|
+
transition: transitionRef.current,
|
|
165
|
+
shouldReduceMotion: reducedMotionRef.current
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
},
|
|
169
|
+
// dx/dy/sx/sy are stable refs from useSharedValue, but eslint's
|
|
170
|
+
// exhaustive-deps would flag them — including them is harmless and
|
|
171
|
+
// silences the warning.
|
|
172
|
+
[layoutId, userOnLayout, dx, dy, sx, sy]
|
|
173
|
+
);
|
|
174
|
+
react.useEffect(() => {
|
|
175
|
+
consumedRef.current = false;
|
|
176
|
+
}, [layoutId]);
|
|
177
|
+
react.useEffect(() => {
|
|
178
|
+
return () => {
|
|
179
|
+
if (!layoutId) return;
|
|
180
|
+
const rect = lastRectRef.current;
|
|
181
|
+
if (!rect) return;
|
|
182
|
+
releaseLayout(layoutId, rect);
|
|
183
|
+
};
|
|
184
|
+
}, [layoutId]);
|
|
185
|
+
return react.useMemo(
|
|
186
|
+
() => ({
|
|
187
|
+
flip: { dx, dy, sx, sy },
|
|
188
|
+
setRef,
|
|
189
|
+
onLayout
|
|
190
|
+
}),
|
|
191
|
+
[dx, dy, sx, sy, setRef, onLayout]
|
|
192
|
+
);
|
|
193
|
+
}
|
|
194
|
+
function applyFlip(args) {
|
|
195
|
+
const { source, target, dx, dy, sx, sy, transition, shouldReduceMotion } = args;
|
|
196
|
+
const sourceCenterX = source.x + source.width / 2;
|
|
197
|
+
const sourceCenterY = source.y + source.height / 2;
|
|
198
|
+
const targetCenterX = target.x + target.width / 2;
|
|
199
|
+
const targetCenterY = target.y + target.height / 2;
|
|
200
|
+
const deltaX = sourceCenterX - targetCenterX;
|
|
201
|
+
const deltaY = sourceCenterY - targetCenterY;
|
|
202
|
+
const scaleX = target.width > 0 ? source.width / target.width : 1;
|
|
203
|
+
const scaleY = target.height > 0 ? source.height / target.height : 1;
|
|
204
|
+
if (shouldReduceMotion) {
|
|
205
|
+
dx.value = 0;
|
|
206
|
+
dy.value = 0;
|
|
207
|
+
sx.value = 1;
|
|
208
|
+
sy.value = 1;
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
if (transition?.type === "no-animation") {
|
|
212
|
+
dx.value = 0;
|
|
213
|
+
dy.value = 0;
|
|
214
|
+
sx.value = 1;
|
|
215
|
+
sy.value = 1;
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
if (transition?.type === "timing") {
|
|
219
|
+
const duration = transition.duration ?? 300;
|
|
220
|
+
dx.value = Animated.withSequence(
|
|
221
|
+
Animated.withTiming(deltaX, { duration: 0 }),
|
|
222
|
+
Animated.withTiming(0, { duration })
|
|
223
|
+
);
|
|
224
|
+
dy.value = Animated.withSequence(
|
|
225
|
+
Animated.withTiming(deltaY, { duration: 0 }),
|
|
226
|
+
Animated.withTiming(0, { duration })
|
|
227
|
+
);
|
|
228
|
+
sx.value = Animated.withSequence(
|
|
229
|
+
Animated.withTiming(scaleX, { duration: 0 }),
|
|
230
|
+
Animated.withTiming(1, { duration })
|
|
231
|
+
);
|
|
232
|
+
sy.value = Animated.withSequence(
|
|
233
|
+
Animated.withTiming(scaleY, { duration: 0 }),
|
|
234
|
+
Animated.withTiming(1, { duration })
|
|
235
|
+
);
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
const springCfg = transition?.type === "spring" ? { ...DEFAULT_SPRING, ...transition } : { ...DEFAULT_SPRING };
|
|
239
|
+
const springParams = springToReanimated(springCfg);
|
|
240
|
+
dx.value = Animated.withSequence(
|
|
241
|
+
Animated.withTiming(deltaX, { duration: 0 }),
|
|
242
|
+
Animated.withSpring(0, springParams)
|
|
243
|
+
);
|
|
244
|
+
dy.value = Animated.withSequence(
|
|
245
|
+
Animated.withTiming(deltaY, { duration: 0 }),
|
|
246
|
+
Animated.withSpring(0, springParams)
|
|
247
|
+
);
|
|
248
|
+
sx.value = Animated.withSequence(
|
|
249
|
+
Animated.withTiming(scaleX, { duration: 0 }),
|
|
250
|
+
Animated.withSpring(1, springParams)
|
|
251
|
+
);
|
|
252
|
+
sy.value = Animated.withSequence(
|
|
253
|
+
Animated.withTiming(scaleY, { duration: 0 }),
|
|
254
|
+
Animated.withSpring(1, springParams)
|
|
255
|
+
);
|
|
256
|
+
}
|
|
257
|
+
var PresenceContext = react.createContext(null);
|
|
258
|
+
function usePresence() {
|
|
259
|
+
return react.useContext(PresenceContext);
|
|
260
|
+
}
|
|
261
|
+
var DEFAULT_TIMING_DURATION = 250;
|
|
262
|
+
function buildSpring(cfg, toValue, cb) {
|
|
263
|
+
return Animated.withSpring(toValue, springToReanimated(cfg), cb);
|
|
264
|
+
}
|
|
265
|
+
function buildTiming(cfg, toValue, cb) {
|
|
266
|
+
return Animated.withTiming(
|
|
267
|
+
toValue,
|
|
268
|
+
{
|
|
269
|
+
duration: cfg.duration ?? DEFAULT_TIMING_DURATION,
|
|
270
|
+
easing: ensureWorkletEasing(cfg.easing) ?? Animated.Easing.inOut(Animated.Easing.ease)
|
|
271
|
+
},
|
|
272
|
+
cb
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
function buildDecay(cfg, cb) {
|
|
276
|
+
return Animated.withDecay(
|
|
277
|
+
{
|
|
278
|
+
velocity: cfg.velocity ?? 0,
|
|
279
|
+
deceleration: cfg.deceleration,
|
|
280
|
+
clamp: cfg.clamp
|
|
281
|
+
},
|
|
282
|
+
cb
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
function buildOne(cfg, toValue, cb) {
|
|
286
|
+
if (cfg.type === "no-animation") {
|
|
287
|
+
if (cb) cb(true, toValue);
|
|
288
|
+
return toValue;
|
|
289
|
+
}
|
|
290
|
+
if (cfg.type === "decay") return buildDecay(cfg, cb);
|
|
291
|
+
if (cfg.type === "timing") return buildTiming(cfg, toValue, cb);
|
|
292
|
+
return buildSpring(cfg, toValue, cb);
|
|
293
|
+
}
|
|
294
|
+
function applyRepeat(animation, repeat) {
|
|
295
|
+
if (repeat === void 0) return animation;
|
|
296
|
+
if (repeat === "infinite") {
|
|
297
|
+
return Animated.withRepeat(animation, -1, true);
|
|
298
|
+
}
|
|
299
|
+
if (typeof repeat === "number") {
|
|
300
|
+
return Animated.withRepeat(animation, repeat, true);
|
|
301
|
+
}
|
|
302
|
+
const count = repeat.count === "infinite" ? -1 : repeat.count;
|
|
303
|
+
const alternate = repeat.alternate ?? true;
|
|
304
|
+
return Animated.withRepeat(animation, count, alternate);
|
|
305
|
+
}
|
|
306
|
+
function applyDelay(animation, delay) {
|
|
307
|
+
if (!delay || delay <= 0) return animation;
|
|
308
|
+
return Animated.withDelay(delay, animation);
|
|
309
|
+
}
|
|
310
|
+
function resolveTransition(config, toValue, callback) {
|
|
311
|
+
const cfg = config ?? { type: "spring" };
|
|
312
|
+
const base = buildOne(cfg, toValue, callback);
|
|
313
|
+
const repeated = applyRepeat(base, repeatOf(cfg));
|
|
314
|
+
return applyDelay(repeated, delayOf(cfg));
|
|
315
|
+
}
|
|
316
|
+
function repeatOf(cfg) {
|
|
317
|
+
if (cfg.type === "no-animation" || cfg.type === "decay") return void 0;
|
|
318
|
+
return cfg.repeat;
|
|
319
|
+
}
|
|
320
|
+
function stripRepeat(cfg) {
|
|
321
|
+
if (!cfg) return cfg;
|
|
322
|
+
if (cfg.type === "no-animation" || cfg.type === "decay") return cfg;
|
|
323
|
+
if (cfg.repeat === void 0) return cfg;
|
|
324
|
+
const next = { ...cfg };
|
|
325
|
+
delete next.repeat;
|
|
326
|
+
return next;
|
|
327
|
+
}
|
|
328
|
+
function delayOf(cfg) {
|
|
329
|
+
if (cfg.type === "no-animation") return void 0;
|
|
330
|
+
return cfg.delay;
|
|
331
|
+
}
|
|
332
|
+
function isStepObject(v) {
|
|
333
|
+
return typeof v === "object" && v !== null && !Array.isArray(v) && "to" in v;
|
|
334
|
+
}
|
|
335
|
+
function resolveAnimatableValue(value, base, factory) {
|
|
336
|
+
if (Array.isArray(value)) {
|
|
337
|
+
const steps = value;
|
|
338
|
+
const stepBase = stripRepeat(base);
|
|
339
|
+
const animations = steps.map(
|
|
340
|
+
(step2, i) => resolveStep(step2, stepBase, factory?.("step", i))
|
|
341
|
+
);
|
|
342
|
+
const seq = Animated.withSequence(...animations);
|
|
343
|
+
return applyRepeat(seq, base ? repeatOf(base) : void 0);
|
|
344
|
+
}
|
|
345
|
+
const step = value;
|
|
346
|
+
const cb = factory?.("animation", void 0);
|
|
347
|
+
if (isStepObject(step)) {
|
|
348
|
+
return resolveStep(step, base, cb);
|
|
349
|
+
}
|
|
350
|
+
return resolveTransition(base, step, cb);
|
|
351
|
+
}
|
|
352
|
+
function resolveStep(step, base, cb) {
|
|
353
|
+
if (isStepObject(step)) {
|
|
354
|
+
const { to, ...override } = step;
|
|
355
|
+
const merged = mergeTransition(base, override);
|
|
356
|
+
return resolveTransition(merged, to, cb);
|
|
357
|
+
}
|
|
358
|
+
return resolveTransition(base, step, cb);
|
|
359
|
+
}
|
|
360
|
+
function mergeTransition(base, override) {
|
|
361
|
+
if (override.type && base && override.type !== base.type) {
|
|
362
|
+
return override;
|
|
363
|
+
}
|
|
364
|
+
return { ...base ?? { type: "spring" }, ...override };
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
// src/transitions/keys.ts
|
|
368
|
+
var TRANSITION_CONFIG_KEYS = /* @__PURE__ */ new Set([
|
|
369
|
+
"type",
|
|
370
|
+
"tension",
|
|
371
|
+
"friction",
|
|
372
|
+
"mass",
|
|
373
|
+
"velocity",
|
|
374
|
+
"restSpeedThreshold",
|
|
375
|
+
"restDisplacementThreshold",
|
|
376
|
+
"duration",
|
|
377
|
+
"easing",
|
|
378
|
+
"delay",
|
|
379
|
+
"repeat",
|
|
380
|
+
"deceleration",
|
|
381
|
+
"clamp"
|
|
382
|
+
]);
|
|
383
|
+
function isTopLevelTransition(t) {
|
|
384
|
+
if (t === null || typeof t !== "object") return false;
|
|
385
|
+
const keys = Object.keys(t);
|
|
386
|
+
if (keys.length === 0) return false;
|
|
387
|
+
return keys.every((k) => TRANSITION_CONFIG_KEYS.has(k));
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
// src/transitions/sig.ts
|
|
391
|
+
function stableSig(value) {
|
|
392
|
+
if (value === void 0) return "";
|
|
393
|
+
try {
|
|
394
|
+
return stableStringify(value);
|
|
395
|
+
} catch {
|
|
396
|
+
return String(value);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
function stableStringify(v) {
|
|
400
|
+
if (v === null || typeof v !== "object") {
|
|
401
|
+
if (typeof v === "function" || v === void 0) return "null";
|
|
402
|
+
return JSON.stringify(v);
|
|
403
|
+
}
|
|
404
|
+
if (Array.isArray(v)) {
|
|
405
|
+
return "[" + v.map(stableStringify).join(",") + "]";
|
|
406
|
+
}
|
|
407
|
+
const obj = v;
|
|
408
|
+
const keys = Object.keys(obj).sort();
|
|
409
|
+
return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableStringify(obj[k])).join(",") + "}";
|
|
410
|
+
}
|
|
411
|
+
var alreadyChecked = false;
|
|
412
|
+
function ensureReanimatedInstalled() {
|
|
413
|
+
if (!__DEV__ || alreadyChecked) return;
|
|
414
|
+
if (typeof process !== "undefined" && process.env?.NODE_ENV === "test") {
|
|
415
|
+
return;
|
|
416
|
+
}
|
|
417
|
+
alreadyChecked = true;
|
|
418
|
+
const version = Animated.reanimatedVersion;
|
|
419
|
+
if (version) {
|
|
420
|
+
const major = parseInt(version.split(".")[0] ?? "0", 10);
|
|
421
|
+
if (major < 4) {
|
|
422
|
+
console.error(
|
|
423
|
+
`[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).`
|
|
424
|
+
);
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
const probe = function probe2() {
|
|
429
|
+
"worklet";
|
|
430
|
+
return 0;
|
|
431
|
+
};
|
|
432
|
+
if (typeof probe.__workletHash !== "number") {
|
|
433
|
+
console.error(
|
|
434
|
+
`[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\`.`
|
|
435
|
+
);
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
var TRANSFORM_KEYS = [
|
|
439
|
+
"translateX",
|
|
440
|
+
"translateY",
|
|
441
|
+
"scale",
|
|
442
|
+
"scaleX",
|
|
443
|
+
"scaleY",
|
|
444
|
+
"rotate",
|
|
445
|
+
"rotateX",
|
|
446
|
+
"rotateY"
|
|
447
|
+
];
|
|
448
|
+
var ROTATION_KEYS = /* @__PURE__ */ new Set(["rotate", "rotateX", "rotateY"]);
|
|
449
|
+
var NUMERIC_TOP_LEVEL_KEYS = [
|
|
450
|
+
"opacity",
|
|
451
|
+
"width",
|
|
452
|
+
"height",
|
|
453
|
+
"borderRadius",
|
|
454
|
+
"shadowOpacity",
|
|
455
|
+
"shadowRadius",
|
|
456
|
+
"elevation"
|
|
457
|
+
];
|
|
458
|
+
var COLOR_KEYS = [
|
|
459
|
+
"backgroundColor",
|
|
460
|
+
"borderColor",
|
|
461
|
+
"color",
|
|
462
|
+
"tintColor",
|
|
463
|
+
"shadowColor"
|
|
464
|
+
];
|
|
465
|
+
var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
|
|
466
|
+
var ALL_KEYS = [
|
|
467
|
+
...TRANSFORM_KEYS,
|
|
468
|
+
...NUMERIC_TOP_LEVEL_KEYS,
|
|
469
|
+
...COLOR_KEYS,
|
|
470
|
+
...SHADOW_OFFSET_KEYS
|
|
471
|
+
];
|
|
472
|
+
var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
|
|
473
|
+
var COLOR_KEY_SET = new Set(COLOR_KEYS);
|
|
474
|
+
var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
|
|
475
|
+
var GESTURE_LAYER_NAMES = [
|
|
476
|
+
"hovered",
|
|
477
|
+
"focused",
|
|
478
|
+
"focusVisible",
|
|
479
|
+
"pressed"
|
|
480
|
+
];
|
|
481
|
+
var GESTURE_LAYER_NAME_SET = new Set(GESTURE_LAYER_NAMES);
|
|
482
|
+
var EXITING_POINTER_EVENTS_STYLE = { pointerEvents: "none" };
|
|
483
|
+
var DEFAULT_RESTING = {
|
|
484
|
+
translateX: 0,
|
|
485
|
+
translateY: 0,
|
|
486
|
+
scale: 1,
|
|
487
|
+
scaleX: 1,
|
|
488
|
+
scaleY: 1,
|
|
489
|
+
rotate: 0,
|
|
490
|
+
rotateX: 0,
|
|
491
|
+
rotateY: 0,
|
|
492
|
+
opacity: 1,
|
|
493
|
+
width: 0,
|
|
494
|
+
height: 0,
|
|
495
|
+
borderRadius: 0,
|
|
496
|
+
shadowOpacity: 0,
|
|
497
|
+
shadowRadius: 0,
|
|
498
|
+
elevation: 0,
|
|
499
|
+
// 'transparent' is the only safe universal default for colors: it works as
|
|
500
|
+
// an initial seed for any color animation (no jarring opaque flash on mount
|
|
501
|
+
// when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
|
|
502
|
+
// any opaque target via Reanimated's color util.
|
|
503
|
+
backgroundColor: "transparent",
|
|
504
|
+
borderColor: "transparent",
|
|
505
|
+
color: "transparent",
|
|
506
|
+
tintColor: "transparent",
|
|
507
|
+
shadowColor: "transparent",
|
|
508
|
+
shadowOffsetWidth: 0,
|
|
509
|
+
shadowOffsetHeight: 0
|
|
510
|
+
};
|
|
511
|
+
function transitionFor(prop, transition) {
|
|
512
|
+
if (!transition) return void 0;
|
|
513
|
+
if (isTopLevelTransition(transition)) return transition;
|
|
514
|
+
if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
|
|
515
|
+
return transition[prop];
|
|
516
|
+
}
|
|
517
|
+
function gestureLayerTransitionFor(layer, transition) {
|
|
518
|
+
if (!transition) return void 0;
|
|
519
|
+
if (isTopLevelTransition(transition)) return transition;
|
|
520
|
+
return transition[layer];
|
|
521
|
+
}
|
|
522
|
+
function createMotionComponent(Component) {
|
|
523
|
+
ensureReanimatedInstalled();
|
|
524
|
+
const AnimatedComponent = Animated__default.default.createAnimatedComponent(
|
|
525
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
526
|
+
Component
|
|
527
|
+
);
|
|
528
|
+
const Motion = react.forwardRef(function Motion2(props, ref) {
|
|
529
|
+
const {
|
|
530
|
+
initial,
|
|
531
|
+
animate,
|
|
532
|
+
exit,
|
|
533
|
+
transition,
|
|
534
|
+
variants,
|
|
535
|
+
controller,
|
|
536
|
+
gesture,
|
|
537
|
+
layout,
|
|
538
|
+
layoutId,
|
|
539
|
+
onAnimationEnd,
|
|
540
|
+
style,
|
|
541
|
+
onLayout: userOnLayout,
|
|
542
|
+
...rest
|
|
543
|
+
} = props;
|
|
544
|
+
if (__DEV__ && typeof style === "function") {
|
|
545
|
+
throw new Error(
|
|
546
|
+
"[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."
|
|
547
|
+
);
|
|
548
|
+
}
|
|
549
|
+
const presence = usePresence();
|
|
550
|
+
const isExiting = presence !== null && presence.isPresent === false;
|
|
551
|
+
const shouldReduceMotion = useShouldReduceMotion();
|
|
552
|
+
const onAnimationEndRef = react.useRef(onAnimationEnd);
|
|
553
|
+
onAnimationEndRef.current = onAnimationEnd;
|
|
554
|
+
const variantKey = useControllerKey(controller);
|
|
555
|
+
const resolvedAnimate = resolveAnimateInput(
|
|
556
|
+
animate,
|
|
557
|
+
variants,
|
|
558
|
+
variantKey
|
|
559
|
+
);
|
|
560
|
+
const animateRecord = resolvedAnimate ?? {};
|
|
561
|
+
const initialRecord = initial && initial !== false ? initial : void 0;
|
|
562
|
+
const exitRecord = exit ? exit : void 0;
|
|
563
|
+
const [pressed, setPressed] = react.useState(false);
|
|
564
|
+
const [focused, setFocused] = react.useState(false);
|
|
565
|
+
const [focusVisible, setFocusVisible] = react.useState(false);
|
|
566
|
+
const [hovered, setHovered] = react.useState(false);
|
|
567
|
+
const touched = /* @__PURE__ */ new Set();
|
|
568
|
+
collectTouchedKeys(touched, animateRecord);
|
|
569
|
+
if (initialRecord) collectTouchedKeys(touched, initialRecord);
|
|
570
|
+
if (variants) {
|
|
571
|
+
for (const variant of Object.values(variants)) {
|
|
572
|
+
if (!variant) continue;
|
|
573
|
+
collectTouchedKeys(touched, variant);
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
if (gesture) {
|
|
577
|
+
for (const subState of [
|
|
578
|
+
gesture.pressed,
|
|
579
|
+
gesture.focused,
|
|
580
|
+
gesture.focusVisible,
|
|
581
|
+
gesture.hovered
|
|
582
|
+
]) {
|
|
583
|
+
if (!subState) continue;
|
|
584
|
+
collectTouchedKeys(touched, subState);
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
if (exitRecord) collectTouchedKeys(touched, exitRecord);
|
|
588
|
+
const activeKeysRef = react.useRef(null);
|
|
589
|
+
const hasTransformRef = react.useRef(false);
|
|
590
|
+
const hasShadowOffsetRef = react.useRef(false);
|
|
591
|
+
const prevActive = activeKeysRef.current;
|
|
592
|
+
let grew = prevActive === null;
|
|
593
|
+
if (!grew && prevActive) {
|
|
594
|
+
for (const k of touched) {
|
|
595
|
+
if (!prevActive.includes(k)) {
|
|
596
|
+
grew = true;
|
|
597
|
+
break;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
if (grew) {
|
|
602
|
+
const merged = new Set(prevActive ?? []);
|
|
603
|
+
for (const k of touched) merged.add(k);
|
|
604
|
+
activeKeysRef.current = ALL_KEYS.filter((k) => merged.has(k));
|
|
605
|
+
hasTransformRef.current = activeKeysRef.current.some(
|
|
606
|
+
(k) => TRANSFORM_KEY_SET.has(k)
|
|
607
|
+
);
|
|
608
|
+
hasShadowOffsetRef.current = activeKeysRef.current.some(
|
|
609
|
+
(k) => SHADOW_OFFSET_KEY_SET.has(k)
|
|
610
|
+
);
|
|
611
|
+
}
|
|
612
|
+
const sharedValues = useAnimatableSharedValues((key) => {
|
|
613
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
614
|
+
const axis = shadowOffsetAxisFor(key);
|
|
615
|
+
if (initial === false) {
|
|
616
|
+
return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
617
|
+
}
|
|
618
|
+
return shadowOffsetAxisValue(
|
|
619
|
+
initialRecord?.shadowOffset,
|
|
620
|
+
axis
|
|
621
|
+
) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
622
|
+
}
|
|
623
|
+
if (initial === false) {
|
|
624
|
+
const a = animateRecord[key];
|
|
625
|
+
return restValue(a) ?? DEFAULT_RESTING[key];
|
|
626
|
+
}
|
|
627
|
+
return initialRecord?.[key] ?? restValue(animateRecord[key]) ?? DEFAULT_RESTING[key];
|
|
628
|
+
});
|
|
629
|
+
const pressedProgress = Animated.useSharedValue(0);
|
|
630
|
+
const focusedProgress = Animated.useSharedValue(0);
|
|
631
|
+
const focusVisibleProgress = Animated.useSharedValue(0);
|
|
632
|
+
const hoveredProgress = Animated.useSharedValue(0);
|
|
633
|
+
const gestureSV = Animated.useSharedValue(
|
|
634
|
+
resolveGestureLayers(gesture)
|
|
635
|
+
);
|
|
636
|
+
const gestureTargetsSig = stableSig(gesture);
|
|
637
|
+
react.useEffect(() => {
|
|
638
|
+
gestureSV.value = resolveGestureLayers(gesture);
|
|
639
|
+
}, [gestureTargetsSig]);
|
|
640
|
+
const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
|
|
641
|
+
const baseSig = stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
|
|
642
|
+
const transitionSig = stableSig(transition);
|
|
643
|
+
const safeToRemoveRef = react.useRef(void 0);
|
|
644
|
+
safeToRemoveRef.current = presence?.safeToRemove;
|
|
645
|
+
react.useEffect(() => {
|
|
646
|
+
if (isExiting && (!exitRecord || Object.keys(exitRecord).length === 0)) {
|
|
647
|
+
safeToRemoveRef.current?.();
|
|
648
|
+
return;
|
|
649
|
+
}
|
|
650
|
+
let pending = 0;
|
|
651
|
+
let done = false;
|
|
652
|
+
const onSettle = () => {
|
|
653
|
+
if (done) return;
|
|
654
|
+
pending--;
|
|
655
|
+
if (pending <= 0) {
|
|
656
|
+
done = true;
|
|
657
|
+
if (isExiting) safeToRemoveRef.current?.();
|
|
658
|
+
}
|
|
659
|
+
};
|
|
660
|
+
let transformPending = 0;
|
|
661
|
+
for (const k of ALL_KEYS) {
|
|
662
|
+
if (TRANSFORM_KEY_SET.has(k) && baseRecord[k] !== void 0) {
|
|
663
|
+
transformPending++;
|
|
664
|
+
}
|
|
665
|
+
}
|
|
666
|
+
const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
|
|
667
|
+
for (const key of ALL_KEYS) {
|
|
668
|
+
const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
|
|
669
|
+
baseRecord.shadowOffset,
|
|
670
|
+
shadowOffsetAxisFor(key)
|
|
671
|
+
) : baseRecord[key];
|
|
672
|
+
if (target === void 0) continue;
|
|
673
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
674
|
+
SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
|
|
675
|
+
transition
|
|
676
|
+
);
|
|
677
|
+
if (isExiting) pending++;
|
|
678
|
+
const factory = makeKeyCallbackFactory(
|
|
679
|
+
key,
|
|
680
|
+
sharedValues[key],
|
|
681
|
+
targetEndValue(target),
|
|
682
|
+
onAnimationEndRef,
|
|
683
|
+
{
|
|
684
|
+
stepCount: stepCountOf(target),
|
|
685
|
+
totalIterations: totalIterationsOf(cfg)
|
|
686
|
+
},
|
|
687
|
+
isExiting ? onSettle : void 0,
|
|
688
|
+
TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
|
|
689
|
+
);
|
|
690
|
+
sharedValues[key].value = resolveAnimatableValue(
|
|
691
|
+
target,
|
|
692
|
+
cfg,
|
|
693
|
+
factory
|
|
694
|
+
);
|
|
695
|
+
}
|
|
696
|
+
if (isExiting && pending === 0) {
|
|
697
|
+
safeToRemoveRef.current?.();
|
|
698
|
+
}
|
|
699
|
+
}, [baseSig, transitionSig]);
|
|
700
|
+
useGestureLayerProgress(
|
|
701
|
+
pressedProgress,
|
|
702
|
+
pressed,
|
|
703
|
+
gesture?.pressed != null,
|
|
704
|
+
"pressed",
|
|
705
|
+
transition,
|
|
706
|
+
isExiting,
|
|
707
|
+
shouldReduceMotion
|
|
708
|
+
);
|
|
709
|
+
useGestureLayerProgress(
|
|
710
|
+
focusedProgress,
|
|
711
|
+
focused,
|
|
712
|
+
gesture?.focused != null,
|
|
713
|
+
"focused",
|
|
714
|
+
transition,
|
|
715
|
+
isExiting,
|
|
716
|
+
shouldReduceMotion
|
|
717
|
+
);
|
|
718
|
+
useGestureLayerProgress(
|
|
719
|
+
focusVisibleProgress,
|
|
720
|
+
focusVisible,
|
|
721
|
+
gesture?.focusVisible != null,
|
|
722
|
+
"focusVisible",
|
|
723
|
+
transition,
|
|
724
|
+
isExiting,
|
|
725
|
+
shouldReduceMotion
|
|
726
|
+
);
|
|
727
|
+
useGestureLayerProgress(
|
|
728
|
+
hoveredProgress,
|
|
729
|
+
hovered,
|
|
730
|
+
gesture?.hovered != null,
|
|
731
|
+
"hovered",
|
|
732
|
+
transition,
|
|
733
|
+
isExiting,
|
|
734
|
+
shouldReduceMotion
|
|
735
|
+
);
|
|
736
|
+
const sharedLayout = useSharedLayout({
|
|
737
|
+
layoutId,
|
|
738
|
+
userRef: ref,
|
|
739
|
+
transition: isTopLevelTransition(transition) ? transition : void 0,
|
|
740
|
+
shouldReduceMotion,
|
|
741
|
+
userOnLayout
|
|
742
|
+
});
|
|
743
|
+
const flip = sharedLayout.flip;
|
|
744
|
+
const hasLayoutId = layoutId !== void 0;
|
|
745
|
+
const animatedStyle = Animated.useAnimatedStyle(() => {
|
|
746
|
+
const activeKeys = activeKeysRef.current;
|
|
747
|
+
const hasTransform = hasTransformRef.current;
|
|
748
|
+
const hasShadowOffset = hasShadowOffsetRef.current;
|
|
749
|
+
const out = {};
|
|
750
|
+
const transform = [];
|
|
751
|
+
let shadowOffsetW = 0;
|
|
752
|
+
let shadowOffsetH = 0;
|
|
753
|
+
const ph = hoveredProgress.value;
|
|
754
|
+
const pf = focusedProgress.value;
|
|
755
|
+
const pfv = focusVisibleProgress.value;
|
|
756
|
+
const pp = pressedProgress.value;
|
|
757
|
+
const layers = gestureSV.value;
|
|
758
|
+
const hoveredLayer = layers ? layers.hovered : null;
|
|
759
|
+
const focusedLayer = layers ? layers.focused : null;
|
|
760
|
+
const focusVisibleLayer = layers ? layers.focusVisible : null;
|
|
761
|
+
const pressedLayer = layers ? layers.pressed : null;
|
|
762
|
+
for (const key of activeKeys) {
|
|
763
|
+
let v = sharedValues[key].value;
|
|
764
|
+
const isColor = COLOR_KEY_SET.has(key);
|
|
765
|
+
if (hoveredLayer && ph > 0 && hoveredLayer[key] !== void 0) {
|
|
766
|
+
const t = hoveredLayer[key];
|
|
767
|
+
v = isColor ? Animated.interpolateColor(ph, [0, 1], [v, t]) : v + (t - v) * ph;
|
|
768
|
+
}
|
|
769
|
+
if (focusedLayer && pf > 0 && focusedLayer[key] !== void 0) {
|
|
770
|
+
const t = focusedLayer[key];
|
|
771
|
+
v = isColor ? Animated.interpolateColor(pf, [0, 1], [v, t]) : v + (t - v) * pf;
|
|
772
|
+
}
|
|
773
|
+
if (focusVisibleLayer && pfv > 0 && focusVisibleLayer[key] !== void 0) {
|
|
774
|
+
const t = focusVisibleLayer[key];
|
|
775
|
+
v = isColor ? Animated.interpolateColor(pfv, [0, 1], [v, t]) : v + (t - v) * pfv;
|
|
776
|
+
}
|
|
777
|
+
if (pressedLayer && pp > 0 && pressedLayer[key] !== void 0) {
|
|
778
|
+
const t = pressedLayer[key];
|
|
779
|
+
v = isColor ? Animated.interpolateColor(pp, [0, 1], [v, t]) : v + (t - v) * pp;
|
|
780
|
+
}
|
|
781
|
+
if (TRANSFORM_KEY_SET.has(key)) {
|
|
782
|
+
transform.push(
|
|
783
|
+
ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
|
|
784
|
+
);
|
|
785
|
+
} else if (key === "shadowOffsetWidth") {
|
|
786
|
+
shadowOffsetW = v;
|
|
787
|
+
} else if (key === "shadowOffsetHeight") {
|
|
788
|
+
shadowOffsetH = v;
|
|
789
|
+
} else {
|
|
790
|
+
out[key] = v;
|
|
791
|
+
}
|
|
792
|
+
}
|
|
793
|
+
if (hasLayoutId) {
|
|
794
|
+
transform.push({ translateX: flip.dx.value });
|
|
795
|
+
transform.push({ translateY: flip.dy.value });
|
|
796
|
+
transform.push({ scaleX: flip.sx.value });
|
|
797
|
+
transform.push({ scaleY: flip.sy.value });
|
|
798
|
+
}
|
|
799
|
+
if (hasTransform || hasLayoutId) out.transform = transform;
|
|
800
|
+
if (hasShadowOffset) {
|
|
801
|
+
out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
|
|
802
|
+
}
|
|
803
|
+
return out;
|
|
804
|
+
});
|
|
805
|
+
const mergedStyle = react.useMemo(
|
|
806
|
+
() => isExiting ? [style, animatedStyle, EXITING_POINTER_EVENTS_STYLE] : [style, animatedStyle],
|
|
807
|
+
[style, animatedStyle, isExiting]
|
|
808
|
+
);
|
|
809
|
+
const gestureHandlers = useGestureHandlers(
|
|
810
|
+
gesture,
|
|
811
|
+
rest,
|
|
812
|
+
setPressed,
|
|
813
|
+
setFocused,
|
|
814
|
+
setFocusVisible,
|
|
815
|
+
setHovered
|
|
816
|
+
);
|
|
817
|
+
const layoutSig = stableSig(layout);
|
|
818
|
+
const layoutTransition = react.useMemo(
|
|
819
|
+
() => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
|
|
820
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
821
|
+
[layoutSig, shouldReduceMotion]
|
|
822
|
+
);
|
|
823
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
824
|
+
AnimatedComponent,
|
|
825
|
+
{
|
|
826
|
+
ref: sharedLayout.setRef,
|
|
827
|
+
...rest,
|
|
828
|
+
...gestureHandlers,
|
|
829
|
+
onLayout: sharedLayout.onLayout,
|
|
830
|
+
layout: layoutTransition,
|
|
831
|
+
style: mergedStyle
|
|
832
|
+
}
|
|
833
|
+
);
|
|
834
|
+
});
|
|
835
|
+
Motion.displayName = `Motion(${Component.displayName ?? Component.name ?? "Component"})`;
|
|
836
|
+
return Motion;
|
|
837
|
+
}
|
|
838
|
+
function useAnimatableSharedValues(init) {
|
|
839
|
+
const translateX = Animated.useSharedValue(init("translateX"));
|
|
840
|
+
const translateY = Animated.useSharedValue(init("translateY"));
|
|
841
|
+
const scale = Animated.useSharedValue(init("scale"));
|
|
842
|
+
const scaleX = Animated.useSharedValue(init("scaleX"));
|
|
843
|
+
const scaleY = Animated.useSharedValue(init("scaleY"));
|
|
844
|
+
const rotate = Animated.useSharedValue(init("rotate"));
|
|
845
|
+
const rotateX = Animated.useSharedValue(init("rotateX"));
|
|
846
|
+
const rotateY = Animated.useSharedValue(init("rotateY"));
|
|
847
|
+
const opacity = Animated.useSharedValue(init("opacity"));
|
|
848
|
+
const width = Animated.useSharedValue(init("width"));
|
|
849
|
+
const height = Animated.useSharedValue(init("height"));
|
|
850
|
+
const borderRadius = Animated.useSharedValue(init("borderRadius"));
|
|
851
|
+
const shadowOpacity = Animated.useSharedValue(init("shadowOpacity"));
|
|
852
|
+
const shadowRadius = Animated.useSharedValue(init("shadowRadius"));
|
|
853
|
+
const elevation = Animated.useSharedValue(init("elevation"));
|
|
854
|
+
const backgroundColor = Animated.useSharedValue(
|
|
855
|
+
init("backgroundColor")
|
|
856
|
+
);
|
|
857
|
+
const borderColor = Animated.useSharedValue(init("borderColor"));
|
|
858
|
+
const color = Animated.useSharedValue(init("color"));
|
|
859
|
+
const tintColor = Animated.useSharedValue(init("tintColor"));
|
|
860
|
+
const shadowColor = Animated.useSharedValue(init("shadowColor"));
|
|
861
|
+
const shadowOffsetWidth = Animated.useSharedValue(
|
|
862
|
+
init("shadowOffsetWidth")
|
|
863
|
+
);
|
|
864
|
+
const shadowOffsetHeight = Animated.useSharedValue(
|
|
865
|
+
init("shadowOffsetHeight")
|
|
866
|
+
);
|
|
867
|
+
const ref = react.useRef(null);
|
|
868
|
+
if (ref.current === null) {
|
|
869
|
+
ref.current = {
|
|
870
|
+
translateX,
|
|
871
|
+
translateY,
|
|
872
|
+
scale,
|
|
873
|
+
scaleX,
|
|
874
|
+
scaleY,
|
|
875
|
+
rotate,
|
|
876
|
+
rotateX,
|
|
877
|
+
rotateY,
|
|
878
|
+
opacity,
|
|
879
|
+
width,
|
|
880
|
+
height,
|
|
881
|
+
borderRadius,
|
|
882
|
+
shadowOpacity,
|
|
883
|
+
shadowRadius,
|
|
884
|
+
elevation,
|
|
885
|
+
backgroundColor,
|
|
886
|
+
borderColor,
|
|
887
|
+
color,
|
|
888
|
+
tintColor,
|
|
889
|
+
shadowColor,
|
|
890
|
+
shadowOffsetWidth,
|
|
891
|
+
shadowOffsetHeight
|
|
892
|
+
};
|
|
893
|
+
}
|
|
894
|
+
return ref.current;
|
|
895
|
+
}
|
|
896
|
+
function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, meta, onSettle, transformGroup) {
|
|
897
|
+
if (!onAnimationEndRef.current && !onSettle) return void 0;
|
|
898
|
+
const state = { iteration: 0 };
|
|
899
|
+
const isTransformKey = TRANSFORM_KEY_SET.has(key);
|
|
900
|
+
const dispatch = (rawPhase, step, finished, value) => {
|
|
901
|
+
const isLastIteration = state.iteration >= meta.totalIterations - 1;
|
|
902
|
+
let phase;
|
|
903
|
+
let isTerminal = false;
|
|
904
|
+
if (rawPhase === "step") {
|
|
905
|
+
const isLastInPass = step !== void 0 && step === meta.stepCount - 1;
|
|
906
|
+
if (!isLastInPass) {
|
|
907
|
+
phase = "step";
|
|
908
|
+
} else if (isLastIteration) {
|
|
909
|
+
phase = "animation";
|
|
910
|
+
isTerminal = true;
|
|
911
|
+
} else {
|
|
912
|
+
phase = "sequence";
|
|
913
|
+
}
|
|
914
|
+
} else if (isLastIteration) {
|
|
915
|
+
phase = "animation";
|
|
916
|
+
isTerminal = true;
|
|
917
|
+
} else {
|
|
918
|
+
phase = "repeat";
|
|
919
|
+
}
|
|
920
|
+
const reportedIteration = state.iteration;
|
|
921
|
+
if (phase === "sequence" || phase === "repeat") state.iteration++;
|
|
922
|
+
const fn = onAnimationEndRef.current;
|
|
923
|
+
if (fn) {
|
|
924
|
+
if (isTransformKey && transformGroup && phase === "animation") {
|
|
925
|
+
transformGroup.remaining--;
|
|
926
|
+
if (transformGroup.remaining <= 0) {
|
|
927
|
+
fn({
|
|
928
|
+
key: "transform",
|
|
929
|
+
finished,
|
|
930
|
+
value,
|
|
931
|
+
target,
|
|
932
|
+
phase,
|
|
933
|
+
step,
|
|
934
|
+
iteration: reportedIteration
|
|
935
|
+
});
|
|
936
|
+
}
|
|
937
|
+
} else {
|
|
938
|
+
fn({
|
|
939
|
+
key,
|
|
940
|
+
finished,
|
|
941
|
+
value,
|
|
942
|
+
target,
|
|
943
|
+
phase,
|
|
944
|
+
step,
|
|
945
|
+
iteration: reportedIteration
|
|
946
|
+
});
|
|
947
|
+
}
|
|
948
|
+
}
|
|
949
|
+
if (onSettle && isTerminal) onSettle();
|
|
950
|
+
};
|
|
951
|
+
return (rawPhase, step) => {
|
|
952
|
+
const cb = (finished) => {
|
|
953
|
+
"worklet";
|
|
954
|
+
Animated.runOnJS(dispatch)(rawPhase, step, !!finished, sharedValue.value);
|
|
955
|
+
};
|
|
956
|
+
return cb;
|
|
957
|
+
};
|
|
958
|
+
}
|
|
959
|
+
function shadowOffsetAxisFor(key) {
|
|
960
|
+
return key === "shadowOffsetWidth" ? "width" : "height";
|
|
961
|
+
}
|
|
962
|
+
function shadowOffsetAxisValue(source, axis) {
|
|
963
|
+
return source?.[axis];
|
|
964
|
+
}
|
|
965
|
+
function collectTouchedKeys(touched, record) {
|
|
966
|
+
for (const k of ALL_KEYS) {
|
|
967
|
+
if (k in record) touched.add(k);
|
|
968
|
+
}
|
|
969
|
+
if ("shadowOffset" in record && record.shadowOffset) {
|
|
970
|
+
const so = record.shadowOffset;
|
|
971
|
+
if (so.width !== void 0) touched.add("shadowOffsetWidth");
|
|
972
|
+
if (so.height !== void 0) touched.add("shadowOffsetHeight");
|
|
973
|
+
}
|
|
974
|
+
}
|
|
975
|
+
function stepCountOf(v) {
|
|
976
|
+
if (Array.isArray(v)) return v.length;
|
|
977
|
+
return 1;
|
|
978
|
+
}
|
|
979
|
+
function totalIterationsOf(cfg) {
|
|
980
|
+
if (!cfg || cfg.type === "no-animation" || cfg.type === "decay") return 1;
|
|
981
|
+
const r = cfg.repeat;
|
|
982
|
+
if (r === void 0) return 1;
|
|
983
|
+
if (r === "infinite") return Number.POSITIVE_INFINITY;
|
|
984
|
+
if (typeof r === "number") return r;
|
|
985
|
+
if (r.count === "infinite") return Number.POSITIVE_INFINITY;
|
|
986
|
+
return r.count;
|
|
987
|
+
}
|
|
988
|
+
function targetEndValue(v) {
|
|
989
|
+
if (v === void 0) return void 0;
|
|
990
|
+
if (typeof v === "number" || typeof v === "string") return v;
|
|
991
|
+
if (Array.isArray(v)) {
|
|
992
|
+
return v.length > 0 ? targetEndValue(v[v.length - 1]) : void 0;
|
|
993
|
+
}
|
|
994
|
+
if (typeof v === "object" && v !== null && "to" in v) {
|
|
995
|
+
const to = v.to;
|
|
996
|
+
return typeof to === "number" || typeof to === "string" ? to : void 0;
|
|
997
|
+
}
|
|
998
|
+
return void 0;
|
|
999
|
+
}
|
|
1000
|
+
function useControllerKey(controller) {
|
|
1001
|
+
const [, setTick] = react.useState(0);
|
|
1002
|
+
react.useEffect(() => {
|
|
1003
|
+
if (!controller) return;
|
|
1004
|
+
const unsub = controller.subscribe(() => setTick((n) => n + 1));
|
|
1005
|
+
return unsub;
|
|
1006
|
+
}, [controller]);
|
|
1007
|
+
return controller?.current;
|
|
1008
|
+
}
|
|
1009
|
+
function resolveAnimateInput(animate, variants, controllerKey) {
|
|
1010
|
+
if (controllerKey !== void 0 && variants && controllerKey in variants) {
|
|
1011
|
+
return variants[controllerKey];
|
|
1012
|
+
}
|
|
1013
|
+
if (typeof animate === "string") {
|
|
1014
|
+
if (variants && animate in variants) return variants[animate];
|
|
1015
|
+
if (__DEV__) {
|
|
1016
|
+
console.warn(
|
|
1017
|
+
`[inertia] animate="${animate}" but no matching variant. Did you forget to pass \`variants\`?`
|
|
1018
|
+
);
|
|
1019
|
+
}
|
|
1020
|
+
return void 0;
|
|
1021
|
+
}
|
|
1022
|
+
return animate;
|
|
1023
|
+
}
|
|
1024
|
+
function restValue(v) {
|
|
1025
|
+
if (v === void 0) return void 0;
|
|
1026
|
+
if (typeof v === "number" || typeof v === "string") return v;
|
|
1027
|
+
if (Array.isArray(v)) {
|
|
1028
|
+
return v.length > 0 ? restValue(v[0]) : void 0;
|
|
1029
|
+
}
|
|
1030
|
+
if (typeof v === "object" && v !== null && "to" in v) {
|
|
1031
|
+
const to = v.to;
|
|
1032
|
+
return typeof to === "number" || typeof to === "string" ? to : void 0;
|
|
1033
|
+
}
|
|
1034
|
+
return void 0;
|
|
1035
|
+
}
|
|
1036
|
+
function resolveGestureLayers(gesture) {
|
|
1037
|
+
if (!gesture) return null;
|
|
1038
|
+
const out = {};
|
|
1039
|
+
for (const layer of GESTURE_LAYER_NAMES) {
|
|
1040
|
+
const subState = gesture[layer];
|
|
1041
|
+
if (!subState) continue;
|
|
1042
|
+
const resolved = {};
|
|
1043
|
+
for (const key of ALL_KEYS) {
|
|
1044
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
1045
|
+
const axis = shadowOffsetAxisFor(key);
|
|
1046
|
+
const so = subState.shadowOffset;
|
|
1047
|
+
const v = shadowOffsetAxisValue(so, axis);
|
|
1048
|
+
if (v !== void 0) resolved[key] = v;
|
|
1049
|
+
continue;
|
|
1050
|
+
}
|
|
1051
|
+
const raw = subState[key];
|
|
1052
|
+
if (raw === void 0) continue;
|
|
1053
|
+
const t = targetEndValue(raw);
|
|
1054
|
+
if (t !== void 0) resolved[key] = t;
|
|
1055
|
+
}
|
|
1056
|
+
out[layer] = resolved;
|
|
1057
|
+
}
|
|
1058
|
+
return out;
|
|
1059
|
+
}
|
|
1060
|
+
function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
|
|
1061
|
+
const layerCfgSig = stableSig(gestureLayerTransitionFor(layer, transition));
|
|
1062
|
+
react.useEffect(() => {
|
|
1063
|
+
if (!declared) return;
|
|
1064
|
+
if (isExiting) {
|
|
1065
|
+
progress.value = 0;
|
|
1066
|
+
return;
|
|
1067
|
+
}
|
|
1068
|
+
const target = active ? 1 : 0;
|
|
1069
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
|
|
1070
|
+
progress.value = resolveTransition(cfg, target);
|
|
1071
|
+
}, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
|
|
1072
|
+
}
|
|
1073
|
+
function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
|
|
1074
|
+
const hasPressed = gesture?.pressed ? 1 : 0;
|
|
1075
|
+
const hasFocused = gesture?.focused ? 1 : 0;
|
|
1076
|
+
const hasFocusVisible = gesture?.focusVisible ? 1 : 0;
|
|
1077
|
+
const hasHovered = gesture?.hovered ? 1 : 0;
|
|
1078
|
+
return react.useMemo(() => {
|
|
1079
|
+
if (!gesture) return {};
|
|
1080
|
+
const handlers = {};
|
|
1081
|
+
if (gesture.pressed) {
|
|
1082
|
+
handlers.onTouchStart = compose(rest.onTouchStart, () => setPressed(true));
|
|
1083
|
+
handlers.onTouchEnd = compose(rest.onTouchEnd, () => setPressed(false));
|
|
1084
|
+
handlers.onTouchCancel = compose(
|
|
1085
|
+
rest.onTouchCancel,
|
|
1086
|
+
() => setPressed(false)
|
|
1087
|
+
);
|
|
1088
|
+
handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
|
|
1089
|
+
handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
|
|
1090
|
+
}
|
|
1091
|
+
if (gesture.focused || gesture.focusVisible) {
|
|
1092
|
+
handlers.onFocus = compose(rest.onFocus, () => {
|
|
1093
|
+
if (gesture.focused) setFocused(true);
|
|
1094
|
+
if (gesture.focusVisible && isFocusVisible()) setFocusVisible(true);
|
|
1095
|
+
});
|
|
1096
|
+
handlers.onBlur = compose(rest.onBlur, () => {
|
|
1097
|
+
if (gesture.focused) setFocused(false);
|
|
1098
|
+
if (gesture.focusVisible) setFocusVisible(false);
|
|
1099
|
+
});
|
|
1100
|
+
}
|
|
1101
|
+
if (gesture.hovered) {
|
|
1102
|
+
handlers.onMouseEnter = compose(rest.onMouseEnter, () => setHovered(true));
|
|
1103
|
+
handlers.onMouseLeave = compose(
|
|
1104
|
+
rest.onMouseLeave,
|
|
1105
|
+
() => setHovered(false)
|
|
1106
|
+
);
|
|
1107
|
+
}
|
|
1108
|
+
return handlers;
|
|
1109
|
+
}, [
|
|
1110
|
+
hasPressed,
|
|
1111
|
+
hasFocused,
|
|
1112
|
+
hasFocusVisible,
|
|
1113
|
+
hasHovered,
|
|
1114
|
+
rest.onTouchStart,
|
|
1115
|
+
rest.onTouchEnd,
|
|
1116
|
+
rest.onTouchCancel,
|
|
1117
|
+
rest.onPressIn,
|
|
1118
|
+
rest.onPressOut,
|
|
1119
|
+
rest.onFocus,
|
|
1120
|
+
rest.onBlur,
|
|
1121
|
+
rest.onMouseEnter,
|
|
1122
|
+
rest.onMouseLeave
|
|
1123
|
+
]);
|
|
1124
|
+
}
|
|
1125
|
+
function compose(user, ours) {
|
|
1126
|
+
if (typeof user !== "function") return ours;
|
|
1127
|
+
return (event) => {
|
|
1128
|
+
user(event);
|
|
1129
|
+
ours(event);
|
|
1130
|
+
};
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
// src/motion/Pressable.tsx
|
|
1134
|
+
var MotionPressable = createMotionComponent(reactNative.Pressable);
|
|
1135
|
+
|
|
1136
|
+
exports.MotionPressable = MotionPressable;
|
|
1137
|
+
//# sourceMappingURL=Pressable.js.map
|
|
1138
|
+
//# sourceMappingURL=Pressable.js.map
|