react-native-laminar 1.4.4 → 1.5.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/README.md +36 -6
- package/lib/commonjs/hooks/use-inline-auto-width.js +24 -1
- package/lib/commonjs/hooks/use-inline-auto-width.js.map +1 -1
- package/lib/commonjs/hooks/use-leading-animation.js +49 -0
- package/lib/commonjs/hooks/use-leading-animation.js.map +1 -0
- package/lib/commonjs/hooks/use-morph-motion.js +3 -1
- package/lib/commonjs/hooks/use-morph-motion.js.map +1 -1
- package/lib/commonjs/index.js +35 -6
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/motion/preset-map.js +5 -0
- package/lib/commonjs/motion/preset-map.js.map +1 -1
- package/lib/commonjs/view/leading-element.js +37 -0
- package/lib/commonjs/view/leading-element.js.map +1 -0
- package/lib/commonjs/view/morph-viewport.js +26 -0
- package/lib/commonjs/view/morph-viewport.js.map +1 -1
- package/lib/commonjs/view/number-run.js +70 -22
- package/lib/commonjs/view/number-run.js.map +1 -1
- package/lib/commonjs/view/slot-shadow.js +77 -0
- package/lib/commonjs/view/slot-shadow.js.map +1 -0
- package/lib/commonjs/view/slots-run.js +111 -42
- package/lib/commonjs/view/slots-run.js.map +1 -1
- package/lib/commonjs/view/text-run.js +13 -24
- package/lib/commonjs/view/text-run.js.map +1 -1
- package/lib/commonjs/view/ticker-run.js +127 -0
- package/lib/commonjs/view/ticker-run.js.map +1 -0
- package/lib/module/hooks/use-inline-auto-width.js +24 -1
- package/lib/module/hooks/use-inline-auto-width.js.map +1 -1
- package/lib/module/hooks/use-leading-animation.js +44 -0
- package/lib/module/hooks/use-leading-animation.js.map +1 -0
- package/lib/module/hooks/use-morph-motion.js +3 -1
- package/lib/module/hooks/use-morph-motion.js.map +1 -1
- package/lib/module/index.js +35 -6
- package/lib/module/index.js.map +1 -1
- package/lib/module/motion/preset-map.js +5 -0
- package/lib/module/motion/preset-map.js.map +1 -1
- package/lib/module/view/leading-element.js +32 -0
- package/lib/module/view/leading-element.js.map +1 -0
- package/lib/module/view/morph-viewport.js +28 -2
- package/lib/module/view/morph-viewport.js.map +1 -1
- package/lib/module/view/number-run.js +70 -23
- package/lib/module/view/number-run.js.map +1 -1
- package/lib/module/view/slot-shadow.js +72 -0
- package/lib/module/view/slot-shadow.js.map +1 -0
- package/lib/module/view/slots-run.js +111 -42
- package/lib/module/view/slots-run.js.map +1 -1
- package/lib/module/view/text-run.js +14 -25
- package/lib/module/view/text-run.js.map +1 -1
- package/lib/module/view/ticker-run.js +121 -0
- package/lib/module/view/ticker-run.js.map +1 -0
- package/lib/typescript/commonjs/hooks/use-inline-auto-width.d.ts.map +1 -1
- package/lib/typescript/commonjs/hooks/use-leading-animation.d.ts +16 -0
- package/lib/typescript/commonjs/hooks/use-leading-animation.d.ts.map +1 -0
- package/lib/typescript/commonjs/hooks/use-morph-motion.d.ts +3 -2
- package/lib/typescript/commonjs/hooks/use-morph-motion.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.d.ts +1 -1
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/motion/preset-map.d.ts.map +1 -1
- package/lib/typescript/commonjs/types.d.ts +14 -2
- package/lib/typescript/commonjs/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/leading-element.d.ts +14 -0
- package/lib/typescript/commonjs/view/leading-element.d.ts.map +1 -0
- package/lib/typescript/commonjs/view/morph-viewport.d.ts +4 -1
- package/lib/typescript/commonjs/view/morph-viewport.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/number-run.d.ts +6 -2
- package/lib/typescript/commonjs/view/number-run.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/slot-shadow.d.ts +11 -0
- package/lib/typescript/commonjs/view/slot-shadow.d.ts.map +1 -0
- package/lib/typescript/commonjs/view/slots-run.d.ts +8 -3
- package/lib/typescript/commonjs/view/slots-run.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/text-run.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/ticker-run.d.ts +21 -0
- package/lib/typescript/commonjs/view/ticker-run.d.ts.map +1 -0
- package/lib/typescript/module/hooks/use-inline-auto-width.d.ts.map +1 -1
- package/lib/typescript/module/hooks/use-leading-animation.d.ts +16 -0
- package/lib/typescript/module/hooks/use-leading-animation.d.ts.map +1 -0
- package/lib/typescript/module/hooks/use-morph-motion.d.ts +3 -2
- package/lib/typescript/module/hooks/use-morph-motion.d.ts.map +1 -1
- package/lib/typescript/module/index.d.ts +1 -1
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/motion/preset-map.d.ts.map +1 -1
- package/lib/typescript/module/types.d.ts +14 -2
- package/lib/typescript/module/types.d.ts.map +1 -1
- package/lib/typescript/module/view/leading-element.d.ts +14 -0
- package/lib/typescript/module/view/leading-element.d.ts.map +1 -0
- package/lib/typescript/module/view/morph-viewport.d.ts +4 -1
- package/lib/typescript/module/view/morph-viewport.d.ts.map +1 -1
- package/lib/typescript/module/view/number-run.d.ts +6 -2
- package/lib/typescript/module/view/number-run.d.ts.map +1 -1
- package/lib/typescript/module/view/slot-shadow.d.ts +11 -0
- package/lib/typescript/module/view/slot-shadow.d.ts.map +1 -0
- package/lib/typescript/module/view/slots-run.d.ts +8 -3
- package/lib/typescript/module/view/slots-run.d.ts.map +1 -1
- package/lib/typescript/module/view/text-run.d.ts.map +1 -1
- package/lib/typescript/module/view/ticker-run.d.ts +21 -0
- package/lib/typescript/module/view/ticker-run.d.ts.map +1 -0
- package/package.json +3 -1
- package/src/hooks/use-inline-auto-width.ts +33 -1
- package/src/hooks/use-leading-animation.ts +74 -0
- package/src/hooks/use-morph-motion.ts +10 -1
- package/src/index.tsx +44 -6
- package/src/motion/preset-map.ts +5 -0
- package/src/types.ts +17 -2
- package/src/view/leading-element.tsx +45 -0
- package/src/view/morph-viewport.tsx +39 -1
- package/src/view/number-run.tsx +94 -26
- package/src/view/slot-shadow.tsx +99 -0
- package/src/view/slots-run.tsx +163 -58
- package/src/view/text-run.tsx +14 -51
- package/src/view/ticker-run.tsx +167 -0
package/README.md
CHANGED
|
@@ -93,6 +93,7 @@ export default function SlotCounter() {
|
|
|
93
93
|
variant="slots"
|
|
94
94
|
fontSize={48}
|
|
95
95
|
animationPreset="snappy"
|
|
96
|
+
shadow
|
|
96
97
|
clipToBounds
|
|
97
98
|
style={{ color: "#000000", fontVariant: ["tabular-nums"] }}
|
|
98
99
|
/>
|
|
@@ -102,6 +103,29 @@ export default function SlotCounter() {
|
|
|
102
103
|
}
|
|
103
104
|
```
|
|
104
105
|
|
|
106
|
+
The `shadow` prop requires the app to provide the
|
|
107
|
+
`@react-native-masked-view/masked-view` and `expo-linear-gradient` peer
|
|
108
|
+
dependencies.
|
|
109
|
+
|
|
110
|
+
### Number flow
|
|
111
|
+
|
|
112
|
+
Use `numberMode="ticker"` with `variant="number"` for clean live-number flow.
|
|
113
|
+
Changed digits refresh in place while unchanged digits remain perfectly still;
|
|
114
|
+
this mode deliberately has no vertical reel or viewport mask:
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
<Laminar
|
|
118
|
+
text="$2,459.70"
|
|
119
|
+
variant="number"
|
|
120
|
+
numberMode="ticker"
|
|
121
|
+
stagger={0}
|
|
122
|
+
style={{ color: "#000000" }}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Prefixes, grouping separators, decimals, and unchanged digits stay crisp. The
|
|
127
|
+
`shadow` prop is intentionally reserved for `variant="slots"`.
|
|
128
|
+
|
|
105
129
|
### Inside a button with auto-sizing
|
|
106
130
|
|
|
107
131
|
```tsx
|
|
@@ -117,7 +141,7 @@ export default function SlotCounter() {
|
|
|
117
141
|
|
|
118
142
|
### Auto-sized button with leading icons
|
|
119
143
|
|
|
120
|
-
Pass a
|
|
144
|
+
Pass a value-keyed `leading` map when the button changes between visual states.
|
|
121
145
|
Laminar selects the matching entry and animates icon-to-icon replacements.
|
|
122
146
|
|
|
123
147
|
```tsx
|
|
@@ -150,7 +174,7 @@ const leading = {
|
|
|
150
174
|
```
|
|
151
175
|
|
|
152
176
|
The map key must match the current `text` value. A missing entry means no
|
|
153
|
-
leading element, so the icon fades out when the
|
|
177
|
+
leading element, so the icon fades out when the value returns to a plain label.
|
|
154
178
|
|
|
155
179
|
### Centered text in a fixed-width container
|
|
156
180
|
|
|
@@ -201,17 +225,19 @@ Use `autoSize={false}` when the parent already defines the space and you only wa
|
|
|
201
225
|
type LaminarProps = {
|
|
202
226
|
text: string | number;
|
|
203
227
|
variant?: "text" | "number" | "slots";
|
|
228
|
+
numberMode?: "morph" | "ticker";
|
|
204
229
|
fontSize?: number;
|
|
205
230
|
color?: string;
|
|
206
231
|
align?: "left" | "center" | "right";
|
|
207
232
|
leading?: ReactNode | Readonly<Record<string, ReactNode>>;
|
|
208
233
|
leadingKey?: string | number;
|
|
209
234
|
leadingGap?: number;
|
|
235
|
+
shadow?: boolean | { color?: string; size?: number };
|
|
210
236
|
style?: StyleProp<TextStyle>;
|
|
211
237
|
containerStyle?: StyleProp<ViewStyle>;
|
|
212
238
|
fontStyle?: StyleProp<TextStyle>;
|
|
213
239
|
animationDuration?: number;
|
|
214
|
-
animationPreset?: "default" | "smooth" | "snappy" | "bouncy";
|
|
240
|
+
animationPreset?: "default" | "smooth" | "snappy" | "bouncy" | "ticker";
|
|
215
241
|
stagger?: number;
|
|
216
242
|
autoSize?: boolean;
|
|
217
243
|
clipToBounds?: boolean;
|
|
@@ -225,15 +251,17 @@ type LaminarProps = {
|
|
|
225
251
|
| `fontSize` | Undefined | Convenience prop merged into the text style. |
|
|
226
252
|
| `color` | Undefined | Convenience prop merged into the text style. |
|
|
227
253
|
| `align` | `"left"` | Visual alignment for Laminar's viewport and animated glyph row. |
|
|
228
|
-
| `leading` | Undefined | Optional inline element, or
|
|
254
|
+
| `leading` | Undefined | Optional inline element, or value-keyed leading content, rendered by every variant. |
|
|
229
255
|
| `leadingKey` | Undefined | Advanced identity override for a direct leading element. |
|
|
230
256
|
| `leadingGap` | `0` | Spacing between the leading element and the first text glyph. |
|
|
257
|
+
| `numberMode` | `"morph"` | With `variant="number"`, `"ticker"` uses crisp in-place digit flow instead of glyph morphs. |
|
|
258
|
+
| `shadow` | `false` | Adds persistent top and bottom alpha fades to slot digit viewports. Accepts `true` or `{ color, size }`. |
|
|
231
259
|
| `style` | Undefined | Text style applied after `fontSize` and `color`. |
|
|
232
260
|
| `containerStyle` | Undefined | Advanced style override for the outer viewport shell. |
|
|
233
261
|
| `fontStyle` | Undefined | Additional text style merged before `style`. |
|
|
234
262
|
| `animationDuration` | Preset default | Duration override in milliseconds. |
|
|
235
|
-
| `animationPreset` | `"default"` for text, `"snappy"` for number | Named motion recipe.
|
|
236
|
-
| `stagger` | `0.02`
|
|
263
|
+
| `animationPreset` | `"default"` for text, `"snappy"` for number | Named motion recipe; ticker mode defaults to the `ticker` preset. |
|
|
264
|
+
| `stagger` | `0.02` (`0` for ticker mode) | Delay in seconds between numeric lane replacements. |
|
|
237
265
|
| `autoSize` | `true` | Animate the outer width to the measured final text width. |
|
|
238
266
|
| `clipToBounds` | `false` | Clip animated overflow to the viewport bounds. |
|
|
239
267
|
|
|
@@ -247,11 +275,13 @@ type LaminarProps = {
|
|
|
247
275
|
| `smooth` | Spring with no bounce | 400ms |
|
|
248
276
|
| `snappy` | Spring with light bounce | 350ms |
|
|
249
277
|
| `bouncy` | Spring with more bounce | 500ms |
|
|
278
|
+
| `ticker` | In-place number-flow timing | 300ms |
|
|
250
279
|
|
|
251
280
|
```tsx
|
|
252
281
|
<Laminar text={word} animationPreset="smooth" />
|
|
253
282
|
<Laminar text={count} variant="number" animationPreset="snappy" />
|
|
254
283
|
<Laminar text={count} variant="slots" animationPreset="snappy" />
|
|
284
|
+
<Laminar text={count} variant="number" numberMode="ticker" shadow />
|
|
255
285
|
|
|
256
286
|
// Override duration
|
|
257
287
|
<Laminar text={word} animationPreset="default" animationDuration={520} />
|
|
@@ -19,12 +19,18 @@ const useInlineAutoWidth = ({
|
|
|
19
19
|
const measuredWidthRef = (0, _react.useRef)(null);
|
|
20
20
|
const bootstrappedRef = (0, _react.useRef)(false);
|
|
21
21
|
const widthCacheRef = (0, _react.useRef)(new Map());
|
|
22
|
+
const firstEnabledMeasurementKeyRef = (0, _react.useRef)(null);
|
|
22
23
|
const hasCapturedVisibleLayoutRef = (0, _react.useRef)(false);
|
|
23
24
|
const initialMeasurementKeyRef = (0, _react.useRef)(null);
|
|
24
25
|
const firstProbeRef = (0, _react.useRef)(null);
|
|
25
26
|
const latestProbeRef = (0, _react.useRef)(null);
|
|
26
27
|
const bootstrapTimerRef = (0, _react.useRef)(null);
|
|
27
28
|
const [readyMeasurementKey, setReadyMeasurementKey] = (0, _react.useState)(null);
|
|
29
|
+
|
|
30
|
+
// latch the first enabled key so a pending visible layout cannot use a later key
|
|
31
|
+
if (enabled && firstEnabledMeasurementKeyRef.current === null) {
|
|
32
|
+
firstEnabledMeasurementKeyRef.current = measurementKey;
|
|
33
|
+
}
|
|
28
34
|
const markMeasurementReady = (0, _react.useCallback)(key => {
|
|
29
35
|
setReadyMeasurementKey(currentKey => currentKey === key ? currentKey : key);
|
|
30
36
|
}, []);
|
|
@@ -79,11 +85,28 @@ const useInlineAutoWidth = ({
|
|
|
79
85
|
// bootstrap from the visible tree so the first explicit width matches
|
|
80
86
|
// the geometry that was already painted to the user
|
|
81
87
|
const nextWidth = Math.max(0, event.nativeEvent.layout.width);
|
|
88
|
+
const firstEnabledMeasurementKey = firstEnabledMeasurementKeyRef.current;
|
|
89
|
+
const visibleKeyMatchesInitialKey = firstEnabledMeasurementKey === null || firstEnabledMeasurementKey === measurementKey;
|
|
90
|
+
const firstProbe = firstProbeRef.current;
|
|
91
|
+
if (!visibleKeyMatchesInitialKey) {
|
|
92
|
+
// ignore a visible layout from the initial row when the key has changed
|
|
93
|
+
const currentProbeWidth = firstProbe?.key === measurementKey ? firstProbe.width : widthCacheRef.current.get(measurementKey);
|
|
94
|
+
if (currentProbeWidth !== undefined) {
|
|
95
|
+
initialMeasurementKeyRef.current = measurementKey;
|
|
96
|
+
applyWidth(currentProbeWidth);
|
|
97
|
+
markMeasurementReady(measurementKey);
|
|
98
|
+
} else if (firstProbe) {
|
|
99
|
+
// use the old probe as the shell baseline until the current key is measured
|
|
100
|
+
initialMeasurementKeyRef.current = firstProbe.key;
|
|
101
|
+
applyWidth(firstProbe.width);
|
|
102
|
+
}
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
|
|
82
106
|
// retain the visible width for the initial key so a later cache hit does
|
|
83
107
|
// not reintroduce the probe-to-visible mismatch
|
|
84
108
|
widthCacheRef.current.delete(measurementKey);
|
|
85
109
|
widthCacheRef.current.set(measurementKey, nextWidth);
|
|
86
|
-
const firstProbe = firstProbeRef.current;
|
|
87
110
|
if (firstProbe && firstProbe.key !== measurementKey) {
|
|
88
111
|
initialMeasurementKeyRef.current = firstProbe.key;
|
|
89
112
|
applyWidth(firstProbe.width);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNativeReanimated","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","useSharedValue","hasBootstrappedWidth","measuredWidthRef","useRef","bootstrappedRef","widthCacheRef","Map","hasCapturedVisibleLayoutRef","initialMeasurementKeyRef","firstProbeRef","latestProbeRef","bootstrapTimerRef","readyMeasurementKey","setReadyMeasurementKey","useState","markMeasurementReady","useCallback","key","currentKey","applyWidth","nextWidth","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNativeReanimated","WIDTH_CACHE_LIMIT","useInlineAutoWidth","enabled","driveToWidth","measurementKey","widthValue","useSharedValue","hasBootstrappedWidth","measuredWidthRef","useRef","bootstrappedRef","widthCacheRef","Map","firstEnabledMeasurementKeyRef","hasCapturedVisibleLayoutRef","initialMeasurementKeyRef","firstProbeRef","latestProbeRef","bootstrapTimerRef","readyMeasurementKey","setReadyMeasurementKey","useState","current","markMeasurementReady","useCallback","key","currentKey","applyWidth","nextWidth","value","bootstrapFromProbe","firstProbe","width","latestProbe","captureVisibleLayout","event","clearTimeout","Math","max","nativeEvent","layout","firstEnabledMeasurementKey","visibleKeyMatchesInitialKey","currentProbeWidth","get","undefined","delete","set","captureLayout","ceil","isInitialMeasurement","size","oldestKey","keys","next","probe","setTimeout","cachedWidth","useLayoutEffect","useEffect","animatedWidthStyle","useAnimatedStyle","isReady","shouldMeasure","exports"],"sourceRoot":"../../../src","sources":["hooks/use-inline-auto-width.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useLeadingAnimation = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _reactNativeReanimated = require("react-native-reanimated");
|
|
9
|
+
var _entryExitBuilders = require("../motion/entry-exit-builders");
|
|
10
|
+
// keep leading presence and replacement motion consistent across every content variant
|
|
11
|
+
const useLeadingAnimation = ({
|
|
12
|
+
leading,
|
|
13
|
+
leadingKey,
|
|
14
|
+
leadingGap,
|
|
15
|
+
motionRecipe
|
|
16
|
+
}) => {
|
|
17
|
+
const lastLeadingPresenceRef = (0, _react.useRef)(Boolean(leading));
|
|
18
|
+
const lastLeadingKeyRef = (0, _react.useRef)(leadingKey);
|
|
19
|
+
const isLeadingSwap = Boolean(leading) && lastLeadingPresenceRef.current && leadingKey !== lastLeadingKeyRef.current;
|
|
20
|
+
const isLeadingChange = Boolean(leading) !== lastLeadingPresenceRef.current || Boolean(leading) && leadingKey !== lastLeadingKeyRef.current;
|
|
21
|
+
const leadingSwapProgress = (0, _reactNativeReanimated.useSharedValue)(0);
|
|
22
|
+
|
|
23
|
+
// update the worklet flag after commit so render never writes a shared value
|
|
24
|
+
(0, _react.useLayoutEffect)(() => {
|
|
25
|
+
leadingSwapProgress.value = isLeadingSwap ? 1 : 0;
|
|
26
|
+
}, [isLeadingSwap, leadingSwapProgress]);
|
|
27
|
+
const elementEnterTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingEnterTransition)({
|
|
28
|
+
durationMs: motionRecipe.durationMs,
|
|
29
|
+
easing: motionRecipe.easing
|
|
30
|
+
}), [motionRecipe.durationMs, motionRecipe.easing]);
|
|
31
|
+
const elementExitTransition = (0, _react.useMemo)(() => (0, _entryExitBuilders.createLeadingExitTransition)({
|
|
32
|
+
durationMs: motionRecipe.durationMs,
|
|
33
|
+
easing: motionRecipe.easing,
|
|
34
|
+
leadingGap,
|
|
35
|
+
scale: leadingSwapProgress
|
|
36
|
+
}), [leadingGap, leadingSwapProgress, motionRecipe.durationMs, motionRecipe.easing]);
|
|
37
|
+
if (isLeadingChange) {
|
|
38
|
+
lastLeadingPresenceRef.current = Boolean(leading);
|
|
39
|
+
lastLeadingKeyRef.current = leadingKey;
|
|
40
|
+
}
|
|
41
|
+
return {
|
|
42
|
+
elementEnterTransition,
|
|
43
|
+
elementExitTransition,
|
|
44
|
+
isLeadingChange,
|
|
45
|
+
isLeadingSwap
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
exports.useLeadingAnimation = useLeadingAnimation;
|
|
49
|
+
//# sourceMappingURL=use-leading-animation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNativeReanimated","_entryExitBuilders","useLeadingAnimation","leading","leadingKey","leadingGap","motionRecipe","lastLeadingPresenceRef","useRef","Boolean","lastLeadingKeyRef","isLeadingSwap","current","isLeadingChange","leadingSwapProgress","useSharedValue","useLayoutEffect","value","elementEnterTransition","useMemo","createLeadingEnterTransition","durationMs","easing","elementExitTransition","createLeadingExitTransition","scale","exports"],"sourceRoot":"../../../src","sources":["hooks/use-leading-animation.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAaA;AACO,MAAMG,mBAAmB,GAAGA,CAAC;EAClCC,OAAO;EACPC,UAAU;EACVC,UAAU;EACVC;AACyB,CAAC,KAAK;EAC/B,MAAMC,sBAAsB,GAAG,IAAAC,aAAM,EAACC,OAAO,CAACN,OAAO,CAAC,CAAC;EACvD,MAAMO,iBAAiB,GAAG,IAAAF,aAAM,EAACJ,UAAU,CAAC;EAC5C,MAAMO,aAAa,GACjBF,OAAO,CAACN,OAAO,CAAC,IAChBI,sBAAsB,CAACK,OAAO,IAC9BR,UAAU,KAAKM,iBAAiB,CAACE,OAAO;EAC1C,MAAMC,eAAe,GACnBJ,OAAO,CAACN,OAAO,CAAC,KAAKI,sBAAsB,CAACK,OAAO,IAClDH,OAAO,CAACN,OAAO,CAAC,IAAIC,UAAU,KAAKM,iBAAiB,CAACE,OAAQ;EAChE,MAAME,mBAAmB,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;;EAE7C;EACA,IAAAC,sBAAe,EAAC,MAAM;IACpBF,mBAAmB,CAACG,KAAK,GAAGN,aAAa,GAAG,CAAC,GAAG,CAAC;EACnD,CAAC,EAAE,CAACA,aAAa,EAAEG,mBAAmB,CAAC,CAAC;EAExC,MAAMI,sBAAsB,GAAG,IAAAC,cAAO,EACpC,MACE,IAAAC,+CAA4B,EAAC;IAC3BC,UAAU,EAAEf,YAAY,CAACe,UAAU;IACnCC,MAAM,EAAEhB,YAAY,CAACgB;EACvB,CAAC,CAAC,EACJ,CAAChB,YAAY,CAACe,UAAU,EAAEf,YAAY,CAACgB,MAAM,CAC/C,CAAC;EACD,MAAMC,qBAAqB,GAAG,IAAAJ,cAAO,EACnC,MACE,IAAAK,8CAA2B,EAAC;IAC1BH,UAAU,EAAEf,YAAY,CAACe,UAAU;IACnCC,MAAM,EAAEhB,YAAY,CAACgB,MAAM;IAC3BjB,UAAU;IACVoB,KAAK,EAAEX;EACT,CAAC,CAAC,EACJ,CACET,UAAU,EACVS,mBAAmB,EACnBR,YAAY,CAACe,UAAU,EACvBf,YAAY,CAACgB,MAAM,CAEvB,CAAC;EAED,IAAIT,eAAe,EAAE;IACnBN,sBAAsB,CAACK,OAAO,GAAGH,OAAO,CAACN,OAAO,CAAC;IACjDO,iBAAiB,CAACE,OAAO,GAAGR,UAAU;EACxC;EAEA,OAAO;IACLc,sBAAsB;IACtBK,qBAAqB;IACrBV,eAAe;IACfF;EACF,CAAC;AACH,CAAC;AAACe,OAAA,CAAAxB,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -9,12 +9,14 @@ var _presetMap = require("../motion/preset-map");
|
|
|
9
9
|
// resolve one motion recipe and one shared stagger unit for a render tree
|
|
10
10
|
const useMorphMotion = ({
|
|
11
11
|
variant,
|
|
12
|
+
numberMode,
|
|
12
13
|
animationPreset,
|
|
13
14
|
animationDuration,
|
|
14
15
|
stagger
|
|
15
16
|
}) => {
|
|
17
|
+
const isTicker = variant === "number" && numberMode === "ticker";
|
|
16
18
|
// numeric variants need a quicker default because their lanes update often
|
|
17
|
-
const resolvedPreset = animationPreset ?? (variant === "text" ? "default" : "snappy");
|
|
19
|
+
const resolvedPreset = animationPreset ?? (isTicker ? "ticker" : variant === "text" ? "default" : "snappy");
|
|
18
20
|
const motionRecipe = (0, _react.useMemo)(() => (0, _presetMap.resolveMotionRecipe)(resolvedPreset, animationDuration), [animationDuration, resolvedPreset]);
|
|
19
21
|
return {
|
|
20
22
|
motionRecipe,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_presetMap","useMorphMotion","variant","animationPreset","animationDuration","stagger","resolvedPreset","motionRecipe","useMemo","resolveMotionRecipe","staggerMs","Math","round","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;
|
|
1
|
+
{"version":3,"names":["_react","require","_presetMap","useMorphMotion","variant","numberMode","animationPreset","animationDuration","stagger","isTicker","resolvedPreset","motionRecipe","useMemo","resolveMotionRecipe","staggerMs","Math","round","exports"],"sourceRoot":"../../../src","sources":["hooks/use-morph-motion.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAqBA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BC,OAAO;EACPC,UAAU;EACVC,eAAe;EACfC,iBAAiB;EACjBC;AACM,CAAC,KAAkB;EACzB,MAAMC,QAAQ,GAAGL,OAAO,KAAK,QAAQ,IAAIC,UAAU,KAAK,QAAQ;EAChE;EACA,MAAMK,cAAc,GAClBJ,eAAe,KACdG,QAAQ,GACL,QAAQ,GACRL,OAAO,KAAK,MAAM,GAChB,SAAS,GACT,QAAQ,CAAC;EAEjB,MAAMO,YAAY,GAAG,IAAAC,cAAO,EAC1B,MAAM,IAAAC,8BAAmB,EAACH,cAAc,EAAEH,iBAAiB,CAAC,EAC5D,CAACA,iBAAiB,EAAEG,cAAc,CACpC,CAAC;EAED,OAAO;IACLC,YAAY;IACZG,SAAS,EAAEC,IAAI,CAACC,KAAK,CAACR,OAAO,GAAG,IAAI;EACtC,CAAC;AACH,CAAC;AAACS,OAAA,CAAAd,cAAA,GAAAA,cAAA","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var _displayUnits = require("./model/display-units");
|
|
|
13
13
|
var _morphViewport = require("./view/morph-viewport");
|
|
14
14
|
var _numberRun = require("./view/number-run");
|
|
15
15
|
var _slotsRun = require("./view/slots-run");
|
|
16
|
+
var _tickerRun = require("./view/ticker-run");
|
|
16
17
|
var _textRun = require("./view/text-run");
|
|
17
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -27,12 +28,14 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
27
28
|
leading,
|
|
28
29
|
leadingKey,
|
|
29
30
|
leadingGap = 0,
|
|
31
|
+
numberMode = "morph",
|
|
32
|
+
shadow = false,
|
|
30
33
|
style,
|
|
31
34
|
containerStyle,
|
|
32
35
|
fontStyle,
|
|
33
36
|
animationDuration,
|
|
34
37
|
animationPreset,
|
|
35
|
-
stagger
|
|
38
|
+
stagger,
|
|
36
39
|
autoSize = true,
|
|
37
40
|
clipToBounds = false
|
|
38
41
|
}) {
|
|
@@ -41,14 +44,17 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
41
44
|
const leadingMap = isLeadingMap(leading) ? leading : undefined;
|
|
42
45
|
const resolvedLeading = leadingMap ? leadingMap[resolvedValue] : leading;
|
|
43
46
|
const resolvedLeadingKey = leadingMap ? resolvedValue : leadingKey;
|
|
47
|
+
const resolvedStagger = stagger ?? (variant === "number" && numberMode === "ticker" ? 0 : 0.02);
|
|
48
|
+
const useLayoutAutoSize = autoSize && variant === "number" && numberMode === "ticker";
|
|
44
49
|
const {
|
|
45
50
|
motionRecipe,
|
|
46
51
|
staggerMs
|
|
47
52
|
} = (0, _useMorphMotion.useMorphMotion)({
|
|
48
53
|
variant,
|
|
54
|
+
numberMode,
|
|
49
55
|
animationPreset,
|
|
50
56
|
animationDuration,
|
|
51
|
-
stagger
|
|
57
|
+
stagger: resolvedStagger
|
|
52
58
|
});
|
|
53
59
|
const {
|
|
54
60
|
textStyle
|
|
@@ -62,7 +68,7 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
62
68
|
// invalidate the probe when text style, leading content, or leading spacing changes
|
|
63
69
|
const measurementKey = _react.default.useMemo(() => {
|
|
64
70
|
const flattenedStyle = _reactNative.StyleSheet.flatten(textStyle);
|
|
65
|
-
return JSON.stringify([resolvedValue, flattenedStyle?.fontFamily, flattenedStyle?.fontSize, flattenedStyle?.fontStyle, flattenedStyle?.fontWeight, flattenedStyle?.fontVariant, flattenedStyle?.letterSpacing, flattenedStyle?.lineHeight, flattenedStyle?.textTransform,
|
|
71
|
+
return JSON.stringify([resolvedValue, flattenedStyle?.fontFamily, flattenedStyle?.fontSize, flattenedStyle?.fontStyle, flattenedStyle?.fontWeight, flattenedStyle?.fontVariant, flattenedStyle?.letterSpacing, flattenedStyle?.lineHeight, flattenedStyle?.textTransform, Boolean(resolvedLeading), resolvedLeadingKey, leadingGap]);
|
|
66
72
|
}, [leadingGap, resolvedLeading, resolvedLeadingKey, resolvedValue, textStyle, variant]);
|
|
67
73
|
const {
|
|
68
74
|
captureLayout,
|
|
@@ -88,6 +94,7 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
88
94
|
align: align,
|
|
89
95
|
containerStyle: containerStyle,
|
|
90
96
|
animatedWidthStyle: animatedWidthStyle,
|
|
97
|
+
autoSizeLayoutTransition: useLayoutAutoSize ? motionRecipe.layoutTransition : undefined,
|
|
91
98
|
onVisibleLayout: autoSize ? captureVisibleLayout : undefined,
|
|
92
99
|
measurement: shouldMeasure ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
93
100
|
onLayout: captureLayout,
|
|
@@ -95,7 +102,7 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
95
102
|
flexDirection: "row",
|
|
96
103
|
alignSelf: "flex-start"
|
|
97
104
|
},
|
|
98
|
-
children: [
|
|
105
|
+
children: [resolvedLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
99
106
|
style: {
|
|
100
107
|
alignItems: "center",
|
|
101
108
|
justifyContent: "center",
|
|
@@ -114,7 +121,25 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
114
121
|
fontSize: fontSize,
|
|
115
122
|
textStyle: textStyle,
|
|
116
123
|
staggerMs: staggerMs,
|
|
117
|
-
className: className
|
|
124
|
+
className: className,
|
|
125
|
+
leading: resolvedLeading,
|
|
126
|
+
leadingKey: resolvedLeadingKey,
|
|
127
|
+
leadingGap: leadingGap,
|
|
128
|
+
ready: !autoSize || isAutoSizeReady,
|
|
129
|
+
shadow: shadow
|
|
130
|
+
}) : variant === "number" && numberMode === "ticker" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tickerRun.TickerRun, {
|
|
131
|
+
value: resolvedValue,
|
|
132
|
+
motionRecipe: motionRecipe,
|
|
133
|
+
align: align,
|
|
134
|
+
fontSize: fontSize,
|
|
135
|
+
textStyle: textStyle,
|
|
136
|
+
staggerMs: staggerMs,
|
|
137
|
+
className: className,
|
|
138
|
+
leading: resolvedLeading,
|
|
139
|
+
leadingKey: resolvedLeadingKey,
|
|
140
|
+
leadingGap: leadingGap,
|
|
141
|
+
ready: !autoSize || isAutoSizeReady,
|
|
142
|
+
shadow: shadow
|
|
118
143
|
}) : variant === "number" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_numberRun.NumberRun, {
|
|
119
144
|
value: resolvedValue,
|
|
120
145
|
motionRecipe: motionRecipe,
|
|
@@ -122,7 +147,11 @@ const Laminar = exports.Laminar = /*#__PURE__*/_react.default.memo(function Lami
|
|
|
122
147
|
fontSize: fontSize,
|
|
123
148
|
textStyle: textStyle,
|
|
124
149
|
staggerMs: staggerMs,
|
|
125
|
-
className: className
|
|
150
|
+
className: className,
|
|
151
|
+
leading: resolvedLeading,
|
|
152
|
+
leadingKey: resolvedLeadingKey,
|
|
153
|
+
leadingGap: leadingGap,
|
|
154
|
+
ready: !autoSize || isAutoSizeReady
|
|
126
155
|
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_textRun.TextRun, {
|
|
127
156
|
value: resolvedValue,
|
|
128
157
|
motionRecipe: motionRecipe,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_slotsRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","measurementKey","useMemo","flattenedStyle","StyleSheet","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","onVisibleLayout","measurement","jsxs","View","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","Text","SlotsRun","value","NumberRun","TextRun","leadingLayoutGroup","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_useInlineAutoWidth","_useMorphMotion","_useMorphTextStyle","_displayUnits","_morphViewport","_numberRun","_slotsRun","_tickerRun","_textRun","_jsxRuntime","e","__esModule","default","Laminar","exports","React","memo","text","variant","fontSize","color","align","className","leading","leadingKey","leadingGap","numberMode","shadow","style","containerStyle","fontStyle","animationDuration","animationPreset","stagger","autoSize","clipToBounds","resolvedValue","String","leadingMap","isLeadingMap","undefined","resolvedLeading","resolvedLeadingKey","resolvedStagger","useLayoutAutoSize","motionRecipe","staggerMs","useMorphMotion","textStyle","useMorphTextStyle","measurementKey","useMemo","flattenedStyle","StyleSheet","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","useInlineAutoWidth","enabled","driveToWidth","driveNumber","measuredValue","splitDisplayUnits","map","normalizeDisplayUnit","join","jsx","MorphViewport","autoSizeLayoutTransition","layoutTransition","onVisibleLayout","measurement","jsxs","View","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","Text","SlotsRun","value","ready","TickerRun","NumberRun","TextRun","leadingLayoutGroup","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAL,OAAA;AAKA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,UAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AACA,IAAAU,QAAA,GAAAV,OAAA;AAA0C,IAAAW,WAAA,GAAAX,OAAA;AAAA,SAAAD,uBAAAa,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE1C;AACO,MAAMG,OAAO,GAAAC,OAAA,CAAAD,OAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,SAASH,OAAOA,CAAC;EAC/CI,IAAI;EACJC,OAAO,GAAG,MAAM;EAChBC,QAAQ;EACRC,KAAK;EACLC,KAAK,GAAG,MAAM;EACdC,SAAS;EACTC,OAAO;EACPC,UAAU;EACVC,UAAU,GAAG,CAAC;EACdC,UAAU,GAAG,OAAO;EACpBC,MAAM,GAAG,KAAK;EACdC,KAAK;EACLC,cAAc;EACdC,SAAS;EACTC,iBAAiB;EACjBC,eAAe;EACfC,OAAO;EACPC,QAAQ,GAAG,IAAI;EACfC,YAAY,GAAG;AACY,CAAC,EAAE;EAC9B,MAAMC,aAAa,GAAGC,MAAM,CAACpB,IAAI,IAAI,EAAE,CAAC;EACxC;EACA,MAAMqB,UAAU,GAAGC,YAAY,CAAChB,OAAO,CAAC,GAAGA,OAAO,GAAGiB,SAAS;EAC9D,MAAMC,eAAgC,GAAGH,UAAU,GAC/CA,UAAU,CAACF,aAAa,CAAC,GACxBb,OAA2B;EAChC,MAAMmB,kBAAkB,GAAGJ,UAAU,GAAGF,aAAa,GAAGZ,UAAU;EAClE,MAAMmB,eAAe,GACnBV,OAAO,KAAKf,OAAO,KAAK,QAAQ,IAAIQ,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC;EACzE,MAAMkB,iBAAiB,GACrBV,QAAQ,IAAIhB,OAAO,KAAK,QAAQ,IAAIQ,UAAU,KAAK,QAAQ;EAC7D,MAAM;IAAEmB,YAAY;IAAEC;EAAU,CAAC,GAAG,IAAAC,8BAAc,EAAC;IACjD7B,OAAO;IACPQ,UAAU;IACVM,eAAe;IACfD,iBAAiB;IACjBE,OAAO,EAAEU;EACX,CAAC,CAAC;EACF,MAAM;IAAEK;EAAU,CAAC,GAAG,IAAAC,oCAAiB,EAAC;IACtC9B,QAAQ;IACRC,KAAK;IACLU,SAAS;IACTF;EACF,CAAC,CAAC;;EAEF;EACA,MAAMsB,cAAc,GAAGnC,cAAK,CAACoC,OAAO,CAAC,MAAM;IACzC,MAAMC,cAAc,GAAGC,uBAAU,CAACC,OAAO,CAACN,SAAS,CAAC;IAEpD,OAAOO,IAAI,CAACC,SAAS,CAAC,CACpBpB,aAAa,EACbgB,cAAc,EAAEK,UAAU,EAC1BL,cAAc,EAAEjC,QAAQ,EACxBiC,cAAc,EAAEtB,SAAS,EACzBsB,cAAc,EAAEM,UAAU,EAC1BN,cAAc,EAAEO,WAAW,EAC3BP,cAAc,EAAEQ,aAAa,EAC7BR,cAAc,EAAES,UAAU,EAC1BT,cAAc,EAAEU,aAAa,EAC7BC,OAAO,CAACtB,eAAe,CAAC,EACxBC,kBAAkB,EAClBjB,UAAU,CACX,CAAC;EACJ,CAAC,EAAE,CACDA,UAAU,EACVgB,eAAe,EACfC,kBAAkB,EAClBN,aAAa,EACbY,SAAS,EACT9B,OAAO,CACR,CAAC;EACF,MAAM;IACJ8C,aAAa;IACbC,oBAAoB;IACpBC,kBAAkB;IAClBC,OAAO,EAAEC,eAAe;IACxBC;EACF,CAAC,GACC,IAAAC,sCAAkB,EAAC;IACjBC,OAAO,EAAErC,QAAQ;IACjBsC,YAAY,EAAE3B,YAAY,CAAC4B,WAAW;IACtCvB;EACF,CAAC,CAAC;EACJ;EACA,MAAMwB,aAAa,GAAG3D,cAAK,CAACoC,OAAO,CAAC,MAAM;IACxC,IAAI,CAACjB,QAAQ,EAAE;MACb,OAAO,EAAE;IACX;IAEA,OAAO,IAAAyC,+BAAiB,EAACvC,aAAa,CAAC,CACpCwC,GAAG,CAACC,kCAAoB,CAAC,CACzBC,IAAI,CAAC,EAAE,CAAC;EACb,CAAC,EAAE,CAAC5C,QAAQ,EAAEE,aAAa,CAAC,CAAC;EAE7B,oBACE,IAAA3B,WAAA,CAAAsE,GAAA,EAAC3E,cAAA,CAAA4E,aAAa;IACZ9C,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3Bd,KAAK,EAAEA,KAAM;IACbQ,cAAc,EAAEA,cAAe;IAC/BqC,kBAAkB,EAAEA,kBAAmB;IACvCe,wBAAwB,EACtBrC,iBAAiB,GAAGC,YAAY,CAACqC,gBAAgB,GAAG1C,SACrD;IACD2C,eAAe,EAAEjD,QAAQ,GAAG+B,oBAAoB,GAAGzB,SAAU;IAC7D4C,WAAW,EACTf,aAAa,gBACX,IAAA5D,WAAA,CAAA4E,IAAA,EAACtF,YAAA,CAAAuF,IAAI;MAEHC,QAAQ,EAAEvB,aAAc;MACxBpC,KAAK,EAAE;QAAE4D,aAAa,EAAE,KAAK;QAAEC,SAAS,EAAE;MAAa,CAAE;MAAAC,QAAA,GAExDjD,eAAe,gBACd,IAAAhC,WAAA,CAAAsE,GAAA,EAAChF,YAAA,CAAAuF,IAAI;QACH1D,KAAK,EAAE;UACL+D,UAAU,EAAE,QAAQ;UACpBC,cAAc,EAAE,QAAQ;UACxBC,WAAW,EAAEpE;QACf,CAAE;QAAAiE,QAAA,EAEDjD;MAAe,CACZ,CAAC,GACL,IAAI,EACP,IAAAkC,+BAAiB,EAACD,aAAa,CAAC,CAACE,GAAG,CAAC,CAACkB,IAAI,EAAEC,KAAK,kBAChD,IAAAtF,WAAA,CAAAsE,GAAA,EAAChF,YAAA,CAAAiG,IAAI;QAA0BpE,KAAK,EAAEoB,SAAU;QAAA0C,QAAA,EAC7C,IAAAb,kCAAoB,EAACiB,IAAI;MAAC,GADlB,GAAGA,IAAI,IAAIC,KAAK,EAErB,CACP,CAAC;IAAA,GAnBG7C,cAoBD,CAAC,GACLV,SACL;IAAAkD,QAAA,EAEAxE,OAAO,KAAK,OAAO,gBAClB,IAAAT,WAAA,CAAAsE,GAAA,EAACzE,SAAA,CAAA2F,QAAQ;MACPC,KAAK,EAAE9D,aAAc;MACrBS,YAAY,EAAEA,YAAa;MAC3BxB,KAAK,EAAEA,KAAM;MACbF,QAAQ,EAAEA,QAAS;MACnB6B,SAAS,EAAEA,SAAU;MACrBF,SAAS,EAAEA,SAAU;MACrBxB,SAAS,EAAEA,SAAU;MACrBC,OAAO,EAAEkB,eAAgB;MACzBjB,UAAU,EAAEkB,kBAAmB;MAC/BjB,UAAU,EAAEA,UAAW;MACvB0E,KAAK,EAAE,CAACjE,QAAQ,IAAIkC,eAAgB;MACpCzC,MAAM,EAAEA;IAAO,CAChB,CAAC,GACAT,OAAO,KAAK,QAAQ,IAAIQ,UAAU,KAAK,QAAQ,gBACjD,IAAAjB,WAAA,CAAAsE,GAAA,EAACxE,UAAA,CAAA6F,SAAS;MACRF,KAAK,EAAE9D,aAAc;MACrBS,YAAY,EAAEA,YAAa;MAC3BxB,KAAK,EAAEA,KAAM;MACbF,QAAQ,EAAEA,QAAS;MACnB6B,SAAS,EAAEA,SAAU;MACrBF,SAAS,EAAEA,SAAU;MACrBxB,SAAS,EAAEA,SAAU;MACrBC,OAAO,EAAEkB,eAAgB;MACzBjB,UAAU,EAAEkB,kBAAmB;MAC/BjB,UAAU,EAAEA,UAAW;MACvB0E,KAAK,EAAE,CAACjE,QAAQ,IAAIkC,eAAgB;MACpCzC,MAAM,EAAEA;IAAO,CAChB,CAAC,GACAT,OAAO,KAAK,QAAQ,gBACtB,IAAAT,WAAA,CAAAsE,GAAA,EAAC1E,UAAA,CAAAgG,SAAS;MACRH,KAAK,EAAE9D,aAAc;MACrBS,YAAY,EAAEA,YAAa;MAC3BxB,KAAK,EAAEA,KAAM;MACbF,QAAQ,EAAEA,QAAS;MACnB6B,SAAS,EAAEA,SAAU;MACrBF,SAAS,EAAEA,SAAU;MACrBxB,SAAS,EAAEA,SAAU;MACrBC,OAAO,EAAEkB,eAAgB;MACzBjB,UAAU,EAAEkB,kBAAmB;MAC/BjB,UAAU,EAAEA,UAAW;MACvB0E,KAAK,EAAE,CAACjE,QAAQ,IAAIkC;IAAgB,CACrC,CAAC,gBAEF,IAAA3D,WAAA,CAAAsE,GAAA,EAACvE,QAAA,CAAA8F,OAAO;MACNJ,KAAK,EAAE9D,aAAc;MACrBS,YAAY,EAAEA,YAAa;MAC3BxB,KAAK,EAAEA,KAAM;MACbE,OAAO,EAAEkB,eAAgB;MACzB8D,kBAAkB,EAAExC,OAAO,CAACxC,OAAO,CAAE;MACrCC,UAAU,EAAEkB,kBAAmB;MAC/BjB,UAAU,EAAEA,UAAW;MACvB0E,KAAK,EAAE,CAACjE,QAAQ,IAAIkC,eAAgB;MACpCpB,SAAS,EAAEA,SAAU;MACrB1B,SAAS,EAAEA;IAAU,CACtB;EACJ,CACY,CAAC;AAElB,CAAC,CAAC;AAEJ,SAASiB,YAAYA,CACnB2D,KAAmC,EACP;EAC5B;EACA,OACE,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,eAACnF,cAAK,CAACyF,cAAc,CAACN,KAAK,CAAC,IAC5B,CAACO,KAAK,CAACC,OAAO,CAACR,KAAK,CAAC;AAEzB","ignoreList":[]}
|
|
@@ -7,6 +7,7 @@ exports.resolveMotionRecipe = exports.MOTION_PRESETS = void 0;
|
|
|
7
7
|
var _reactNativeReanimated = require("react-native-reanimated");
|
|
8
8
|
// keep all presets on one curve family so layout and glyph motion agree
|
|
9
9
|
const DEFAULT_CURVE = [0.19, 1, 0.22, 1];
|
|
10
|
+
const TICKER_CURVE = [0.33, 1, 0.68, 1];
|
|
10
11
|
const MOTION_PRESETS = exports.MOTION_PRESETS = {
|
|
11
12
|
default: {
|
|
12
13
|
duration: 0.38,
|
|
@@ -26,6 +27,10 @@ const MOTION_PRESETS = exports.MOTION_PRESETS = {
|
|
|
26
27
|
type: "spring",
|
|
27
28
|
duration: 0.5,
|
|
28
29
|
bounce: 0.3
|
|
30
|
+
},
|
|
31
|
+
ticker: {
|
|
32
|
+
duration: 0.3,
|
|
33
|
+
ease: TICKER_CURVE
|
|
29
34
|
}
|
|
30
35
|
};
|
|
31
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNativeReanimated","require","DEFAULT_CURVE","MOTION_PRESETS","exports","default","duration","ease","smooth","type","bounce","snappy","bouncy","toMilliseconds","seconds","Math","round","toDampingRatio","max","min","createOpacityTransition","fromOpacity","toOpacity","durationMs","easing","initialValues","opacity","animations","withTiming","resolveMotionRecipe","presetName","durationOverride","preset","dampingRatio","Easing","bezier","layoutTransition","LinearTransition","factory","enterTransition","exitTransition","driveNumber","toValue","delayMs","animation","withSpring","overshootClamping","withDelay","timingPreset","x1","y1","x2","y2"],"sourceRoot":"../../../src","sources":["motion/preset-map.ts"],"mappings":";;;;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAeA;AACA,MAAMC,aAAa,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAU;
|
|
1
|
+
{"version":3,"names":["_reactNativeReanimated","require","DEFAULT_CURVE","TICKER_CURVE","MOTION_PRESETS","exports","default","duration","ease","smooth","type","bounce","snappy","bouncy","ticker","toMilliseconds","seconds","Math","round","toDampingRatio","max","min","createOpacityTransition","fromOpacity","toOpacity","durationMs","easing","initialValues","opacity","animations","withTiming","resolveMotionRecipe","presetName","durationOverride","preset","dampingRatio","Easing","bezier","layoutTransition","LinearTransition","factory","enterTransition","exitTransition","driveNumber","toValue","delayMs","animation","withSpring","overshootClamping","withDelay","timingPreset","x1","y1","x2","y2"],"sourceRoot":"../../../src","sources":["motion/preset-map.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.LeadingElement = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
+
// render an inline element independently so it can enter, exit, and swap beside any run
|
|
12
|
+
const LeadingElement = exports.LeadingElement = /*#__PURE__*/_react.default.memo(function LeadingElement({
|
|
13
|
+
leading,
|
|
14
|
+
leadingKey,
|
|
15
|
+
leadingGap,
|
|
16
|
+
enterTransition,
|
|
17
|
+
elementEnterTransition,
|
|
18
|
+
exitTransition,
|
|
19
|
+
elementExitTransition
|
|
20
|
+
}) {
|
|
21
|
+
if (!leading) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
25
|
+
entering: elementEnterTransition ?? enterTransition,
|
|
26
|
+
exiting: elementExitTransition ?? exitTransition,
|
|
27
|
+
style: [{
|
|
28
|
+
alignItems: "center",
|
|
29
|
+
justifyContent: "center"
|
|
30
|
+
}, leadingGap > 0 ? {
|
|
31
|
+
marginRight: leadingGap
|
|
32
|
+
} : undefined],
|
|
33
|
+
children: leading
|
|
34
|
+
}, `leading:${String(leadingKey ?? "default")}`);
|
|
35
|
+
});
|
|
36
|
+
LeadingElement.displayName = "LeadingElement";
|
|
37
|
+
//# sourceMappingURL=leading-element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNativeReanimated","_jsxRuntime","e","__esModule","default","LeadingElement","exports","React","memo","leading","leadingKey","leadingGap","enterTransition","elementEnterTransition","exitTransition","elementExitTransition","jsx","View","entering","exiting","style","alignItems","justifyContent","marginRight","undefined","children","String","displayName"],"sourceRoot":"../../../src","sources":["view/leading-element.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,sBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEiC,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAYjC;AACO,MAAMG,cAAc,GAAAC,OAAA,CAAAD,cAAA,gBAAGE,cAAK,CAACC,IAAI,CAAC,SAASH,cAAcA,CAAC;EAC/DI,OAAO;EACPC,UAAU;EACVC,UAAU;EACVC,eAAe;EACfC,sBAAsB;EACtBC,cAAc;EACdC;AACmB,CAAC,EAAE;EACtB,IAAI,CAACN,OAAO,EAAE;IACZ,OAAO,IAAI;EACb;EAEA,oBACE,IAAAR,WAAA,CAAAe,GAAA,EAAChB,sBAAA,CAAAI,OAAQ,CAACa,IAAI;IAEZC,QAAQ,EAAEL,sBAAsB,IAAID,eAAgB;IACpDO,OAAO,EAAEJ,qBAAqB,IAAID,cAAe;IACjDM,KAAK,EAAE,CACL;MAAEC,UAAU,EAAE,QAAQ;MAAEC,cAAc,EAAE;IAAS,CAAC,EAClDX,UAAU,GAAG,CAAC,GAAG;MAAEY,WAAW,EAAEZ;IAAW,CAAC,GAAGa,SAAS,CACxD;IAAAC,QAAA,EAEDhB;EAAO,GARH,WAAWiB,MAAM,CAAChB,UAAU,IAAI,SAAS,CAAC,EASlC,CAAC;AAEpB,CAAC,CAAC;AAEFL,cAAc,CAACsB,WAAW,GAAG,gBAAgB","ignoreList":[]}
|
|
@@ -63,14 +63,40 @@ const MorphViewport = exports.MorphViewport = /*#__PURE__*/_react.default.memo((
|
|
|
63
63
|
align,
|
|
64
64
|
containerStyle,
|
|
65
65
|
animatedWidthStyle,
|
|
66
|
+
autoSizeLayoutTransition,
|
|
66
67
|
onVisibleLayout,
|
|
67
68
|
measurement,
|
|
68
69
|
children
|
|
69
70
|
}) => {
|
|
71
|
+
const hasRenderedRef = (0, _react.useRef)(false);
|
|
72
|
+
const shouldAnimateAutoSizeLayout = autoSizeLayoutTransition !== undefined && hasRenderedRef.current;
|
|
73
|
+
hasRenderedRef.current = true;
|
|
74
|
+
|
|
70
75
|
// compute alignment once so the animated shell and its child share one layout contract
|
|
71
76
|
const resolvedViewportStyle = (0, _react.useMemo)(() => [viewportStyle, viewportAlignStyles[align], clipToBounds ? clippedViewportStyle : unclippedViewportStyle], [align, clipToBounds]);
|
|
72
77
|
|
|
73
78
|
// keep measurement outside the visible viewport so it cannot affect accessibility or layout
|
|
79
|
+
if (autoSizeLayoutTransition) {
|
|
80
|
+
// Layout animation owns both width and the shell's aligned x-position.
|
|
81
|
+
// This is important for center/right auto-size: animating only a child
|
|
82
|
+
// width leaves the parent anchor at its old position.
|
|
83
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
|
|
84
|
+
layout: shouldAnimateAutoSizeLayout ? autoSizeLayoutTransition : undefined,
|
|
85
|
+
style: [shellStyle, shellAlignStyles[align], containerStyle],
|
|
86
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
87
|
+
accessibilityElementsHidden: true,
|
|
88
|
+
collapsable: false,
|
|
89
|
+
importantForAccessibility: "no-hide-descendants",
|
|
90
|
+
pointerEvents: "none",
|
|
91
|
+
style: measuredContentStyle,
|
|
92
|
+
children: measurement
|
|
93
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
94
|
+
onLayout: onVisibleLayout,
|
|
95
|
+
style: resolvedViewportStyle,
|
|
96
|
+
children: children
|
|
97
|
+
})]
|
|
98
|
+
});
|
|
99
|
+
}
|
|
74
100
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
75
101
|
style: [shellStyle, shellAlignStyles[align], containerStyle],
|
|
76
102
|
children: autoSize ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","exports","React","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","onVisibleLayout","measurement","children","resolvedViewportStyle","useMemo","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeReanimated","_interopRequireDefault","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","shellStyle","position","alignSelf","viewportStyle","measuredContentStyle","left","top","opacity","flexShrink","clippedViewportStyle","overflow","unclippedViewportStyle","fullWidthViewportStyle","width","shellAlignStyles","center","right","viewportAlignStyles","alignItems","MorphViewport","exports","React","memo","autoSize","clipToBounds","align","containerStyle","animatedWidthStyle","autoSizeLayoutTransition","onVisibleLayout","measurement","children","hasRenderedRef","useRef","shouldAnimateAutoSizeLayout","undefined","current","resolvedViewportStyle","useMemo","jsxs","View","layout","style","jsx","accessibilityElementsHidden","collapsable","importantForAccessibility","pointerEvents","onLayout","Fragment","displayName"],"sourceRoot":"../../../src","sources":["view/morph-viewport.tsx"],"mappings":"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","ignoreList":[]}
|