@oxyhq/bloom 1.11.0 → 1.13.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/docs/layout.mdx +20 -29
- package/lib/commonjs/fab/Fab.js +0 -42
- package/lib/commonjs/fab/Fab.js.map +1 -1
- package/lib/commonjs/fab/Fab.web.js +3 -18
- package/lib/commonjs/fab/Fab.web.js.map +1 -1
- package/lib/commonjs/layout/bottom-edge.js +42 -68
- package/lib/commonjs/layout/bottom-edge.js.map +1 -1
- package/lib/commonjs/layout/index.js +0 -6
- package/lib/commonjs/layout/index.js.map +1 -1
- package/lib/commonjs/tab-bar/TabBarBase.js +6 -22
- package/lib/commonjs/tab-bar/TabBarBase.js.map +1 -1
- package/lib/module/fab/Fab.js +2 -44
- package/lib/module/fab/Fab.js.map +1 -1
- package/lib/module/fab/Fab.web.js +4 -19
- package/lib/module/fab/Fab.web.js.map +1 -1
- package/lib/module/layout/bottom-edge.js +42 -67
- package/lib/module/layout/bottom-edge.js.map +1 -1
- package/lib/module/layout/index.js +1 -1
- package/lib/module/layout/index.js.map +1 -1
- package/lib/module/tab-bar/TabBarBase.js +8 -24
- package/lib/module/tab-bar/TabBarBase.js.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/commonjs/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts +28 -40
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/index.d.ts +1 -1
- package/lib/typescript/commonjs/layout/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/tab-bar/TabBarBase.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.d.ts.map +1 -1
- package/lib/typescript/module/fab/Fab.web.d.ts.map +1 -1
- package/lib/typescript/module/layout/bottom-edge.d.ts +28 -40
- package/lib/typescript/module/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/module/layout/index.d.ts +1 -1
- package/lib/typescript/module/layout/index.d.ts.map +1 -1
- package/lib/typescript/module/tab-bar/TabBarBase.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/fab/Fab.tsx +3 -41
- package/src/fab/Fab.web.tsx +4 -19
- package/src/layout/bottom-edge.tsx +49 -84
- package/src/layout/index.ts +1 -6
- package/src/tab-bar/TabBarBase.tsx +6 -31
package/docs/layout.mdx
CHANGED
|
@@ -38,7 +38,7 @@ height. The inset is already folded into the gap, so adding it again
|
|
|
38
38
|
double-counts the home indicator and strands a band of dead space.
|
|
39
39
|
</Admonition>
|
|
40
40
|
|
|
41
|
-
##
|
|
41
|
+
## `useBottomEdgeInset` / `useClaimBottomEdge` — what is already there
|
|
42
42
|
|
|
43
43
|
Knowing where the edge is does not tell a FAB that a tab bar is already parked
|
|
44
44
|
on it. A surface that parks there **claims** its footprint; a surface that wants
|
|
@@ -56,33 +56,31 @@ const occupied = useBottomEdgeInset();
|
|
|
56
56
|
Neither imports the other, so any combination composes: a tab bar with no FAB, a
|
|
57
57
|
FAB with no tab bar, both, or a surface written later.
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
`BloomProvider` mounts the registry. Outside one, `useBottomEdgeInset()` returns
|
|
60
|
+
`0` and `useClaimBottomEdge` is a no-op, so a surface stays usable standalone.
|
|
60
61
|
|
|
61
|
-
|
|
62
|
-
occupies less than it reserves, and readers want different halves of that.
|
|
62
|
+
## The collapse is not here, on purpose
|
|
63
63
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
| `useBottomEdgeLiveInset()` | what is occupied **right now** | a FAB, anything sitting *on* the edge |
|
|
64
|
+
The tab bar minimizes 58 → 44 on scroll. This registry twice tried to publish
|
|
65
|
+
that so a FAB could react — as a live pixel height, then as a boolean. Both felt
|
|
66
|
+
wrong on a device, for a structural reason rather than a tunable one:
|
|
68
67
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
useClaimBottomEdge(gap + EXPANDED_HEIGHT, gap + (minimized ? MINIMIZED_HEIGHT : EXPANDED_HEIGHT));
|
|
72
|
-
```
|
|
68
|
+
> The bar animates on the **UI thread**. Anything reading it from this registry
|
|
69
|
+
> arrives via `runOnJS` plus two React render passes.
|
|
73
70
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
71
|
+
The reaction therefore *starts* one to three frames late, and the delay is
|
|
72
|
+
variable — worst exactly while scrolling, because that is when the JS thread is
|
|
73
|
+
busiest. Fading rather than moving does not hide it: the eye still sees two
|
|
74
|
+
pieces of chrome change at different moments.
|
|
78
75
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
rather than forcing a shared one through React state.
|
|
76
|
+
A collapse is **motion**, and motion that must stay locked to a reanimated
|
|
77
|
+
animation has to travel as a shared value on the UI thread. React state is the
|
|
78
|
+
wrong transport for it at any width, so it is not offered here.
|
|
83
79
|
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
The **app** owns that signal. Mention drives its header, its tab bar and its FAB
|
|
81
|
+
from one `SharedValue` through `useAnimatedStyle`, and everything moves together
|
|
82
|
+
because nothing crosses a thread. This registry stays what it is good at:
|
|
83
|
+
**geometry** — where things are, not when they move.
|
|
86
84
|
|
|
87
85
|
## Things that are easy to get wrong
|
|
88
86
|
|
|
@@ -102,10 +100,3 @@ hiding would float it off the bottom of the screen for nothing.
|
|
|
102
100
|
so a reader mounted in the same commit as its claimant reads `0` on the first
|
|
103
101
|
commit. These are layout offsets rather than measurements, so nothing here waits
|
|
104
102
|
on a real layout pass.
|
|
105
|
-
|
|
106
|
-
**Animate the difference, not the live inset.** `reserved - live` is `0` both
|
|
107
|
-
before the registry settles and once it has, so a reader that animates the
|
|
108
|
-
DIFFERENCE stays still through mount and moves only on a real collapse. Animating
|
|
109
|
-
the live inset directly would slide the surface in from the window edge on its
|
|
110
|
-
first frame. Bloom's `Fab` does the former — a native-driver `translateY` on
|
|
111
|
-
native, a `bottom` transition on web.
|
package/lib/commonjs/fab/Fab.js
CHANGED
|
@@ -55,20 +55,6 @@ function resolveSize(size) {
|
|
|
55
55
|
}
|
|
56
56
|
return SIZE_CONFIG[size];
|
|
57
57
|
}
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Matches the tab bar's own `MINIMIZE_SPRING` (380ms, critically damped) closely
|
|
61
|
-
* enough that the two read as one movement. It cannot be that exact config: the
|
|
62
|
-
* bar animates with reanimated, which takes duration/dampingRatio, while this is
|
|
63
|
-
* RN's Animated, which takes stiffness/damping/mass. `usePressAnimation` — and
|
|
64
|
-
* therefore Button, Chip, Tabs, Checkbox, Radio and FrostedIconButton — is built
|
|
65
|
-
* on RN's Animated too, so the FAB cannot switch systems on its own.
|
|
66
|
-
*/
|
|
67
|
-
const COLLAPSE_SPRING = {
|
|
68
|
-
stiffness: 120,
|
|
69
|
-
damping: 22,
|
|
70
|
-
mass: 1
|
|
71
|
-
};
|
|
72
58
|
const DEFAULT_OFFSET = 16;
|
|
73
59
|
const DEFAULT_Z_INDEX = 50;
|
|
74
60
|
const HIT_SLOP = {
|
|
@@ -90,10 +76,6 @@ const HIT_SLOP = {
|
|
|
90
76
|
* lands above a floating tab bar instead of behind it. A z-index cannot fix that
|
|
91
77
|
* pairing: the bar's host is the last sibling of the app shell and paints over
|
|
92
78
|
* every descendant, so the FAB has to be somewhere else, not merely on top.
|
|
93
|
-
*
|
|
94
|
-
* It is the RESERVED inset, so this stays a static layout value. Following a
|
|
95
|
-
* collapsing bar is a TRANSFORM (see `collapseAnim`), which costs no layout pass
|
|
96
|
-
* and can run on the native driver while the user is mid-scroll.
|
|
97
79
|
*/
|
|
98
80
|
function placementStyle(placement, offset, bottomEdgeInset) {
|
|
99
81
|
if (placement === 'static') return {};
|
|
@@ -160,32 +142,10 @@ const FabComponent = ({
|
|
|
160
142
|
zIndex = DEFAULT_Z_INDEX
|
|
161
143
|
}) => {
|
|
162
144
|
const bottomEdgeInset = (0, _bottomEdge.useBottomEdgeInset)();
|
|
163
|
-
const bottomEdgeLive = (0, _bottomEdge.useBottomEdgeLiveInset)();
|
|
164
145
|
const theme = (0, _useTheme.useTheme)();
|
|
165
146
|
const sizeConfig = (0, _react.useMemo)(() => resolveSize(size), [size]);
|
|
166
147
|
const isExtended = label != null && label.length > 0;
|
|
167
148
|
const content = icon ?? children;
|
|
168
|
-
|
|
169
|
-
// How far the edge's surface has collapsed below what it reserves: 0 while the
|
|
170
|
-
// tab bar is expanded, 14 while it is minimized. Deliberately the DIFFERENCE
|
|
171
|
-
// rather than the live inset itself — both are 0 before the registry settles
|
|
172
|
-
// and both are equal once it has, so this stays 0 across mount and the FAB
|
|
173
|
-
// never slides in from the window edge on its first frame. Only a real
|
|
174
|
-
// collapse moves it.
|
|
175
|
-
const collapse = placement === 'bottom-right' || placement === 'bottom-left' ? bottomEdgeInset - bottomEdgeLive : 0;
|
|
176
|
-
const collapseAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
|
|
177
|
-
|
|
178
|
-
// An effect because RN's Animated has no declarative form — starting an
|
|
179
|
-
// animation is imperative by construction. `useNativeDriver` is what makes this
|
|
180
|
-
// safe to run during a scroll: the whole point of moving the follow onto a
|
|
181
|
-
// transform is that it never touches the JS thread once started.
|
|
182
|
-
(0, _react.useEffect)(() => {
|
|
183
|
-
_reactNative.Animated.spring(collapseAnim, {
|
|
184
|
-
toValue: collapse,
|
|
185
|
-
useNativeDriver: true,
|
|
186
|
-
...COLLAPSE_SPRING
|
|
187
|
-
}).start();
|
|
188
|
-
}, [collapse, collapseAnim]);
|
|
189
149
|
const {
|
|
190
150
|
scaleAnim,
|
|
191
151
|
onPressIn,
|
|
@@ -254,8 +214,6 @@ const FabComponent = ({
|
|
|
254
214
|
// wrapper node the two multiplied.
|
|
255
215
|
{
|
|
256
216
|
transform: [{
|
|
257
|
-
translateY: collapseAnim
|
|
258
|
-
}, {
|
|
259
217
|
scale: scaleAnim
|
|
260
218
|
}]
|
|
261
219
|
}, style],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeCss","_bottomEdge","_useTheme","_tokens","_shadows","_pressColors","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeCss","_bottomEdge","_useTheme","_tokens","_shadows","_pressColors","_usePressAnimation","_useInteractionState","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","HIT_SLOP","top","bottom","left","right","placementStyle","placement","offset","bottomEdgeInset","style","position","FabPressable","Pressable","StyledPressable","styled","className","AnimatedPressable","Animated","createAnimatedComponent","FabComponent","onPress","icon","children","label","variant","disabled","accessibilityLabel","accessibilityHint","labelStyle","testID","zIndex","useBottomEdgeInset","theme","useTheme","sizeConfig","useMemo","isExtended","length","content","scaleAnim","onPressIn","onPressOut","usePressAnimation","undefined","animation","pressScale","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","resolvedColors","resolveVariant","colors","pressedBackground","pressedSurface","background","foreground","containerStyle","base","alignItems","justifyContent","flexDirection","backgroundColor","borderRadius","full","height","bloomShadowStyle","paddingHorizontal","gap","width","shadow","labelTextStyle","fontWeight","color","handlePressIn","handlePressOut","jsxs","opacity","transform","scale","hitSlop","accessibilityRole","accessibilityState","jsx","View","Text","numberOfLines","secondary","secondaryForeground","tertiary","tertiaryForeground","card","text","primary","primaryForeground","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -81,10 +81,7 @@ const BLOOM_FAB_CSS = (0, _interactiveWebCss.interactiveWebCss)({
|
|
|
81
81
|
box-shadow: var(--bloom-fab-shadow);
|
|
82
82
|
font-family: inherit;
|
|
83
83
|
`,
|
|
84
|
-
|
|
85
|
-
// the slow one: it tracks the tab bar's 380ms minimize spring, while every
|
|
86
|
-
// other property here is interaction feedback and wants to feel instant.
|
|
87
|
-
transition: 'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease, bottom 380ms ease',
|
|
84
|
+
transition: 'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease',
|
|
88
85
|
// A FAB lifts on hover rather than dimming: it floats over the content, so a
|
|
89
86
|
// deeper shadow is the affordance an opacity dip cannot express.
|
|
90
87
|
hover: {
|
|
@@ -131,16 +128,6 @@ const BLOOM_FAB_CSS = (0, _interactiveWebCss.interactiveWebCss)({
|
|
|
131
128
|
* behind it. A z-index cannot fix that pairing: the bar's host is the last
|
|
132
129
|
* sibling of the app shell and paints over every descendant, so the FAB has to be
|
|
133
130
|
* somewhere else, not merely on top.
|
|
134
|
-
*
|
|
135
|
-
* It is the LIVE inset here, and `bottom` is transitioned — where the native fork
|
|
136
|
-
* follows a collapsing bar with an Animated TRANSFORM instead. The forks differ
|
|
137
|
-
* because the constraint does. Native must stay off the JS thread mid-scroll, so
|
|
138
|
-
* the follow has to be a native-driver transform. On web a transform cannot carry
|
|
139
|
-
* it: `:active` already sets `transform: scale(...)` from the shared
|
|
140
|
-
* `interactive-web-css` rule, and an inline transform would beat that stylesheet
|
|
141
|
-
* rule and eat the press scale — and one property cannot hold the press's 120ms
|
|
142
|
-
* and the collapse's 380ms at once. `bottom` is a separate property with its own
|
|
143
|
-
* duration, and it moves twice per scroll gesture rather than per frame.
|
|
144
131
|
*/
|
|
145
132
|
function placementStyle(placement, offset, bottomEdgeInset) {
|
|
146
133
|
if (placement === 'static') return {};
|
|
@@ -218,9 +205,7 @@ const FabWebComponent = ({
|
|
|
218
205
|
type = 'button'
|
|
219
206
|
}) => {
|
|
220
207
|
(0, _interactiveWebCss.useInteractiveWebCss)(STYLE_ID, BLOOM_FAB_CSS);
|
|
221
|
-
|
|
222
|
-
// minimizing tab bar rather than leaving a 14px hole above it.
|
|
223
|
-
const bottomEdgeLive = (0, _bottomEdge.useBottomEdgeLiveInset)();
|
|
208
|
+
const bottomEdgeInset = (0, _bottomEdge.useBottomEdgeInset)();
|
|
224
209
|
const theme = (0, _useTheme.useTheme)();
|
|
225
210
|
const reactId = (0, _react.useId)();
|
|
226
211
|
const resolvedId = id ?? `bloom-fab-${reactId}`;
|
|
@@ -249,7 +234,7 @@ const FabWebComponent = ({
|
|
|
249
234
|
// fill, so the two forks land on the identical colour.
|
|
250
235
|
['--bloom-fab-press-bg']: (0, _pressColors.pressedSurface)(theme.colors, variantColors.background, variantColors.foreground),
|
|
251
236
|
['--bloom-fab-press-scale']: _tokens.animation.pressScale,
|
|
252
|
-
...placementStyle(placement, offset,
|
|
237
|
+
...placementStyle(placement, offset, bottomEdgeInset)
|
|
253
238
|
};
|
|
254
239
|
if (isExtended) {
|
|
255
240
|
const pad = sizeConfig.diameter <= 44 ? 14 : 20;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomEdge","_useTheme","_tokens","_pressColors","_interactiveWebCss","_flattenWebStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","interactiveWebCss","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","bottomEdgeInset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","useInteractiveWebCss","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_bottomEdge","_useTheme","_tokens","_pressColors","_interactiveWebCss","_flattenWebStyle","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_CONFIG","small","diameter","iconBox","fontSize","medium","large","MIN_NUMERIC_ICON_BOX","resolveSize","size","Math","max","round","DEFAULT_OFFSET","DEFAULT_Z_INDEX","STYLE_ID","BLOOM_FAB_CSS","interactiveWebCss","selector","varPrefix","base","transition","hover","declarations","pressDeclarations","outlineOffset","placementStyle","placement","offset","bottomEdgeInset","style","position","isBottom","bottom","marginTop","top","alignSelf","marginRight","marginLeft","resolveVariant","variant","c","background","secondary","foreground","secondaryForeground","ring","tertiary","tertiaryForeground","card","text","primary","primaryForeground","FabWebComponent","onPress","onClick","icon","children","label","disabled","accessibilityLabel","ariaLabelProp","accessibilityHint","labelStyle","className","testID","zIndex","id","title","type","useInteractiveWebCss","useBottomEdgeInset","theme","useTheme","reactId","useId","resolvedId","sizeConfig","useMemo","isExtended","length","content","variantColors","colors","restShadow","shadow","hoverShadow","containerStyle","color","borderRadius","full","height","fontWeight","pressedSurface","animation","pressScale","pad","paddingLeft","paddingRight","width","handleClick","useCallback","event","preventDefault","ariaLabel","composedClassName","concat","join","resolvedStyle","flattenWebStyle","resolvedLabelStyle","jsxs","undefined","jsx","display","alignItems","justifyContent","Fab","exports","memo","displayName"],"sourceRoot":"../../../src","sources":["fab/Fab.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.BottomEdgeProvider = BottomEdgeProvider;
|
|
7
7
|
exports.useBottomEdgeInset = useBottomEdgeInset;
|
|
8
|
-
exports.useBottomEdgeLiveInset = useBottomEdgeLiveInset;
|
|
9
8
|
exports.useClaimBottomEdge = useClaimBottomEdge;
|
|
10
9
|
var _react = require("react");
|
|
11
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -38,20 +37,27 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
38
37
|
* edge, so two surfaces at that edge overlap rather than stack; the tallest is
|
|
39
38
|
* what a new surface has to clear. Summing would strand it at twice the height.
|
|
40
39
|
*
|
|
41
|
-
* ##
|
|
40
|
+
* ## What does NOT belong here: the collapse
|
|
42
41
|
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
42
|
+
* The tab bar minimizes 58 -> 44 on scroll, and this registry twice tried to
|
|
43
|
+
* publish that so a FAB could react — first as a live pixel height (1.11.0), then
|
|
44
|
+
* as a boolean (1.12.0). Both felt wrong on a device, for the same reason, and
|
|
45
|
+
* the reason is structural rather than a matter of tuning:
|
|
45
46
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
* padding, a toast stack's offset. Tracking the collapse here would jitter a
|
|
49
|
-
* list's content size on every scroll and jump a toast 14px mid-display.
|
|
50
|
-
* - LIVE (`useBottomEdgeLiveInset`) follows the collapse. It is what a surface
|
|
51
|
-
* SITTING ON the edge wants, so it rides down with the bar instead of
|
|
52
|
-
* leaving a hole.
|
|
47
|
+
* the bar animates on the UI thread, while anything reading it from here
|
|
48
|
+
* arrives via `runOnJS` plus two React render passes.
|
|
53
49
|
*
|
|
54
|
-
*
|
|
50
|
+
* So a consumer's reaction STARTS one to three frames after the bar's, and the
|
|
51
|
+
* delay is variable — worst exactly while scrolling, because that is when the JS
|
|
52
|
+
* thread is busiest. Fading instead of moving does not hide it either: the eye
|
|
53
|
+
* still sees two pieces of chrome change at different moments.
|
|
54
|
+
*
|
|
55
|
+
* A collapse is MOTION, and motion that must stay in lock-step with a
|
|
56
|
+
* reanimated animation has to travel as a shared value on the UI thread. React
|
|
57
|
+
* state is the wrong transport at any width, so it is not offered here at all.
|
|
58
|
+
* The app owns that signal — Mention drives its header, its bar and its FAB from
|
|
59
|
+
* one `SharedValue` through `useAnimatedStyle` — and this registry stays what it
|
|
60
|
+
* is good at: GEOMETRY. Where things are, not when they move.
|
|
55
61
|
*
|
|
56
62
|
* ## Why an external store
|
|
57
63
|
*
|
|
@@ -65,21 +71,17 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
65
71
|
function createBottomEdgeStore() {
|
|
66
72
|
const claims = new Map();
|
|
67
73
|
const listeners = new Set();
|
|
68
|
-
let
|
|
69
|
-
let live = 0;
|
|
74
|
+
let inset = 0;
|
|
70
75
|
const recompute = () => {
|
|
71
|
-
let
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
if (claim.reserved > nextReserved) nextReserved = claim.reserved;
|
|
75
|
-
if (claim.current > nextLive) nextLive = claim.current;
|
|
76
|
+
let next = 0;
|
|
77
|
+
for (const height of claims.values()) {
|
|
78
|
+
if (height > next) next = height;
|
|
76
79
|
}
|
|
77
|
-
// Bail before notifying: a re-registration at unchanged
|
|
80
|
+
// Bail before notifying: a re-registration at an unchanged height (every
|
|
78
81
|
// render of a claimant whose footprint did not move) must not re-render
|
|
79
82
|
// every reader.
|
|
80
|
-
if (
|
|
81
|
-
|
|
82
|
-
live = nextLive;
|
|
83
|
+
if (next === inset) return;
|
|
84
|
+
inset = next;
|
|
83
85
|
for (const listener of listeners) listener();
|
|
84
86
|
};
|
|
85
87
|
return {
|
|
@@ -89,15 +91,10 @@ function createBottomEdgeStore() {
|
|
|
89
91
|
listeners.delete(onChange);
|
|
90
92
|
};
|
|
91
93
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
if (existing?.reserved === nextReserved && existing.current === nextCurrent) return;
|
|
97
|
-
claims.set(id, {
|
|
98
|
-
reserved: nextReserved,
|
|
99
|
-
current: nextCurrent
|
|
100
|
-
});
|
|
94
|
+
getInset: () => inset,
|
|
95
|
+
claim(id, height) {
|
|
96
|
+
if (claims.get(id) === height) return;
|
|
97
|
+
claims.set(id, height);
|
|
101
98
|
recompute();
|
|
102
99
|
},
|
|
103
100
|
release(id) {
|
|
@@ -131,15 +128,13 @@ const NO_SUBSCRIPTION = () => () => {};
|
|
|
131
128
|
const NO_INSET = () => 0;
|
|
132
129
|
|
|
133
130
|
/**
|
|
134
|
-
* How much of the bottom edge is
|
|
131
|
+
* How much of the bottom edge is already occupied, in px.
|
|
135
132
|
*
|
|
136
|
-
*
|
|
137
|
-
* that must not move as the user scrolls — a list's bottom padding, a toast
|
|
138
|
-
* stack's offset:
|
|
133
|
+
* Add it to whatever offset the surface would otherwise use:
|
|
139
134
|
*
|
|
140
135
|
* ```tsx
|
|
141
|
-
* const
|
|
142
|
-
* <
|
|
136
|
+
* const occupied = useBottomEdgeInset();
|
|
137
|
+
* <View style={{ position: 'absolute', bottom: windowEdgeGap(insets.bottom) + occupied }} />
|
|
143
138
|
* ```
|
|
144
139
|
*
|
|
145
140
|
* `0` outside a provider, and `0` on the first commit even inside one — a claim
|
|
@@ -149,48 +144,27 @@ const NO_INSET = () => 0;
|
|
|
149
144
|
*/
|
|
150
145
|
function useBottomEdgeInset() {
|
|
151
146
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
152
|
-
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.
|
|
147
|
+
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getInset ?? NO_INSET, store?.getInset ?? NO_INSET);
|
|
153
148
|
}
|
|
154
149
|
|
|
155
150
|
/**
|
|
156
|
-
*
|
|
157
|
-
* {@link useBottomEdgeInset} for a surface that does not collapse, and smaller
|
|
158
|
-
* while one does.
|
|
159
|
-
*
|
|
160
|
-
* This is what a surface sitting ON the edge wants, so it rides down with a
|
|
161
|
-
* minimizing tab bar rather than leaving a hole above it. It changes when the
|
|
162
|
-
* collapse STATE changes, not per frame: a claimant reports its settled
|
|
163
|
-
* footprint and the reader animates the difference itself, which keeps the
|
|
164
|
-
* motion on whatever animation system that reader already uses instead of
|
|
165
|
-
* forcing a shared one through React state.
|
|
166
|
-
*/
|
|
167
|
-
function useBottomEdgeLiveInset() {
|
|
168
|
-
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
169
|
-
return (0, _react.useSyncExternalStore)(store?.subscribe ?? NO_SUBSCRIPTION, store?.getLive ?? NO_INSET, store?.getLive ?? NO_INSET);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* Claim the bottom edge for as long as the caller is mounted.
|
|
151
|
+
* Claim `height` px of the bottom edge for as long as the caller is mounted.
|
|
174
152
|
*
|
|
175
153
|
* The claimant owns its own placement — claiming does not move it. It declares
|
|
176
|
-
* the space it occupies so that everything reading
|
|
177
|
-
* the FULL footprint (the surface's height plus the gap it holds
|
|
178
|
-
* edge), which is the same number the surface positions itself
|
|
179
|
-
*
|
|
180
|
-
* `current` is what the surface occupies right now; it defaults to `reserved`,
|
|
181
|
-
* which is correct for anything that does not collapse. A surface that shrinks
|
|
182
|
-
* on scroll passes its live footprint as `current` and keeps `reserved` at its
|
|
183
|
-
* full size — see the two channels above for why both are needed.
|
|
154
|
+
* the space it occupies so that everything reading `useBottomEdgeInset()` stays
|
|
155
|
+
* off it. Pass the FULL footprint (the surface's height plus the gap it holds
|
|
156
|
+
* off the window edge), which is the same number the surface positions itself
|
|
157
|
+
* with.
|
|
184
158
|
*
|
|
185
159
|
* A no-op outside a provider, so a surface stays usable standalone.
|
|
186
160
|
*/
|
|
187
|
-
function useClaimBottomEdge(
|
|
161
|
+
function useClaimBottomEdge(height) {
|
|
188
162
|
const store = (0, _react.useContext)(BottomEdgeContext);
|
|
189
163
|
const id = (0, _react.useId)();
|
|
190
164
|
(0, _react.useEffect)(() => {
|
|
191
165
|
if (!store) return;
|
|
192
|
-
store.claim(id,
|
|
166
|
+
store.claim(id, height);
|
|
193
167
|
return () => store.release(id);
|
|
194
|
-
}, [store, id,
|
|
168
|
+
}, [store, id, height]);
|
|
195
169
|
}
|
|
196
170
|
//# sourceMappingURL=bottom-edge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_jsxRuntime","createBottomEdgeStore","claims","Map","listeners","Set","
|
|
1
|
+
{"version":3,"names":["_react","require","_jsxRuntime","createBottomEdgeStore","claims","Map","listeners","Set","inset","recompute","next","height","values","listener","subscribe","onChange","add","delete","getInset","claim","id","get","set","release","BottomEdgeContext","createContext","BottomEdgeProvider","children","store","useState","jsx","Provider","value","displayName","NO_SUBSCRIPTION","NO_INSET","useBottomEdgeInset","useContext","useSyncExternalStore","useClaimBottomEdge","useId","useEffect"],"sourceRoot":"../../../src","sources":["layout/bottom-edge.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -21,12 +21,6 @@ Object.defineProperty(exports, "useBottomEdgeInset", {
|
|
|
21
21
|
return _bottomEdge.useBottomEdgeInset;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "useBottomEdgeLiveInset", {
|
|
25
|
-
enumerable: true,
|
|
26
|
-
get: function () {
|
|
27
|
-
return _bottomEdge.useBottomEdgeLiveInset;
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
24
|
Object.defineProperty(exports, "useClaimBottomEdge", {
|
|
31
25
|
enumerable: true,
|
|
32
26
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_edge","require","_bottomEdge"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_edge","require","_bottomEdge"],"sourceRoot":"../../../src","sources":["layout/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA","ignoreList":[]}
|
|
@@ -311,29 +311,13 @@ function TabBarBody({
|
|
|
311
311
|
// its own layout can never drift from where the bar actually sits.
|
|
312
312
|
const bottomOffset = (0, _edge.windowEdgeGap)(insets.bottom);
|
|
313
313
|
|
|
314
|
-
// Whether the bar has settled into its minimized size, as REACT state.
|
|
315
|
-
//
|
|
316
|
-
// Reacting on `target` rather than on `progress` is what keeps this cheap:
|
|
317
|
-
// `target` is the binary 0/1 the minimize spring is heading for, so this fires
|
|
318
|
-
// twice per scroll gesture instead of once per frame. Crossing `progress > 0.5`
|
|
319
|
-
// would work too and would cost the same, but it would report the change
|
|
320
|
-
// halfway through the animation rather than when it was decided.
|
|
321
|
-
const [isMinimized, setIsMinimized] = (0, _react.useState)(false);
|
|
322
|
-
(0, _reactNativeReanimated.useAnimatedReaction)(() => minimized.target.value, (target, previous) => {
|
|
323
|
-
if (target !== previous) (0, _reactNativeReanimated.runOnJS)(setIsMinimized)(target === 1);
|
|
324
|
-
}, [minimized]);
|
|
325
|
-
|
|
326
314
|
// Publish what the bar occupies so anything else at this edge stacks above it
|
|
327
|
-
// rather than behind it. Same
|
|
328
|
-
//
|
|
329
|
-
// where the bar actually sits.
|
|
330
|
-
//
|
|
331
|
-
//
|
|
332
|
-
|
|
333
|
-
// bottom padding, a toast) must keep room for the full pill or it would jitter
|
|
334
|
-
// on every scroll. LIVE follows the minimize, so a surface sitting ON the edge
|
|
335
|
-
// rides down with the bar instead of leaving a 14px hole above it.
|
|
336
|
-
(0, _bottomEdge.useClaimBottomEdge)(bottomOffset + _shared.EXPANDED_HEIGHT, bottomOffset + (isMinimized ? _shared.MINIMIZED_HEIGHT : _shared.EXPANDED_HEIGHT));
|
|
315
|
+
// rather than behind it. Same number `useTabBarFootprint` reports, derived from
|
|
316
|
+
// the same two values, so a consumer reading either can never disagree with
|
|
317
|
+
// where the bar actually sits. The EXPANDED height on purpose: the bar
|
|
318
|
+
// minimizes on scroll and re-expands, so claiming the minimized height would
|
|
319
|
+
// drop a FAB onto the pill the moment the user scrolled back up.
|
|
320
|
+
(0, _bottomEdge.useClaimBottomEdge)(bottomOffset + _shared.EXPANDED_HEIGHT);
|
|
337
321
|
|
|
338
322
|
// How centring and the animated inset compose: centring is STATIC and belongs
|
|
339
323
|
// to the wrap, the inset stays ANIMATED on the pill inside it. The wrap is
|