diff options
-rw-r--r-- | src/main/DeviceList.jsx | 16 | ||||
-rw-r--r-- | src/main/DeviceRow.jsx | 15 |
2 files changed, 4 insertions, 27 deletions
diff --git a/src/main/DeviceList.jsx b/src/main/DeviceList.jsx index 3bb5f5e1..ce5819b2 100644 --- a/src/main/DeviceList.jsx +++ b/src/main/DeviceList.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { useDispatch } from 'react-redux'; import makeStyles from '@mui/styles/makeStyles'; -import { VariableSizeList } from 'react-window'; +import { FixedSizeList } from 'react-window'; import AutoSizer from 'react-virtualized-auto-sizer'; import { devicesActions } from '../store'; import { useEffectAsync } from '../reactHelper'; @@ -29,8 +29,6 @@ const DeviceList = ({ devices }) => { const [, setTime] = useState(Date.now()); - const positionItems = useAttributePreference('positionItems', 'speed,address,totalDistance,course'); - useEffect(() => { const interval = setInterval(() => setTime(Date.now()), 60000); return () => { @@ -47,26 +45,20 @@ const DeviceList = ({ devices }) => { } }, []); - // RATIONALE: calculate row height to fit position attributes - const getItemSize = (index) => { - const item = devices[index]; - return 72 + (item.positionId && (positionItems.split(',').length * 20) || 0); - }; - return ( <AutoSizer className={classes.list}> {({ height, width }) => ( - <VariableSizeList + <FixedSizeList width={width} height={height} itemCount={devices.length} itemData={devices} - itemSize={getItemSize} + itemSize={72} overscanCount={10} innerRef={listInnerEl} > {DeviceRow} - </VariableSizeList> + </FixedSizeList> )} </AutoSizer> ); diff --git a/src/main/DeviceRow.jsx b/src/main/DeviceRow.jsx index d9357c9d..b7c2646e 100644 --- a/src/main/DeviceRow.jsx +++ b/src/main/DeviceRow.jsx @@ -115,21 +115,6 @@ const DeviceRow = ({ data, index, style }) => { return ( <> {deviceSecondary && item[deviceSecondary] && item[deviceSecondary]} - {/* RATIONALE: clients want more info in the list */} - {position && positionItems.split(',').filter((key) => position.hasOwnProperty(key) || position.attributes.hasOwnProperty(key)).map((key) => ( - <AttrItem - key={key} - attr={key} - name={positionAttributes[key]?.name || key} - content={( - <PositionValue - position={position} - property={position.hasOwnProperty(key) ? key : null} - attribute={position.hasOwnProperty(key) ? null : key} - /> - )} - /> - ))} </> ); }; |