examples: add scroll-padding

TanStack · Jun 3, 2022 · 3914e84 · 3914e84
1 parent f24c8fe
commit 3914e84
Show file tree

Hide file tree

Showing 11 changed files with 1,001 additions and 0 deletions.
diff --git a/examples/react/scroll-padding/.gitignore b/examples/react/scroll-padding/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/scroll-padding/README.md b/examples/react/scroll-padding/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/react/scroll-padding/index.html b/examples/react/scroll-padding/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/scroll-padding/package.json b/examples/react/scroll-padding/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "tanstack-react-virtual-example-scroll-padding",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview --port 3001",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@react-hookz/web": "^14.2.2",
+    "@tanstack/react-virtual": "3.0.0-beta.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^4.0.0",
+    "@vitejs/plugin-react": "^1.2.0",
+    "vite": "^2.8.6"
+  }
+}
diff --git a/examples/react/scroll-padding/src/index.css b/examples/react/scroll-padding/src/index.css
@@ -0,0 +1,48 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.List table {
+  background-color: #fff;
+  border: 1px solid #e6e4dc;
+  max-width: 100%;
+  border-collapse: collapse;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  position: relative;
+}
+
+.List thead {
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.List thead tr {
+  height: 70px;
+}
+
+.List tr {
+  display: flex;
+  flex-direction: row;
+}
+
+.List td,
+.List th {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 180px;
+}
+
+.ListItemEven {
+  background-color: #e6e4dc;
+}
diff --git a/examples/react/scroll-padding/src/main.tsx b/examples/react/scroll-padding/src/main.tsx
@@ -0,0 +1,106 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import './index.css'
+
+import { useMeasure } from '@react-hookz/web/esm'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+function App() {
+  const parentRef = React.useRef<HTMLDivElement>()
+  const [theadSize, theadRef] = useMeasure<HTMLTableSectionElement>()
+
+  const rowVirtualizer = useVirtualizer({
+    count: 10000,
+    getScrollElement: () => parentRef.current,
+    estimateSize: React.useCallback(() => 35, []),
+    overscan: 5,
+    paddingStart: theadSize?.height ?? 0,
+    scrollPaddingStart: theadSize?.height ?? 0,
+  })
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <button
+          onClick={() => {
+            rowVirtualizer.scrollToIndex(40)
+          }}
+          className="border border-black"
+        >
+          Scroll to index 40
+        </button>
+        <button
+          onClick={() => {
+            rowVirtualizer.scrollToIndex(20)
+          }}
+          className="border border-black"
+        >
+          Then scroll to index 20
+        </button>
+      </div>
+
+      <br />
+      <br />
+
+      <div
+        ref={parentRef}
+        className="List"
+        style={{
+          height: `200px`,
+          width: `400px`,
+          overflow: 'auto',
+        }}
+      >
+        <table
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: '100%',
+          }}
+        >
+          <thead ref={theadRef}>
+            <tr>
+              <th>Index</th>
+              <th>Key</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
+              <tr
+                key={virtualRow.index}
+                className={
+                  virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'
+                }
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`,
+                }}
+              >
+                <td>#{virtualRow.index}</td>
+                <td>{virtualRow.key}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {process.env.NODE_ENV === 'development' ? (
+        <p>
+          <strong>Notice:</strong> You are currently running React in
+          development mode. Rendering performance will be slightly degraded
+          until this application is build for production.
+        </p>
+      ) : null}
+    </>
+  )
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)
diff --git a/examples/react/scroll-padding/tsconfig.dev.json b/examples/react/scroll-padding/tsconfig.dev.json
@@ -0,0 +1,12 @@
+{
+  "composite": true,
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./build/types"
+  },
+  "files": ["src/main.tsx"],
+  "include": [
+    "src"
+    // "__tests__/**/*.test.*"
+  ]
+}
diff --git a/examples/react/scroll-padding/vite.config.js b/examples/react/scroll-padding/vite.config.js
@@ -0,0 +1,18 @@
+import * as path from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import rollupReplace from '@rollup/plugin-replace'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    rollupReplace({
+      preventAssignment: true,
+      values: {
+        __DEV__: JSON.stringify(true),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+      },
+    }),
+    react(),
+  ],
+})