react-native-laminar 1.4.3 → 1.4.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/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-text-glyphs.js +24 -21
- package/lib/commonjs/hooks/use-text-glyphs.js.map +1 -1
- package/lib/commonjs/index.js +1 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/view/glyph-run.js +38 -19
- package/lib/commonjs/view/glyph-run.js.map +1 -1
- package/lib/commonjs/view/text-run.js +4 -0
- package/lib/commonjs/view/text-run.js.map +1 -1
- 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-text-glyphs.js +24 -21
- package/lib/module/hooks/use-text-glyphs.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/view/glyph-run.js +39 -20
- package/lib/module/view/glyph-run.js.map +1 -1
- package/lib/module/view/text-run.js +4 -0
- package/lib/module/view/text-run.js.map +1 -1
- package/lib/typescript/commonjs/hooks/use-inline-auto-width.d.ts.map +1 -1
- package/lib/typescript/commonjs/hooks/use-text-glyphs.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/glyph-run.d.ts +3 -1
- package/lib/typescript/commonjs/view/glyph-run.d.ts.map +1 -1
- package/lib/typescript/commonjs/view/text-run.d.ts +2 -1
- package/lib/typescript/commonjs/view/text-run.d.ts.map +1 -1
- package/lib/typescript/module/hooks/use-inline-auto-width.d.ts.map +1 -1
- package/lib/typescript/module/hooks/use-text-glyphs.d.ts.map +1 -1
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/view/glyph-run.d.ts +3 -1
- package/lib/typescript/module/view/glyph-run.d.ts.map +1 -1
- package/lib/typescript/module/view/text-run.d.ts +2 -1
- package/lib/typescript/module/view/text-run.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/hooks/use-inline-auto-width.ts +33 -1
- package/src/hooks/use-text-glyphs.ts +35 -28
- package/src/index.tsx +1 -0
- package/src/view/glyph-run.tsx +62 -33
- package/src/view/text-run.tsx +10 -0
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","StyleSheet","Text","View","useInlineAutoWidth","useMorphMotion","useMorphTextStyle","normalizeDisplayUnit","splitDisplayUnits","MorphViewport","NumberRun","SlotsRun","TextRun","jsx","_jsx","jsxs","_jsxs","Laminar","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","textStyle","measurementKey","useMemo","flattenedStyle","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","enabled","driveToWidth","driveNumber","measuredValue","map","join","onVisibleLayout","measurement","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","value","ready","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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
|
|
1
|
+
{"version":3,"names":["React","StyleSheet","Text","View","useInlineAutoWidth","useMorphMotion","useMorphTextStyle","normalizeDisplayUnit","splitDisplayUnits","MorphViewport","NumberRun","SlotsRun","TextRun","jsx","_jsx","jsxs","_jsxs","Laminar","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","textStyle","measurementKey","useMemo","flattenedStyle","flatten","JSON","stringify","fontFamily","fontWeight","fontVariant","letterSpacing","lineHeight","textTransform","Boolean","captureLayout","captureVisibleLayout","animatedWidthStyle","isReady","isAutoSizeReady","shouldMeasure","enabled","driveToWidth","driveNumber","measuredValue","map","join","onVisibleLayout","measurement","onLayout","flexDirection","alignSelf","children","alignItems","justifyContent","marginRight","unit","index","value","leadingLayoutGroup","ready","isValidElement","Array","isArray"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -3,12 +3,17 @@
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import { View } from "react-native";
|
|
5
5
|
import Animated from "react-native-reanimated";
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
7
|
const rowStyle = {
|
|
8
8
|
flexDirection: "row",
|
|
9
9
|
alignItems: "center",
|
|
10
10
|
alignSelf: "flex-start"
|
|
11
11
|
};
|
|
12
|
+
const textRowStyle = {
|
|
13
|
+
flexDirection: "row",
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
alignSelf: "flex-start"
|
|
16
|
+
};
|
|
12
17
|
const rowAlignStyles = {
|
|
13
18
|
left: {
|
|
14
19
|
alignSelf: "flex-start"
|
|
@@ -25,6 +30,8 @@ const rowAlignStyles = {
|
|
|
25
30
|
export const GlyphRun = /*#__PURE__*/React.memo(({
|
|
26
31
|
glyphs,
|
|
27
32
|
layoutTransition,
|
|
33
|
+
leadingLayoutTransition,
|
|
34
|
+
leadingLayoutGroup = false,
|
|
28
35
|
enterTransition,
|
|
29
36
|
elementEnterTransition,
|
|
30
37
|
exitTransition,
|
|
@@ -33,30 +40,42 @@ export const GlyphRun = /*#__PURE__*/React.memo(({
|
|
|
33
40
|
align,
|
|
34
41
|
textStyle,
|
|
35
42
|
className
|
|
36
|
-
}) =>
|
|
37
|
-
|
|
38
|
-
//
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
entering: elementEnterTransition ?? enterTransition,
|
|
44
|
-
exiting: elementExitTransition ?? exitTransition,
|
|
45
|
-
style: [{
|
|
46
|
-
alignItems: "center",
|
|
47
|
-
justifyContent: "center"
|
|
48
|
-
}, glyphIndex === 0 && (leadingGap ?? 0) > 0 ? {
|
|
49
|
-
marginRight: leadingGap
|
|
50
|
-
} : undefined],
|
|
51
|
-
children: glyph.element
|
|
52
|
-
}, glyph.id) : /*#__PURE__*/_jsx(Animated.Text, {
|
|
43
|
+
}) => {
|
|
44
|
+
// The leading token is always first. Keep it outside the text row so its
|
|
45
|
+
// appearance moves the text as one unit instead of reflowing every glyph.
|
|
46
|
+
const leadingGlyph = glyphs[0]?.kind === "element" ? glyphs[0] : undefined;
|
|
47
|
+
const textGlyphs = leadingGlyph ? glyphs.slice(1) : glyphs;
|
|
48
|
+
const shouldGroupText = Boolean(leadingGlyph) || Boolean(leadingLayoutTransition) || leadingLayoutGroup;
|
|
49
|
+
const renderTextGlyph = glyph => glyph.kind === "text" ? /*#__PURE__*/_jsx(Animated.Text, {
|
|
53
50
|
layout: layoutTransition,
|
|
54
51
|
entering: enterTransition,
|
|
55
52
|
exiting: exitTransition,
|
|
56
53
|
style: textStyle,
|
|
57
54
|
className: className,
|
|
58
55
|
children: glyph.value
|
|
59
|
-
}, glyph.id)
|
|
60
|
-
|
|
56
|
+
}, glyph.id) : null;
|
|
57
|
+
const textRow = /*#__PURE__*/_jsx(Animated.View, {
|
|
58
|
+
layout: leadingLayoutTransition,
|
|
59
|
+
style: textRowStyle,
|
|
60
|
+
children: textGlyphs.map(renderTextGlyph)
|
|
61
|
+
}, "text-row");
|
|
62
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
63
|
+
style: [rowStyle, rowAlignStyles[align]],
|
|
64
|
+
children: [leadingGlyph ? /*#__PURE__*/_jsx(Animated.View, {
|
|
65
|
+
// leading elements own their enter/exit geometry; generic layout
|
|
66
|
+
// motion here would compete with those transitions
|
|
67
|
+
layout: undefined,
|
|
68
|
+
entering: elementEnterTransition ?? enterTransition,
|
|
69
|
+
exiting: elementExitTransition ?? exitTransition,
|
|
70
|
+
style: [{
|
|
71
|
+
alignItems: "center",
|
|
72
|
+
justifyContent: "center"
|
|
73
|
+
}, (leadingGap ?? 0) > 0 ? {
|
|
74
|
+
marginRight: leadingGap
|
|
75
|
+
} : undefined],
|
|
76
|
+
children: leadingGlyph.element
|
|
77
|
+
}, leadingGlyph.id) : null, shouldGroupText ? textRow : textGlyphs.map(renderTextGlyph)]
|
|
78
|
+
});
|
|
79
|
+
});
|
|
61
80
|
GlyphRun.displayName = "GlyphRun";
|
|
62
81
|
//# sourceMappingURL=glyph-run.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Animated","jsx","_jsx","rowStyle","flexDirection","alignItems","alignSelf","rowAlignStyles","left","center","right","GlyphRun","memo","glyphs","layoutTransition","enterTransition","elementEnterTransition","exitTransition","elementExitTransition","leadingGap","align","textStyle","className","
|
|
1
|
+
{"version":3,"names":["React","View","Animated","jsx","_jsx","jsxs","_jsxs","rowStyle","flexDirection","alignItems","alignSelf","textRowStyle","rowAlignStyles","left","center","right","GlyphRun","memo","glyphs","layoutTransition","leadingLayoutTransition","leadingLayoutGroup","enterTransition","elementEnterTransition","exitTransition","elementExitTransition","leadingGap","align","textStyle","className","leadingGlyph","kind","undefined","textGlyphs","slice","shouldGroupText","Boolean","renderTextGlyph","glyph","Text","layout","entering","exiting","style","children","value","id","textRow","map","justifyContent","marginRight","element","displayName"],"sourceRoot":"../../../src","sources":["view/glyph-run.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAyCC,IAAI,QAAQ,cAAc;AACnE,OAAOC,QAAQ,MAAM,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAO/C,MAAMC,QAAQ,GAAG;EACfC,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAMC,YAAY,GAAG;EACnBH,aAAa,EAAE,KAAK;EACpBC,UAAU,EAAE,QAAQ;EACpBC,SAAS,EAAE;AACb,CAAU;AAEV,MAAME,cAAc,GAAG;EACrBC,IAAI,EAAE;IAAEH,SAAS,EAAE;EAAa,CAAC;EACjCI,MAAM,EAAE;IAAEJ,SAAS,EAAE;EAAS,CAAC;EAC/BK,KAAK,EAAE;IAAEL,SAAS,EAAE;EAAW;AACjC,CAAU;;AAEV;AACA,OAAO,MAAMM,QAAQ,gBAAGhB,KAAK,CAACiB,IAAI,CAChC,CAAC;EACCC,MAAM;EACNC,gBAAgB;EAChBC,uBAAuB;EACvBC,kBAAkB,GAAG,KAAK;EAC1BC,eAAe;EACfC,sBAAsB;EACtBC,cAAc;EACdC,qBAAqB;EACrBC,UAAU;EACVC,KAAK;EACLC,SAAS;EACTC;AAcD,CAAC,KAAK;EACL;EACA;EACA,MAAMC,YAAY,GAAGZ,MAAM,CAAC,CAAC,CAAC,EAAEa,IAAI,KAAK,SAAS,GAAGb,MAAM,CAAC,CAAC,CAAC,GAAGc,SAAS;EAC1E,MAAMC,UAAU,GAAGH,YAAY,GAAGZ,MAAM,CAACgB,KAAK,CAAC,CAAC,CAAC,GAAGhB,MAAM;EAC1D,MAAMiB,eAAe,GACnBC,OAAO,CAACN,YAAY,CAAC,IAAIM,OAAO,CAAChB,uBAAuB,CAAC,IAAIC,kBAAkB;EAEjF,MAAMgB,eAAe,GAAIC,KAAiB,IACxCA,KAAK,CAACP,IAAI,KAAK,MAAM,gBACnB3B,IAAA,CAACF,QAAQ,CAACqC,IAAI;IAEZC,MAAM,EAAErB,gBAAiB;IACzBsB,QAAQ,EAAEnB,eAAgB;IAC1BoB,OAAO,EAAElB,cAAe;IACxBmB,KAAK,EAAEf,SAAU;IACjBC,SAAS,EAAEA,SAAU;IAAAe,QAAA,EAEpBN,KAAK,CAACO;EAAK,GAPPP,KAAK,CAACQ,EAQE,CAAC,GACd,IAAI;EAEV,MAAMC,OAAO,gBACX3C,IAAA,CAACF,QAAQ,CAACD,IAAI;IAEZuC,MAAM,EAAEpB,uBAAwB;IAChCuB,KAAK,EAAEhC,YAAa;IAAAiC,QAAA,EAEnBX,UAAU,CAACe,GAAG,CAACX,eAAe;EAAC,GAJ5B,UAKS,CAChB;EAED,oBACE/B,KAAA,CAACL,IAAI;IAAC0C,KAAK,EAAE,CAACpC,QAAQ,EAAEK,cAAc,CAACe,KAAK,CAAC,CAAE;IAAAiB,QAAA,GAC5Cd,YAAY,gBACX1B,IAAA,CAACF,QAAQ,CAACD,IAAI;MAEZ;MACA;MACAuC,MAAM,EAAER,SAAU;MAClBS,QAAQ,EAAElB,sBAAsB,IAAID,eAAgB;MACpDoB,OAAO,EAAEjB,qBAAqB,IAAID,cAAe;MACjDmB,KAAK,EAAE,CACL;QAAElC,UAAU,EAAE,QAAQ;QAAEwC,cAAc,EAAE;MAAS,CAAC,EAClD,CAACvB,UAAU,IAAI,CAAC,IAAI,CAAC,GAAG;QAAEwB,WAAW,EAAExB;MAAW,CAAC,GAAGM,SAAS,CAC/D;MAAAY,QAAA,EAEDd,YAAY,CAACqB;IAAO,GAXhBrB,YAAY,CAACgB,EAYL,CAAC,GACd,IAAI,EACPX,eAAe,GAAGY,OAAO,GAAGd,UAAU,CAACe,GAAG,CAACX,eAAe,CAAC;EAAA,CACxD,CAAC;AAEX,CACF,CAAC;AAEDrB,QAAQ,CAACoC,WAAW,GAAG,UAAU","ignoreList":[]}
|
|
@@ -12,6 +12,7 @@ export const TextRun = /*#__PURE__*/React.memo(({
|
|
|
12
12
|
motionRecipe,
|
|
13
13
|
align,
|
|
14
14
|
leading,
|
|
15
|
+
leadingLayoutGroup = false,
|
|
15
16
|
leadingKey,
|
|
16
17
|
leadingGap = 0,
|
|
17
18
|
ready = true,
|
|
@@ -42,6 +43,7 @@ export const TextRun = /*#__PURE__*/React.memo(({
|
|
|
42
43
|
const lastLeadingKeyRef = useRef(visibleLeadingKey);
|
|
43
44
|
const hasAnimatedRef = useRef(false);
|
|
44
45
|
const isLeadingSwap = Boolean(visibleLeading) && lastLeadingPresenceRef.current && visibleLeadingKey !== lastLeadingKeyRef.current;
|
|
46
|
+
const isLeadingChange = Boolean(visibleLeading) !== lastLeadingPresenceRef.current || Boolean(visibleLeading) && visibleLeadingKey !== lastLeadingKeyRef.current;
|
|
45
47
|
// update the worklet flag after commit so render never writes a shared value
|
|
46
48
|
const leadingSwapProgress = useSharedValue(0);
|
|
47
49
|
useLayoutEffect(() => {
|
|
@@ -70,6 +72,8 @@ export const TextRun = /*#__PURE__*/React.memo(({
|
|
|
70
72
|
return /*#__PURE__*/_jsx(GlyphRun, {
|
|
71
73
|
glyphs: glyphs,
|
|
72
74
|
layoutTransition: hasAnimated ? motionRecipe.layoutTransition : undefined,
|
|
75
|
+
leadingLayoutTransition: isLeadingChange ? motionRecipe.layoutTransition : undefined,
|
|
76
|
+
leadingLayoutGroup: leadingLayoutGroup,
|
|
73
77
|
enterTransition: hasAnimatedRef.current ? motionRecipe.enterTransition : undefined,
|
|
74
78
|
elementEnterTransition: isLeadingSwap ? elementEnterTransition : undefined,
|
|
75
79
|
exitTransition: motionRecipe.exitTransition,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useId","useLayoutEffect","useMemo","useRef","useSharedValue","useTextGlyphs","createLeadingEnterTransition","createLeadingExitTransition","GlyphRun","jsx","_jsx","TextRun","memo","value","motionRecipe","align","leading","leadingKey","leadingGap","ready","textStyle","className","scopeId","hasDisplayedRef","displayedValueRef","displayedLeadingRef","displayedLeadingKeyRef","displayedLeadingGapRef","shouldDisplayTarget","current","visibleValue","visibleLeading","visibleLeadingKey","visibleLeadingGap","lastValueRef","lastLeadingPresenceRef","Boolean","lastLeadingKeyRef","hasAnimatedRef","isLeadingSwap","leadingSwapProgress","glyphs","elementEnterTransition","durationMs","easing","elementExitTransition","scale","hasAnimated","layoutTransition","undefined","enterTransition","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,KAAK,EAAEC,eAAe,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAGtE,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,aAAa,QAAQ,6BAA0B;AACxD,SACEC,4BAA4B,EAC5BC,2BAA2B,QACtB,kCAA+B;AAEtC,SAASC,QAAQ,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;
|
|
1
|
+
{"version":3,"names":["React","useId","useLayoutEffect","useMemo","useRef","useSharedValue","useTextGlyphs","createLeadingEnterTransition","createLeadingExitTransition","GlyphRun","jsx","_jsx","TextRun","memo","value","motionRecipe","align","leading","leadingLayoutGroup","leadingKey","leadingGap","ready","textStyle","className","scopeId","hasDisplayedRef","displayedValueRef","displayedLeadingRef","displayedLeadingKeyRef","displayedLeadingGapRef","shouldDisplayTarget","current","visibleValue","visibleLeading","visibleLeadingKey","visibleLeadingGap","lastValueRef","lastLeadingPresenceRef","Boolean","lastLeadingKeyRef","hasAnimatedRef","isLeadingSwap","isLeadingChange","leadingSwapProgress","glyphs","elementEnterTransition","durationMs","easing","elementExitTransition","scale","hasAnimated","layoutTransition","undefined","leadingLayoutTransition","enterTransition","exitTransition","displayName"],"sourceRoot":"../../../src","sources":["view/text-run.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;
|
|
1
|
+
{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BAyIG,iBAAiB;kCA5DjB,iBAAiB;;;;;;;;CAwK5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-text-glyphs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-text-glyphs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"use-text-glyphs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-text-glyphs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgB3C,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,EACb,WAAW,MAAM,EACjB,UAAU,SAAS,EACnB,aAAa,MAAM,GAAG,MAAM,KAC3B,SAAS,UAAU,EAyErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDA+JhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
|
|
@@ -2,9 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { type StyleProp, type TextStyle } from "react-native";
|
|
3
3
|
import type { ComplexAnimationBuilder, EntryExitAnimationFunction } from "react-native-reanimated";
|
|
4
4
|
import type { GlyphToken, LaminarAlign } from "../types";
|
|
5
|
-
export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, enterTransition, elementEnterTransition, exitTransition, elementExitTransition, leadingGap, align, textStyle, className, }: Readonly<{
|
|
5
|
+
export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, leadingLayoutTransition, leadingLayoutGroup, enterTransition, elementEnterTransition, exitTransition, elementExitTransition, leadingGap, align, textStyle, className, }: Readonly<{
|
|
6
6
|
glyphs: readonly GlyphToken[];
|
|
7
7
|
layoutTransition?: ComplexAnimationBuilder;
|
|
8
|
+
leadingLayoutTransition?: ComplexAnimationBuilder;
|
|
9
|
+
leadingLayoutGroup?: boolean;
|
|
8
10
|
enterTransition?: EntryExitAnimationFunction;
|
|
9
11
|
elementEnterTransition?: EntryExitAnimationFunction;
|
|
10
12
|
exitTransition?: EntryExitAnimationFunction;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqBzD,eAAO,MAAM,QAAQ,kOAchB,QAAQ,CAAC;IACV,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,sBAAsB,CAAC,EAAE,0BAA0B,CAAC;IACpD,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,uBAsDH,CAAC"}
|
|
@@ -7,12 +7,13 @@ type TextRunProps = {
|
|
|
7
7
|
readonly motionRecipe: MotionRecipe;
|
|
8
8
|
readonly align: LaminarAlign;
|
|
9
9
|
readonly leading?: ReactNode;
|
|
10
|
+
readonly leadingLayoutGroup?: boolean;
|
|
10
11
|
readonly leadingKey?: string | number;
|
|
11
12
|
readonly leadingGap?: number;
|
|
12
13
|
readonly ready?: boolean;
|
|
13
14
|
readonly textStyle?: StyleProp<TextStyle>;
|
|
14
15
|
readonly className?: string;
|
|
15
16
|
};
|
|
16
|
-
export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
|
|
17
|
+
export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingLayoutGroup, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
|
|
17
18
|
export {};
|
|
18
19
|
//# sourceMappingURL=text-run.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,gJAYf,YAAY,uBAsHhB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;
|
|
1
|
+
{"version":3,"file":"use-inline-auto-width.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-inline-auto-width.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,KAAK,MAAM,GAAG;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,eAAO,MAAM,kBAAkB,GAAI,4CAIhC,MAAM;2BAyIG,iBAAiB;kCA5DjB,iBAAiB;;;;;;;;CAwK5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-text-glyphs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-text-glyphs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"use-text-glyphs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-text-glyphs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAgB3C,eAAO,MAAM,aAAa,GACxB,OAAO,MAAM,EACb,WAAW,MAAM,EACjB,UAAU,SAAS,EACnB,aAAa,MAAM,GAAG,MAAM,KAC3B,SAAS,UAAU,EAyErB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAqB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAOpE,eAAO,MAAM,OAAO,yDA+JhB,CAAC;AAcL,YAAY,EACV,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,wBAAwB,EACxB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,SAAS,CAAC"}
|
|
@@ -2,9 +2,11 @@ import React from "react";
|
|
|
2
2
|
import { type StyleProp, type TextStyle } from "react-native";
|
|
3
3
|
import type { ComplexAnimationBuilder, EntryExitAnimationFunction } from "react-native-reanimated";
|
|
4
4
|
import type { GlyphToken, LaminarAlign } from "../types";
|
|
5
|
-
export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, enterTransition, elementEnterTransition, exitTransition, elementExitTransition, leadingGap, align, textStyle, className, }: Readonly<{
|
|
5
|
+
export declare const GlyphRun: React.MemoExoticComponent<({ glyphs, layoutTransition, leadingLayoutTransition, leadingLayoutGroup, enterTransition, elementEnterTransition, exitTransition, elementExitTransition, leadingGap, align, textStyle, className, }: Readonly<{
|
|
6
6
|
glyphs: readonly GlyphToken[];
|
|
7
7
|
layoutTransition?: ComplexAnimationBuilder;
|
|
8
|
+
leadingLayoutTransition?: ComplexAnimationBuilder;
|
|
9
|
+
leadingLayoutGroup?: boolean;
|
|
8
10
|
enterTransition?: EntryExitAnimationFunction;
|
|
9
11
|
elementEnterTransition?: EntryExitAnimationFunction;
|
|
10
12
|
exitTransition?: EntryExitAnimationFunction;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"glyph-run.d.ts","sourceRoot":"","sources":["../../../../src/view/glyph-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAQ,MAAM,cAAc,CAAC;AAEpE,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAqBzD,eAAO,MAAM,QAAQ,kOAchB,QAAQ,CAAC;IACV,MAAM,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;IAC3C,uBAAuB,CAAC,EAAE,uBAAuB,CAAC;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC;IAC7C,sBAAsB,CAAC,EAAE,0BAA0B,CAAC;IACpD,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,qBAAqB,CAAC,EAAE,0BAA0B,CAAC;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,uBAsDH,CAAC"}
|
|
@@ -7,12 +7,13 @@ type TextRunProps = {
|
|
|
7
7
|
readonly motionRecipe: MotionRecipe;
|
|
8
8
|
readonly align: LaminarAlign;
|
|
9
9
|
readonly leading?: ReactNode;
|
|
10
|
+
readonly leadingLayoutGroup?: boolean;
|
|
10
11
|
readonly leadingKey?: string | number;
|
|
11
12
|
readonly leadingGap?: number;
|
|
12
13
|
readonly ready?: boolean;
|
|
13
14
|
readonly textStyle?: StyleProp<TextStyle>;
|
|
14
15
|
readonly className?: string;
|
|
15
16
|
};
|
|
16
|
-
export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
|
|
17
|
+
export declare const TextRun: React.MemoExoticComponent<({ value, motionRecipe, align, leading, leadingLayoutGroup, leadingKey, leadingGap, ready, textStyle, className, }: TextRunProps) => React.JSX.Element>;
|
|
17
18
|
export {};
|
|
18
19
|
//# sourceMappingURL=text-run.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"text-run.d.ts","sourceRoot":"","sources":["../../../../src/view/text-run.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzD,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,OAAO,gJAYf,YAAY,uBAsHhB,CAAC"}
|
package/package.json
CHANGED
|
@@ -32,6 +32,7 @@ export const useInlineAutoWidth = ({
|
|
|
32
32
|
const measuredWidthRef = useRef<number | null>(null);
|
|
33
33
|
const bootstrappedRef = useRef(false);
|
|
34
34
|
const widthCacheRef = useRef(new Map<string, number>());
|
|
35
|
+
const firstEnabledMeasurementKeyRef = useRef<string | null>(null);
|
|
35
36
|
const hasCapturedVisibleLayoutRef = useRef(false);
|
|
36
37
|
const initialMeasurementKeyRef = useRef<string | null>(null);
|
|
37
38
|
const firstProbeRef = useRef<PendingProbe | null>(null);
|
|
@@ -41,6 +42,11 @@ export const useInlineAutoWidth = ({
|
|
|
41
42
|
null
|
|
42
43
|
);
|
|
43
44
|
|
|
45
|
+
// latch the first enabled key so a pending visible layout cannot use a later key
|
|
46
|
+
if (enabled && firstEnabledMeasurementKeyRef.current === null) {
|
|
47
|
+
firstEnabledMeasurementKeyRef.current = measurementKey;
|
|
48
|
+
}
|
|
49
|
+
|
|
44
50
|
const markMeasurementReady = useCallback((key: string) => {
|
|
45
51
|
setReadyMeasurementKey((currentKey) =>
|
|
46
52
|
currentKey === key ? currentKey : key
|
|
@@ -111,11 +117,37 @@ export const useInlineAutoWidth = ({
|
|
|
111
117
|
// bootstrap from the visible tree so the first explicit width matches
|
|
112
118
|
// the geometry that was already painted to the user
|
|
113
119
|
const nextWidth = Math.max(0, event.nativeEvent.layout.width);
|
|
120
|
+
const firstEnabledMeasurementKey =
|
|
121
|
+
firstEnabledMeasurementKeyRef.current;
|
|
122
|
+
const visibleKeyMatchesInitialKey =
|
|
123
|
+
firstEnabledMeasurementKey === null ||
|
|
124
|
+
firstEnabledMeasurementKey === measurementKey;
|
|
125
|
+
const firstProbe = firstProbeRef.current;
|
|
126
|
+
|
|
127
|
+
if (!visibleKeyMatchesInitialKey) {
|
|
128
|
+
// ignore a visible layout from the initial row when the key has changed
|
|
129
|
+
const currentProbeWidth =
|
|
130
|
+
firstProbe?.key === measurementKey
|
|
131
|
+
? firstProbe.width
|
|
132
|
+
: widthCacheRef.current.get(measurementKey);
|
|
133
|
+
|
|
134
|
+
if (currentProbeWidth !== undefined) {
|
|
135
|
+
initialMeasurementKeyRef.current = measurementKey;
|
|
136
|
+
applyWidth(currentProbeWidth);
|
|
137
|
+
markMeasurementReady(measurementKey);
|
|
138
|
+
} else if (firstProbe) {
|
|
139
|
+
// use the old probe as the shell baseline until the current key is measured
|
|
140
|
+
initialMeasurementKeyRef.current = firstProbe.key;
|
|
141
|
+
applyWidth(firstProbe.width);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
|
|
114
147
|
// retain the visible width for the initial key so a later cache hit does
|
|
115
148
|
// not reintroduce the probe-to-visible mismatch
|
|
116
149
|
widthCacheRef.current.delete(measurementKey);
|
|
117
150
|
widthCacheRef.current.set(measurementKey, nextWidth);
|
|
118
|
-
const firstProbe = firstProbeRef.current;
|
|
119
151
|
if (firstProbe && firstProbe.key !== measurementKey) {
|
|
120
152
|
initialMeasurementKeyRef.current = firstProbe.key;
|
|
121
153
|
applyWidth(firstProbe.width);
|
|
@@ -13,43 +13,37 @@ type TextGlyphLedger = {
|
|
|
13
13
|
nextSeed: number;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
|
-
type TextGlyphUnit =
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
type TextGlyphUnit = {
|
|
17
|
+
readonly kind: "text";
|
|
18
|
+
readonly signature: string;
|
|
19
|
+
readonly value: string;
|
|
20
|
+
};
|
|
19
21
|
|
|
20
|
-
// build
|
|
22
|
+
// build text glyphs independently, then prepend a separately keyed leading token
|
|
21
23
|
export const useTextGlyphs = (
|
|
22
24
|
value: string,
|
|
23
25
|
namespace: string,
|
|
24
26
|
leading?: ReactNode,
|
|
25
27
|
leadingKey?: string | number
|
|
26
28
|
): readonly GlyphToken[] => {
|
|
27
|
-
|
|
29
|
+
// Reconcile text independently so inserting/removing a leading token cannot
|
|
30
|
+
// change which repeated text glyphs the LCS ledger preserves.
|
|
31
|
+
const textUnits = useMemo<readonly TextGlyphUnit[]>(
|
|
28
32
|
() => [
|
|
29
|
-
// the map key becomes the identity when leading content is state keyed
|
|
30
|
-
...(leading
|
|
31
|
-
? [
|
|
32
|
-
{
|
|
33
|
-
kind: "element",
|
|
34
|
-
signature: `leading:${String(leadingKey ?? "default")}`,
|
|
35
|
-
element: leading,
|
|
36
|
-
} as const,
|
|
37
|
-
]
|
|
38
|
-
: []),
|
|
39
33
|
...splitDisplayUnits(value).map((unit) => ({
|
|
40
34
|
kind: "text" as const,
|
|
41
35
|
signature: `text:${unit}`,
|
|
42
36
|
value: unit,
|
|
43
37
|
})),
|
|
44
38
|
],
|
|
45
|
-
[
|
|
39
|
+
[value]
|
|
46
40
|
);
|
|
47
|
-
const signatures =
|
|
41
|
+
const signatures = textUnits.map((unit) => unit.signature);
|
|
48
42
|
const ledgerRef = useRef<TextGlyphLedger>({
|
|
49
43
|
previousValue: value,
|
|
50
44
|
previousSignatures: signatures,
|
|
51
|
-
glyphKeys:
|
|
52
|
-
nextSeed:
|
|
45
|
+
glyphKeys: textUnits.map((_, index) => `${namespace}:c${index}`),
|
|
46
|
+
nextSeed: textUnits.length,
|
|
53
47
|
});
|
|
54
48
|
|
|
55
49
|
// reconcile only when a token signature changes so stable glyphs keep their views
|
|
@@ -79,16 +73,29 @@ export const useTextGlyphs = (
|
|
|
79
73
|
|
|
80
74
|
const glyphKeys = ledgerRef.current.glyphKeys;
|
|
81
75
|
|
|
82
|
-
// normalize spaces at the edge where tokens become renderable glyphs
|
|
76
|
+
// normalize spaces at the edge where tokens become renderable glyphs, then
|
|
77
|
+
// prepend the leading token with an identity that is independent of text
|
|
83
78
|
return useMemo(
|
|
84
|
-
() =>
|
|
85
|
-
|
|
79
|
+
() => {
|
|
80
|
+
const textGlyphs = textUnits.map((unit, index) => ({
|
|
86
81
|
id: glyphKeys[index],
|
|
87
|
-
kind:
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
82
|
+
kind: "text" as const,
|
|
83
|
+
value: normalizeDisplayUnit(unit.value),
|
|
84
|
+
}));
|
|
85
|
+
|
|
86
|
+
if (!leading) {
|
|
87
|
+
return textGlyphs;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
return [
|
|
91
|
+
{
|
|
92
|
+
id: `${namespace}:leading:${String(leadingKey ?? "default")}`,
|
|
93
|
+
kind: "element" as const,
|
|
94
|
+
element: leading,
|
|
95
|
+
},
|
|
96
|
+
...textGlyphs,
|
|
97
|
+
];
|
|
98
|
+
},
|
|
99
|
+
[glyphKeys, leading, leadingKey, namespace, textUnits]
|
|
93
100
|
);
|
|
94
101
|
};
|
package/src/index.tsx
CHANGED
|
@@ -163,6 +163,7 @@ export const Laminar = React.memo(function Laminar({
|
|
|
163
163
|
motionRecipe={motionRecipe}
|
|
164
164
|
align={align}
|
|
165
165
|
leading={resolvedLeading}
|
|
166
|
+
leadingLayoutGroup={Boolean(leading)}
|
|
166
167
|
leadingKey={resolvedLeadingKey}
|
|
167
168
|
leadingGap={leadingGap}
|
|
168
169
|
ready={!autoSize || isAutoSizeReady}
|
package/src/view/glyph-run.tsx
CHANGED
|
@@ -13,6 +13,12 @@ const rowStyle = {
|
|
|
13
13
|
alignSelf: "flex-start",
|
|
14
14
|
} as const;
|
|
15
15
|
|
|
16
|
+
const textRowStyle = {
|
|
17
|
+
flexDirection: "row",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
alignSelf: "flex-start",
|
|
20
|
+
} as const;
|
|
21
|
+
|
|
16
22
|
const rowAlignStyles = {
|
|
17
23
|
left: { alignSelf: "flex-start" },
|
|
18
24
|
center: { alignSelf: "center" },
|
|
@@ -24,6 +30,8 @@ export const GlyphRun = React.memo(
|
|
|
24
30
|
({
|
|
25
31
|
glyphs,
|
|
26
32
|
layoutTransition,
|
|
33
|
+
leadingLayoutTransition,
|
|
34
|
+
leadingLayoutGroup = false,
|
|
27
35
|
enterTransition,
|
|
28
36
|
elementEnterTransition,
|
|
29
37
|
exitTransition,
|
|
@@ -35,6 +43,8 @@ export const GlyphRun = React.memo(
|
|
|
35
43
|
}: Readonly<{
|
|
36
44
|
glyphs: readonly GlyphToken[];
|
|
37
45
|
layoutTransition?: ComplexAnimationBuilder;
|
|
46
|
+
leadingLayoutTransition?: ComplexAnimationBuilder;
|
|
47
|
+
leadingLayoutGroup?: boolean;
|
|
38
48
|
enterTransition?: EntryExitAnimationFunction;
|
|
39
49
|
elementEnterTransition?: EntryExitAnimationFunction;
|
|
40
50
|
exitTransition?: EntryExitAnimationFunction;
|
|
@@ -43,41 +53,60 @@ export const GlyphRun = React.memo(
|
|
|
43
53
|
align: LaminarAlign;
|
|
44
54
|
textStyle?: StyleProp<TextStyle>;
|
|
45
55
|
className?: string;
|
|
46
|
-
}>) =>
|
|
47
|
-
//
|
|
56
|
+
}>) => {
|
|
57
|
+
// The leading token is always first. Keep it outside the text row so its
|
|
58
|
+
// appearance moves the text as one unit instead of reflowing every glyph.
|
|
59
|
+
const leadingGlyph = glyphs[0]?.kind === "element" ? glyphs[0] : undefined;
|
|
60
|
+
const textGlyphs = leadingGlyph ? glyphs.slice(1) : glyphs;
|
|
61
|
+
const shouldGroupText =
|
|
62
|
+
Boolean(leadingGlyph) || Boolean(leadingLayoutTransition) || leadingLayoutGroup;
|
|
63
|
+
|
|
64
|
+
const renderTextGlyph = (glyph: GlyphToken) =>
|
|
65
|
+
glyph.kind === "text" ? (
|
|
66
|
+
<Animated.Text
|
|
67
|
+
key={glyph.id}
|
|
68
|
+
layout={layoutTransition}
|
|
69
|
+
entering={enterTransition}
|
|
70
|
+
exiting={exitTransition}
|
|
71
|
+
style={textStyle}
|
|
72
|
+
className={className}
|
|
73
|
+
>
|
|
74
|
+
{glyph.value}
|
|
75
|
+
</Animated.Text>
|
|
76
|
+
) : null;
|
|
77
|
+
|
|
78
|
+
const textRow = (
|
|
79
|
+
<Animated.View
|
|
80
|
+
key="text-row"
|
|
81
|
+
layout={leadingLayoutTransition}
|
|
82
|
+
style={textRowStyle}
|
|
83
|
+
>
|
|
84
|
+
{textGlyphs.map(renderTextGlyph)}
|
|
85
|
+
</Animated.View>
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
return (
|
|
48
89
|
<View style={[rowStyle, rowAlignStyles[align]]}>
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
) : (
|
|
67
|
-
<Animated.Text
|
|
68
|
-
key={glyph.id}
|
|
69
|
-
layout={layoutTransition}
|
|
70
|
-
entering={enterTransition}
|
|
71
|
-
exiting={exitTransition}
|
|
72
|
-
style={textStyle}
|
|
73
|
-
className={className}
|
|
74
|
-
>
|
|
75
|
-
{glyph.value}
|
|
76
|
-
</Animated.Text>
|
|
77
|
-
)
|
|
78
|
-
)}
|
|
90
|
+
{leadingGlyph ? (
|
|
91
|
+
<Animated.View
|
|
92
|
+
key={leadingGlyph.id}
|
|
93
|
+
// leading elements own their enter/exit geometry; generic layout
|
|
94
|
+
// motion here would compete with those transitions
|
|
95
|
+
layout={undefined}
|
|
96
|
+
entering={elementEnterTransition ?? enterTransition}
|
|
97
|
+
exiting={elementExitTransition ?? exitTransition}
|
|
98
|
+
style={[
|
|
99
|
+
{ alignItems: "center", justifyContent: "center" },
|
|
100
|
+
(leadingGap ?? 0) > 0 ? { marginRight: leadingGap } : undefined,
|
|
101
|
+
]}
|
|
102
|
+
>
|
|
103
|
+
{leadingGlyph.element}
|
|
104
|
+
</Animated.View>
|
|
105
|
+
) : null}
|
|
106
|
+
{shouldGroupText ? textRow : textGlyphs.map(renderTextGlyph)}
|
|
79
107
|
</View>
|
|
80
|
-
)
|
|
108
|
+
);
|
|
109
|
+
}
|
|
81
110
|
);
|
|
82
111
|
|
|
83
112
|
GlyphRun.displayName = "GlyphRun";
|