diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js index add061001..882cb699a 100644 --- a/frontend/app/components/Session_/Storage/Storage.js +++ b/frontend/app/components/Session_/Storage/Storage.js @@ -17,6 +17,7 @@ import BottomBlock from '../BottomBlock/index'; import DiffRow from './DiffRow'; import cn from 'classnames'; import stl from './storage.module.css'; +import { List, CellMeasurer, CellMeasurerCache, AutoSizer } from 'react-virtualized' // const STATE = 'STATE'; // const DIFF = 'DIFF'; @@ -47,7 +48,19 @@ function getActionsName(type) { ) //@withEnumToggle('activeTab', 'setActiveTab', DIFF) export default class Storage extends React.PureComponent { - lastBtnRef = React.createRef(); + constructor(props, ctx) { + super(props, ctx); + + this.lastBtnRef = React.createRef(); + this._list = React.createRef(); + this.cache = new CellMeasurerCache({ + fixedWidth: true, + keyMapper: index => this.props.listNow[index] + }); + this._listNowLen = this.props.listNow.length + this._listLen = this.props.list.length + this._rowRenderer = this._rowRenderer.bind(this) + } focusNextButton() { if (this.lastBtnRef.current) { @@ -62,6 +75,17 @@ export default class Storage extends React.PureComponent { componentDidUpdate(prevProps) { if (prevProps.listNow.length !== this.props.listNow.length) { this.focusNextButton(); + const newRows = this.props.listNow.filter(evt => prevProps.listNow.indexOf(evt.id) < 0); + console.log(newRows, this.props.listNow) + if (newRows.length > 0) { + const newRowsIndexes = newRows.map(r => this.props.listNow.indexOf(r)) + + newRowsIndexes.forEach(ind => this.cache.clean(ind)) + this._list.recomputeRowHeights([...newRowsIndexes]) + } + + this._listNowLen = this.props.listNow.length + this._listLen = this.props.list.length } } @@ -129,7 +153,7 @@ export default class Storage extends React.PureComponent { return ; } - renderItem(item, i, prevItem, listNowLen, listLen) { + renderItem(item, i, prevItem, style) { const { type } = this.props; let src; let name; @@ -155,8 +179,10 @@ export default class Storage extends React.PureComponent { return (
this._list.recomputeRowHeights(i)} > {src === null ? (
@@ -180,12 +206,12 @@ export default class Storage extends React.PureComponent {
{formatMs(item.duration)}
)}
- {i + 1 < listNowLen && ( + {i + 1 < this._listNowLen && ( )} - {i + 1 === listNowLen && i + 1 < listLen && ( + {i + 1 === this._listNowLen && i + 1 < this._listLen && ( @@ -196,12 +222,28 @@ export default class Storage extends React.PureComponent { ); } + _rowRenderer({index, key, parent, style}) { + // listNow.map((item, i) => + // this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined, listNowLen, listLen) + // ) + const { listNow } = this.props; + return ( + + {this.renderItem(listNow[index], index, index > 0 ? listNow[index - 1] : undefined, style)} + + ) + } + render() { const { type, listNow, list, hintIsHidden } = this.props; const showStore = type !== STORAGE_TYPES.MOBX; - const listNowLen = listNow.length - const listLen = list.length return ( @@ -302,11 +344,22 @@ export default class Storage extends React.PureComponent {
)}
- - {listNow.map((item, i) => - this.renderItem(item, i, i > 0 ? listNow[i - 1] : undefined, listNowLen, listLen) - )} - + + {({ height, width }) => ( + { + this._list = element; + }} + deferredMeasurementCache={this.cache} + overscanRowCount={2} + rowCount={this._listNowLen} + rowHeight={this.cache.rowHeight} + rowRenderer={this._rowRenderer} + width={width} + height={height} + /> + )} +