From 9bb5ea9de3bc46ac061233bb4be538967cf5079d Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Thu, 19 Oct 2023 00:22:59 +0900
Subject: [PATCH] Add `align: center` option to scrollToIndex

---
 src/core/scroller.ts             |  4 ++++
 src/core/types.ts                |  3 ++-
 stories/basics/VList.stories.tsx | 11 +++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/core/scroller.ts b/src/core/scroller.ts
index 04104e4d9..fceb8fe29 100644
--- a/src/core/scroller.ts
+++ b/src/core/scroller.ts
@@ -214,6 +214,10 @@ export const createScroller = (
               store._getItemOffset(index) +
               store._getItemSize(index) -
               store._getViewportSize()
+          : align === "center"
+          ? () =>
+              store._getItemOffset(index) +
+              (store._getItemSize(index) - store._getViewportSize()) / 2
           : () => store._getItemOffset(index)
       );
     },
diff --git a/src/core/types.ts b/src/core/types.ts
index e55b4a93b..731b5d25f 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -20,6 +20,7 @@ export interface CacheSnapshot {
  * Alignment of item when calling scrollToIndex method.
  *
  * - `start`(default): Align the item to the start of the list.
+ * - `center`: Align the item to the center of the list.
  * - `end`: Align the item to the end of the list.
  */
-export type ScrollToIndexAlign = "start" | "end";
+export type ScrollToIndexAlign = "start" | "center" | "end";
diff --git a/stories/basics/VList.stories.tsx b/stories/basics/VList.stories.tsx
index 9cd9e40a9..95ca50188 100644
--- a/stories/basics/VList.stories.tsx
+++ b/stories/basics/VList.stories.tsx
@@ -246,6 +246,17 @@ export const ScrollTo: StoryObj = {
             />
             start
           </label>
+          <label style={{ marginLeft: 4 }}>
+            <input
+              type="radio"
+              style={{ marginLeft: 4 }}
+              checked={scrollIndexAlign === "center"}
+              onChange={() => {
+                setScrollToIndexAlign("center");
+              }}
+            />
+            center
+          </label>
           <label style={{ marginLeft: 4 }}>
             <input
               type="radio"