feat: add sticky example

docs/src/manifests/manifest.json

@@ -58,6 +58,12 @@
           "title": "Smooth Scroll",
           "path": "/examples/smooth-scroll",
           "editUrl": "/examples/smooth-scroll.md"
+        },
+
+        {
+          "title": "Sticky",
+          "path": "/examples/sticky",
+          "editUrl": "/examples/sticky.md"
         }
       ]
     }

docs/src/pages/examples/sticky.md

@@ -0,0 +1,23 @@
+---
+id: sticky
+title: Sticky
+toc: false
+---
+
+- [Open in CodeSandbox](https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/sticky)
+- [View Source](https://github.com/tannerlinsley/react-virtual/tree/master/examples/sticky)
+
+<iframe
+  src="https://codesandbox.io/embed/github/tannerlinsley/react-virtual/tree/master/examples/sticky?autoresize=1&fontsize=14&theme=dark"
+  title="tannerlinsley/react-virtual: sticky"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  style={{
+    width: '100%',
+    height: '80vh',
+    border: '0',
+    borderRadius: 8,
+    overflow: 'hidden',
+    position: 'static',
+    zIndex: 0,
+  }}
+></iframe>

examples/sticky/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

examples/sticky/index.html

@@ -0,0 +1,12 @@
+<!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>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

examples/sticky/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "sticky",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "faker": "^5.5.3",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-virtual": "2.8.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^3.0.0",
+    "@vitejs/plugin-react": "^1.0.8",
+    "vite": "^2.6.14"
+  }
+}

examples/sticky/src/App.css

@@ -0,0 +1,10 @@
+.List {
+  border: 1px solid #e6e4dc;
+  max-width: 100%;
+}
+
+.ListItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

examples/sticky/src/App.jsx

@@ -0,0 +1,111 @@
+import './App.css'
+import * as React from 'react'
+import faker from 'faker'
+import { findIndex, groupBy } from 'lodash'
+import { useVirtual, defaultRangeExtractor } from 'react-virtual'
+
+const groupedNames = groupBy(
+  Array.from({ length: 1000 })
+    .map(() => faker.name.firstName())
+    .sort(),
+  name => name[0]
+)
+const groups = Object.keys(groupedNames)
+const rows = groups.reduce((acc, k) => [...acc, k, ...groupedNames[k]], [])
+
+const App = () => {
+  const parentRef = React.useRef()
+
+  const activeStickyIndexRef = React.useRef(0)
+
+  const stickyIndexes = React.useMemo(
+    () => groups.map(gn => findIndex(rows, n => n === gn)),
+    []
+  )
+
+  const isSticky = index => stickyIndexes.includes(index)
+
+  const isActiveSticky = index => activeStickyIndexRef.current === index
+
+  const rowVirtualizer = useVirtual({
+    estimateSize: React.useCallback(() => 50, []),
+    size: rows.length,
+    parentRef,
+    rangeExtractor: React.useCallback(
+      range => {
+        activeStickyIndexRef.current = [...stickyIndexes]
+          .reverse()
+          .find(index => range.start >= index)
+
+        const next = new Set([
+          activeStickyIndexRef.current,
+          ...defaultRangeExtractor(range),
+        ])
+
+        return [...next].sort((a, b) => a - b)
+      },
+      [stickyIndexes]
+    ),
+  })
+
+  return (
+    <div>
+      <div
+        ref={parentRef}
+        className="List"
+        style={{
+          height: `300px`,
+          width: `400px`,
+          overflow: 'auto',
+        }}
+      >
+        <div
+          style={{
+            height: `${rowVirtualizer.totalSize}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {rowVirtualizer.virtualItems.map(virtualRow => (
+            <div
+              key={virtualRow.index}
+              className={'ListItem'}
+              style={{
+                ...(isSticky(virtualRow.index)
+                  ? {
+                      background: '#fff',
+                      borderBottom: '1px solid #ddd',
+                      zIndex: 1,
+                    }
+                  : {}),
+                ...(isActiveSticky(virtualRow.index)
+                  ? {
+                      position: 'sticky',
+                    }
+                  : {
+                      position: 'absolute',
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }),
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualRow.size}px`,
+              }}
+            >
+              {rows[virtualRow.index]}
+            </div>
+          ))}
+        </div>
+      </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}
+    </div>
+  )
+}
+
+export default App

examples/sticky/src/index.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

examples/sticky/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

examples/sticky/vite.config.js

@@ -0,0 +1,25 @@
+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(),
+  ],
+  resolve: process.env.USE_SOURCE
+    ? {
+        alias: {
+          'react-virtual': path.resolve(__dirname, '../../src/index.js'),
+        },
+      }
+    : {},
+})