diff --git a/src/App.tsx b/src/App.tsx index dc76314..94f358a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,8 @@ import NavigationBack from '@material-ui/icons/ArrowBack'; import NavigationRefresh from '@material-ui/icons/Refresh'; import ErrorsIcon from '@material-ui/icons/Error'; +import 'react-virtualized/styles.css'; // only needs to be imported once + import './App.css'; import ConfirmationDialog from './widgets/ConfirmationDialog'; diff --git a/src/components/AddressBook.tsx b/src/components/AddressBook.tsx index dfa46a8..a5eda8f 100644 --- a/src/components/AddressBook.tsx +++ b/src/components/AddressBook.tsx @@ -7,7 +7,6 @@ import { createSelector } from 'reselect'; import * as colors from '@material-ui/core/colors'; import { AutoSizer, List as VirtualizedList } from 'react-virtualized'; -import 'react-virtualized/styles.css'; // only needs to be imported once import { Avatar } from '../widgets/Avatar'; import { List, ListItem } from '../widgets/List'; diff --git a/src/components/JournalEntries.tsx b/src/components/JournalEntries.tsx index 4bc1860..4b959ab 100644 --- a/src/components/JournalEntries.tsx +++ b/src/components/JournalEntries.tsx @@ -3,6 +3,8 @@ import * as Immutable from 'immutable'; +import { AutoSizer, List as VirtualizedList } from 'react-virtualized'; + import * as React from 'react'; import { List, ListItem } from '../widgets/List'; import Dialog from '@material-ui/core/Dialog'; @@ -44,7 +46,9 @@ class JournalEntries extends React.PureComponent { return (
Loading
); } - const entries = this.props.entries.map((syncEntry, idx) => { + const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => { + const { key, index, style } = params; + const syncEntry = this.props.entries.get(this.props.entries.size - index - 1)!; let comp; try { comp = parseString(syncEntry.content); @@ -52,7 +56,8 @@ class JournalEntries extends React.PureComponent { const icon = (); return ( ); - }).reverse(); + }; return (
@@ -139,8 +145,18 @@ class JournalEntries extends React.PureComponent { - - {entries} + + + {({ height, width }) => ( + + )} +
);