diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index d341136c02..c7b37e539a 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -3028,18 +3028,21 @@ font-weight: 300px; } -.module-left-pane__list { - flex-grow: 1; - flex-shrink: 1; -} - .module-left-pane__archive-helper-text { + flex-grow: 0; + flex-shrink: 0; + padding: 1em; font-size: 12px; color: $color-gray-60; background-color: $color-gray-05; } +.module-left-pane__list { + flex-grow: 1; + flex-shrink: 1; +} + .module-left-pane__virtual-list { outline: none; } diff --git a/ts/components/LeftPane.tsx b/ts/components/LeftPane.tsx index e476c76dbc..b3c0ab1d3f 100644 --- a/ts/components/LeftPane.tsx +++ b/ts/components/LeftPane.tsx @@ -43,26 +43,6 @@ type RowRendererParamsType = { }; export class LeftPane extends React.Component { - public listRef: React.RefObject = React.createRef(); - - public scrollToTop() { - if (this.listRef && this.listRef.current) { - const { current } = this.listRef; - current.scrollToRow(0); - } - } - - public componentDidUpdate(prevProps: Props) { - const { showArchived, searchResults } = this.props; - - const isNotShowingSearchResults = !searchResults; - const hasArchiveViewChanged = showArchived !== prevProps.showArchived; - - if (isNotShowingSearchResults && hasArchiveViewChanged) { - this.scrollToTop(); - } - } - public renderRow = ({ index, key, @@ -135,7 +115,7 @@ export class LeftPane extends React.Component { ); } - public renderList(): JSX.Element { + public renderList(): JSX.Element | Array { const { archivedConversations, i18n, @@ -168,21 +148,27 @@ export class LeftPane extends React.Component { ? archivedConversations.length : conversations.length + (archivedConversations.length ? 1 : 0); + const archived = showArchived ? ( +
+ {i18n('archiveHelperText')} +
+ ) : null; + + // We ensure that the listKey differs between inbox and archive views, which ensures + // that AutoSizer properly detects the new size of its slot in the flexbox. The + // archive explainer text at the top of the archive view causes problems otherwise. + // It also ensures that we scroll to the top when switching views. + const listKey = showArchived ? 1 : 0; + // 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. - return ( -
- {showArchived ? ( -
- {i18n('archiveHelperText')} -
- ) : null} + const list = ( +
{({ height, width }) => ( {
); + + return [archived, list]; } public renderArchivedHeader(): JSX.Element { diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 4720e9a601..7dfd7bac63 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -5440,24 +5440,6 @@ "updated": "2019-03-09T00:08:44.242Z", "reasonDetail": "Used only to set focus" }, - { - "rule": "React-createRef", - "path": "ts/components/LeftPane.js", - "line": " this.listRef = react_1.default.createRef();", - "lineNumber": 13, - "reasonCategory": "usageTrusted", - "updated": "2019-03-12T23:33:50.889Z", - "reasonDetail": "Used only to scroll to top on archive/inbox switch" - }, - { - "rule": "React-createRef", - "path": "ts/components/LeftPane.tsx", - "line": " public listRef: React.RefObject = React.createRef();", - "lineNumber": 46, - "reasonCategory": "usageTrusted", - "updated": "2019-03-12T23:33:50.889Z", - "reasonDetail": "Used only to scroll to top on archive/inbox switch" - }, { "rule": "React-createRef", "path": "ts/components/Lightbox.js",