Use CellMeasurer cache to handle different sizes of stories

nikhilbhatt · Oct 4, 2018 · 23a19e9 · 23a19e9
1 parent 0169fcb
commit 23a19e9
Showing 1 changed file with 41 additions and 21 deletions.
diff --git a/rails/app/javascript/components/StoryList.jsx b/rails/app/javascript/components/StoryList.jsx
@@ -1,33 +1,51 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import StoryMedia from "./StoryMedia";
-import {AutoSizer} from 'react-virtualized/dist/commonjs/AutoSizer';
-import {List} from 'react-virtualized/dist/commonjs/List';
+import { List, AutoSizer, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 
 class StoryList extends Component {
+ constructor(props) {
+ super(props)
+ this.cache = new CellMeasurerCache({
+ fixedWidth: true,
+ defaultHeight: 100
+ });
+ }
+
+ componentWillReceiveProps(nextProps) {
+ this._grid.forceUpdateGrid();
+ }
+
  static propTypes = {
  stories: PropTypes.array
  };
 
- renderStory = ({key, index, style}) => {
+ renderStory = ({key, index, style, parent}) => {
  const story = this.props.stories[index];
  return (
- <li
- className={`story storypoint${story.point && story.point.id}`}
- onClick={_ => this.props.onStoryClick([story.point.lng, story.point.lat])}
- key={key}
- style={style}
- >
- <div className="speakers">
- <img src={story.speaker.picture_url} alt={story.speaker.name} title={story.speaker.name}/>
- </div>
- <div className="container">
- <h6 className="title">{story.title}</h6>
- <p>{story.desc}</p>
- {story.media &&
- story.media.map(file => <StoryMedia file={file} />)}
- </div>
- </li>
+ <CellMeasurer 
+ key={key}
+ cache={this.cache}
+ parent={parent}
+ columnIndex={0}
+ rowIndex={index}>
+ <li
+ className={`story storypoint${story.point && story.point.id}`}
+ onClick={_ => this.props.onStoryClick([story.point.lng, story.point.lat])}
+ key={key}
+ style={style}
+ >
+ <div className="speakers">
+ <img src={story.speaker.picture_url} alt={story.speaker.name} title={story.speaker.name}/>
+ </div>
+ <div className="container">
+ <h6 className="title">{story.title}</h6>
+ <p>{story.desc}</p>
+ {story.media &&
+ story.media.map(file => <StoryMedia file={file} />)}
+ </div>
+ </li>
+ </CellMeasurer>
  );
  };
 
@@ -41,9 +59,11 @@ class StoryList extends Component {
  height={height}
  width={width}
  rowCount={this.props.stories.length}
- rowHeight={height}
+ deferredMeasurementCache={this.cache}
+ rowHeight={this.cache.rowHeight}
  rowRenderer={this.renderStory}
- overscanRowCount={1}
+ overscanRowCount={3}
+ ref={grid => (this._grid = grid)}
  />
  );
  }}