Closed iTonyYo closed 7 years ago
react-virtualized@9.9.0
Loop && flicker all the time. Check this(gif). Not using flexbox container.
this._cache = new CellMeasurerCache({ fixedWidth: true // Rendered cells will have a fixed width, dynamic height });
if I changefixedWidth to false, the problem will be solved, but it will not remove the hidden nodes.
fixedWidth
The code,
'use strict'; import React, { PureComponent } from 'react'; import Radium from 'radium'; import Immutable from 'immutable'; import PropTypes from 'prop-types'; import { isEmpty, isEqual } from 'lodash'; import store from 'store'; import { List, AutoSizer, CellMeasurer, CellMeasurerCache, ScrollSync } from 'react-virtualized'; import { Pages, Page, OffCanvas } from '../../component/Layout'; import { MainTopbar } from '../../component/Topbar'; import Toolbar from '../../component/Toolbar/toolbar.js'; import Tab from '../../component/Tab/Tab.js'; import Pane from '../../component/Tab/pane.js'; import Card from '../../component/Card/Card.js'; import CardLoader from '../../component/Card/CardLoader.js'; import './index.css'; let propTypes = { pathname: PropTypes.string, fetchDataIfNeeded: PropTypes.func, isFetching: PropTypes.bool, data: PropTypes.instanceOf(Immutable.List), lastUpdated: PropTypes.number }; let userInfo = store.get('user'); @Radium class ViewMine extends PureComponent { constructor(props) { super(props); this._renderLoader = this._renderLoader.bind(this); this._renderNoData = this._renderNoData.bind(this); this._renderInfiniteList = this._renderInfiniteList.bind(this); this._rowRenderer = this._rowRenderer.bind(this); this._cache = new CellMeasurerCache({ fixedWidth: false }); } _getDatum (data, index) { return data.get(index % data.size); } _renderLoader() { return ( <div> <CardLoader></CardLoader> <CardLoader></CardLoader> </div> ); } _renderNoData() { return ( <div className='border-box xy-center no-data'> ... </div> ); } _rowRenderer({ index, isScrolling, key, parent, style }) { let { data, } = this.props; let rowData = this._getDatum(data, index); return ( <CellMeasurer cache={ this._cache } columnIndex={ 0 } key={ key } parent={ parent } rowIndex={ index }> {({ measure }) => ( <div className='virtualized-box'> <div className='border-box virtualized-box-inner'> <Card pathname={ this.props.pathname } avatar={ userInfo.avatar } title={ rowData.get('title') } username={ userInfo.username } description={ rowData.get('description') } favourites={ rowData.get('favourites') } lastUpdate={ rowData.get('lastUpdate') } representation={ '' }/> </div> </div> )} </CellMeasurer> ); } // TODO, InfiniteLoader. _renderInfiniteList() { let { data, } = this.props; return ( <AutoSizer> {({ width, height }) => ( <List deferredMeasurementCache={ this._cache } height={ height } rowCount={ data.size } rowHeight={ this._cache.rowHeight } rowRenderer={ this._rowRenderer } width={ width } /> )} </AutoSizer> ); } componentDidMount() { let { fetchDataIfNeeded } = this.props; fetchDataIfNeeded(); } render() { let { isFetching, data, lastUpdated } = this.props; return ( <OffCanvas title={ 'Mine' } className='offcanvas-mine'> <MainTopbar /> <Pages> <Page> <Tab selected={ 0 } className='page-mine'> <Pane label='Tab-1' className='tab-collective'> { isFetching ? this._renderLoader() : isEqual(data.size, 0) ? this._renderNoData() : this._renderInfiniteList() } </Pane> <Pane label='Tab-2' className='tab-tribe'></Pane> <Pane label='Tab-3' className='tab-power'></Pane> </Tab> </Page> </Pages> <Toolbar/> </OffCanvas> ); } } ViewMine.propTypes = propTypes; export default ViewMine;
Solved!
it should be main example code ...
react-virtualized@9.9.0
Loop && flicker all the time. Check this(gif). Not using flexbox container.
if I change
fixedWidth
to false, the problem will be solved, but it will not remove the hidden nodes.The code,