@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.mjs
CHANGED
|
@@ -1445,13 +1445,17 @@ if (globalThis._ALWAYS_FALSE) {
|
|
|
1445
1445
|
// src/transitions/easing.ts
|
|
1446
1446
|
function ensureWorkletEasing(easing) {
|
|
1447
1447
|
if (!easing) return void 0;
|
|
1448
|
-
|
|
1448
|
+
const fn = isEasingFactory(easing) ? easing.factory() : easing;
|
|
1449
|
+
if (isWorkletFunction(fn)) return fn;
|
|
1449
1450
|
const wrapped = (t) => {
|
|
1450
1451
|
"worklet";
|
|
1451
|
-
return
|
|
1452
|
+
return fn(t);
|
|
1452
1453
|
};
|
|
1453
1454
|
return wrapped;
|
|
1454
1455
|
}
|
|
1456
|
+
function isEasingFactory(value) {
|
|
1457
|
+
return typeof value === "object" && value !== null && "factory" in value && typeof value.factory === "function";
|
|
1458
|
+
}
|
|
1455
1459
|
|
|
1456
1460
|
// src/transitions/spring.ts
|
|
1457
1461
|
var DEFAULT_SPRING = {
|
|
@@ -1460,6 +1464,7 @@ var DEFAULT_SPRING = {
|
|
|
1460
1464
|
mass: 1
|
|
1461
1465
|
};
|
|
1462
1466
|
function springToReanimated(t) {
|
|
1467
|
+
"worklet";
|
|
1463
1468
|
return {
|
|
1464
1469
|
stiffness: t.tension ?? DEFAULT_SPRING.tension,
|
|
1465
1470
|
damping: t.friction ?? DEFAULT_SPRING.friction,
|
|
@@ -1694,21 +1699,28 @@ var NUMERIC_TOP_LEVEL_KEYS = [
|
|
|
1694
1699
|
"opacity",
|
|
1695
1700
|
"width",
|
|
1696
1701
|
"height",
|
|
1697
|
-
"borderRadius"
|
|
1702
|
+
"borderRadius",
|
|
1703
|
+
"shadowOpacity",
|
|
1704
|
+
"shadowRadius",
|
|
1705
|
+
"elevation"
|
|
1698
1706
|
];
|
|
1699
1707
|
var COLOR_KEYS = [
|
|
1700
1708
|
"backgroundColor",
|
|
1701
1709
|
"borderColor",
|
|
1702
1710
|
"color",
|
|
1703
|
-
"tintColor"
|
|
1711
|
+
"tintColor",
|
|
1712
|
+
"shadowColor"
|
|
1704
1713
|
];
|
|
1714
|
+
var SHADOW_OFFSET_KEYS = ["shadowOffsetWidth", "shadowOffsetHeight"];
|
|
1705
1715
|
var ALL_KEYS = [
|
|
1706
1716
|
...TRANSFORM_KEYS,
|
|
1707
1717
|
...NUMERIC_TOP_LEVEL_KEYS,
|
|
1708
|
-
...COLOR_KEYS
|
|
1718
|
+
...COLOR_KEYS,
|
|
1719
|
+
...SHADOW_OFFSET_KEYS
|
|
1709
1720
|
];
|
|
1710
1721
|
var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
|
|
1711
1722
|
var COLOR_KEY_SET = new Set(COLOR_KEYS);
|
|
1723
|
+
var SHADOW_OFFSET_KEY_SET = new Set(SHADOW_OFFSET_KEYS);
|
|
1712
1724
|
var GESTURE_LAYER_NAMES = [
|
|
1713
1725
|
"hovered",
|
|
1714
1726
|
"focused",
|
|
@@ -1730,6 +1742,9 @@ var DEFAULT_RESTING = {
|
|
|
1730
1742
|
width: 0,
|
|
1731
1743
|
height: 0,
|
|
1732
1744
|
borderRadius: 0,
|
|
1745
|
+
shadowOpacity: 0,
|
|
1746
|
+
shadowRadius: 0,
|
|
1747
|
+
elevation: 0,
|
|
1733
1748
|
// 'transparent' is the only safe universal default for colors: it works as
|
|
1734
1749
|
// an initial seed for any color animation (no jarring opaque flash on mount
|
|
1735
1750
|
// when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
|
|
@@ -1737,7 +1752,10 @@ var DEFAULT_RESTING = {
|
|
|
1737
1752
|
backgroundColor: "transparent",
|
|
1738
1753
|
borderColor: "transparent",
|
|
1739
1754
|
color: "transparent",
|
|
1740
|
-
tintColor: "transparent"
|
|
1755
|
+
tintColor: "transparent",
|
|
1756
|
+
shadowColor: "transparent",
|
|
1757
|
+
shadowOffsetWidth: 0,
|
|
1758
|
+
shadowOffsetHeight: 0
|
|
1741
1759
|
};
|
|
1742
1760
|
function transitionFor(prop, transition) {
|
|
1743
1761
|
if (!transition) return void 0;
|
|
@@ -1791,16 +1809,12 @@ function createMotionComponent(Component) {
|
|
|
1791
1809
|
const activeKeysRef = useRef(null);
|
|
1792
1810
|
if (activeKeysRef.current === null) {
|
|
1793
1811
|
const touched = /* @__PURE__ */ new Set();
|
|
1794
|
-
|
|
1795
|
-
|
|
1796
|
-
if (initialRecord && k in initialRecord) touched.add(k);
|
|
1797
|
-
}
|
|
1812
|
+
collectTouchedKeys(touched, animateRecord);
|
|
1813
|
+
if (initialRecord) collectTouchedKeys(touched, initialRecord);
|
|
1798
1814
|
if (variants) {
|
|
1799
1815
|
for (const variant of Object.values(variants)) {
|
|
1800
1816
|
if (!variant) continue;
|
|
1801
|
-
|
|
1802
|
-
if (k in variant) touched.add(k);
|
|
1803
|
-
}
|
|
1817
|
+
collectTouchedKeys(touched, variant);
|
|
1804
1818
|
}
|
|
1805
1819
|
}
|
|
1806
1820
|
if (gesture) {
|
|
@@ -1811,22 +1825,29 @@ function createMotionComponent(Component) {
|
|
|
1811
1825
|
gesture.hovered
|
|
1812
1826
|
]) {
|
|
1813
1827
|
if (!subState) continue;
|
|
1814
|
-
|
|
1815
|
-
if (k in subState) touched.add(k);
|
|
1816
|
-
}
|
|
1817
|
-
}
|
|
1818
|
-
}
|
|
1819
|
-
if (exitRecord) {
|
|
1820
|
-
for (const k of ALL_KEYS) {
|
|
1821
|
-
if (k in exitRecord) touched.add(k);
|
|
1828
|
+
collectTouchedKeys(touched, subState);
|
|
1822
1829
|
}
|
|
1823
1830
|
}
|
|
1831
|
+
if (exitRecord) collectTouchedKeys(touched, exitRecord);
|
|
1824
1832
|
activeKeysRef.current = ALL_KEYS.filter((k) => touched.has(k));
|
|
1825
1833
|
}
|
|
1826
1834
|
const hasTransformRef = useRef(
|
|
1827
1835
|
activeKeysRef.current.some((k) => TRANSFORM_KEY_SET.has(k))
|
|
1828
1836
|
);
|
|
1837
|
+
const hasShadowOffsetRef = useRef(
|
|
1838
|
+
activeKeysRef.current.some((k) => SHADOW_OFFSET_KEY_SET.has(k))
|
|
1839
|
+
);
|
|
1829
1840
|
const sharedValues = useAnimatableSharedValues((key) => {
|
|
1841
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
1842
|
+
const axis = shadowOffsetAxisFor(key);
|
|
1843
|
+
if (initial === false) {
|
|
1844
|
+
return shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
1845
|
+
}
|
|
1846
|
+
return shadowOffsetAxisValue(
|
|
1847
|
+
initialRecord?.shadowOffset,
|
|
1848
|
+
axis
|
|
1849
|
+
) ?? shadowOffsetAxisValue(animateRecord.shadowOffset, axis) ?? DEFAULT_RESTING[key];
|
|
1850
|
+
}
|
|
1830
1851
|
if (initial === false) {
|
|
1831
1852
|
const a = animateRecord[key];
|
|
1832
1853
|
return restValue(a) ?? DEFAULT_RESTING[key];
|
|
@@ -1872,9 +1893,15 @@ function createMotionComponent(Component) {
|
|
|
1872
1893
|
}
|
|
1873
1894
|
const transformGroup = transformPending > 0 ? { remaining: transformPending } : void 0;
|
|
1874
1895
|
for (const key of ALL_KEYS) {
|
|
1875
|
-
const target =
|
|
1896
|
+
const target = SHADOW_OFFSET_KEY_SET.has(key) ? shadowOffsetAxisValue(
|
|
1897
|
+
baseRecord.shadowOffset,
|
|
1898
|
+
shadowOffsetAxisFor(key)
|
|
1899
|
+
) : baseRecord[key];
|
|
1876
1900
|
if (target === void 0) continue;
|
|
1877
|
-
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
1901
|
+
const cfg = shouldReduceMotion ? { type: "no-animation" } : transitionFor(
|
|
1902
|
+
SHADOW_OFFSET_KEY_SET.has(key) ? "shadowOffset" : key,
|
|
1903
|
+
transition
|
|
1904
|
+
);
|
|
1878
1905
|
if (isExiting) pending++;
|
|
1879
1906
|
const factory = makeKeyCallbackFactory(
|
|
1880
1907
|
key,
|
|
@@ -1937,8 +1964,11 @@ function createMotionComponent(Component) {
|
|
|
1937
1964
|
const animatedStyle = useAnimatedStyle(() => {
|
|
1938
1965
|
const activeKeys = activeKeysRef.current;
|
|
1939
1966
|
const hasTransform = hasTransformRef.current;
|
|
1967
|
+
const hasShadowOffset = hasShadowOffsetRef.current;
|
|
1940
1968
|
const out = {};
|
|
1941
1969
|
const transform = [];
|
|
1970
|
+
let shadowOffsetW = 0;
|
|
1971
|
+
let shadowOffsetH = 0;
|
|
1942
1972
|
const ph = hoveredProgress.value;
|
|
1943
1973
|
const pf = focusedProgress.value;
|
|
1944
1974
|
const pfv = focusVisibleProgress.value;
|
|
@@ -1971,11 +2001,18 @@ function createMotionComponent(Component) {
|
|
|
1971
2001
|
transform.push(
|
|
1972
2002
|
ROTATION_KEYS.has(key) ? { [key]: `${v}deg` } : { [key]: v }
|
|
1973
2003
|
);
|
|
2004
|
+
} else if (key === "shadowOffsetWidth") {
|
|
2005
|
+
shadowOffsetW = v;
|
|
2006
|
+
} else if (key === "shadowOffsetHeight") {
|
|
2007
|
+
shadowOffsetH = v;
|
|
1974
2008
|
} else {
|
|
1975
2009
|
out[key] = v;
|
|
1976
2010
|
}
|
|
1977
2011
|
}
|
|
1978
2012
|
if (hasTransform) out.transform = transform;
|
|
2013
|
+
if (hasShadowOffset) {
|
|
2014
|
+
out.shadowOffset = { width: shadowOffsetW, height: shadowOffsetH };
|
|
2015
|
+
}
|
|
1979
2016
|
return out;
|
|
1980
2017
|
});
|
|
1981
2018
|
const mergedStyle = useMemo(
|
|
@@ -2023,12 +2060,22 @@ function useAnimatableSharedValues(init2) {
|
|
|
2023
2060
|
const width = useSharedValue(init2("width"));
|
|
2024
2061
|
const height = useSharedValue(init2("height"));
|
|
2025
2062
|
const borderRadius = useSharedValue(init2("borderRadius"));
|
|
2063
|
+
const shadowOpacity = useSharedValue(init2("shadowOpacity"));
|
|
2064
|
+
const shadowRadius = useSharedValue(init2("shadowRadius"));
|
|
2065
|
+
const elevation = useSharedValue(init2("elevation"));
|
|
2026
2066
|
const backgroundColor = useSharedValue(
|
|
2027
2067
|
init2("backgroundColor")
|
|
2028
2068
|
);
|
|
2029
2069
|
const borderColor = useSharedValue(init2("borderColor"));
|
|
2030
2070
|
const color = useSharedValue(init2("color"));
|
|
2031
2071
|
const tintColor = useSharedValue(init2("tintColor"));
|
|
2072
|
+
const shadowColor = useSharedValue(init2("shadowColor"));
|
|
2073
|
+
const shadowOffsetWidth = useSharedValue(
|
|
2074
|
+
init2("shadowOffsetWidth")
|
|
2075
|
+
);
|
|
2076
|
+
const shadowOffsetHeight = useSharedValue(
|
|
2077
|
+
init2("shadowOffsetHeight")
|
|
2078
|
+
);
|
|
2032
2079
|
const ref = useRef(null);
|
|
2033
2080
|
if (ref.current === null) {
|
|
2034
2081
|
ref.current = {
|
|
@@ -2044,10 +2091,16 @@ function useAnimatableSharedValues(init2) {
|
|
|
2044
2091
|
width,
|
|
2045
2092
|
height,
|
|
2046
2093
|
borderRadius,
|
|
2094
|
+
shadowOpacity,
|
|
2095
|
+
shadowRadius,
|
|
2096
|
+
elevation,
|
|
2047
2097
|
backgroundColor,
|
|
2048
2098
|
borderColor,
|
|
2049
2099
|
color,
|
|
2050
|
-
tintColor
|
|
2100
|
+
tintColor,
|
|
2101
|
+
shadowColor,
|
|
2102
|
+
shadowOffsetWidth,
|
|
2103
|
+
shadowOffsetHeight
|
|
2051
2104
|
};
|
|
2052
2105
|
}
|
|
2053
2106
|
return ref.current;
|
|
@@ -2115,6 +2168,22 @@ function makeKeyCallbackFactory(key, sharedValue, target, onAnimationEndRef, met
|
|
|
2115
2168
|
return cb;
|
|
2116
2169
|
};
|
|
2117
2170
|
}
|
|
2171
|
+
function shadowOffsetAxisFor(key) {
|
|
2172
|
+
return key === "shadowOffsetWidth" ? "width" : "height";
|
|
2173
|
+
}
|
|
2174
|
+
function shadowOffsetAxisValue(source, axis) {
|
|
2175
|
+
return source?.[axis];
|
|
2176
|
+
}
|
|
2177
|
+
function collectTouchedKeys(touched, record) {
|
|
2178
|
+
for (const k of ALL_KEYS) {
|
|
2179
|
+
if (k in record) touched.add(k);
|
|
2180
|
+
}
|
|
2181
|
+
if ("shadowOffset" in record && record.shadowOffset) {
|
|
2182
|
+
const so = record.shadowOffset;
|
|
2183
|
+
if (so.width !== void 0) touched.add("shadowOffsetWidth");
|
|
2184
|
+
if (so.height !== void 0) touched.add("shadowOffsetHeight");
|
|
2185
|
+
}
|
|
2186
|
+
}
|
|
2118
2187
|
function stepCountOf(v) {
|
|
2119
2188
|
if (Array.isArray(v)) return v.length;
|
|
2120
2189
|
return 1;
|
|
@@ -2184,6 +2253,13 @@ function resolveGestureLayers(gesture) {
|
|
|
2184
2253
|
if (!subState) continue;
|
|
2185
2254
|
const resolved = {};
|
|
2186
2255
|
for (const key of ALL_KEYS) {
|
|
2256
|
+
if (SHADOW_OFFSET_KEY_SET.has(key)) {
|
|
2257
|
+
const axis = shadowOffsetAxisFor(key);
|
|
2258
|
+
const so = subState.shadowOffset;
|
|
2259
|
+
const v = shadowOffsetAxisValue(so, axis);
|
|
2260
|
+
if (v !== void 0) resolved[key] = v;
|
|
2261
|
+
continue;
|
|
2262
|
+
}
|
|
2187
2263
|
const raw = subState[key];
|
|
2188
2264
|
if (raw === void 0) continue;
|
|
2189
2265
|
const t = targetEndValue(raw);
|