Add menu virtualization.

novykh · novykh · commit c4fdbd02fb0c · 2022-12-07T02:42:52.000+02:00
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "@prismicio/client": "5.1.1",
     "@styled-system/css": "^5.1.5",
     "@tanstack/react-table": "^8.5.11",
-    "@tanstack/react-virtual": "^3.0.0-beta.23",
+    "@tanstack/react-virtual": "3.0.0-beta.29",
     "axios": "^0.27.2",
     "polished": "^4.2.2",
     "ramda": "^0.28.0",
diff --git a/src/components/drops/menu/dropdown.js b/src/components/drops/menu/dropdown.js
@@ -1,5 +1,6 @@
-import React, { useCallback, useMemo, useState } from "react"
+import React, { useCallback, useMemo, useState, useRef } from "react"
 import styled from "styled-components"
+import { useVirtualizer } from "@tanstack/react-virtual"
 import Flex from "src/components/templates/flex"
 import Search from "src/components/search"
 import { Box } from "src/index"
@@ -20,9 +21,11 @@ const Dropdown = ({
   value,
   hasSearch,
   searchMargin = [4],
+  gap = 0,
   ...rest
 }) => {
   const [searchParams, setSearchParams] = useState("")
+
   const filteredItems = useMemo(() => {
     if (!searchParams) return items
     const searchLowerCase = searchParams.toLowerCase()
@@ -32,12 +35,26 @@ const Dropdown = ({
       return false
     })
   }, [items, searchParams])
+
   const handleSearch = useCallback(
     event => {
       setSearchParams(event.target.value)
     },
     [setSearchParams]
   )
+
+  const ref = useRef()
+  const measuresRef = useRef({})
+
+  const rowVirtualizer = useVirtualizer({
+    count: filteredItems.length,
+    getScrollElement: () => ref.current,
+    scrollOffsetFn: event => (event ? event.target.scrollTop - ref.current.offsetTop : 0),
+    overscan: 3,
+    enableSmoothScroll: false,
+    estimateSize: () => 30,
+  })
+
   return (
     <Container
       as="ul"
@@ -61,7 +78,47 @@ const Dropdown = ({
           />
         </Box>
       )}
-      {filteredItems.map(item => renderItem({ item, itemProps, value, onItemClick }))}
+      <div
+        ref={ref}
+        style={{
+          minHeight: "100%",
+          width: "100%",
+          overflow: "auto",
+        }}
+      >
+        <div
+          style={{
+            minHeight: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map(virtualRow => (
+            <div
+              key={virtualRow.key}
+              data-index={virtualRow.index}
+              ref={rowVirtualizer.measureElement}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`,
+                padding: gap * 2,
+                overflow: "hidden",
+              }}
+            >
+              {renderItem({
+                item: filteredItems[virtualRow.index],
+                index: virtualRow.index,
+                itemProps,
+                value,
+                onItemClick,
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
     </Container>
   )
 }
diff --git a/src/components/drops/menu/dropdownItem.js b/src/components/drops/menu/dropdownItem.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useLayoutEffect, useRef } from "react"
 import styled from "styled-components"
 import { getColor } from "src/theme"
 import Flex from "src/components/templates/flex"
@@ -23,6 +23,9 @@ const DropdownItem = ({
   item: { value, label, icon, reverse, disabled, onClick, ...restItem },
   value: selectedValue,
   onItemClick,
+  index,
+  measureElement,
+  style,
   ...rest
 }) => {
   const selected = selectedValue === value
@@ -34,11 +37,14 @@ const DropdownItem = ({
 
   return (
     <ItemContainer
+      ref={measureElement}
+      data-index={index}
       aria-selected={selected}
       disabled={disabled || selected}
       onClick={onSelect}
       {...restItem}
       {...rest}
+      style={style}
     >
       {reverse && <Text>{label}</Text>}
       {icon}
diff --git a/src/components/drops/menu/index.js b/src/components/drops/menu/index.js
@@ -10,10 +10,7 @@ import DropdownItem from "./dropdownItem"
 
 const defaultRenderDropdown = props => <Dropdown {...props} />
 
-const defaultRenderItem = props => {
-  const key = props.item.value || props.item.label
-  return <DropdownItem key={key} {...props} />
-}
+const defaultRenderItem = props => <DropdownItem {...props} />
 
 const Menu = forwardRef(
   (
diff --git a/src/components/tableV2/core/rows.js b/src/components/tableV2/core/rows.js
@@ -28,7 +28,7 @@ const Rows = ({
     count: rows.length,
     getScrollElement: () => scrollParentRef.current,
     estimateSize: () => CELL_HEIGHT,
-    overscan: overscan || 30,
+    overscan: overscan || 5,
   })
 
   const virtualRows = virtualizer.getVirtualItems()
diff --git a/src/components/tabs/styled.js b/src/components/tabs/styled.js
@@ -15,7 +15,7 @@ export const StyledTabs = styled(Flex).attrs(props => ({
   justifyContent: "start",
   alignItems: "center",
   padding: [0, 0.5],
-  flex: true,
+  flex: false,
   ...props,
 }))`
   border-bottom: 1px solid
diff --git a/yarn.lock b/yarn.lock
@@ -3203,22 +3203,22 @@
   dependencies:
     "@tanstack/table-core" "8.5.11"
 
-"@tanstack/react-virtual@^3.0.0-beta.23":
-  version "3.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.23.tgz#f3d3e049d6b49e2b91c46ec3d35f48d9fdf7426a"
-  integrity sha512-FurqZJD7oSXLtL5NP0YQKXNEY+2qczXjzxmxkD51ZO8ykyr2z62IRNfvpOyly2CPLg+M346mA/Ul2hlx4R3KPw==
+"@tanstack/react-virtual@3.0.0-beta.29":
+  version "3.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.29.tgz#fce26a2f9d081dada2e33d6e4b23509feb1ba679"
+  integrity sha512-Vwjh/h9J4W6qtlQ7nPmhT6bXueS4mDMXJxJM2lRU6KPGwlWezKp/3NI4ZLAgDqZIxDOkeXq9iERsNxyB7MKHNg==
   dependencies:
-    "@tanstack/virtual-core" "3.0.0-beta.23"
+    "@tanstack/virtual-core" "3.0.0-beta.29"
 
 "@tanstack/table-core@8.5.11":
   version "8.5.11"
   resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.5.11.tgz#a23178a097df4b0b64bdfa6f79e6d8933e97c7f7"
   integrity sha512-ZN61ockLaIAiiPbZfMKT2S03nbWx28OHg/nAiDnNfmN4QmAMcdwVajPn2QQwnNVGAr4jS4nbhbYzCcjq8livXQ==
 
-"@tanstack/virtual-core@3.0.0-beta.23":
-  version "3.0.0-beta.23"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.23.tgz#2e586256bdb239e35c8d1ca4e8d66c1c55151419"
-  integrity sha512-xQfJgz4mdaxifPjOqUBYAar60UAQTrED2SpS0VI5AZvxYI4NDTxx5cFrjaP4baKY3UnVc8IsGFbqr8Q/LZNMag==
+"@tanstack/virtual-core@3.0.0-beta.29":
+  version "3.0.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.29.tgz#bfb9399d6570f720a5e4967c7e57f295183a8981"
+  integrity sha512-fMAX6g2apCdNIWCB5lHo9qxFCn5Qig9rSrplofWfONfuIrnzLGH7H0Y7gUg37KC55BfPhwprjuZXg4B5bMI2fg==
 
 "@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0":
   version "8.16.0"

Original file line number	Diff line number	Diff line change
`@@ -10,10 +10,7 @@ import DropdownItem from "./dropdownItem"`
`10`	`10`
`11`	`11`	`const defaultRenderDropdown = props => <Dropdown {...props} />`
`12`	`12`
`13`		`-const defaultRenderItem = props => {`
`14`		`- const key = props.item.value \|\| props.item.label`
`15`		`- return <DropdownItem key={key} {...props} />`
`16`		`-}`
	`13`	`+const defaultRenderItem = props => <DropdownItem {...props} />`
`17`	`14`
`18`	`15`	`const Menu = forwardRef(`
`19`	`16`	`(`