aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
authorAnton Tananaev <anton.tananaev@gmail.com>2021-06-28 22:46:39 -0700
committerAnton Tananaev <anton.tananaev@gmail.com>2021-06-28 22:46:39 -0700
commit5a5bfd6c42539f72d03ec0b1670636ce9fb4b590 (patch)
tree3b240128fb42880420d922c29ba295a90e71a2f3 /modern/src
parent271740034791dc7137325d5b5352217c3bc987f3 (diff)
downloadtrackermap-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.tar.gz
trackermap-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.tar.bz2
trackermap-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.zip
Virtualize device list
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/DevicesList.js70
-rw-r--r--modern/src/MainPage.js3
2 files changed, 49 insertions, 24 deletions
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 976fd84a..f66d717d 100644
--- a/modern/src/DevicesList.js
+++ b/modern/src/DevicesList.js
@@ -10,6 +10,8 @@ import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import MoreVertIcon from '@material-ui/icons/MoreVert';
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
import { devicesActions } from './store';
import EditCollectionView from './EditCollectionView';
@@ -18,7 +20,6 @@ import { useEffectAsync } from './reactHelper';
const useStyles = makeStyles(() => ({
list: {
maxHeight: '100%',
- overflow: 'auto',
},
icon: {
width: '25px',
@@ -27,6 +28,35 @@ const useStyles = makeStyles(() => ({
},
}));
+const DeviceRow = ({ data, index, style }) => {
+ const classes = useStyles();
+ const dispatch = useDispatch();
+
+ const { items, onMenuClick } = data;
+ const item = items[index];
+
+ return (
+ <div style={style}>
+ <Fragment key={index}>
+ <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
+ <ListItemAvatar>
+ <Avatar>
+ <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
+ </Avatar>
+ </ListItemAvatar>
+ <ListItemText primary={item.name} secondary={item.uniqueId} />
+ <ListItemSecondaryAction>
+ <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
+ <MoreVertIcon />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ {index < items.length - 1 ? <Divider /> : null}
+ </Fragment>
+ </div>
+ );
+};
+
const DeviceView = ({ updateTimestamp, onMenuClick }) => {
const classes = useStyles();
const dispatch = useDispatch();
@@ -41,33 +71,27 @@ const DeviceView = ({ updateTimestamp, onMenuClick }) => {
}, [updateTimestamp]);
return (
- <List className={classes.list}>
- {items.map((item, index, list) => (
- <Fragment key={item.id}>
- <ListItem button key={item.id} onClick={() => dispatch(devicesActions.select(item))}>
- <ListItemAvatar>
- <Avatar>
- <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`} alt="" />
- </Avatar>
- </ListItemAvatar>
- <ListItemText primary={item.name} secondary={item.uniqueId} />
- <ListItemSecondaryAction>
- <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
- <MoreVertIcon />
- </IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- {index < list.length - 1 ? <Divider /> : null}
- </Fragment>
- ))}
- </List>
+ <AutoSizer className={classes.list}>
+ {({ height, width }) => (
+ <List disablePadding>
+ <FixedSizeList
+ width={width}
+ height={height}
+ itemCount={items.length}
+ itemData={{ items, onMenuClick }}
+ itemSize={72 + 1} >
+ {DeviceRow}
+ </FixedSizeList>
+ </List>
+ )}
+ </AutoSizer>
);
-}
+};
const DevicesList = () => {
return (
<EditCollectionView content={DeviceView} editPath="/device" endpoint="devices" />
);
-}
+};
export default DevicesList;
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index b6b5044c..8d0b18d2 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -33,7 +33,8 @@ const useStyles = makeStyles(theme => ({
},
[theme.breakpoints.down('xs')]: {
height: 250,
- }
+ },
+ overflow: 'hidden',
},
mapContainer: {
flexGrow: 1,