aboutsummaryrefslogtreecommitdiff
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
parent271740034791dc7137325d5b5352217c3bc987f3 (diff)
downloadetbsa-traccar-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.tar.gz
etbsa-traccar-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.tar.bz2
etbsa-traccar-web-5a5bfd6c42539f72d03ec0b1670636ce9fb4b590.zip
Virtualize device list
-rw-r--r--modern/package.json2
-rw-r--r--modern/src/DevicesList.js70
-rw-r--r--modern/src/MainPage.js3
3 files changed, 51 insertions, 24 deletions
diff --git a/modern/package.json b/modern/package.json
index b052240..29c0e47 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -22,6 +22,8 @@
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
+ "react-virtualized-auto-sizer": "^1.0.5",
+ "react-window": "^1.8.6",
"recharts": "^2.0.9",
"redux": "^4.0.5",
"typeface-roboto": "0.0.75",
diff --git a/modern/src/DevicesList.js b/modern/src/DevicesList.js
index 976fd84..f66d717 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 b6b5044..8d0b18d 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,