mirror of
https://github.com/lensapp/lens.git
synced 2024-09-20 05:47:24 +03:00
Fix height resizing of VirtualList (#3072)
This commit is contained in:
parent
a88b9c675e
commit
247b00a5a3
@ -226,6 +226,7 @@
|
|||||||
"react": "^17.0.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^17.0.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-router": "^5.2.0",
|
"react-router": "^5.2.0",
|
||||||
|
"react-virtualized-auto-sizer": "^1.0.5",
|
||||||
"readable-stream": "^3.6.0",
|
"readable-stream": "^3.6.0",
|
||||||
"request": "^2.88.2",
|
"request": "^2.88.2",
|
||||||
"request-promise-native": "^1.0.9",
|
"request-promise-native": "^1.0.9",
|
||||||
@ -285,6 +286,7 @@
|
|||||||
"@types/react-router-dom": "^5.1.6",
|
"@types/react-router-dom": "^5.1.6",
|
||||||
"@types/react-select": "3.1.2",
|
"@types/react-select": "3.1.2",
|
||||||
"@types/react-table": "^7.7.0",
|
"@types/react-table": "^7.7.0",
|
||||||
|
"@types/react-virtualized-auto-sizer": "^1.0.0",
|
||||||
"@types/react-window": "^1.8.2",
|
"@types/react-window": "^1.8.2",
|
||||||
"@types/readable-stream": "^2.3.9",
|
"@types/readable-stream": "^2.3.9",
|
||||||
"@types/request": "^2.48.5",
|
"@types/request": "^2.48.5",
|
||||||
@ -311,7 +313,6 @@
|
|||||||
"circular-dependency-plugin": "^5.2.2",
|
"circular-dependency-plugin": "^5.2.2",
|
||||||
"color": "^3.1.2",
|
"color": "^3.1.2",
|
||||||
"concurrently": "^5.2.0",
|
"concurrently": "^5.2.0",
|
||||||
"css-element-queries": "^1.2.3",
|
|
||||||
"css-loader": "^5.2.6",
|
"css-loader": "^5.2.6",
|
||||||
"deepdash": "^5.3.5",
|
"deepdash": "^5.3.5",
|
||||||
"dompurify": "^2.0.11",
|
"dompurify": "^2.0.11",
|
||||||
|
@ -29,10 +29,9 @@ import { Align, ListChildComponentProps, ListOnScrollProps, VariableSizeList } f
|
|||||||
import { cssNames, noop } from "../../utils";
|
import { cssNames, noop } from "../../utils";
|
||||||
import type { TableRowProps } from "../table/table-row";
|
import type { TableRowProps } from "../table/table-row";
|
||||||
import type { ItemObject } from "../../item.store";
|
import type { ItemObject } from "../../item.store";
|
||||||
import throttle from "lodash/throttle";
|
|
||||||
import debounce from "lodash/debounce";
|
import debounce from "lodash/debounce";
|
||||||
import isEqual from "lodash/isEqual";
|
import isEqual from "lodash/isEqual";
|
||||||
import ResizeSensor from "css-element-queries/src/ResizeSensor";
|
import AutoSizer from "react-virtualized-auto-sizer";
|
||||||
|
|
||||||
interface Props<T extends ItemObject = any> {
|
interface Props<T extends ItemObject = any> {
|
||||||
items: T[];
|
items: T[];
|
||||||
@ -48,7 +47,6 @@ interface Props<T extends ItemObject = any> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface State {
|
interface State {
|
||||||
height: number;
|
|
||||||
overscanCount: number;
|
overscanCount: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -63,17 +61,13 @@ export class VirtualList extends Component<Props, State> {
|
|||||||
static defaultProps = defaultProps as object;
|
static defaultProps = defaultProps as object;
|
||||||
|
|
||||||
private listRef = React.createRef<VariableSizeList>();
|
private listRef = React.createRef<VariableSizeList>();
|
||||||
private parentRef = React.createRef<HTMLDivElement>();
|
|
||||||
|
|
||||||
public state: State = {
|
public state: State = {
|
||||||
overscanCount: this.props.initialOffset,
|
overscanCount: this.props.initialOffset,
|
||||||
height: 0,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.setListHeight();
|
|
||||||
this.scrollToSelectedItem();
|
this.scrollToSelectedItem();
|
||||||
new ResizeSensor(this.parentRef.current as any as Element, this.setListHeight);
|
|
||||||
this.setState({ overscanCount: this.props.readyOffset });
|
this.setState({ overscanCount: this.props.readyOffset });
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -85,18 +79,6 @@ export class VirtualList extends Component<Props, State> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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];
|
getItemSize = (index: number) => this.props.rowHeights[index];
|
||||||
|
|
||||||
scrollToSelectedItem = debounce(() => {
|
scrollToSelectedItem = debounce(() => {
|
||||||
@ -114,28 +96,32 @@ export class VirtualList extends Component<Props, State> {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { width, className, items, getRow, onScroll, outerRef } = this.props;
|
const { width, className, items, getRow, onScroll, outerRef } = this.props;
|
||||||
const { height, overscanCount } = this.state;
|
const { overscanCount } = this.state;
|
||||||
const rowData: RowData = {
|
const rowData: RowData = {
|
||||||
items,
|
items,
|
||||||
getRow
|
getRow
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cssNames("VirtualList", className)} ref={this.parentRef}>
|
<div className={cssNames("VirtualList", className)}>
|
||||||
<VariableSizeList
|
<AutoSizer disableWidth>
|
||||||
className="list"
|
{({ height }) => (
|
||||||
width={width}
|
<VariableSizeList
|
||||||
height={height}
|
className="list"
|
||||||
itemSize={this.getItemSize}
|
width={width}
|
||||||
itemCount={items.length}
|
height={height}
|
||||||
itemData={rowData}
|
itemSize={this.getItemSize}
|
||||||
overscanCount={overscanCount}
|
itemCount={items.length}
|
||||||
ref={this.listRef}
|
itemData={rowData}
|
||||||
outerRef={outerRef}
|
overscanCount={overscanCount}
|
||||||
onScroll={onScroll}
|
ref={this.listRef}
|
||||||
>
|
outerRef={outerRef}
|
||||||
{Row}
|
onScroll={onScroll}
|
||||||
</VariableSizeList>
|
>
|
||||||
|
{Row}
|
||||||
|
</VariableSizeList>
|
||||||
|
)}
|
||||||
|
</AutoSizer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
17
yarn.lock
17
yarn.lock
@ -1666,6 +1666,13 @@
|
|||||||
dependencies:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@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":
|
"@types/react-window@^1.8.2":
|
||||||
version "1.8.2"
|
version "1.8.2"
|
||||||
resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
|
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:
|
dependencies:
|
||||||
tiny-invariant "^1.0.6"
|
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:
|
css-loader@^5.2.6:
|
||||||
version "5.2.6"
|
version "5.2.6"
|
||||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
|
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"
|
loose-envify "^1.4.0"
|
||||||
prop-types "^15.6.2"
|
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:
|
react-window@^1.8.5:
|
||||||
version "1.8.5"
|
version "1.8.5"
|
||||||
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
|
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
|
||||||
|
Loading…
Reference in New Issue
Block a user