type changes

TanStack · May 29, 2022 · a5ebd14 · a5ebd14
1 parent 6c34bf4
commit a5ebd14
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/examples/dynamic/index.html b/examples/dynamic/index.html
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/examples/dynamic/src/main.jsx → examples/dynamic/src/main.tsx b/examples/dynamic/src/main.jsx → examples/dynamic/src/main.tsx
@@ -26,11 +26,11 @@ function App() {
       <br />
 
       <h3>Rows</h3>
-      <RowVirtualizerDynamic rows={rows} columns={columns} />
+      <RowVirtualizerDynamic rows={rows} />
       <br />
       <br />
       <h3>Columns</h3>
-      <ColumnVirtualizerDynamic rows={rows} columns={columns} />
+      <ColumnVirtualizerDynamic columns={columns} />
       <br />
       <br />
       <h3>Grid</h3>
@@ -40,7 +40,7 @@ function App() {
 }
 
 function RowVirtualizerDynamic({ rows }) {
-  const parentRef = React.useRef()
+  const parentRef = React.useRef<HTMLDivElement>(null)
 
   const rowVirtualizer = useVirtual({
     size: rows.length,
@@ -243,5 +243,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 )
diff --git a/examples/dynamic/yarn.lock b/examples/dynamic/yarn.lock
@@ -245,6 +245,13 @@
     "@babel/plugin-syntax-jsx" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/runtime@^7.16.7":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.0.tgz#b8d142fc0f7664fb3d9b5833fd40dcbab89276c0"
+  integrity sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
@@ -316,6 +323,14 @@
     estree-walker "^2.0.1"
     picomatch "^2.2.2"
 
+"@tanstack/[email protected]":
+  version "3.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-alpha.0.tgz#2ca5a75fa609eca2b2ba622024d3aa3ee097bc30"
+  integrity sha512-WpHU/dt34NwZZ8qtiE05TF+nX/b1W6qrWZarO+s8jJFpPVicrTbJKp5Bjt4eSJuk7aYw272oEfsH3ABBRgj+3A==
+  dependencies:
+    "@babel/runtime" "^7.16.7"
+    "@reach/observe-rect" "^1.1.0"
+
 "@types/[email protected]":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -659,13 +674,6 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-[email protected]:
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.3.tgz#83092c0af7be5c61c55a07ae5a18112be561276a"
-  integrity sha512-ZcQ+4oTQnJw79gmIzoEx6gfobADLj+9gdIiG4TTK5mUI6BAkEh83lmNU9WZPzi3FI77tXOYlWKC3fnHRH6kR5w==
-  dependencies:
-    "@reach/observe-rect" "^1.1.0"
-
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -674,6 +682,11 @@ react@^17.0.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"

diff --git a/packages/react-virtual/src/index.tsx b/packages/react-virtual/src/index.tsx
@@ -52,13 +52,17 @@ interface Item {
   size: number
 }
 
-export interface VirtualItem extends Item {
-  measureRef: (el: HTMLElement | null) => void
+export interface VirtualItem<TItemElement> extends Item {
+  measureRef: (el: TItemElement | null) => void
 }
 
-export interface Options<T> {
+export interface Options<
+  TParentRef,
+  TItemElement = HTMLElement,
+  TOnScrollElement = TParentRef
+> {
   size: number
-  parentRef: React.RefObject<T>
+  parentRef: React.RefObject<TParentRef>
   estimateSize?: (index: number) => number
   overscan?: number
   horizontal?: boolean
@@ -68,16 +72,20 @@ export interface Options<T> {
   ) => void
   paddingStart?: number
   paddingEnd?: number
-  useObserver?: (ref: React.RefObject<T>, initialRect?: Rect) => Rect
+  useObserver?: (ref: React.RefObject<TParentRef>, initialRect?: Rect) => Rect
   initialRect?: Rect
   keyExtractor?: (index: number) => Key
-  onScrollElement?: React.RefObject<HTMLElement>
+  onScrollElement?: React.RefObject<TOnScrollElement>
   scrollOffsetFn?: (event?: Event) => number
   rangeExtractor?: (range: Range) => number[]
-  measureSize?: (el: HTMLElement, horizontal: boolean) => number
+  measureSize?: (el: TItemElement, horizontal: boolean) => number
 }
 
-export const useVirtual = <T extends HTMLElement>({
+export const useVirtual = <
+  TParentRef extends HTMLElement,
+  TItemElement extends HTMLElement = HTMLElement,
+  TOnScrollElement extends HTMLElement = TParentRef
+>({
   size = 0,
   estimateSize = defaultEstimateSize,
   overscan = 1,
@@ -93,7 +101,13 @@ export const useVirtual = <T extends HTMLElement>({
   keyExtractor = defaultKeyExtractor,
   measureSize = defaultMeasureSize,
   rangeExtractor = defaultRangeExtractor,
-}: Options<T>) => {
+}: Options<TParentRef, TItemElement>): {
+  virtualItems: VirtualItem<TItemElement>[]
+  totalSize: number
+  scrollToOffset: (offset: number, options?: ScrollToOffsetOptions) => void
+  scrollToIndex: (index: number, options?: ScrollToIndexOptions) => void
+  measure: (index: number) => void
+} => {
   const sizeKey = horizontal ? 'width' : 'height'
   const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop'
 
@@ -218,7 +232,7 @@ export const useVirtual = <T extends HTMLElement>({
   const measureSizeRef = React.useRef(measureSize)
   measureSizeRef.current = measureSize
 
-  const virtualItems: VirtualItem[] = React.useMemo(() => {
+  const virtualItems: VirtualItem<TItemElement>[] = React.useMemo(() => {
     const virtualItems = []
 
     for (let k = 0, len = indexes.length; k < len; k++) {
@@ -227,7 +241,7 @@ export const useVirtual = <T extends HTMLElement>({
 
       const item = {
         ...measurement,
-        measureRef: (el: HTMLElement | null) => {
+        measureRef: (el: TItemElement | null) => {
           if (el) {
             const measuredSize = measureSizeRef.current(el, horizontal)
 
@@ -240,7 +254,7 @@ export const useVirtual = <T extends HTMLElement>({
 
               pendingMeasuredCacheIndexesRef.current.push(i)
 
-              setMeasuredCache((old) => ({
+              setMeasuredCache(old => ({
                 ...old,
                 [item.key]: measuredSize,
               }))

diff --git a/scripts/publish.ts b/scripts/publish.ts
@@ -169,10 +169,7 @@ async function run() {
   if (!process.env.TAG) {
     if (recommendedReleaseLevel === 2) {
       console.log(
-        `Major versions releases must be tagged and released manually.
-Use the following NPM script to release all packages on a specific version:
-
-  CI=true TAG=v0.0.0 yarn cipublish`,
+        `Major versions releases must be tagged and released manually.`,
       )
       return
     }
@@ -441,7 +438,7 @@ Use the following NPM script to release all packages on a specific version:
     // Stringify the markdown to excape any quotes
     execSync(
       `gh release create v${version} ${
-        branchName ? '--prerelease' : ''
+        isLatestBranch ? '--prerelease' : ''
       } --notes '${changelogMd}'`,
     )
     console.log(`  Github release created.`)