Merge pull request #213 from inokawa/align-center

Add `align: center` option to scrollToIndex
inokawa · Oct 20, 2023 · b993e28 · b993e28
2 parents be107b5 + 9bb5ea9
commit b993e28
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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"