🆙 Init V3

src/common/InfiniteScroll.tsx

@@ -0,0 +1,55 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { FC, ReactElement, useRef, useState } from 'react';
+import { Base } from './Base';
+
+interface InfiniteScrollProps<T = any>
+{
+    rows: T[];
+    overscan?: number;
+    scrollToBottom?: boolean;
+    rowRender: (row: T) => ReactElement;
+}
+
+export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
+{
+    const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props;
+    const [ scrollIndex, setScrollIndex ] = useState<number>(rows.length - 1);
+    const parentRef = useRef<HTMLDivElement>(null);
+
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        overscan,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 45,
+    });
+    const items = virtualizer.getVirtualItems();
+
+    return (
+        <Base fit innerRef={ parentRef } overflow="auto" position="relative">
+            <div
+                style={ {
+                    height: virtualizer.getTotalSize(),
+                    width: '100%',
+                    position: 'relative'
+                } }>
+                <div
+                    style={ {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        transform: `translateY(${ items[0]?.start ?? 0 }px)`
+                    } }>
+                    { items.map((virtualRow) => (
+                        <div
+                            key={ virtualRow.key }
+                            ref={ virtualizer.measureElement }
+                            data-index={ virtualRow.index }>
+                            { rowRender(rows[virtualRow.index]) }
+                        </div>
+                    )) }
+                </div>
+            </div>
+        </Base>
+    );
+};