feat: add scrollToIndex, forceUpdate

Author: phphe

src/App.tsx

@@ -1,5 +1,6 @@
 import BaseExample from "./examples/base";
 import StickyExample from "./examples/sticky";
+import ScrollToIndexExample from "./examples/scrollToIndex";
 
 function App() {
   return (
@@ -8,14 +9,16 @@ function App() {
         <b>@phphe/react-base-virtual-list</b>
         <a className='ml-10' href="https://github.com/phphe/react-base-virtual-list">Github</a>
       </div>
-      <div className='grid grid-cols-2 gap-4'>
+      <div className='grid grid-cols-3 gap-4'>
         <div>
-
           <BaseExample />
         </div>
         <div>
           <StickyExample />
         </div>
+        <div>
+          <ScrollToIndexExample />
+        </div>
       </div >
     </>
   )

src/VirtualList.tsx

@@ -28,7 +28,8 @@ export const defaultProps = {
 }
 
 export interface VirtualListHandle {
-  scrollToIndex(index: number): void
+  scrollToIndex(index: number, block?: 'start' | 'end' | 'center' | 'nearest'): void
+  forceUpdate(): void
 }
 
 export const VirtualList = forwardRef(function <ITEM>(
@@ -41,9 +42,11 @@ export const VirtualList = forwardRef(function <ITEM>(
   const list = useRef<HTMLDivElement>(null);
   const listInner = useRef<HTMLDivElement>(null);
   const prevScrollTop = useRef(0);
+  const scrollToIndexRef = useRef<{ index: number, block: string }>();
   const [scrollTop, setscrollTop] = useState(0);
   const [listSize, setlistSize] = useState(props.listSize!);
-
+  const [forceRerender, setforceRerender] = useState([]); // change value to force rerender
+  const ignoreScrollOnce = useRef(false);
   // 
   const totalSpace = itemSize * count
   let topSpace = scrollTop - buffer
@@ -64,12 +67,12 @@ export const VirtualList = forwardRef(function <ITEM>(
   } else {
     endIndex = count - Math.floor(bottomSpace / itemSize)
   }
-  const mainVisibleIndexes = Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex);
-  let visibleIndexes = mainVisibleIndexes.concat(props.persistentIndices || [])
+  const mainVisibleIndices = Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex);
+  let visibleIndices = mainVisibleIndices.concat(props.persistentIndices || [])
   if (props.persistentIndices?.length) {
-    visibleIndexes = [...new Set(visibleIndexes)].sort((a, b) => a - b)
+    visibleIndices = [...new Set(visibleIndices)].sort((a, b) => a - b)
   }
-  const visible = visibleIndexes.map(i => props.items[i])
+  const visible = visibleIndices.map(i => props.items[i])
 
   // 
   const listInnerStyle: any = { paddingTop: `${topSpace}px`, boxSizing: 'border-box' }
@@ -78,39 +81,72 @@ export const VirtualList = forwardRef(function <ITEM>(
   } else {
     listInnerStyle['height'] = `${totalSpace}px`
   }
+
   useLayoutEffect(() => {
     setlistSize(list.current!.clientHeight)
+    // get avg item size
     if (props.itemSize == null) {
-      // get avg item size
       let count = 0
       let totalHeight = 0
+      const persistentIndices = new Set(props.persistentIndices || [])
+      let i = -1
       for (const el of listInner.current!.children) {
+        i++
+        if (persistentIndices.has(visibleIndices[i])) {
+          continue
+        }
         const style = getComputedStyle(el)
         totalHeight += (el as HTMLElement).offsetHeight + parseFloat(style.marginTop) + parseFloat(style.marginBottom)
         count++
       }
       setitemSize(totalHeight / count)
     }
-  }, [props.itemSize, props.items]);
+  }, [props.itemSize, props.items, forceRerender]);
   //
   const handleScroll = () => {
+    if (ignoreScrollOnce.current) {
+      ignoreScrollOnce.current = false
+      return
+    }
     setlistSize(list.current!.clientHeight)
     const scrollTop2 = list.current!.scrollTop
     if (Math.abs(prevScrollTop.current - scrollTop2) > itemSize) {
       setscrollTop(scrollTop2)
       prevScrollTop.current = scrollTop2
+    } else if (scrollToIndexRef.current) {
+      setforceRerender([])
     }
   }
   // 
   useImperativeHandle(ref, () => ({
-    scrollToIndex: (index: number) => {
+    scrollToIndex(index, block = 'start') {
+      scrollToIndexRef.current = {
+        index,
+        block
+      }
       list.current!.scrollTop = index * itemSize
     },
-  }), []);
+    forceUpdate() {
+      setforceRerender([])
+    }
+  }), [itemSize]);
+  useLayoutEffect(() => {
+    if (scrollToIndexRef.current) {
+      const { index, block } = scrollToIndexRef.current;
+      scrollToIndexRef.current = undefined
+      const indexInVisible = visibleIndices.indexOf(index)
+      const el = listInner.current!.children[indexInVisible] as HTMLElement
+      if (el) {
+        // @ts-ignore
+        el.scrollIntoView({ block })
+        ignoreScrollOnce.current = true
+      }
+    }
+  }, [visibleIndices])
   // 
   return <div ref={list} onScroll={handleScroll} className={props.className} style={{ overflow: 'auto', ...props.style }}>
     <div ref={listInner} style={{ display: 'flex', flexDirection: 'column', ...listInnerStyle }}>
-      {visible.map((item, i) => props.renderItem(item, visibleIndexes[i]))}
+      {visible.map((item, i) => props.renderItem(item, visibleIndices[i]))}
     </div>
   </div>
 })

src/examples/scrollToIndex.tsx

@@ -0,0 +1,33 @@
+import React, {
+  useRef
+} from 'react';
+import exampleData from './example_data.json'
+import { VirtualList, VirtualListHandle } from '../VirtualList'
+
+export default function ScrollToIndexExample() {
+  const ref = useRef<VirtualListHandle>(null);
+  return <>
+    <h2>scroll to index</h2>
+    <ul>
+      <li><button onClick={() => ref.current!.scrollToIndex(100)}>scroll to 100</button></li>
+      <li><button onClick={() => ref.current!.scrollToIndex(233)}>scroll to 233</button></li>
+      <li><button onClick={() => ref.current!.scrollToIndex(567)}>scroll to 567</button></li>
+      <li><button onClick={() => ref.current!.scrollToIndex(761)}>scroll to 761</button></li>
+      <li><button onClick={() => ref.current!.scrollToIndex(999)}>scroll to 999</button></li>
+    </ul>
+    <VirtualList
+      ref={ref}
+      items={exampleData}
+      style={{ height: '600px', border: '1px solid #ccc', padding: '10px' }}
+      renderItem={(item, index) => <div key={index} style={{ marginBottom: '10px' }}>
+        <h3>{index}. {item.headline}</h3>
+        <div>
+          <div style={{ float: 'left', width: '100px', height: '100px', background: '#f0f0f0', borderRadius: '5px', marginRight: '10px' }}></div>
+          {item.content}
+        </div>
+      </div>}
+    ></VirtualList>
+    <br />
+    <a href="https://github.com/phphe/react-base-virtual-list/blob/main/src/examples/scrollToIndex.tsx">Source Code</a>
+  </>
+}