diff --git a/package.json b/package.json index 81e557e186..b2a1699482 100644 --- a/package.json +++ b/package.json @@ -226,6 +226,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-router": "^5.2.0", + "react-virtualized-auto-sizer": "^1.0.5", "readable-stream": "^3.6.0", "request": "^2.88.2", "request-promise-native": "^1.0.9", @@ -285,6 +286,7 @@ "@types/react-router-dom": "^5.1.6", "@types/react-select": "3.1.2", "@types/react-table": "^7.7.0", + "@types/react-virtualized-auto-sizer": "^1.0.0", "@types/react-window": "^1.8.2", "@types/readable-stream": "^2.3.9", "@types/request": "^2.48.5", @@ -311,7 +313,6 @@ "circular-dependency-plugin": "^5.2.2", "color": "^3.1.2", "concurrently": "^5.2.0", - "css-element-queries": "^1.2.3", "css-loader": "^5.2.6", "deepdash": "^5.3.5", "dompurify": "^2.0.11", diff --git a/src/renderer/components/virtual-list/virtual-list.tsx b/src/renderer/components/virtual-list/virtual-list.tsx index 86f0c7e44d..c5a32edc43 100644 --- a/src/renderer/components/virtual-list/virtual-list.tsx +++ b/src/renderer/components/virtual-list/virtual-list.tsx @@ -29,10 +29,9 @@ import { Align, ListChildComponentProps, ListOnScrollProps, VariableSizeList } f import { cssNames, noop } from "../../utils"; import type { TableRowProps } from "../table/table-row"; import type { ItemObject } from "../../item.store"; -import throttle from "lodash/throttle"; import debounce from "lodash/debounce"; import isEqual from "lodash/isEqual"; -import ResizeSensor from "css-element-queries/src/ResizeSensor"; +import AutoSizer from "react-virtualized-auto-sizer"; interface Props { items: T[]; @@ -48,7 +47,6 @@ interface Props { } interface State { - height: number; overscanCount: number; } @@ -63,17 +61,13 @@ export class VirtualList extends Component { static defaultProps = defaultProps as object; private listRef = React.createRef(); - private parentRef = React.createRef(); public state: State = { overscanCount: this.props.initialOffset, - height: 0, }; componentDidMount() { - this.setListHeight(); this.scrollToSelectedItem(); - new ResizeSensor(this.parentRef.current as any as Element, this.setListHeight); this.setState({ overscanCount: this.props.readyOffset }); } @@ -85,18 +79,6 @@ export class VirtualList extends Component { } } - setListHeight = throttle(() => { - const { parentRef, state: { height } } = this; - - if (!parentRef.current) return; - const parentHeight = parentRef.current.clientHeight; - - if (parentHeight === height) return; - this.setState({ - height: parentHeight, - }); - }, 250); - getItemSize = (index: number) => this.props.rowHeights[index]; scrollToSelectedItem = debounce(() => { @@ -114,28 +96,32 @@ export class VirtualList extends Component { render() { const { width, className, items, getRow, onScroll, outerRef } = this.props; - const { height, overscanCount } = this.state; + const { overscanCount } = this.state; const rowData: RowData = { items, getRow }; return ( -
- - {Row} - +
+ + {({ height }) => ( + + {Row} + + )} +
); } diff --git a/yarn.lock b/yarn.lock index 37eab9dab8..100f25bacf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1666,6 +1666,13 @@ dependencies: "@types/react" "*" +"@types/react-virtualized-auto-sizer@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272" + integrity sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg== + dependencies: + "@types/react" "*" + "@types/react-window@^1.8.2": version "1.8.2" resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe" @@ -4358,11 +4365,6 @@ css-box-model@^1.2.0: dependencies: tiny-invariant "^1.0.6" -css-element-queries@^1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/css-element-queries/-/css-element-queries-1.2.3.tgz#e14940b1fcd4bf0da60ea4145d05742d7172e516" - integrity sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q== - css-loader@^5.2.6: version "5.2.6" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1" @@ -11997,6 +11999,11 @@ react-transition-group@^4.3.0, react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" +react-virtualized-auto-sizer@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.5.tgz#9eeeb8302022de56fbd7a860b08513120ce36509" + integrity sha512-kivjYVWX15TX2IUrm8F1jaCEX8EXrpy3DD+u41WGqJ1ZqbljWpiwscV+VxOM1l7sSIM1jwi2LADjhhAJkJ9dxA== + react-window@^1.8.5: version "1.8.5" resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"