All files / src/componentsV2/Table compactHead.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
 
 
 
 
 
 
 
36x
 
 
 
 
 
 
 
 
 
 
 
 
36x
 
 
 
13x
 
// Shared geometry for the compact-on-scroll table header (Manage Money /
// Transactions and the other list tables). Kept in its own module so the pure
// reveal-threshold logic can be unit-tested without importing the whole Table.
 
/**
 * Height (px) of the slim compact banner revealed on scroll. Shared so the
 * sticky column header can pin directly beneath it instead of behind it, and so
 * the reveal threshold can line up with where the header pins.
 */
export const COMPACT_HEAD_HEIGHT = 72;
 
/**
 * Whether the compact banner should be revealed at the current scroll position.
 *
 * TRA013: the sticky column header pins at `top: COMPACT_HEAD_HEIGHT`, which
 * happens once `scrollTop` reaches `bannerHeight - COMPACT_HEAD_HEIGHT` (the
 * header's natural offset is the full banner height). Revealing the compact bar
 * at that same point makes it slide in exactly as the header pins — so there's
 * no empty band above the pinned header, and the bar never pops in late over an
 * already-pinned header. (The previous `scrollTop > bannerHeight` waited a full
 * `COMPACT_HEAD_HEIGHT` too long.) Clamped so very short banners still reveal.
 */
export const shouldRevealCompactHead = (
  scrollTop: number,
  bannerHeight: number,
  compactHeight: number = COMPACT_HEAD_HEIGHT,
): boolean => scrollTop > Math.max(0, bannerHeight - compactHeight);