type changes · TanStack/virtual@a5ebd14 · GitHub
Skip to content

Commit a5ebd14

Browse files
tannerlinsleytannerlinsley
committed
type changes
1 parent 6c34bf4 commit a5ebd14

5 files changed

Lines changed: 53 additions & 29 deletions

File tree

‎examples/dynamic/index.html‎

Lines changed: 1 addition & 1 deletion

examples/dynamic/src/main.jsx renamed to examples/dynamic/src/main.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,11 @@ function App() {
2626
<br />
2727

2828
<h3>Rows</h3>
29-
<RowVirtualizerDynamic rows={rows} columns={columns} />
29+
<RowVirtualizerDynamic rows={rows} />
3030
<br />
3131
<br />
3232
<h3>Columns</h3>
33-
<ColumnVirtualizerDynamic rows={rows} columns={columns} />
33+
<ColumnVirtualizerDynamic columns={columns} />
3434
<br />
3535
<br />
3636
<h3>Grid</h3>
@@ -40,7 +40,7 @@ function App() {
4040
}
4141

4242
function RowVirtualizerDynamic({ rows }) {
43-
const parentRef = React.useRef()
43+
const parentRef = React.useRef<HTMLDivElement>(null)
4444

4545
const rowVirtualizer = useVirtual({
4646
size: rows.length,
@@ -243,5 +243,5 @@ ReactDOM.render(
243243
<React.StrictMode>
244244
<App />
245245
</React.StrictMode>,
246-
document.getElementById('root')
246+
document.getElementById('root'),
247247
)

‎examples/dynamic/yarn.lock‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,13 @@
245245
"@babel/plugin-syntax-jsx" "^7.16.7"
246246
"@babel/types" "^7.16.7"
247247

248+
"@babel/runtime@^7.16.7":
249+
version "7.17.0"
250+
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.0.tgz#b8d142fc0f7664fb3d9b5833fd40dcbab89276c0"
251+
integrity sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==
252+
dependencies:
253+
regenerator-runtime "^0.13.4"
254+
248255
"@babel/template@^7.16.7":
249256
version "7.16.7"
250257
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -316,6 +323,14 @@
316323
estree-walker "^2.0.1"
317324
picomatch "^2.2.2"
318325

326+
"@tanstack/react-virtual@3.0.0-alpha.0":
327+
version "3.0.0-alpha.0"
328+
resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-alpha.0.tgz#2ca5a75fa609eca2b2ba622024d3aa3ee097bc30"
329+
integrity sha512-WpHU/dt34NwZZ8qtiE05TF+nX/b1W6qrWZarO+s8jJFpPVicrTbJKp5Bjt4eSJuk7aYw272oEfsH3ABBRgj+3A==
330+
dependencies:
331+
"@babel/runtime" "^7.16.7"
332+
"@reach/observe-rect" "^1.1.0"
333+
319334
"@types/estree@0.0.39":
320335
version "0.0.39"
321336
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -659,13 +674,6 @@ react-refresh@^0.11.0:
659674
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
660675
integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
661676

662-
react-virtual@2.10.3:
663-
version "2.10.3"
664-
resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.3.tgz#83092c0af7be5c61c55a07ae5a18112be561276a"
665-
integrity sha512-ZcQ+4oTQnJw79gmIzoEx6gfobADLj+9gdIiG4TTK5mUI6BAkEh83lmNU9WZPzi3FI77tXOYlWKC3fnHRH6kR5w==
666-
dependencies:
667-
"@reach/observe-rect" "^1.1.0"
668-
669677
react@^17.0.2:
670678
version "17.0.2"
671679
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -674,6 +682,11 @@ react@^17.0.2:
674682
loose-envify "^1.1.0"
675683
object-assign "^4.1.1"
676684

685+
regenerator-runtime@^0.13.4:
686+
version "0.13.9"
687+
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
688+
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
689+
677690
resolve@^1.20.0:
678691
version "1.20.0"
679692
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"

‎packages/react-virtual/src/index.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,17 @@ interface Item {
5252
size: number
5353
}
5454

55-
export interface VirtualItem extends Item {
56-
measureRef: (el: HTMLElement | null) => void
55+
export interface VirtualItem<TItemElement> extends Item {
56+
measureRef: (el: TItemElement | null) => void
5757
}
5858

59-
export interface Options<T> {
59+
export interface Options<
60+
TParentRef,
61+
TItemElement = HTMLElement,
62+
TOnScrollElement = TParentRef
63+
> {
6064
size: number
61-
parentRef: React.RefObject<T>
65+
parentRef: React.RefObject<TParentRef>
6266
estimateSize?: (index: number) => number
6367
overscan?: number
6468
horizontal?: boolean
@@ -68,16 +72,20 @@ export interface Options<T> {
6872
) => void
6973
paddingStart?: number
7074
paddingEnd?: number
71-
useObserver?: (ref: React.RefObject<T>, initialRect?: Rect) => Rect
75+
useObserver?: (ref: React.RefObject<TParentRef>, initialRect?: Rect) => Rect
7276
initialRect?: Rect
7377
keyExtractor?: (index: number) => Key
74-
onScrollElement?: React.RefObject<HTMLElement>
78+
onScrollElement?: React.RefObject<TOnScrollElement>
7579
scrollOffsetFn?: (event?: Event) => number
7680
rangeExtractor?: (range: Range) => number[]
77-
measureSize?: (el: HTMLElement, horizontal: boolean) => number
81+
measureSize?: (el: TItemElement, horizontal: boolean) => number
7882
}
7983

80-
export const useVirtual = <T extends HTMLElement>({
84+
export const useVirtual = <
85+
TParentRef extends HTMLElement,
86+
TItemElement extends HTMLElement = HTMLElement,
87+
TOnScrollElement extends HTMLElement = TParentRef
88+
>({
8189
size = 0,
8290
estimateSize = defaultEstimateSize,
8391
overscan = 1,
@@ -93,7 +101,13 @@ export const useVirtual = <T extends HTMLElement>({
93101
keyExtractor = defaultKeyExtractor,
94102
measureSize = defaultMeasureSize,
95103
rangeExtractor = defaultRangeExtractor,
96-
}: Options<T>) => {
104+
}: Options<TParentRef, TItemElement>): {
105+
virtualItems: VirtualItem<TItemElement>[]
106+
totalSize: number
107+
scrollToOffset: (offset: number, options?: ScrollToOffsetOptions) => void
108+
scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void
109+
measure: (index: number) => void
110+
} => {
97111
const sizeKey = horizontal ? 'width' : 'height'
98112
const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop'
99113

@@ -218,7 +232,7 @@ export const useVirtual = <T extends HTMLElement>({
218232
const measureSizeRef = React.useRef(measureSize)
219233
measureSizeRef.current = measureSize
220234

221-
const virtualItems: VirtualItem[] = React.useMemo(() => {
235+
const virtualItems: VirtualItem<TItemElement>[] = React.useMemo(() => {
222236
const virtualItems = []
223237

224238
for (let k = 0, len = indexes.length; k < len; k++) {
@@ -227,7 +241,7 @@ export const useVirtual = <T extends HTMLElement>({
227241

228242
const item = {
229243
...measurement,
230-
measureRef: (el: HTMLElement | null) => {
244+
measureRef: (el: TItemElement | null) => {
231245
if (el) {
232246
const measuredSize = measureSizeRef.current(el, horizontal)
233247

@@ -240,7 +254,7 @@ export const useVirtual = <T extends HTMLElement>({
240254

241255
pendingMeasuredCacheIndexesRef.current.push(i)
242256

243-
setMeasuredCache((old) => ({
257+
setMeasuredCache(old => ({
244258
...old,
245259
[item.key]: measuredSize,
246260
}))

‎scripts/publish.ts‎

Lines changed: 2 additions & 5 deletions

0 commit comments

Comments
 (0)