diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index 25cdac886687..db3c97d6a6e8 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -1,5 +1,6 @@ +import Measure, { BoundingRect, MeasuredComponentProps } from 'react-measure'; import React from 'react'; -import { AutoSizer, List } from 'react-virtualized'; +import { List } from 'react-virtualized'; import { debounce, get } from 'lodash'; import { @@ -54,6 +55,12 @@ export class LeftPane extends React.Component { public containerRef = React.createRef(); public setFocusToFirstNeeded = false; public setFocusToLastNeeded = false; + public state = { + dimensions: { + height: 0, + width: 0, + }, + }; public renderRow = ({ index, @@ -157,6 +164,10 @@ export class LeftPane extends React.Component { } }; + public handleResize = ({ bounds }: { bounds: BoundingRect }) => { + this.setState({ dimensions: bounds }); + }; + public handleFocus = () => { const { selectedConversationId } = this.props; const { current: container } = this.containerRef; @@ -327,36 +338,34 @@ export class LeftPane extends React.Component { // It also ensures that we scroll to the top when switching views. const listKey = showArchived ? 1 : 0; + const { height, width } = this.state.dimensions; + // Note: conversations is not a known prop for List, but it is required to ensure that // it re-renders when our conversation data changes. Otherwise it would just render // on startup and scroll. const list = (
- - {({ height, width }) => ( - - )} - +
); @@ -390,15 +399,19 @@ export class LeftPane extends React.Component { } = this.props; return ( -
-
- {showArchived ? this.renderArchivedHeader() : renderMainHeader()} -
- {renderExpiredBuildDialog()} - {renderNetworkStatus()} - {renderUpdateDialog()} - {this.renderList()} -
+ + {({ measureRef }: MeasuredComponentProps) => ( +
+
+ {showArchived ? this.renderArchivedHeader() : renderMainHeader()} +
+ {renderExpiredBuildDialog()} + {renderNetworkStatus()} + {renderUpdateDialog()} + {this.renderList()} +
+ )} +
); } } diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 110684325e3e..9a5b0e44ea1a 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -11644,7 +11644,7 @@ "rule": "React-createRef", "path": "ts/components/LeftPane.js", "line": " this.listRef = react_1.default.createRef();", - "lineNumber": 15, + "lineNumber": 16, "reasonCategory": "usageTrusted", "updated": "2019-11-05T01:14:21.081Z", "reasonDetail": "Used for focus management" @@ -11824,4 +11824,4 @@ "reasonCategory": "falseMatch", "updated": "2020-02-07T19:52:28.522Z" } -] \ No newline at end of file +]