Implement scrollToIndex to other WindowVirtualizers (#554)

inokawa · Nov 21, 2024 · 32f9f6b · 32f9f6b
1 parent 3f0881e
commit 32f9f6b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/src/solid/WindowVirtualizer.tsx b/src/solid/WindowVirtualizer.tsx
@@ -23,7 +23,7 @@ import { createWindowScroller } from "../core/scroller";
 import { ListItem } from "./ListItem";
 import { RangedFor } from "./RangedFor";
 import { isSameRange } from "./utils";
-import { ItemsRange } from "../core/types";
+import { ItemsRange, ScrollToIndexOpts } from "../core/types";
 
 /**
  * Methods of {@link WindowVirtualizer}.
@@ -37,6 +37,12 @@ export interface WindowVirtualizerHandle {
    * Find the end index of visible range of items.
    */
   findEndIndex: () => number;
+  /**
+   * Scroll to the item specified by index.
+   * @param index index of item
+   * @param opts options
+   */
+  scrollToIndex(index: number, opts?: ScrollToIndexOpts): void;
 }
 
 /**
@@ -150,6 +156,7 @@ export const WindowVirtualizer = <T,>(
       props.ref({
         findStartIndex: store._findStartIndex,
         findEndIndex: store._findEndIndex,
+        scrollToIndex: scroller._scrollToIndex,
       });
     }
 

diff --git a/src/svelte/WindowVirtualizer.svelte b/src/svelte/WindowVirtualizer.svelte
@@ -17,6 +17,7 @@
     GET_ITEMS_LENGTH,
     FIND_START_INDEX,
     FIND_END_INDEX,
+    SCROLL_TO_INDEX,
   } from "./core";
   import { defaultGetKey, iterRange, styleToString } from "./utils";
   import ListItem from "./ListItem.svelte";
@@ -90,6 +91,9 @@
   export const findEndIndex = virtualizer[
     FIND_END_INDEX
   ] satisfies WindowVirtualizerHandle["findEndIndex"] as WindowVirtualizerHandle["findEndIndex"];
+  export const scrollToIndex = virtualizer[
+    SCROLL_TO_INDEX
+  ] satisfies WindowVirtualizerHandle["scrollToIndex"] as WindowVirtualizerHandle["scrollToIndex"];
 
   let containerStyle = $derived(
     styleToString({

diff --git a/src/svelte/WindowVirtualizer.type.ts b/src/svelte/WindowVirtualizer.type.ts
@@ -1,4 +1,5 @@
 import { type Snippet } from "svelte";
+import { type ScrollToIndexOpts } from "../core/types";
 
 /**
  * Props of {@link WindowVirtualizer}.
@@ -60,4 +61,10 @@ export interface WindowVirtualizerHandle {
    * Find the end index of visible range of items.
    */
   findEndIndex: () => number;
+  /**
+   * Scroll to the item specified by index.
+   * @param index index of item
+   * @param opts options
+   */
+  scrollToIndex(index: number, opts?: ScrollToIndexOpts): void;
 }
diff --git a/src/svelte/core.ts b/src/svelte/core.ts
@@ -180,6 +180,7 @@ export const createWindowVirtualizer = (
     [CHANGE_ITEM_LENGTH]: (len: number, shift?: boolean) => {
       store._update(ACTION_ITEMS_LENGTH_CHANGE, [len, shift]);
     },
+    [SCROLL_TO_INDEX]: scroller._scrollToIndex,
     [FIND_START_INDEX]: store._findStartIndex,
     [FIND_END_INDEX]: store._findEndIndex,
   };

diff --git a/src/vue/WindowVirtualizer.tsx b/src/vue/WindowVirtualizer.tsx
@@ -25,7 +25,7 @@ import { createWindowResizer } from "../core/resizer";
 import { createWindowScroller } from "../core/scroller";
 import { ListItem } from "./ListItem";
 import { getKey, isSameRange } from "./utils";
-import { ItemsRange } from "../core/types";
+import { ItemsRange, ScrollToIndexOpts } from "../core/types";
 
 export interface WindowVirtualizerHandle {
   /**
@@ -36,6 +36,12 @@ export interface WindowVirtualizerHandle {
    * Find the end index of visible range of items.
    */
   findEndIndex: () => number;
+  /**
+   * Scroll to the item specified by index.
+   * @param index index of item
+   * @param opts options
+   */
+  scrollToIndex(index: number, opts?: ScrollToIndexOpts): void;
 }
 
 const props = {
@@ -151,6 +157,7 @@ export const WindowVirtualizer = /*#__PURE__*/ defineComponent({
     expose({
       findStartIndex: store._findStartIndex,
       findEndIndex: store._findEndIndex,
+      scrollToIndex: scroller._scrollToIndex,
     } satisfies WindowVirtualizerHandle);
 
     return () => {