JournalEntries: use a virtualized list for the entries.

master
Tom Hacohen 5 years ago
parent 2397cfbe6d
commit e0e805d009

@ -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';

@ -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';

@ -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 (<div>Loading</div>);
}
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 = (<IconError style={{ color: 'red' }} />);
return (
<ListItem
key={idx}
key={key}
style={style}
leftIcon={icon}
primaryText="Failed parsing item"
secondaryText="Unknown"
@ -101,7 +106,8 @@ class JournalEntries extends React.PureComponent {
return (
<ListItem
key={idx}
key={key}
style={style}
leftIcon={icon}
primaryText={name}
secondaryText={uid}
@ -112,7 +118,7 @@ class JournalEntries extends React.PureComponent {
}}
/>
);
}).reverse();
};
return (
<div>
@ -139,8 +145,18 @@ class JournalEntries extends React.PureComponent {
</Button>
</DialogActions>
</Dialog>
<List>
{entries}
<List style={{ height: 'calc(100vh - 300px)' }}>
<AutoSizer>
{({ height, width }) => (
<VirtualizedList
width={width}
height={height}
rowCount={this.props.entries.size}
rowHeight={56}
rowRenderer={rowRenderer}
/>
)}
</AutoSizer>
</List>
</div>
);

Loading…
Cancel
Save