@react-x11/components 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/internal/heights.d.ts +7 -0
- package/dist/internal/heights.d.ts.map +1 -1
- package/dist/internal/heights.js +15 -5
- package/dist/internal/heights.js.map +1 -1
- package/dist/internal/scroll.d.ts +62 -0
- package/dist/internal/scroll.d.ts.map +1 -0
- package/dist/internal/scroll.js +224 -0
- package/dist/internal/scroll.js.map +1 -0
- package/dist/table/index.d.ts.map +1 -1
- package/dist/table/index.js +82 -36
- package/dist/table/index.js.map +1 -1
- package/dist/tree/index.d.ts.map +1 -1
- package/dist/tree/index.js +67 -32
- package/dist/tree/index.js.map +1 -1
- package/package.json +1 -1
- package/src/internal/heights.ts +16 -5
- package/src/internal/scroll.ts +288 -0
- package/src/table/index.ts +87 -36
- package/src/tree/index.ts +72 -32
|
@@ -64,6 +64,13 @@ export declare class RowHeights {
|
|
|
64
64
|
* twice.
|
|
65
65
|
*/
|
|
66
66
|
indexAt(offset: number): number;
|
|
67
|
+
/**
|
|
68
|
+
* Whether anything has ever been measured — O(1), and the question a
|
|
69
|
+
* component that may not measure at all has to ask before it waits on a
|
|
70
|
+
* measurement. `measuredCount` answers a different, costlier question:
|
|
71
|
+
* how many of the rows *currently indexed* have one.
|
|
72
|
+
*/
|
|
73
|
+
hasMeasurements(): boolean;
|
|
67
74
|
/** How many of the current rows have a real measurement. */
|
|
68
75
|
measuredCount(): number;
|
|
69
76
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heights.d.ts","sourceRoot":"","sources":["../../src/internal/heights.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"heights.d.ts","sourceRoot":"","sources":["../../src/internal/heights.ts"],"names":[],"mappings":"AA0CA;;sBAEsB;AACtB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAErC;;qEAEqE;AACrE,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;;;;;;;GAQG;AACH,qBAAa,UAAU;IACrB,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6B;IACtD,iDAAiD;IACjD,OAAO,CAAC,IAAI,CAAwB;IACpC,8CAA8C;IAC9C,OAAO,CAAC,IAAI,CAAiB;IAC7B,+CAA+C;IAC/C,OAAO,CAAC,QAAQ,CAAK;IACrB,wEAAwE;IACxE,OAAO,CAAC,KAAK,CAAK;IAClB;uEACmE;IACnE,OAAO,CAAC,KAAK,CAAS;IAEtB,YAAY,QAAQ,EAAE,MAAM,EAE3B;IAED,OAAO,CAAC,QAAQ;IAKhB;;;;;;;OAOG;IACH,IAAI,CAAC,IAAI,EAAE,SAAS,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAkBnD;IAED;;;;OAIG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,OAAO,CAkB1D;IAED,oEAAoE;IACpE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9B;IAED,uEAAuE;IACvE,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAGjC;IAED,mEAAmE;IACnE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAU9B;IAED,gEAAgE;IAChE,KAAK,IAAI,MAAM,CAEd;IAED;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAa9B;IAED;;;;;OAKG;IACH,eAAe,IAAI,OAAO,CAEzB;IAED,4DAA4D;IAC5D,aAAa,IAAI,MAAM,CAItB;IAED;;;;;;;;OAQG;IACH,KAAK,IAAI,IAAI,CAGZ;CACF"}
|
package/dist/internal/heights.js
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
// Where every row starts, when rows are not all the same height.
|
|
2
2
|
//
|
|
3
|
-
// **Shared between `<Tree>` and `<Table>`** — the
|
|
4
|
-
// both virtualizers stand on
|
|
5
|
-
//
|
|
6
|
-
//
|
|
7
|
-
// component, and both import
|
|
3
|
+
// **Shared between `<Tree>` and `<Table>`** — the first piece of machinery
|
|
4
|
+
// both virtualizers stand on (`./timers.ts` and `./scroll.ts` are the other
|
|
5
|
+
// two), promoted here from the vendored copy the table briefly carried
|
|
6
|
+
// (docs/prd-table.md records the decision). "No component imports another
|
|
7
|
+
// component" holds: this is shared code, not a component, and both import
|
|
8
|
+
// it.
|
|
8
9
|
//
|
|
9
10
|
// **Deliberately not a shared *module*.** The directory has no `index.ts`,
|
|
10
11
|
// so it has no subpath, no docs page, and is not public API — the repo's
|
|
@@ -168,6 +169,15 @@ export class RowHeights {
|
|
|
168
169
|
}
|
|
169
170
|
return Math.max(0, Math.min(n - 1, index));
|
|
170
171
|
}
|
|
172
|
+
/**
|
|
173
|
+
* Whether anything has ever been measured — O(1), and the question a
|
|
174
|
+
* component that may not measure at all has to ask before it waits on a
|
|
175
|
+
* measurement. `measuredCount` answers a different, costlier question:
|
|
176
|
+
* how many of the rows *currently indexed* have one.
|
|
177
|
+
*/
|
|
178
|
+
hasMeasurements() {
|
|
179
|
+
return this.measured.size > 0;
|
|
180
|
+
}
|
|
171
181
|
/** How many of the current rows have a real measurement. */
|
|
172
182
|
measuredCount() {
|
|
173
183
|
let count = 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heights.js","sourceRoot":"","sources":["../../src/internal/heights.ts"],"names":[],"mappings":"AAAA,iEAAiE;AACjE,EAAE;AACF,
|
|
1
|
+
{"version":3,"file":"heights.js","sourceRoot":"","sources":["../../src/internal/heights.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { DrawnNode, ScrollableNode } from 'react-x11';
|
|
2
|
+
import type { RowHeights, RowKey } from './heights.js';
|
|
3
|
+
/** All a reveal needs of a row: `<TreeRow>` and `<TableRow>` are both this. */
|
|
4
|
+
interface Keyed {
|
|
5
|
+
id: RowKey;
|
|
6
|
+
}
|
|
7
|
+
/** A row on screen, and the index it was drawn at — the shape both
|
|
8
|
+
* components already keep their mounted rows in. */
|
|
9
|
+
interface Drawn {
|
|
10
|
+
node: DrawnNode;
|
|
11
|
+
at: number;
|
|
12
|
+
}
|
|
13
|
+
/** What the component lends the reveal: everything it already has, by ref,
|
|
14
|
+
* so nothing here goes stale between a render and the tick after layout. */
|
|
15
|
+
export interface RevealSources {
|
|
16
|
+
/** The scroll pane. `<Table>`'s body; `<Tree>`'s own root. */
|
|
17
|
+
box: {
|
|
18
|
+
readonly current: ScrollableNode | null;
|
|
19
|
+
};
|
|
20
|
+
/** The rows in display order. */
|
|
21
|
+
rows: {
|
|
22
|
+
readonly current: readonly Keyed[];
|
|
23
|
+
};
|
|
24
|
+
/** The rows on screen, by id. */
|
|
25
|
+
nodes: {
|
|
26
|
+
readonly current: ReadonlyMap<RowKey, Drawn>;
|
|
27
|
+
};
|
|
28
|
+
/** Where the rows that are *not* on screen are — and how tall a row that
|
|
29
|
+
* has never been drawn is assumed to be. */
|
|
30
|
+
heights: RowHeights;
|
|
31
|
+
}
|
|
32
|
+
export interface Reveal {
|
|
33
|
+
/** Owe a scroll to this row, and try to pay it now. */
|
|
34
|
+
to(id: RowKey): void;
|
|
35
|
+
/**
|
|
36
|
+
* Try again: after a layout, or when the content changed size.
|
|
37
|
+
*
|
|
38
|
+
* Pass `provisional` on a pass where the height index just moved. The rows
|
|
39
|
+
* are still laid out at the heights it no longer believes, so a row that
|
|
40
|
+
* looks in view is not proof of anything yet — a row measured taller than
|
|
41
|
+
* the guess pushes everything after it down, and the row that was reached a
|
|
42
|
+
* moment ago ends up under the fold. The debt is kept until a pass that
|
|
43
|
+
* measured nothing new confirms it, which is exactly when the heights have
|
|
44
|
+
* converged.
|
|
45
|
+
*/
|
|
46
|
+
retry(provisional?: boolean): void;
|
|
47
|
+
/** Scroll the pane, recording that this component is the one that asked. */
|
|
48
|
+
scrollTo(y: number): void;
|
|
49
|
+
/** An `onScroll` arrived. One this component did not ask for is the user
|
|
50
|
+
* taking over, and it cancels whatever was owed. */
|
|
51
|
+
heard(scrollY: number): void;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* The scroll a component owes a row, and the bookkeeping that pays it.
|
|
55
|
+
*
|
|
56
|
+
* Stable across renders — every method reads through the refs it was handed,
|
|
57
|
+
* so an event handler or a layout tick built in an earlier render still sees
|
|
58
|
+
* the current rows.
|
|
59
|
+
*/
|
|
60
|
+
export declare function useReveal(sources: RevealSources): Reveal;
|
|
61
|
+
export {};
|
|
62
|
+
//# sourceMappingURL=scroll.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/internal/scroll.ts"],"names":[],"mappings":"AAyCA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAIvD,+EAA+E;AAC/E,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;qDACqD;AACrD,UAAU,KAAK;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;6EAC6E;AAC7E,MAAM,WAAW,aAAa;IAC5B,8DAA8D;IAC9D,GAAG,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAAA;KAAE,CAAC;IACjD,iCAAiC;IACjC,IAAI,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,KAAK,EAAE,CAAA;KAAE,CAAC;IAC7C,iCAAiC;IACjC,KAAK,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KAAE,CAAC;IACxD;iDAC6C;IAC7C,OAAO,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,MAAM;IACrB,uDAAuD;IACvD,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,4EAA4E;IAC5E,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;yDACqD;IACrD,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,aAAa,GAAG,MAAM,CAyLxD"}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
// Scrolling a row into view, when neither the row nor the scroll pane is
|
|
2
|
+
// ready to be asked yet.
|
|
3
|
+
//
|
|
4
|
+
// **Shared between `<Tree>` and `<Table>`** — the third piece both
|
|
5
|
+
// virtualizers stand on, beside `./heights.ts` and `./timers.ts`, and here
|
|
6
|
+
// for the same reason: the logic is subtle, it is identical in both, and a
|
|
7
|
+
// second copy of it is a second place for the bug below to come back.
|
|
8
|
+
//
|
|
9
|
+
// Two things a scroll pane does silently, both of them in the gap between a
|
|
10
|
+
// commit and the layout it causes, and both of them enough on their own to
|
|
11
|
+
// leave a virtualized list drawing rows the viewport is no longer looking at:
|
|
12
|
+
//
|
|
13
|
+
// 1. **`scrollTo` clamps against the content height the *last* layout
|
|
14
|
+
// measured.** A row appended in the commit now being laid out is past
|
|
15
|
+
// the bottom that clamp knows about, so the request lands short — and
|
|
16
|
+
// short *for good*, because nothing about it is retried. That is the
|
|
17
|
+
// live tail: a list that scrolls to its newest row on every update and
|
|
18
|
+
// settles one update behind, permanently. On mount, where no content
|
|
19
|
+
// has been laid out at all, the scroll simply never happens.
|
|
20
|
+
//
|
|
21
|
+
// 2. **The pane moves without saying so.** It resolves a queued
|
|
22
|
+
// `scrollIntoView` during layout, and it re-clamps an offset the
|
|
23
|
+
// content has outgrown or outshrunk — neither of which fires
|
|
24
|
+
// `onScroll`. A component that learns the offset only from that event
|
|
25
|
+
// keeps building its slice from where the pane *was*: the rows are
|
|
26
|
+
// drawn off-viewport, there is a blank band where they should be, and
|
|
27
|
+
// nothing puts it right until a scroll of your own re-syncs it by
|
|
28
|
+
// accident.
|
|
29
|
+
//
|
|
30
|
+
// So a reveal here is not a one-shot: it is a **debt**, kept by row id,
|
|
31
|
+
// attempted at once and re-tried on the layout that makes the rest of the
|
|
32
|
+
// move possible. It is dropped as soon as the row is in view, leaves the
|
|
33
|
+
// list, or the user scrolls somewhere themselves — an owed scroll must never
|
|
34
|
+
// yank the list back out from under a hand on the wheel.
|
|
35
|
+
//
|
|
36
|
+
// The offset is read back from the pane rather than trusted to the event;
|
|
37
|
+
// `useReveal` does not do that itself, because what a component *does* with
|
|
38
|
+
// the offset differs (a slice to rebuild, a header to shift), but it is the
|
|
39
|
+
// other half of the same fix and both components run it on the same tick.
|
|
40
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
41
|
+
import { afterLayout, cancelAfterLayout } from './timers.js';
|
|
42
|
+
/**
|
|
43
|
+
* The scroll a component owes a row, and the bookkeeping that pays it.
|
|
44
|
+
*
|
|
45
|
+
* Stable across renders — every method reads through the refs it was handed,
|
|
46
|
+
* so an event handler or a layout tick built in an earlier render still sees
|
|
47
|
+
* the current rows.
|
|
48
|
+
*/
|
|
49
|
+
export function useReveal(sources) {
|
|
50
|
+
const src = useRef(sources);
|
|
51
|
+
src.current = sources;
|
|
52
|
+
/** The row still owed a scroll, by id. */
|
|
53
|
+
const owed = useRef(null);
|
|
54
|
+
/**
|
|
55
|
+
* The row the last reveal settled on, kept for one reason: a measurement
|
|
56
|
+
* pass can move the heights that settlement was judged against. A row that
|
|
57
|
+
* was in view when the debt was paid is not in view any more once the rows
|
|
58
|
+
* around it turn out taller than the index believed, and the honest answer
|
|
59
|
+
* to "is that still true?" is to owe it again and look. Measurement
|
|
60
|
+
* converges, so this stops asking.
|
|
61
|
+
*/
|
|
62
|
+
const settled = useRef(null);
|
|
63
|
+
/** The offset the last scroll *this component* asked for, so the
|
|
64
|
+
* `onScroll` that answers it is not read as the user taking over. */
|
|
65
|
+
const asked = useRef(null);
|
|
66
|
+
/**
|
|
67
|
+
* What the pane looked like at the last attempt that could not move.
|
|
68
|
+
*
|
|
69
|
+
* An attempt clamped by a content height that is a layout out of date has
|
|
70
|
+
* to be looked at again — and nothing else will schedule that look: the
|
|
71
|
+
* scroll that did not happen renders nothing, so the component's own tick
|
|
72
|
+
* after layout never comes. One is queued here instead, and only while the
|
|
73
|
+
* pane keeps changing under it: an attempt that finds the same offset and
|
|
74
|
+
* the same content as the last one has nothing new to try, and stops.
|
|
75
|
+
*/
|
|
76
|
+
const stuck = useRef(null);
|
|
77
|
+
const look = useRef(null);
|
|
78
|
+
useEffect(() => () => cancelAfterLayout(look.current), []);
|
|
79
|
+
const scrollTo = useCallback((y) => {
|
|
80
|
+
const box = src.current.box.current;
|
|
81
|
+
if (!box)
|
|
82
|
+
return;
|
|
83
|
+
// Clamped here rather than left to the container, so what comes back on
|
|
84
|
+
// `onScroll` is the number that was asked for and can be recognised.
|
|
85
|
+
const to = Math.min(Math.max(0, y), Math.max(0, box.contentHeight - box.abs.height));
|
|
86
|
+
if (to === box.scrollY)
|
|
87
|
+
return;
|
|
88
|
+
asked.current = to;
|
|
89
|
+
box.scrollTo({ y: to });
|
|
90
|
+
}, []);
|
|
91
|
+
const retry = useCallback((provisional) => {
|
|
92
|
+
const { box: boxRef, rows: rowsRef, nodes, heights } = src.current;
|
|
93
|
+
const box = boxRef.current;
|
|
94
|
+
// The heights just moved, so what the last reveal settled on was settled
|
|
95
|
+
// against numbers that have changed: owe it again until it can be
|
|
96
|
+
// confirmed at the new ones.
|
|
97
|
+
if (provisional && owed.current === null)
|
|
98
|
+
owed.current = settled.current;
|
|
99
|
+
const id = owed.current;
|
|
100
|
+
if (!box || id === null)
|
|
101
|
+
return;
|
|
102
|
+
const rows = rowsRef.current;
|
|
103
|
+
const at = rows.findIndex((r) => r.id === id);
|
|
104
|
+
if (at < 0) {
|
|
105
|
+
// the row left the list
|
|
106
|
+
owed.current = null;
|
|
107
|
+
settled.current = null;
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
const viewport = box.abs.height;
|
|
111
|
+
if (viewport <= 0)
|
|
112
|
+
return; // nothing laid out to scroll inside yet
|
|
113
|
+
// How far the row is outside the pane, in pixels of scrolling. The row's
|
|
114
|
+
// own rect answers when it is mounted — it knows what it really laid out
|
|
115
|
+
// at, and the arithmetic stays in screen coordinates, so a pane with
|
|
116
|
+
// padding on it needs no correction. The height index answers when the
|
|
117
|
+
// row is not mounted, which while virtualizing is the normal case.
|
|
118
|
+
const drawn = nodes.current.get(id);
|
|
119
|
+
const mounted = drawn && drawn.node.abs.height > 0 && rows[drawn.at]?.id === id
|
|
120
|
+
? drawn.node
|
|
121
|
+
: null;
|
|
122
|
+
const placed = mounted
|
|
123
|
+
? {
|
|
124
|
+
above: box.abs.y - mounted.abs.y,
|
|
125
|
+
below: mounted.abs.y + mounted.abs.height - (box.abs.y + viewport),
|
|
126
|
+
height: mounted.abs.height,
|
|
127
|
+
}
|
|
128
|
+
: {
|
|
129
|
+
above: box.scrollY - heights.offsetAt(at),
|
|
130
|
+
below: heights.offsetAt(at) +
|
|
131
|
+
heights.heightAt(at) -
|
|
132
|
+
(box.scrollY + viewport),
|
|
133
|
+
height: heights.heightAt(at),
|
|
134
|
+
};
|
|
135
|
+
/**
|
|
136
|
+
* Whether this is worth *settling* on, or only worth acting on.
|
|
137
|
+
*
|
|
138
|
+
* Two ways a row can look in view and not stay there. Its own placement
|
|
139
|
+
* may be a guess — the index's answer for a row nothing has measured —
|
|
140
|
+
* and "in view" judged from a guess is how a tail lands short of a bottom
|
|
141
|
+
* that has not been measured yet. Or a row *between* the viewport and it
|
|
142
|
+
* may still be a guess, and every one of those that turns out taller than
|
|
143
|
+
* the index believed pushes this row down by the difference, out of the
|
|
144
|
+
* view it had just been brought into.
|
|
145
|
+
*
|
|
146
|
+
* Both are settled by the same thing: measurement converges, so the rows
|
|
147
|
+
* that matter stop being guesses. A component that measures nothing at all
|
|
148
|
+
* has no guesses to wait on — `hasMeasurements` is how that is told
|
|
149
|
+
* apart, and it is what keeps a declared-uniform table from owing a debt
|
|
150
|
+
* for ever.
|
|
151
|
+
*/
|
|
152
|
+
let certain = mounted !== null || heights.isMeasured(at);
|
|
153
|
+
if (certain && heights.hasMeasurements()) {
|
|
154
|
+
const from = Math.min(at, heights.indexAt(box.scrollY));
|
|
155
|
+
const to = Math.max(at, heights.indexAt(box.scrollY + viewport));
|
|
156
|
+
for (let i = from; i <= to && certain; i++) {
|
|
157
|
+
certain = heights.isMeasured(i);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
let move = 0;
|
|
161
|
+
if (placed.height >= viewport) {
|
|
162
|
+
// A row taller than the pane is never *fully* in view, and asking for
|
|
163
|
+
// both its edges in turn is a debt that alternates for ever. Its top is
|
|
164
|
+
// the part worth showing — a wrapped row reads from its first line —
|
|
165
|
+
// and arriving there settles it.
|
|
166
|
+
move = -placed.above;
|
|
167
|
+
}
|
|
168
|
+
else if (placed.above > 0)
|
|
169
|
+
move = -placed.above;
|
|
170
|
+
else if (placed.below > 0)
|
|
171
|
+
move = placed.below;
|
|
172
|
+
if (move === 0) {
|
|
173
|
+
// As far in view as it can be — settled, unless what that was judged
|
|
174
|
+
// against is still moving: a placement that came from a guess, or a
|
|
175
|
+
// pass that has just changed the heights under it.
|
|
176
|
+
if (certain && !provisional) {
|
|
177
|
+
settled.current = id;
|
|
178
|
+
owed.current = null;
|
|
179
|
+
}
|
|
180
|
+
return;
|
|
181
|
+
}
|
|
182
|
+
// A move the pane cannot make yet leaves the debt standing: the layout
|
|
183
|
+
// that admits the rows just appended is the one that will let it finish.
|
|
184
|
+
const was = box.scrollY;
|
|
185
|
+
scrollTo(was + move);
|
|
186
|
+
if (box.scrollY !== was) {
|
|
187
|
+
stuck.current = null; // it moved; the scroll it caused brings us back
|
|
188
|
+
return;
|
|
189
|
+
}
|
|
190
|
+
const seen = stuck.current;
|
|
191
|
+
const now = { y: box.scrollY, content: box.contentHeight };
|
|
192
|
+
stuck.current = now;
|
|
193
|
+
if (seen && seen.y === now.y && seen.content === now.content)
|
|
194
|
+
return;
|
|
195
|
+
cancelAfterLayout(look.current);
|
|
196
|
+
look.current = afterLayout(() => {
|
|
197
|
+
look.current = null;
|
|
198
|
+
retryRef.current?.();
|
|
199
|
+
});
|
|
200
|
+
}, [scrollTo]);
|
|
201
|
+
/** `retry` referring to itself through a ref, so the queued look calls the
|
|
202
|
+
* current one rather than closing over the render that queued it. */
|
|
203
|
+
const retryRef = useRef(null);
|
|
204
|
+
retryRef.current = retry;
|
|
205
|
+
const to = useCallback((id) => {
|
|
206
|
+
// Recorded before the attempt rather than after it, because the
|
|
207
|
+
// interesting case is the one that cannot succeed yet.
|
|
208
|
+
owed.current = id;
|
|
209
|
+
settled.current = null;
|
|
210
|
+
stuck.current = null;
|
|
211
|
+
retry();
|
|
212
|
+
}, [retry]);
|
|
213
|
+
const heard = useCallback((scrollY) => {
|
|
214
|
+
// A scroll this component did not ask for ends the whole chase, not just
|
|
215
|
+
// the outstanding half of it.
|
|
216
|
+
if (scrollY !== asked.current) {
|
|
217
|
+
owed.current = null;
|
|
218
|
+
settled.current = null;
|
|
219
|
+
}
|
|
220
|
+
asked.current = null;
|
|
221
|
+
}, []);
|
|
222
|
+
return { to, retry, scrollTo, heard };
|
|
223
|
+
}
|
|
224
|
+
//# sourceMappingURL=scroll.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../src/internal/scroll.ts"],"names":[],"mappings":"AAAA,yEAAyE;AACzE,yBAAyB;AACzB,EAAE;AACF,mEAAmE;AACnE,2EAA2E;AAC3E,2EAA2E;AAC3E,sEAAsE;AACtE,EAAE;AACF,4EAA4E;AAC5E,2EAA2E;AAC3E,8EAA8E;AAC9E,EAAE;AACF,wEAAwE;AACxE,2EAA2E;AAC3E,2EAA2E;AAC3E,0EAA0E;AAC1E,4EAA4E;AAC5E,0EAA0E;AAC1E,kEAAkE;AAClE,EAAE;AACF,kEAAkE;AAClE,sEAAsE;AACtE,kEAAkE;AAClE,2EAA2E;AAC3E,wEAAwE;AACxE,2EAA2E;AAC3E,uEAAuE;AACvE,iBAAiB;AACjB,EAAE;AACF,wEAAwE;AACxE,0EAA0E;AAC1E,yEAAyE;AACzE,6EAA6E;AAC7E,yDAAyD;AACzD,EAAE;AACF,0EAA0E;AAC1E,4EAA4E;AAC5E,4EAA4E;AAC5E,0EAA0E;AAE1E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAmD7D;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,OAAsB;IAC9C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5B,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACtB,0CAA0C;IAC1C,MAAM,IAAI,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACzC;;;;;;;OAOG;IACH,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C;0EACsE;IACtE,MAAM,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC1C;;;;;;;;;OASG;IACH,MAAM,KAAK,GAAG,MAAM,CAAwC,IAAI,CAAC,CAAC;IAClE,MAAM,IAAI,GAAG,MAAM,CAAa,IAAI,CAAC,CAAC;IACtC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,CAAS,EAAQ,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,wEAAwE;QACxE,qEAAqE;QACrE,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CACjB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EACd,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAChD,CAAC;QACF,IAAI,EAAE,KAAK,GAAG,CAAC,OAAO;YAAE,OAAO;QAC/B,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;QACnB,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,WAAW,CACvB,CAAC,WAAqB,EAAQ,EAAE;QAC9B,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACnE,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;QAC3B,yEAAyE;QACzE,kEAAkE;QAClE,6BAA6B;QAC7B,IAAI,WAAW,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI;YAAE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;QACzE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACxB,IAAI,CAAC,GAAG,IAAI,EAAE,KAAK,IAAI;YAAE,OAAO;QAChC,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC;YACX,wBAAwB;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;YACvB,OAAO;QACT,CAAC;QACD,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC;QAChC,IAAI,QAAQ,IAAI,CAAC;YAAE,OAAO,CAAC,wCAAwC;QAEnE,yEAAyE;QACzE,yEAAyE;QACzE,qEAAqE;QACrE,uEAAuE;QACvE,mEAAmE;QACnE,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACpC,MAAM,OAAO,GACX,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE;YAC7D,CAAC,CAAC,KAAK,CAAC,IAAI;YACZ,CAAC,CAAC,IAAI,CAAC;QACX,MAAM,MAAM,GAAG,OAAO;YACpB,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;gBAChC,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,QAAQ,CAAC;gBAClE,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM;aAC3B;YACH,CAAC,CAAC;gBACE,KAAK,EAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACzC,KAAK,EACH,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACpB,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACpB,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC;gBAC1B,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;aAC7B,CAAC;QACN;;;;;;;;;;;;;;;;WAgBG;QACH,IAAI,OAAO,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QACzD,IAAI,OAAO,IAAI,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;YACzC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC;YACxD,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;YACjE,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC3C,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAED,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,IAAI,MAAM,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;YAC9B,sEAAsE;YACtE,wEAAwE;YACxE,qEAAqE;YACrE,iCAAiC;YACjC,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvB,CAAC;aAAM,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC;YAAE,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;aAC7C,IAAI,MAAM,CAAC,KAAK,GAAG,CAAC;YAAE,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC;QAE/C,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;YACf,qEAAqE;YACrE,oEAAoE;YACpE,mDAAmD;YACnD,IAAI,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC5B,OAAO,CAAC,OAAO,GAAG,EAAE,CAAC;gBACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;YACD,OAAO;QACT,CAAC;QACD,uEAAuE;QACvE,yEAAyE;QACzE,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;QACxB,QAAQ,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;QACrB,IAAI,GAAG,CAAC,OAAO,KAAK,GAAG,EAAE,CAAC;YACxB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,gDAAgD;YACtE,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC;QAC3B,MAAM,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,CAAC;QAC3D,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACpB,IAAI,IAAI,IAAI,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG,CAAC,OAAO;YAAE,OAAO;QACrE,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;QACvB,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF;0EACsE;IACtE,MAAM,QAAQ,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IACnD,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;IAEzB,MAAM,EAAE,GAAG,WAAW,CACpB,CAAC,EAAU,EAAQ,EAAE;QACnB,gEAAgE;QAChE,uDAAuD;QACvD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;QACrB,KAAK,EAAE,CAAC;IACV,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,CAAC,CAAC,OAAe,EAAQ,EAAE;QAClD,yEAAyE;QACzE,8BAA8B;QAC9B,IAAI,OAAO,KAAK,KAAK,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,CAAC;QACD,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;AACxC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C,OAAO,KAAK,EAEV,aAAa,EACb,UAAU,EAEX,MAAM,WAAW,CAAC;AAcnB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"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"}
|
package/dist/table/index.js
CHANGED
|
@@ -37,6 +37,7 @@ import { hx } from './hx.js';
|
|
|
37
37
|
// header of src/internal/heights.ts says why.
|
|
38
38
|
import { RowHeights } from '../internal/heights.js';
|
|
39
39
|
import { afterLayout, cancelAfterLayout } from '../internal/timers.js';
|
|
40
|
+
import { useReveal } from '../internal/scroll.js';
|
|
40
41
|
import { MIN_COLUMN, columnValue, orderRows, resolveGetId, resolveWidths, } from './rows.js';
|
|
41
42
|
export { MIN_COLUMN, UNSIZED_MIN, columnValue, defaultCompare, orderRows, resolveGetId, resolveWidths, } from './rows.js';
|
|
42
43
|
/** The header strip's height. Core's number — independent of the body's
|
|
@@ -279,6 +280,39 @@ export function Table(props) {
|
|
|
279
280
|
/** Columns resolve to pixels once, at the table level, per (columns,
|
|
280
281
|
* viewport, resizes) — every row agrees on the grid by construction. */
|
|
281
282
|
const { widths, total } = useMemo(() => resolveWidths(columns, userWidths, view.width), [columns, userWidths, view.width]);
|
|
283
|
+
/**
|
|
284
|
+
* The scroll the table owes a row, and the pane's real offset read back
|
|
285
|
+
* after every layout — the two halves of `../internal/scroll.ts`, which
|
|
286
|
+
* says why a reveal cannot be a one-shot and why `onScroll` is not the
|
|
287
|
+
* whole story.
|
|
288
|
+
*/
|
|
289
|
+
const reveal = useReveal({
|
|
290
|
+
box: body,
|
|
291
|
+
rows: orderedRef,
|
|
292
|
+
nodes: rowNodes,
|
|
293
|
+
heights,
|
|
294
|
+
});
|
|
295
|
+
/**
|
|
296
|
+
* Re-read the offset the body is *actually* at.
|
|
297
|
+
*
|
|
298
|
+
* The pane moves silently — it resolves a queued reveal during layout, and
|
|
299
|
+
* re-clamps an offset the content outgrew or outshrank — and a slice built
|
|
300
|
+
* from the offset before those is drawn where the viewport is not: a blank
|
|
301
|
+
* band where the rows should be, and no way back until a scroll of your own
|
|
302
|
+
* re-syncs it by accident.
|
|
303
|
+
*/
|
|
304
|
+
const syncScroll = useCallback(() => {
|
|
305
|
+
const box = body.current;
|
|
306
|
+
if (!box)
|
|
307
|
+
return;
|
|
308
|
+
const { scrollX: x, scrollY: y } = box;
|
|
309
|
+
setScrollX((prev) => (prev === x ? prev : x));
|
|
310
|
+
// Only a virtualizing table reads the vertical offset — a whole one has
|
|
311
|
+
// no slice to rebuild, and re-rendering it on a scroll it already drew
|
|
312
|
+
// would be work for nothing.
|
|
313
|
+
if (virtualizing)
|
|
314
|
+
setView((prev) => (prev.top === y ? prev : { ...prev, top: y }));
|
|
315
|
+
}, [virtualizing]);
|
|
282
316
|
/**
|
|
283
317
|
* Read back what the rows on screen actually laid out at.
|
|
284
318
|
*
|
|
@@ -291,12 +325,12 @@ export function Table(props) {
|
|
|
291
325
|
*/
|
|
292
326
|
const measureRows = useCallback(() => {
|
|
293
327
|
if (uniform || !virtualizing)
|
|
294
|
-
return;
|
|
328
|
+
return false;
|
|
295
329
|
// Before the first `onViewport` the flex columns sit on their floors and
|
|
296
330
|
// every row is laid out against a width that is about to change — there
|
|
297
331
|
// is nothing honest to measure yet.
|
|
298
332
|
if (viewRef.current.width <= 0)
|
|
299
|
-
return;
|
|
333
|
+
return false;
|
|
300
334
|
// A row laid out at a width the columns no longer resolve to is a
|
|
301
335
|
// measurement of the wrong table, and it must not be recorded — a row
|
|
302
336
|
// that scrolls out before the corrected pass would keep a wrong-width
|
|
@@ -325,46 +359,46 @@ export function Table(props) {
|
|
|
325
359
|
shift += height - was;
|
|
326
360
|
}
|
|
327
361
|
if (!changed)
|
|
328
|
-
return;
|
|
362
|
+
return false;
|
|
329
363
|
if (shift !== 0 && box) {
|
|
330
|
-
|
|
364
|
+
reveal.scrollTo(box.scrollY + shift);
|
|
331
365
|
}
|
|
332
366
|
setMeasured((n) => n + 1);
|
|
367
|
+
return true;
|
|
333
368
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- `heights` is a
|
|
334
369
|
// stable instance
|
|
335
370
|
}, [uniform, virtualizing]);
|
|
371
|
+
/**
|
|
372
|
+
* The one tick after layout, and everything that can only be known there:
|
|
373
|
+
* what the rows measured, whether an owed scroll can go further now that
|
|
374
|
+
* the new rows are laid out, and where the body actually ended up. In that
|
|
375
|
+
* order — each step can move the offset the next one reads.
|
|
376
|
+
*
|
|
377
|
+
* Scheduled for every render a virtualized table makes, because every one
|
|
378
|
+
* of them can move the offset its next slice is built from. A whole table
|
|
379
|
+
* needs none of it: `onViewport` is when its content can have been
|
|
380
|
+
* re-clamped, and it rebuilds no slice anyway.
|
|
381
|
+
*/
|
|
336
382
|
useEffect(() => {
|
|
337
|
-
if (
|
|
383
|
+
if (!virtualizing)
|
|
338
384
|
return undefined;
|
|
339
|
-
const id = afterLayout(
|
|
385
|
+
const id = afterLayout(() => {
|
|
386
|
+
// `measureRows` first, and its answer handed on: a pass that moved the
|
|
387
|
+
// heights has not settled anything, and an owed scroll judged against
|
|
388
|
+
// the layout it is about to invalidate is not owed any less.
|
|
389
|
+
reveal.retry(measureRows());
|
|
390
|
+
syncScroll();
|
|
391
|
+
});
|
|
340
392
|
return () => cancelAfterLayout(id);
|
|
341
393
|
});
|
|
342
|
-
/**
|
|
343
|
-
|
|
344
|
-
* `scrollIntoView` then works whatever height it turned out to be; a row
|
|
345
|
-
* that is not mounted has no geometry to ask, so the height index answers
|
|
346
|
-
* instead.
|
|
347
|
-
*/
|
|
348
|
-
const reveal = useCallback((at) => {
|
|
349
|
-
const box = body.current;
|
|
394
|
+
/** Put a row in view, by the index its call site already has. */
|
|
395
|
+
const revealAt = useCallback((at) => {
|
|
350
396
|
const row = orderedRef.current[at];
|
|
351
|
-
if (
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
return;
|
|
357
|
-
}
|
|
358
|
-
const top = heights.offsetAt(at);
|
|
359
|
-
const rowH = heights.heightAt(at);
|
|
360
|
-
const height = viewRef.current.height;
|
|
361
|
-
if (top < box.scrollY)
|
|
362
|
-
box.scrollTo({ y: top });
|
|
363
|
-
else if (height > 0 && top + rowH > box.scrollY + height) {
|
|
364
|
-
box.scrollTo({ y: top + rowH - height });
|
|
365
|
-
}
|
|
366
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
367
|
-
}, []);
|
|
397
|
+
if (row)
|
|
398
|
+
reveal.to(row.id);
|
|
399
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- `reveal` is a
|
|
400
|
+
// stable handle
|
|
401
|
+
}, [reveal]);
|
|
368
402
|
const commitSingle = useCallback((row) => {
|
|
369
403
|
cursorRef.current = row.id;
|
|
370
404
|
if (selected === undefined)
|
|
@@ -389,7 +423,7 @@ export function Table(props) {
|
|
|
389
423
|
return;
|
|
390
424
|
if (selectionMode === 'single') {
|
|
391
425
|
commitSingle(row);
|
|
392
|
-
|
|
426
|
+
revealAt(row.index);
|
|
393
427
|
return;
|
|
394
428
|
}
|
|
395
429
|
cursorRef.current = row.id;
|
|
@@ -417,8 +451,8 @@ export function Table(props) {
|
|
|
417
451
|
anchorRef.current = row.id;
|
|
418
452
|
commitMulti([row.id], { type: 'replace', id: row.id, row: row.row });
|
|
419
453
|
}
|
|
420
|
-
|
|
421
|
-
}, [selectionMode, commitSingle, commitMulti,
|
|
454
|
+
revealAt(row.index);
|
|
455
|
+
}, [selectionMode, commitSingle, commitMulti, revealAt]);
|
|
422
456
|
const activate = useCallback((row) => {
|
|
423
457
|
onActivate?.(row.id, row.row);
|
|
424
458
|
}, [onActivate]);
|
|
@@ -573,12 +607,12 @@ export function Table(props) {
|
|
|
573
607
|
const row = orderedRef.current.find((r) => r.id === id);
|
|
574
608
|
if (!row)
|
|
575
609
|
return false;
|
|
576
|
-
|
|
610
|
+
revealAt(row.index);
|
|
577
611
|
return true;
|
|
578
612
|
},
|
|
579
613
|
handleKey,
|
|
580
614
|
rows: () => orderedRef.current,
|
|
581
|
-
}), [tap, handleKey,
|
|
615
|
+
}), [tap, handleKey, revealAt, selectionMode, selected]);
|
|
582
616
|
// --- rendering -----------------------------------------------------------
|
|
583
617
|
const rowStyleProp = styles?.row;
|
|
584
618
|
const cellStyleProp = styles?.cell;
|
|
@@ -816,6 +850,10 @@ export function Table(props) {
|
|
|
816
850
|
ref: body,
|
|
817
851
|
style: s.body,
|
|
818
852
|
onScroll: (ev) => {
|
|
853
|
+
// A scroll this component did not ask for is the user taking over,
|
|
854
|
+
// and an owed `scrollToRow` must not yank the list back out from
|
|
855
|
+
// under them on the next layout.
|
|
856
|
+
reveal.heard(ev.scrollY);
|
|
819
857
|
setScrollX((prev) => (prev === ev.scrollX ? prev : ev.scrollX));
|
|
820
858
|
if (virtualizing) {
|
|
821
859
|
setView((prev) => prev.top === ev.scrollY ? prev : { ...prev, top: ev.scrollY });
|
|
@@ -837,6 +875,14 @@ export function Table(props) {
|
|
|
837
875
|
setView((prev) => prev.height === ev.height && prev.width === ev.width
|
|
838
876
|
? prev
|
|
839
877
|
: { ...prev, height: ev.height, width: ev.width });
|
|
878
|
+
// The content just changed size, which is both the moment an owed
|
|
879
|
+
// scroll can reach further than the clamp let it and the moment the
|
|
880
|
+
// container may have re-clamped the offset without saying so. It is
|
|
881
|
+
// not a moment anything can be *settled* in while rows are still
|
|
882
|
+
// being measured: this runs from layout, a tick before the pass that
|
|
883
|
+
// reads those rows back.
|
|
884
|
+
reveal.retry(virtualizing && !uniform);
|
|
885
|
+
syncScroll();
|
|
840
886
|
onViewport?.(ev);
|
|
841
887
|
},
|
|
842
888
|
}, hx('box', { style: [s.rowsBox, { width: total }] }, bodyChildren)));
|