@onlynative/inertia 0.0.1-alpha.4 → 0.0.1-alpha.6
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/dist/index.d.mts +30 -4
- package/dist/index.d.ts +30 -4
- package/dist/index.js +123 -24
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +123 -25
- package/dist/index.mjs.map +1 -1
- package/dist/motion/Image.d.mts +1 -1
- package/dist/motion/Image.d.ts +1 -1
- package/dist/motion/Image.js +100 -24
- package/dist/motion/Image.js.map +1 -1
- package/dist/motion/Image.mjs +100 -24
- package/dist/motion/Image.mjs.map +1 -1
- package/dist/motion/Pressable.d.mts +1 -1
- package/dist/motion/Pressable.d.ts +1 -1
- package/dist/motion/Pressable.js +100 -24
- package/dist/motion/Pressable.js.map +1 -1
- package/dist/motion/Pressable.mjs +100 -24
- package/dist/motion/Pressable.mjs.map +1 -1
- package/dist/motion/ScrollView.d.mts +1 -1
- package/dist/motion/ScrollView.d.ts +1 -1
- package/dist/motion/ScrollView.js +100 -24
- package/dist/motion/ScrollView.js.map +1 -1
- package/dist/motion/ScrollView.mjs +100 -24
- package/dist/motion/ScrollView.mjs.map +1 -1
- package/dist/motion/Text.d.mts +1 -1
- package/dist/motion/Text.d.ts +1 -1
- package/dist/motion/Text.js +100 -24
- package/dist/motion/Text.js.map +1 -1
- package/dist/motion/Text.mjs +100 -24
- package/dist/motion/Text.mjs.map +1 -1
- package/dist/motion/View.d.mts +1 -1
- package/dist/motion/View.d.ts +1 -1
- package/dist/motion/View.js +100 -24
- package/dist/motion/View.js.map +1 -1
- package/dist/motion/View.mjs +100 -24
- package/dist/motion/View.mjs.map +1 -1
- package/dist/{types-CjztO3RW.d.mts → types-NmNeJjo1.d.mts} +23 -2
- package/dist/{types-CjztO3RW.d.ts → types-NmNeJjo1.d.ts} +23 -2
- package/jest-preset.js +33 -0
- package/jest-setup.js +209 -0
- package/package.json +5 -1
- package/src/index.ts +1 -0
- package/src/motion/createMotionComponent.tsx +172 -26
- package/src/transitions/easing.ts +25 -3
- package/src/transitions/index.ts +1 -0
- package/src/transitions/runtime.ts +63 -0
- package/src/transitions/spring.ts +1 -0
- package/src/types.ts +23 -1
package/dist/motion/Image.d.mts
CHANGED
package/dist/motion/Image.d.ts
CHANGED
package/dist/motion/Image.js
CHANGED
|
@@ -1451,13 +1451,17 @@ if (globalThis._ALWAYS_FALSE) {
|
|
|
1451
1451
|
// src/transitions/easing.ts
|
|
1452
1452
|
function ensureWorkletEasing(easing) {
|
|
1453
1453
|
if (!easing) return void 0;
|
|
1454
|
-
|
|
1454
|
+
const fn = isEasingFactory(easing) ? easing.factory() : easing;
|
|
1455
|
+
if (isWorkletFunction(fn)) return fn;
|
|
1455
1456
|
const wrapped = (t) => {
|
|
1456
1457
|
"worklet";
|
|
1457
|
-
return
|
|
1458
|
+
return fn(t);
|
|
1458
1459
|
};
|
|
1459
1460
|
return wrapped;
|
|
1460
1461
|
}
|
|
1462
|
+
function isEasingFactory(value) {
|
|
1463
|
+
return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
|
|
1464
|
+
}
|
|
1461
1465
|
|
|
1462
1466
|
// src/transitions/spring.ts
|
|
1463
1467
|
var DEFAULT_SPRING = {
|
|
@@ -1466,6 +1470,7 @@ var DEFAULT_SPRING = {
|
|
|
1466
1470
|
mass: 1
|
|
1467
1471
|
};
|
|
1468
1472
|
function springToReanimated(t) {
|
|
1473
|
+
"worklet";
|
|
1469
1474
|
return {
|
|
1470
1475
|
stiffness: t.tension ?? DEFAULT_SPRING.tension,
|
|
1471
1476
|
damping: t.friction ?? DEFAULT_SPRING.friction,
|
|
@@ -1700,21 +1705,28 @@ var NUMERIC_TOP_LEVEL_KEYS = [
|
|
|
1700
1705
|
"opacity",
|
|
1701
1706
|
"width",
|
|
1702
1707
|
"height",
|
|
1703
|
-
"borderRadius"
|
|
1708
|
+
"borderRadius",
|
|
1709
|
+
"shadowOpacity",
|
|
1710
|
+
"shadowRadius",
|
|
1711
|
+
"elevation"
|
|
1704
1712
|
];
|
|
1705
1713
|
var COLOR_KEYS = [
|
|
1706
1714
|
"backgroundColor",
|
|
1707
1715
|
"borderColor",
|
|
1708
1716
|
"color",
|
|
1709
|
-
"tintColor"
|
|
1717
|
+
"tintColor",
|
|
1718
|
+
"shadowColor"
|
|
1710
1719
|
];
|
|
1720
|
+
var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
|
|
1711
1721
|
var ALL_KEYS = [
|
|
1712
1722
|
...TRANSFORM_KEYS,
|
|
1713
1723
|
...NUMERIC_TOP_LEVEL_KEYS,
|
|
1714
|
-
...COLOR_KEYS
|
|
1724
|
+
...COLOR_KEYS,
|
|
1725
|
+
...SHADOW_OFFSET_KEYS
|
|
1715
1726
|
];
|
|
1716
1727
|
var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
|
|
1717
1728
|
var COLOR_KEY_SET = new Set(COLOR_KEYS);
|
|
1729
|
+
var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
|
|
1718
1730
|
var GESTURE_LAYER_NAMES = [
|
|
1719
1731
|
"hovered",
|
|
1720
1732
|
"focused",
|
|
@@ -1736,6 +1748,9 @@ var DEFAULT_RESTING = {
|
|
|
1736
1748
|
width: 0,
|
|
1737
1749
|
height: 0,
|
|
1738
1750
|
borderRadius: 0,
|
|
1751
|
+
shadowOpacity: 0,
|
|
1752
|
+
shadowRadius: 0,
|
|
1753
|
+
elevation: 0,
|
|
1739
1754
|
// 'transparent' is the only safe universal default for colors: it works as
|
|
1740
1755
|
// an initial seed for any color animation (no jarring opaque flash on mount
|
|
1741
1756
|
// when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
|
|
@@ -1743,7 +1758,10 @@ var DEFAULT_RESTING = {
|
|
|
1743
1758
|
backgroundColor: "transparent",
|
|
1744
1759
|
borderColor: "transparent",
|
|
1745
1760
|
color: "transparent",
|
|
1746
|
-
tintColor: "transparent"
|
|
1761
|
+
tintColor: "transparent",
|
|
1762
|
+
shadowColor: "transparent",
|
|
1763
|
+
shadowOffsetWidth: 0,
|
|
1764
|
+
shadowOffsetHeight: 0
|
|
1747
1765
|
};
|
|
1748
1766
|
function transitionFor(prop, transition) {
|
|
1749
1767
|
if (!transition) return void 0;
|
|
@@ -1797,16 +1815,12 @@ function createMotionComponent(Component) {
|
|
|
1797
1815
|
const activeKeysRef = react.useRef(null);
|
|
1798
1816
|
if (activeKeysRef.current === null) {
|
|
1799
1817
|
const touched = /* @__PURE__ */ new Set();
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
if (initialRecord && k in initialRecord) touched.add(k);
|
|
1803
|
-
}
|
|
1818
|
+
collectTouchedKeys(touched, animateRecord);
|
|
1819
|
+
if (initialRecord) collectTouchedKeys(touched, initialRecord);
|
|
1804
1820
|
if (variants) {
|
|
1805
1821
|
for (const variant of Object.values(variants)) {
|
|
1806
1822
|
if (!variant) continue;
|
|
1807
|
-
|
|
1808
|
-
if (k in variant) touched.add(k);
|
|
1809
|
-
}
|
|
1823
|
+
collectTouchedKeys(touched, variant);
|
|
1810
1824
|
}
|
|
1811
1825
|
}
|
|
1812
1826
|
if (gesture) {
|
|
@@ -1817,22 +1831,29 @@ function createMotionComponent(Component) {
|
|
|
1817
1831
|
gesture.hovered
|
|
1818
1832
|
]) {
|
|
1819
1833
|
if (!subState) continue;
|
|
1820
|
-
|
|
1821
|
-
if (k in subState) touched.add(k);
|
|
1822
|
-
}
|
|
1823
|
-
}
|
|
1824
|
-
}
|
|
1825
|
-
if (exitRecord) {
|
|
1826
|
-
for (const k of ALL_KEYS) {
|
|
1827
|
-
if (k in exitRecord) touched.add(k);
|
|
1834
|
+
collectTouchedKeys(touched, subState);
|
|
1828
1835
|
}
|
|
1829
1836
|
}
|
|
1837
|
+
if (exitRecord) collectTouchedKeys(touched, exitRecord);
|
|
1830
1838
|
activeKeysRef.current = ALL_KEYS.filter((k) => touched.has(k));
|
|
1831
1839
|
}
|
|
1832
1840
|
const hasTransformRef = react.useRef(
|
|
1833
1841
|
activeKeysRef.current.some((k) => TRANSFORM_KEY_SET.has(k))
|
|
1834
1842
|
);
|
|
1843
|
+
const hasShadowOffsetRef = react.useRef(
|
|
1844
|
+
activeKeysRef.current.some((k) => SHADOW_OFFSET_KEY_SET.has(k))
|
|
1845
|
+
);
|
|
1835
1846
|
const sharedValues = useAnimatableSharedValues((key) => {
|
|
1847
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
1848
|
+
const axis = shadowOffsetAxisFor(key);
|
|
1849
|
+
if (initial === false) {
|
|
1850
|
+
return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
1851
|
+
}
|
|
1852
|
+
return shadowOffsetAxisValue(
|
|
1853
|
+
initialRecord?.shadowOffset,
|
|
1854
|
+
axis
|
|
1855
|
+
) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
1856
|
+
}
|
|
1836
1857
|
if (initial === false) {
|
|
1837
1858
|
const a = animateRecord[key];
|
|
1838
1859
|
return restValue(a) ?? DEFAULT_RESTING[key];
|
|
@@ -1878,9 +1899,15 @@ function createMotionComponent(Component) {
|
|
|
1878
1899
|
}
|
|
1879
1900
|
const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
|
|
1880
1901
|
for (const key of ALL_KEYS) {
|
|
1881
|
-
const target =
|
|
1902
|
+
const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
|
|
1903
|
+
baseRecord.shadowOffset,
|
|
1904
|
+
shadowOffsetAxisFor(key)
|
|
1905
|
+
) : baseRecord[key];
|
|
1882
1906
|
if (target === void 0) continue;
|
|
1883
|
-
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
1907
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
1908
|
+
SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
|
|
1909
|
+
transition
|
|
1910
|
+
);
|
|
1884
1911
|
if (isExiting) pending++;
|
|
1885
1912
|
const factory = makeKeyCallbackFactory(
|
|
1886
1913
|
key,
|
|
@@ -1943,8 +1970,11 @@ function createMotionComponent(Component) {
|
|
|
1943
1970
|
const animatedStyle = Animated.useAnimatedStyle(() => {
|
|
1944
1971
|
const activeKeys = activeKeysRef.current;
|
|
1945
1972
|
const hasTransform = hasTransformRef.current;
|
|
1973
|
+
const hasShadowOffset = hasShadowOffsetRef.current;
|
|
1946
1974
|
const out = {};
|
|
1947
1975
|
const transform = [];
|
|
1976
|
+
let shadowOffsetW = 0;
|
|
1977
|
+
let shadowOffsetH = 0;
|
|
1948
1978
|
const ph = hoveredProgress.value;
|
|
1949
1979
|
const pf = focusedProgress.value;
|
|
1950
1980
|
const pfv = focusVisibleProgress.value;
|
|
@@ -1977,11 +2007,18 @@ function createMotionComponent(Component) {
|
|
|
1977
2007
|
transform.push(
|
|
1978
2008
|
ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
|
|
1979
2009
|
);
|
|
2010
|
+
} else if (key === "shadowOffsetWidth") {
|
|
2011
|
+
shadowOffsetW = v;
|
|
2012
|
+
} else if (key === "shadowOffsetHeight") {
|
|
2013
|
+
shadowOffsetH = v;
|
|
1980
2014
|
} else {
|
|
1981
2015
|
out[key] = v;
|
|
1982
2016
|
}
|
|
1983
2017
|
}
|
|
1984
2018
|
if (hasTransform) out.transform = transform;
|
|
2019
|
+
if (hasShadowOffset) {
|
|
2020
|
+
out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
|
|
2021
|
+
}
|
|
1985
2022
|
return out;
|
|
1986
2023
|
});
|
|
1987
2024
|
const mergedStyle = react.useMemo(
|
|
@@ -2029,12 +2066,22 @@ function useAnimatableSharedValues(init2) {
|
|
|
2029
2066
|
const width = Animated.useSharedValue(init2("width"));
|
|
2030
2067
|
const height = Animated.useSharedValue(init2("height"));
|
|
2031
2068
|
const borderRadius = Animated.useSharedValue(init2("borderRadius"));
|
|
2069
|
+
const shadowOpacity = Animated.useSharedValue(init2("shadowOpacity"));
|
|
2070
|
+
const shadowRadius = Animated.useSharedValue(init2("shadowRadius"));
|
|
2071
|
+
const elevation = Animated.useSharedValue(init2("elevation"));
|
|
2032
2072
|
const backgroundColor = Animated.useSharedValue(
|
|
2033
2073
|
init2("backgroundColor")
|
|
2034
2074
|
);
|
|
2035
2075
|
const borderColor = Animated.useSharedValue(init2("borderColor"));
|
|
2036
2076
|
const color = Animated.useSharedValue(init2("color"));
|
|
2037
2077
|
const tintColor = Animated.useSharedValue(init2("tintColor"));
|
|
2078
|
+
const shadowColor = Animated.useSharedValue(init2("shadowColor"));
|
|
2079
|
+
const shadowOffsetWidth = Animated.useSharedValue(
|
|
2080
|
+
init2("shadowOffsetWidth")
|
|
2081
|
+
);
|
|
2082
|
+
const shadowOffsetHeight = Animated.useSharedValue(
|
|
2083
|
+
init2("shadowOffsetHeight")
|
|
2084
|
+
);
|
|
2038
2085
|
const ref = react.useRef(null);
|
|
2039
2086
|
if (ref.current === null) {
|
|
2040
2087
|
ref.current = {
|
|
@@ -2050,10 +2097,16 @@ function useAnimatableSharedValues(init2) {
|
|
|
2050
2097
|
width,
|
|
2051
2098
|
height,
|
|
2052
2099
|
borderRadius,
|
|
2100
|
+
shadowOpacity,
|
|
2101
|
+
shadowRadius,
|
|
2102
|
+
elevation,
|
|
2053
2103
|
backgroundColor,
|
|
2054
2104
|
borderColor,
|
|
2055
2105
|
color,
|
|
2056
|
-
tintColor
|
|
2106
|
+
tintColor,
|
|
2107
|
+
shadowColor,
|
|
2108
|
+
shadowOffsetWidth,
|
|
2109
|
+
shadowOffsetHeight
|
|
2057
2110
|
};
|
|
2058
2111
|
}
|
|
2059
2112
|
return ref.current;
|
|
@@ -2121,6 +2174,22 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
|
|
|
2121
2174
|
return cb;
|
|
2122
2175
|
};
|
|
2123
2176
|
}
|
|
2177
|
+
function shadowOffsetAxisFor(key) {
|
|
2178
|
+
return key === "shadowOffsetWidth" ? "width" : "height";
|
|
2179
|
+
}
|
|
2180
|
+
function shadowOffsetAxisValue(source, axis) {
|
|
2181
|
+
return source?.[axis];
|
|
2182
|
+
}
|
|
2183
|
+
function collectTouchedKeys(touched, record) {
|
|
2184
|
+
for (const k of ALL_KEYS) {
|
|
2185
|
+
if (k in record) touched.add(k);
|
|
2186
|
+
}
|
|
2187
|
+
if ("shadowOffset" in record && record.shadowOffset) {
|
|
2188
|
+
const so = record.shadowOffset;
|
|
2189
|
+
if (so.width !== void 0) touched.add("shadowOffsetWidth");
|
|
2190
|
+
if (so.height !== void 0) touched.add("shadowOffsetHeight");
|
|
2191
|
+
}
|
|
2192
|
+
}
|
|
2124
2193
|
function stepCountOf(v) {
|
|
2125
2194
|
if (Array.isArray(v)) return v.length;
|
|
2126
2195
|
return 1;
|
|
@@ -2190,6 +2259,13 @@ function resolveGestureLayers(gesture) {
|
|
|
2190
2259
|
if (!subState) continue;
|
|
2191
2260
|
const resolved = {};
|
|
2192
2261
|
for (const key of ALL_KEYS) {
|
|
2262
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
2263
|
+
const axis = shadowOffsetAxisFor(key);
|
|
2264
|
+
const so = subState.shadowOffset;
|
|
2265
|
+
const v = shadowOffsetAxisValue(so, axis);
|
|
2266
|
+
if (v !== void 0) resolved[key] = v;
|
|
2267
|
+
continue;
|
|
2268
|
+
}
|
|
2193
2269
|
const raw = subState[key];
|
|
2194
2270
|
if (raw === void 0) continue;
|
|
2195
2271
|
const t = targetEndValue(raw);
|