import { useState, memo, useEffect } from "react"; import { useVirtual, List, createListItemRef } from "@af-utils/virtual-react"; import { VirtualScroller } from "@af-utils/virtual-core"; import type { ListItemProps } from "@af-utils/virtual-react"; import type { FormEvent } from "react"; import css from "./style.module.css"; const DEFAULT_ROW_COUNT = 50000; const Item = memo(({ model, i, data: pseudoRandomSizes }) => (

row {i}: {pseudoRandomSizes[i]}px

)); const getScrollSubmitHandler = (model: VirtualScroller) => (e: FormEvent) => { e.preventDefault(); const idx = Number.parseInt(e.currentTarget.idx.value, 10); if (!Number.isNaN(idx)) { model.scrollToIndex(idx, true); } }; const ScrollToItem = () => { const [pseudoRandomSizes, changeRows] = useState(() => Array.from( { length: DEFAULT_ROW_COUNT }, (_, i) => 20 + ((i ** 2) & 31) ) ); const model = useVirtual({ itemCount: pseudoRandomSizes.length, estimatedItemSize: 75 }); useEffect(() => { model.scrollToIndex(pseudoRandomSizes.length - 1); }, [model, pseudoRandomSizes.length]); const rowsAddSubmitHandler = (e: FormEvent) => { e.preventDefault(); const rowsToAdd = Number.parseInt(e.currentTarget.rowsToAdd.value, 10); if (!Number.isNaN(rowsToAdd) && rowsToAdd !== 0) { changeRows(rows => rowsToAdd > 0 ? rows.concat( Array.from( { length: rowsToAdd }, (_, i) => 50 + ((i ** 2) & 63) ) ) : rows.slice(0, rowsToAdd) ); } else { model.scrollToIndex(pseudoRandomSizes.length - 1); } }; return ( model.setStickyHeader(el)} onSubmit={getScrollSubmitHandler(model)} > Smooth scroll to index: } footer={ } > {Item} ); }; export default ScrollToItem;