Implement handle of VGrid

src/react/VGrid.tsx

@@ -8,6 +8,7 @@ import {
  ReactNode,
  RefObject,
  useState,
+ useImperativeHandle,
 } from "react";
 import { VirtualStore, createVirtualStore } from "../core/store";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
@@ -213,7 +214,38 @@ const Window = ({
 /**
  * Methods of {@link VGrid}.
  */
-export interface VGridHandle {}
+export interface VGridHandle {
+ /**
+ * Get current scrollTop or scrollLeft.
+ */
+ readonly scrollOffset: [x: number, y: number];
+ /**
+ * Get current scrollHeight or scrollWidth.
+ */
+ readonly scrollSize: [width: number, height: number];
+ /**
+ * Get current offsetHeight or offsetWidth.
+ */
+ readonly viewportSize: [width: number, height: number];
+ /**
+ * Scroll to the item specified by index.
+ * @param indexX horizontal index of item
+ * @param indexY vertical index of item
+ */
+ scrollToIndex(indexX: number, indexY: number): void;
+ /**
+ * Scroll to the given offset.
+ * @param offsetX offset from left
+ * @param offsetY offset from top
+ */
+ scrollTo(offsetX: number, offsetY: number): void;
+ /**
+ * Scroll by the given offset.
+ * @param offsetX horizontal offset from current position
+ * @param offsetY vertical offset from current position
+ */
+ scrollBy(offsetX: number, offsetY: number): void;
+}
 
 /**
  * Props of {@link VGrid}.
@@ -298,7 +330,7 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
  cellElement: itemElement = "div",
  ...windowAttrs
  },
- _ref // TODO implement
+ ref
  ): ReactElement => {
  const [verticalScrolling, setVerticalScrolling] = useState(false);
  const [horizontalScrolling, setHorizontalScrolling] = useState(false);
@@ -366,6 +398,39 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
  }
  }, [horizontalJump]);
 
+ useImperativeHandle(
+ ref,
+ () => {
+ return {
+ get scrollOffset(): [number, number] {
+ return [hStore._getScrollOffset(), vStore._getScrollOffset()];
+ },
+ get scrollSize(): [number, number] {
+ return [
+ hScroller._getActualScrollSize(),
+ vScroller._getActualScrollSize(),
+ ];
+ },
+ get viewportSize(): [number, number] {
+ return [hStore._getViewportSize(), vStore._getViewportSize()];
+ },
+ scrollToIndex(indexX, indexY) {
+ hScroller._scrollToIndex(indexX, colCount);
+ vScroller._scrollToIndex(indexY, rowCount);
+ },
+ scrollTo(offsetX, offsetY) {
+ hScroller._scrollTo(offsetX);
+ vScroller._scrollTo(offsetY);
+ },
+ scrollBy(offsetX, offsetY) {
+ hScroller._scrollTo(hStore._getScrollOffset() + offsetX);
+ vScroller._scrollTo(vStore._getScrollOffset() + offsetY);
+ },
+ };
+ },
+ [rowCount, colCount]
+ );
+
  const render = useMemo(() => {
  const cache = new Map<string, ReactNode>();
  return (rowIndex: number, colIndex: number) => {

stories/basics/VGrid.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { VGrid } from "../../src";
+import React, { useRef, useState } from "react";
+import { VGrid, VGridHandle } from "../../src";
 
 export default {
  component: VGrid,
@@ -127,3 +127,106 @@ export const Rtl: StoryObj = {
  );
  },
 };
+
+export const ScrollTo: StoryObj = {
+ render: () => {
+ const ROW_LENGTH = 1000;
+ const COL_LENGTH = 1000;
+ const [scrollIndex, setScrollIndex] = useState<[number, number]>([
+ 567, 567,
+ ]);
+ const [scrollOffset, setScrollOffset] = useState<[number, number]>([
+ 1000, 1000,
+ ]);
+ const ref = useRef<VGridHandle>(null);
+ return (
+ <div
+ style={{ height: "100vh", display: "flex", flexDirection: "column" }}
+ >
+ <div>
+ <input
+ type="number"
+ value={scrollIndex[0]}
+ onChange={(e) => {
+ setScrollIndex((prev) => [Number(e.target.value), prev[1]]);
+ }}
+ />
+ <input
+ type="number"
+ value={scrollIndex[1]}
+ onChange={(e) => {
+ setScrollIndex((prev) => [prev[0], Number(e.target.value)]);
+ }}
+ />
+ <button
+ onClick={() => {
+ ref.current?.scrollToIndex(scrollIndex[0], scrollIndex[1]);
+ }}
+ >
+ scroll to index
+ </button>
+ <button
+ onClick={() => {
+ setScrollIndex([
+ Math.round(COL_LENGTH * Math.random()),
+ Math.round(ROW_LENGTH * Math.random()),
+ ]);
+ }}
+ >
+ randomize
+ </button>
+ </div>
+ <div>
+ <div>
+ <input
+ type="number"
+ value={scrollOffset[0]}
+ onChange={(e) => {
+ setScrollOffset((prev) => [Number(e.target.value), prev[1]]);
+ }}
+ />
+ <input
+ type="number"
+ value={scrollOffset[1]}
+ onChange={(e) => {
+ setScrollOffset((prev) => [prev[0], Number(e.target.value)]);
+ }}
+ />
+ <button
+ onClick={() => {
+ ref.current?.scrollTo(scrollOffset[0], scrollOffset[1]);
+ }}
+ >
+ scroll to offset
+ </button>
+ <button
+ onClick={() => {
+ ref.current?.scrollBy(scrollOffset[0], scrollOffset[1]);
+ }}
+ >
+ scroll by offset
+ </button>
+ </div>
+ </div>
+ <VGrid
+ ref={ref}
+ style={{ height: "100vh" }}
+ row={ROW_LENGTH}
+ col={COL_LENGTH}
+ >
+ {({ rowIndex, colIndex }) => (
+ <div
+ style={{
+ border: "solid 1px gray",
+ background: "white",
+ padding: 4,
+ }}
+ >
+ {rowIndex} / {colIndex}
+ </div>
+ )}
+ </VGrid>
+ </div>
+ );
+ },
+};