@rootnative/inertia 0.0.4 → 0.0.5
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 +52 -1
- package/README.md +5 -1
- package/dist/{chunk-NAOXQJ7U.mjs → chunk-27MKBTSG.mjs} +1 -1
- package/dist/{chunk-CENTULW6.js → chunk-27U6766G.js} +2 -2
- package/dist/{chunk-D5KAHWMC.js → chunk-4NAMD62I.js} +7 -7
- package/dist/chunk-67GHRCF6.js +8 -0
- package/dist/{chunk-4ASOELLA.mjs → chunk-COEJVWRZ.mjs} +1 -1
- package/dist/chunk-GPOMFIIU.js +8 -0
- package/dist/{chunk-YKGY22SB.mjs → chunk-GTJ6VAH5.mjs} +1 -1
- package/dist/chunk-K63LXGKS.js +8 -0
- package/dist/{chunk-RF7J5FRM.mjs → chunk-OAUWLPQH.mjs} +1 -1
- package/dist/{chunk-WVRCKOPO.js → chunk-OBRGJAST.js} +3 -3
- package/dist/{chunk-K3CLP74S.mjs → chunk-OW5XTGVN.mjs} +2 -2
- package/dist/{chunk-7A6WTXNK.js → chunk-PM6CVGXJ.js} +1 -0
- package/dist/{chunk-XMEVPEMH.js → chunk-QQVDZKSD.js} +2 -2
- package/dist/{chunk-TU2XFPAK.mjs → chunk-REYL77RE.mjs} +1 -0
- package/dist/{chunk-55W7BNO2.mjs → chunk-RIVVBABB.mjs} +130 -59
- package/dist/{chunk-MYE5NMXW.js → chunk-VQ5D35UA.js} +154 -83
- package/dist/{chunk-J5Q46OPW.mjs → chunk-XSK5MNUH.mjs} +1 -1
- package/dist/{chunk-QKC3APP4.mjs → chunk-Z3HCJ43H.mjs} +1 -1
- package/dist/gestureLayer/index.d.mts +2 -2
- package/dist/gestureLayer/index.d.ts +2 -2
- package/dist/gestureLayer/index.js +10 -10
- package/dist/gestureLayer/index.mjs +3 -3
- package/dist/index.d.mts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +48 -48
- package/dist/index.mjs +17 -17
- package/dist/motion/Image.d.mts +1 -1
- package/dist/motion/Image.d.ts +1 -1
- package/dist/motion/Image.js +5 -5
- package/dist/motion/Image.mjs +4 -4
- package/dist/motion/Pressable.d.mts +1 -1
- package/dist/motion/Pressable.d.ts +1 -1
- package/dist/motion/Pressable.js +5 -5
- package/dist/motion/Pressable.mjs +4 -4
- package/dist/motion/ScrollView.d.mts +1 -1
- package/dist/motion/ScrollView.d.ts +1 -1
- package/dist/motion/ScrollView.js +5 -5
- package/dist/motion/ScrollView.mjs +4 -4
- package/dist/motion/Text.d.mts +1 -1
- package/dist/motion/Text.d.ts +1 -1
- package/dist/motion/Text.js +5 -5
- package/dist/motion/Text.mjs +4 -4
- package/dist/motion/View.d.mts +1 -1
- package/dist/motion/View.d.ts +1 -1
- package/dist/motion/View.js +5 -5
- package/dist/motion/View.mjs +4 -4
- package/dist/touch/index.d.mts +1 -1
- package/dist/touch/index.d.ts +1 -1
- package/dist/touch/index.js +3 -3
- package/dist/touch/index.mjs +1 -1
- package/dist/{types-37pN82yh.d.mts → types-BQgLJeQG.d.mts} +39 -3
- package/dist/{types-37pN82yh.d.ts → types-BQgLJeQG.d.ts} +39 -3
- package/dist/{useGesture-Cl4uzZIr.d.ts → useGesture-B0_CzOUz.d.ts} +1 -1
- package/dist/{useGesture-_IKkS8Dv.d.mts → useGesture-DfaTx-3t.d.mts} +1 -1
- package/package.json +1 -1
- package/src/motion/createMotionComponent.tsx +145 -61
- package/src/transitions/resolveSequence.ts +12 -0
- package/src/types.ts +106 -3
- package/dist/chunk-5SRD2WCO.js +0 -8
- package/dist/chunk-TVFNJ25Z.js +0 -8
- package/dist/chunk-VLDIFL3F.js +0 -8
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
3
|
+
var chunkOBRGJAST_js = require('./chunk-OBRGJAST.js');
|
|
4
|
+
var chunkPM6CVGXJ_js = require('./chunk-PM6CVGXJ.js');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var Animated = require('react-native-reanimated');
|
|
@@ -310,14 +310,14 @@ function resolveLayoutTransition(layout) {
|
|
|
310
310
|
if (cfg.type === "no-animation") return void 0;
|
|
311
311
|
if (cfg.type === "timing") {
|
|
312
312
|
let builder2 = Animated.LinearTransition.duration(cfg.duration ?? 300);
|
|
313
|
-
const easing =
|
|
313
|
+
const easing = chunkPM6CVGXJ_js.ensureWorkletEasing(cfg.easing);
|
|
314
314
|
if (easing) builder2 = builder2.easing(easing);
|
|
315
315
|
if (cfg.delay) builder2 = builder2.delay(cfg.delay);
|
|
316
316
|
return builder2;
|
|
317
317
|
}
|
|
318
318
|
const spring = cfg.type === "decay" ? { type: "spring" } : cfg;
|
|
319
|
-
const { stiffness, damping, mass } =
|
|
320
|
-
...
|
|
319
|
+
const { stiffness, damping, mass } = chunkPM6CVGXJ_js.springToReanimated({
|
|
320
|
+
...chunkPM6CVGXJ_js.DEFAULT_SPRING,
|
|
321
321
|
...spring
|
|
322
322
|
});
|
|
323
323
|
let builder = Animated.LinearTransition.springify().stiffness(stiffness).damping(damping).mass(mass);
|
|
@@ -511,8 +511,8 @@ function legBuilder(transition) {
|
|
|
511
511
|
Animated.withTiming(to, { duration })
|
|
512
512
|
);
|
|
513
513
|
}
|
|
514
|
-
const springCfg = transition?.type === "spring" ? { ...
|
|
515
|
-
const springParams =
|
|
514
|
+
const springCfg = transition?.type === "spring" ? { ...chunkPM6CVGXJ_js.DEFAULT_SPRING, ...transition } : { type: "spring", ...chunkPM6CVGXJ_js.DEFAULT_SPRING };
|
|
515
|
+
const springParams = chunkPM6CVGXJ_js.springToReanimated(springCfg);
|
|
516
516
|
return (from, to) => Animated.withSequence(
|
|
517
517
|
Animated.withTiming(from, { duration: 0 }),
|
|
518
518
|
Animated.withSpring(to, springParams)
|
|
@@ -600,7 +600,79 @@ var NUMERIC_TOP_LEVEL_KEYS = [
|
|
|
600
600
|
"borderRadius",
|
|
601
601
|
"shadowOpacity",
|
|
602
602
|
"shadowRadius",
|
|
603
|
-
"elevation"
|
|
603
|
+
"elevation",
|
|
604
|
+
// ─── Added in 0.0.5 ──────────────────────────────────────────────────────
|
|
605
|
+
//
|
|
606
|
+
// Every key below rides the generic numeric path: one shared value, resolved
|
|
607
|
+
// on the JS thread, emitted by the worklet through the same `out[key] = v`
|
|
608
|
+
// branch as `opacity`. None needs a new interpolation mode, so the cost is
|
|
609
|
+
// the shared value plus a `DEFAULT_RESTING` entry.
|
|
610
|
+
//
|
|
611
|
+
// The load-bearing constraint is the resting default, not the plumbing. A
|
|
612
|
+
// key declared only in `gesture` / `exit` / a non-active variant rests at
|
|
613
|
+
// `DEFAULT_RESTING` unless the static `style` names it, and the animated
|
|
614
|
+
// style merges *after* `style` — so a non-identity default silently stomps
|
|
615
|
+
// the layout. That is the `0.0.3` P0 class, and it is why the sizing and
|
|
616
|
+
// spacing keys below default to `0` only in the sense RN itself does (an
|
|
617
|
+
// unset `padding` *is* 0); `minWidth`/`maxWidth`/`aspectRatio` are
|
|
618
|
+
// deliberately excluded — their "unset" is not a number, so no default can
|
|
619
|
+
// stand in for it without changing layout on activation.
|
|
620
|
+
//
|
|
621
|
+
// Per-corner radii. Animating one corner is common (a card expanding into a
|
|
622
|
+
// sheet keeps its top corners and squares off the bottom); `borderRadius`
|
|
623
|
+
// alone can't express it.
|
|
624
|
+
"borderTopLeftRadius",
|
|
625
|
+
"borderTopRightRadius",
|
|
626
|
+
"borderBottomLeftRadius",
|
|
627
|
+
"borderBottomRightRadius",
|
|
628
|
+
// Border widths. `borderWidth` is the common case; the per-edge keys matter
|
|
629
|
+
// for underline-style focus affordances (`borderBottomWidth` on a field).
|
|
630
|
+
"borderWidth",
|
|
631
|
+
"borderTopWidth",
|
|
632
|
+
"borderRightWidth",
|
|
633
|
+
"borderBottomWidth",
|
|
634
|
+
"borderLeftWidth",
|
|
635
|
+
// Absolute-position insets. Bread-and-butter for drawers, tooltips, and
|
|
636
|
+
// anything pinned to an edge that slides in.
|
|
637
|
+
"top",
|
|
638
|
+
"right",
|
|
639
|
+
"bottom",
|
|
640
|
+
"left",
|
|
641
|
+
// Spacing. Padding animates the box from the inside (a button growing its
|
|
642
|
+
// hit area on press); margin shifts it within its parent's flow.
|
|
643
|
+
"padding",
|
|
644
|
+
"paddingTop",
|
|
645
|
+
"paddingRight",
|
|
646
|
+
"paddingBottom",
|
|
647
|
+
"paddingLeft",
|
|
648
|
+
"paddingHorizontal",
|
|
649
|
+
"paddingVertical",
|
|
650
|
+
"margin",
|
|
651
|
+
"marginTop",
|
|
652
|
+
"marginRight",
|
|
653
|
+
"marginBottom",
|
|
654
|
+
"marginLeft",
|
|
655
|
+
"marginHorizontal",
|
|
656
|
+
"marginVertical",
|
|
657
|
+
// Flex sizing. `flex` / `flexGrow` interpolate the split between siblings —
|
|
658
|
+
// the idiomatic RN way to animate a pane resize without measuring.
|
|
659
|
+
"flex",
|
|
660
|
+
"flexGrow",
|
|
661
|
+
"flexShrink",
|
|
662
|
+
// Text metrics. `TextStyle`-only at the type level (`AnimateStyle<C>` gates
|
|
663
|
+
// them per primitive), but the runtime table is shared across primitives —
|
|
664
|
+
// an unused slot is one ref, same as `tintColor` has always been.
|
|
665
|
+
"fontSize",
|
|
666
|
+
"letterSpacing",
|
|
667
|
+
"lineHeight",
|
|
668
|
+
// Stacking. Integer-valued in practice, and interpolating it mid-flight is
|
|
669
|
+
// rarely what you want, but a `no-animation` transition on `zIndex` is the
|
|
670
|
+
// clean way to reorder at a step boundary in a sequence.
|
|
671
|
+
"zIndex",
|
|
672
|
+
// Gap. Row/column gaps animate a list's density without touching children.
|
|
673
|
+
"gap",
|
|
674
|
+
"rowGap",
|
|
675
|
+
"columnGap"
|
|
604
676
|
];
|
|
605
677
|
var COLOR_KEYS = [
|
|
606
678
|
"backgroundColor",
|
|
@@ -656,6 +728,54 @@ var DEFAULT_RESTING = {
|
|
|
656
728
|
shadowOpacity: 0,
|
|
657
729
|
shadowRadius: 0,
|
|
658
730
|
elevation: 0,
|
|
731
|
+
// 0.0.5 keys. Every one of these is 0 because that is RN's own unset value
|
|
732
|
+
// for it — an element with no `paddingTop` has 0 padding, no `borderWidth`
|
|
733
|
+
// has none, no `top` is unpinned at 0 within its positioning context. So a
|
|
734
|
+
// key that reaches its resting default lands where the element already was.
|
|
735
|
+
//
|
|
736
|
+
// The exception worth naming: `flex` / `flexGrow` / `flexShrink` do NOT have
|
|
737
|
+
// 0 as a universal identity (`flexShrink` defaults to 1 on the web, and RN's
|
|
738
|
+
// own default differs by axis). They are still 0 here, because the style-scan
|
|
739
|
+
// in the resting pass reads the real value off the static `style` whenever it
|
|
740
|
+
// is declared — and a consumer animating flex without declaring it is asking
|
|
741
|
+
// for the from-0 growth, which is the readable interpretation.
|
|
742
|
+
borderTopLeftRadius: 0,
|
|
743
|
+
borderTopRightRadius: 0,
|
|
744
|
+
borderBottomLeftRadius: 0,
|
|
745
|
+
borderBottomRightRadius: 0,
|
|
746
|
+
borderWidth: 0,
|
|
747
|
+
borderTopWidth: 0,
|
|
748
|
+
borderRightWidth: 0,
|
|
749
|
+
borderBottomWidth: 0,
|
|
750
|
+
borderLeftWidth: 0,
|
|
751
|
+
top: 0,
|
|
752
|
+
right: 0,
|
|
753
|
+
bottom: 0,
|
|
754
|
+
left: 0,
|
|
755
|
+
padding: 0,
|
|
756
|
+
paddingTop: 0,
|
|
757
|
+
paddingRight: 0,
|
|
758
|
+
paddingBottom: 0,
|
|
759
|
+
paddingLeft: 0,
|
|
760
|
+
paddingHorizontal: 0,
|
|
761
|
+
paddingVertical: 0,
|
|
762
|
+
margin: 0,
|
|
763
|
+
marginTop: 0,
|
|
764
|
+
marginRight: 0,
|
|
765
|
+
marginBottom: 0,
|
|
766
|
+
marginLeft: 0,
|
|
767
|
+
marginHorizontal: 0,
|
|
768
|
+
marginVertical: 0,
|
|
769
|
+
flex: 0,
|
|
770
|
+
flexGrow: 0,
|
|
771
|
+
flexShrink: 0,
|
|
772
|
+
fontSize: 0,
|
|
773
|
+
letterSpacing: 0,
|
|
774
|
+
lineHeight: 0,
|
|
775
|
+
zIndex: 0,
|
|
776
|
+
gap: 0,
|
|
777
|
+
rowGap: 0,
|
|
778
|
+
columnGap: 0,
|
|
659
779
|
// 'transparent' is the only safe universal default for colors: it works as
|
|
660
780
|
// an initial seed for any color animation (no jarring opaque flash on mount
|
|
661
781
|
// when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
|
|
@@ -672,14 +792,14 @@ var DEFAULT_RESTING = {
|
|
|
672
792
|
function transitionFor(prop, transition) {
|
|
673
793
|
if (!transition) return void 0;
|
|
674
794
|
if (typeof transition === "string") return void 0;
|
|
675
|
-
if (
|
|
795
|
+
if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
|
|
676
796
|
if (GESTURE_LAYER_NAME_SET.has(prop)) return void 0;
|
|
677
797
|
return transition[prop];
|
|
678
798
|
}
|
|
679
799
|
function gestureLayerTransitionFor(layer, transition) {
|
|
680
800
|
if (!transition) return void 0;
|
|
681
801
|
if (typeof transition === "string") return void 0;
|
|
682
|
-
if (
|
|
802
|
+
if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
|
|
683
803
|
return transition[layer];
|
|
684
804
|
}
|
|
685
805
|
function createMotionComponent(Component) {
|
|
@@ -729,12 +849,12 @@ function createMotionComponent(Component) {
|
|
|
729
849
|
onLayout: userOnLayout,
|
|
730
850
|
...rest
|
|
731
851
|
} = props;
|
|
732
|
-
const namedTransitions =
|
|
733
|
-
const transition =
|
|
852
|
+
const namedTransitions = chunkOBRGJAST_js.useNamedTransitions();
|
|
853
|
+
const transition = chunkOBRGJAST_js.resolveNamedTransitionProp(
|
|
734
854
|
transitionProp,
|
|
735
855
|
namedTransitions
|
|
736
856
|
);
|
|
737
|
-
const layout = typeof layoutProp === "string" ?
|
|
857
|
+
const layout = typeof layoutProp === "string" ? chunkOBRGJAST_js.lookupNamedTransition(layoutProp, namedTransitions) : layoutProp;
|
|
738
858
|
if (__DEV__ && typeof style === "function") {
|
|
739
859
|
throw new Error(
|
|
740
860
|
"[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."
|
|
@@ -742,7 +862,7 @@ function createMotionComponent(Component) {
|
|
|
742
862
|
}
|
|
743
863
|
const presence = usePresence();
|
|
744
864
|
const isExiting = presence !== null && presence.isPresent === false;
|
|
745
|
-
const shouldReduceMotion =
|
|
865
|
+
const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
|
|
746
866
|
const onAnimationEndRef = react.useRef(onAnimationEnd);
|
|
747
867
|
onAnimationEndRef.current = onAnimationEnd;
|
|
748
868
|
const variantKey = useControllerKey(controller);
|
|
@@ -826,7 +946,7 @@ function createMotionComponent(Component) {
|
|
|
826
946
|
if (__DEV__ && hasBoxShadowRef.current && activeKeysRef.current.some(
|
|
827
947
|
(k) => k !== "boxShadow" && k.startsWith("shadow")
|
|
828
948
|
)) {
|
|
829
|
-
|
|
949
|
+
chunkPM6CVGXJ_js.warnOnce(
|
|
830
950
|
"boxShadow-with-native-shadow",
|
|
831
951
|
"[inertia] `boxShadow` is animated alongside the native `shadow*` keys on the same element, which applies two shadow systems at once. Pick one: `boxShadow` for the cross-platform CSS form, or the native `shadow*` keys."
|
|
832
952
|
);
|
|
@@ -889,7 +1009,7 @@ function createMotionComponent(Component) {
|
|
|
889
1009
|
const boxShadowInsets = Animated.useSharedValue(
|
|
890
1010
|
boxShadowSeedRef.current.insets
|
|
891
1011
|
);
|
|
892
|
-
const styleRestingSig =
|
|
1012
|
+
const styleRestingSig = chunkPM6CVGXJ_js.stableSig(styleResting);
|
|
893
1013
|
react.useEffect(() => {
|
|
894
1014
|
for (const key of activeKeysRef.current) {
|
|
895
1015
|
if (everDrivenRef.current.has(key)) continue;
|
|
@@ -917,13 +1037,13 @@ function createMotionComponent(Component) {
|
|
|
917
1037
|
const gestureSV = Animated.useSharedValue(
|
|
918
1038
|
resolveGestureLayers(gesture)
|
|
919
1039
|
);
|
|
920
|
-
const gestureTargetsSig =
|
|
1040
|
+
const gestureTargetsSig = chunkPM6CVGXJ_js.stableSig(gesture);
|
|
921
1041
|
react.useEffect(() => {
|
|
922
1042
|
gestureSV.value = resolveGestureLayers(gesture);
|
|
923
1043
|
}, [gestureTargetsSig]);
|
|
924
1044
|
const baseRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : animateRecord;
|
|
925
|
-
const baseSig =
|
|
926
|
-
const transitionSig =
|
|
1045
|
+
const baseSig = chunkPM6CVGXJ_js.stableSig(baseRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
|
|
1046
|
+
const transitionSig = chunkPM6CVGXJ_js.stableSig(transition);
|
|
927
1047
|
const safeToRemoveRef = react.useRef(void 0);
|
|
928
1048
|
safeToRemoveRef.current = presence?.safeToRemove;
|
|
929
1049
|
react.useEffect(() => {
|
|
@@ -996,7 +1116,7 @@ function createMotionComponent(Component) {
|
|
|
996
1116
|
isExiting ? onSettle : void 0,
|
|
997
1117
|
TRANSFORM_KEY_SET.has(key) ? transformGroup : void 0
|
|
998
1118
|
);
|
|
999
|
-
sharedValues[key].value =
|
|
1119
|
+
sharedValues[key].value = chunkPM6CVGXJ_js.resolveAnimatableValue(
|
|
1000
1120
|
target,
|
|
1001
1121
|
cfg,
|
|
1002
1122
|
factory
|
|
@@ -1058,7 +1178,7 @@ function createMotionComponent(Component) {
|
|
|
1058
1178
|
const sharedLayout = useSharedLayout({
|
|
1059
1179
|
layoutId,
|
|
1060
1180
|
userRef: ref,
|
|
1061
|
-
transition:
|
|
1181
|
+
transition: chunkPM6CVGXJ_js.isTopLevelTransition(transition) ? transition : void 0,
|
|
1062
1182
|
shouldReduceMotion,
|
|
1063
1183
|
userOnLayout,
|
|
1064
1184
|
readStyles: readSharedStyles
|
|
@@ -1160,7 +1280,7 @@ function createMotionComponent(Component) {
|
|
|
1160
1280
|
setFocusVisible,
|
|
1161
1281
|
setHovered
|
|
1162
1282
|
);
|
|
1163
|
-
const layoutSig =
|
|
1283
|
+
const layoutSig = chunkPM6CVGXJ_js.stableSig(layout);
|
|
1164
1284
|
const layoutTransition = react.useMemo(
|
|
1165
1285
|
() => shouldReduceMotion ? void 0 : resolveLayoutTransition(layout),
|
|
1166
1286
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -1208,64 +1328,15 @@ function hasMotionProps(props) {
|
|
|
1208
1328
|
return false;
|
|
1209
1329
|
}
|
|
1210
1330
|
function useAnimatableSharedValues(init) {
|
|
1211
|
-
const
|
|
1212
|
-
const
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
const scaleY = Animated.useSharedValue(init("scaleY"));
|
|
1216
|
-
const rotate = Animated.useSharedValue(init("rotate"));
|
|
1217
|
-
const rotateX = Animated.useSharedValue(init("rotateX"));
|
|
1218
|
-
const rotateY = Animated.useSharedValue(init("rotateY"));
|
|
1219
|
-
const opacity = Animated.useSharedValue(init("opacity"));
|
|
1220
|
-
const width = Animated.useSharedValue(init("width"));
|
|
1221
|
-
const height = Animated.useSharedValue(init("height"));
|
|
1222
|
-
const borderRadius = Animated.useSharedValue(init("borderRadius"));
|
|
1223
|
-
const shadowOpacity = Animated.useSharedValue(
|
|
1224
|
-
init("shadowOpacity")
|
|
1225
|
-
);
|
|
1226
|
-
const shadowRadius = Animated.useSharedValue(init("shadowRadius"));
|
|
1227
|
-
const elevation = Animated.useSharedValue(init("elevation"));
|
|
1228
|
-
const backgroundColor = Animated.useSharedValue(
|
|
1229
|
-
init("backgroundColor")
|
|
1230
|
-
);
|
|
1231
|
-
const borderColor = Animated.useSharedValue(init("borderColor"));
|
|
1232
|
-
const color = Animated.useSharedValue(init("color"));
|
|
1233
|
-
const tintColor = Animated.useSharedValue(init("tintColor"));
|
|
1234
|
-
const shadowColor = Animated.useSharedValue(init("shadowColor"));
|
|
1235
|
-
const shadowOffsetWidth = Animated.useSharedValue(
|
|
1236
|
-
init("shadowOffsetWidth")
|
|
1237
|
-
);
|
|
1238
|
-
const shadowOffsetHeight = Animated.useSharedValue(
|
|
1239
|
-
init("shadowOffsetHeight")
|
|
1240
|
-
);
|
|
1241
|
-
const boxShadow = Animated.useSharedValue(init("boxShadow"));
|
|
1331
|
+
const entries = [];
|
|
1332
|
+
for (const key of ALL_KEYS) {
|
|
1333
|
+
entries.push([key, Animated.useSharedValue(init(key))]);
|
|
1334
|
+
}
|
|
1242
1335
|
const ref = react.useRef(null);
|
|
1243
1336
|
if (ref.current === null) {
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
scale,
|
|
1248
|
-
scaleX,
|
|
1249
|
-
scaleY,
|
|
1250
|
-
rotate,
|
|
1251
|
-
rotateX,
|
|
1252
|
-
rotateY,
|
|
1253
|
-
opacity,
|
|
1254
|
-
width,
|
|
1255
|
-
height,
|
|
1256
|
-
borderRadius,
|
|
1257
|
-
shadowOpacity,
|
|
1258
|
-
shadowRadius,
|
|
1259
|
-
elevation,
|
|
1260
|
-
backgroundColor,
|
|
1261
|
-
borderColor,
|
|
1262
|
-
color,
|
|
1263
|
-
tintColor,
|
|
1264
|
-
shadowColor,
|
|
1265
|
-
shadowOffsetWidth,
|
|
1266
|
-
shadowOffsetHeight,
|
|
1267
|
-
boxShadow
|
|
1268
|
-
};
|
|
1337
|
+
const map2 = {};
|
|
1338
|
+
for (const [key, sv] of entries) map2[key] = sv;
|
|
1339
|
+
ref.current = map2;
|
|
1269
1340
|
}
|
|
1270
1341
|
const map = ref.current;
|
|
1271
1342
|
react.useEffect(
|
|
@@ -1357,7 +1428,7 @@ function driveBoxShadow(slot, insetSlot, target, cfg, factory) {
|
|
|
1357
1428
|
);
|
|
1358
1429
|
insetSlot.value = insets;
|
|
1359
1430
|
if (from.length !== currentLayers.length) slot.value = from;
|
|
1360
|
-
slot.value =
|
|
1431
|
+
slot.value = chunkPM6CVGXJ_js.resolveTransition(
|
|
1361
1432
|
cfg,
|
|
1362
1433
|
to,
|
|
1363
1434
|
factory?.("animation", void 0)
|
|
@@ -1481,7 +1552,7 @@ function resolveGestureLayers(gesture) {
|
|
|
1481
1552
|
for (const key of ALL_KEYS) {
|
|
1482
1553
|
if (STRUCTURED_KEY_SET.has(key)) {
|
|
1483
1554
|
if (__DEV__ && subState[key] !== void 0) {
|
|
1484
|
-
|
|
1555
|
+
chunkPM6CVGXJ_js.warnOnce(
|
|
1485
1556
|
`gesture-structured-${layer}-${key}`,
|
|
1486
1557
|
`[inertia] \`${key}\` is not supported inside \`gesture.${layer}\` and will be ignored. Drive it from \`animate\` (optionally via a variant keyed off the same state), or interpolate it yourself with \`useShadow\`.`
|
|
1487
1558
|
);
|
|
@@ -1505,7 +1576,7 @@ function resolveGestureLayers(gesture) {
|
|
|
1505
1576
|
return out;
|
|
1506
1577
|
}
|
|
1507
1578
|
function useGestureLayerProgress(progress, active, declared, layer, transition, isExiting, shouldReduceMotion) {
|
|
1508
|
-
const layerCfgSig =
|
|
1579
|
+
const layerCfgSig = chunkPM6CVGXJ_js.stableSig(gestureLayerTransitionFor(layer, transition));
|
|
1509
1580
|
react.useEffect(() => {
|
|
1510
1581
|
if (!declared) return;
|
|
1511
1582
|
if (isExiting) {
|
|
@@ -1514,7 +1585,7 @@ function useGestureLayerProgress(progress, active, declared, layer, transition,
|
|
|
1514
1585
|
}
|
|
1515
1586
|
const target = active ? 1 : 0;
|
|
1516
1587
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : gestureLayerTransitionFor(layer, transition) ?? { type: "spring" };
|
|
1517
|
-
progress.value =
|
|
1588
|
+
progress.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
|
|
1518
1589
|
}, [active, declared, isExiting, shouldReduceMotion, layerCfgSig]);
|
|
1519
1590
|
}
|
|
1520
1591
|
function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
|
|
@@ -1538,7 +1609,7 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisib
|
|
|
1538
1609
|
if (gesture.focused || gesture.focusVisible) {
|
|
1539
1610
|
handlers.onFocus = compose(rest.onFocus, () => {
|
|
1540
1611
|
if (gesture.focused) setFocused(true);
|
|
1541
|
-
if (gesture.focusVisible &&
|
|
1612
|
+
if (gesture.focusVisible && chunkOBRGJAST_js.isFocusVisible()) setFocusVisible(true);
|
|
1542
1613
|
});
|
|
1543
1614
|
handlers.onBlur = compose(rest.onBlur, () => {
|
|
1544
1615
|
if (gesture.focused) setFocused(false);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { stableSig, isTopLevelTransition } from './chunk-
|
|
1
|
+
import { stableSig, isTopLevelTransition } from './chunk-REYL77RE.mjs';
|
|
2
2
|
import { createContext, useContext, useMemo } from 'react';
|
|
3
3
|
import { useReducedMotion } from 'react-native-reanimated';
|
|
4
4
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
2
|
-
import { U as UseGestureHandlers } from '../useGesture-
|
|
3
|
-
import { a as TransitionInput, G as GestureLayerTransitions } from '../types-
|
|
2
|
+
import { U as UseGestureHandlers } from '../useGesture-DfaTx-3t.mjs';
|
|
3
|
+
import { a as TransitionInput, G as GestureLayerTransitions } from '../types-BQgLJeQG.mjs';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-native';
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SharedValue, AnimatedStyle } from 'react-native-reanimated';
|
|
2
|
-
import { U as UseGestureHandlers } from '../useGesture-
|
|
3
|
-
import { a as TransitionInput, G as GestureLayerTransitions } from '../types-
|
|
2
|
+
import { U as UseGestureHandlers } from '../useGesture-B0_CzOUz.js';
|
|
3
|
+
import { a as TransitionInput, G as GestureLayerTransitions } from '../types-BQgLJeQG.js';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'react-native';
|
|
6
6
|
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var chunk4NAMD62I_js = require('../chunk-4NAMD62I.js');
|
|
4
|
+
var chunkOBRGJAST_js = require('../chunk-OBRGJAST.js');
|
|
5
|
+
var chunkPM6CVGXJ_js = require('../chunk-PM6CVGXJ.js');
|
|
6
6
|
var react = require('react');
|
|
7
7
|
var reactNativeReanimated = require('react-native-reanimated');
|
|
8
8
|
|
|
9
9
|
function useGestureLayer(states, options = {}) {
|
|
10
10
|
const { disabled: isDisabled = false, transition: transitionInput } = options;
|
|
11
|
-
const shouldReduceMotion =
|
|
12
|
-
const transition =
|
|
11
|
+
const shouldReduceMotion = chunkOBRGJAST_js.useShouldReduceMotion();
|
|
12
|
+
const transition = chunkOBRGJAST_js.resolveNamedTransitionProp(
|
|
13
13
|
transitionInput,
|
|
14
|
-
|
|
14
|
+
chunkOBRGJAST_js.useNamedTransitions()
|
|
15
15
|
);
|
|
16
|
-
const gesture =
|
|
16
|
+
const gesture = chunk4NAMD62I_js.useGesture(transition);
|
|
17
17
|
const disabledProgress = reactNativeReanimated.useSharedValue(0);
|
|
18
|
-
const transitionSig =
|
|
18
|
+
const transitionSig = chunkPM6CVGXJ_js.stableSig(transition);
|
|
19
19
|
react.useEffect(() => {
|
|
20
20
|
const target = isDisabled ? 1 : 0;
|
|
21
21
|
const cfg = shouldReduceMotion ? { type: "no-animation" } : disabledTransition(transition) ?? { type: "spring" };
|
|
22
|
-
disabledProgress.value =
|
|
22
|
+
disabledProgress.value = chunkPM6CVGXJ_js.resolveTransition(cfg, target);
|
|
23
23
|
}, [isDisabled, shouldReduceMotion, transitionSig, disabledProgress]);
|
|
24
24
|
const meta = react.useMemo(() => {
|
|
25
25
|
const layers = {
|
|
@@ -154,7 +154,7 @@ function useGestureLayer(states, options = {}) {
|
|
|
154
154
|
}
|
|
155
155
|
function disabledTransition(transition) {
|
|
156
156
|
if (!transition) return void 0;
|
|
157
|
-
if (
|
|
157
|
+
if (chunkPM6CVGXJ_js.isTopLevelTransition(transition)) return transition;
|
|
158
158
|
return void 0;
|
|
159
159
|
}
|
|
160
160
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useGesture } from '../chunk-
|
|
2
|
-
import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-
|
|
3
|
-
import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-
|
|
1
|
+
import { useGesture } from '../chunk-OW5XTGVN.mjs';
|
|
2
|
+
import { useShouldReduceMotion, resolveNamedTransitionProp, useNamedTransitions } from '../chunk-Z3HCJ43H.mjs';
|
|
3
|
+
import { stableSig, resolveTransition, isTopLevelTransition } from '../chunk-REYL77RE.mjs';
|
|
4
4
|
import { useEffect, useMemo } from 'react';
|
|
5
5
|
import { useSharedValue, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
|
|
6
6
|
|
package/dist/index.d.mts
CHANGED
|
@@ -2,11 +2,11 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
|
-
import { M as MotionComponent, N as NamedTransitions, a as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-
|
|
6
|
-
export { c as AnimateStyle, d as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, g as GestureSubStates, h as MotionProps, i as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, j as RepeatConfig, k as SequenceStep, l as TimingTransition, m as Transition, n as VariantsMap } from './types-
|
|
5
|
+
import { M as MotionComponent, N as NamedTransitions, a as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-BQgLJeQG.mjs';
|
|
6
|
+
export { c as AnimateStyle, d as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, g as GestureSubStates, h as MotionProps, i as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, j as RepeatConfig, k as SequenceStep, l as TimingTransition, m as Transition, n as VariantsMap } from './types-BQgLJeQG.mjs';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
8
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
9
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-DfaTx-3t.mjs';
|
|
10
10
|
export { MotionImage } from './motion/Image.mjs';
|
|
11
11
|
export { MotionPressable } from './motion/Pressable.mjs';
|
|
12
12
|
export { MotionScrollView } from './motion/ScrollView.mjs';
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,11 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentType, ReactNode } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
4
|
import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
|
|
5
|
-
import { M as MotionComponent, N as NamedTransitions, a as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-
|
|
6
|
-
export { c as AnimateStyle, d as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, g as GestureSubStates, h as MotionProps, i as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, j as RepeatConfig, k as SequenceStep, l as TimingTransition, m as Transition, n as VariantsMap } from './types-
|
|
5
|
+
import { M as MotionComponent, N as NamedTransitions, a as TransitionInput, T as TransitionConfig, A as AnimatableValue, E as EasingInput, S as SpringTransition, b as TransitionName, V as VariantController } from './types-BQgLJeQG.js';
|
|
6
|
+
export { c as AnimateStyle, d as AnimationCallbackInfo, B as BoxShadowInput, D as DecayTransition, e as EasingFunction, f as EasingFunctionFactory, g as GestureSubStates, h as MotionProps, i as NoAnimationTransition, P as PerPropertyTransition, R as RegisteredTransitions, j as RepeatConfig, k as SequenceStep, l as TimingTransition, m as Transition, n as VariantsMap } from './types-BQgLJeQG.js';
|
|
7
7
|
import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
|
|
8
8
|
export { SharedValue } from 'react-native-reanimated';
|
|
9
|
-
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-
|
|
9
|
+
export { U as UseGestureHandlers, a as UseGestureResult, u as useGesture } from './useGesture-B0_CzOUz.js';
|
|
10
10
|
export { MotionImage } from './motion/Image.js';
|
|
11
11
|
export { MotionPressable } from './motion/Pressable.js';
|
|
12
12
|
export { MotionScrollView } from './motion/ScrollView.js';
|