Per item caching

source/CellMeasurer/CellMeasurer.js

@@ -70,6 +70,36 @@ export default class CellMeasurer extends Component {
     this.resetMeasurementForRow = this.resetMeasurementForRow.bind(this)
   }
 
+  getItemWidth({rowIndex, columnIndex}) {
+    let width = this._cellSizeCache.getItemWidth(rowIndex, columnIndex);
+
+    if (!width) {
+      width = this._measureCell({
+        clientWidth: true,
+        columnIndex,
+        rowIndex
+      }).width;
+
+      this._cellSizeCache.setItemWidth(rowIndex, columnIndex, width)
+    }
+    return width;
+  }
+
+  getItemHeight({rowIndex, columnIndex}) {
+    let height = this._cellSizeCache.getItemHeight(rowIndex, columnIndex);
+
+    if (!height) {
+      height = this._measureCell({
+        clientHeight: true,
+        columnIndex,
+        rowIndex
+      }).height
+
+      this._cellSizeCache.setItemHeight(rowIndex, columnIndex, height)
+    }
+    return height;
+  }
+
   getColumnWidth ({ index }) {
     const columnWidth = this._cellSizeCache.getColumnWidth(index)
     if (columnWidth != null) {
@@ -81,12 +111,10 @@ export default class CellMeasurer extends Component {
     let maxWidth = 0
 
     for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-      let { width } = this._measureCell({
-        clientWidth: true,
+      var width = this.getItemHeight({
+        rowIndex,
         columnIndex: index,
-        rowIndex
-      })
-
+      });
       maxWidth = Math.max(maxWidth, width)
     }
 
@@ -106,12 +134,10 @@ export default class CellMeasurer extends Component {
     let maxHeight = 0
 
     for (let columnIndex = 0; columnIndex < columnCount; columnIndex++) {
-      let { height } = this._measureCell({
-        clientHeight: true,
+      var height = this.getItemHeight({
+        rowIndex: index,
         columnIndex,
-        rowIndex: index
       })
-
       maxHeight = Math.max(maxHeight, height)
     }
 
@@ -131,6 +157,8 @@ export default class CellMeasurer extends Component {
   resetMeasurements () {
     this._cellSizeCache.clearAllColumnWidths()
     this._cellSizeCache.clearAllRowHeights()
+    this._cellSizeCache.clearAllItemWidths()
+    this._cellSizeCache.clearAllItemHeights()
   }
 
   componentDidMount () {

source/CellMeasurer/perItemSizeCache.js

@@ -0,0 +1,173 @@
+/**
+ * CellMeasurer cache must be used with a custom cell measurer supporting cache
+ * per item
+ *
+ * The following cache disable the cache per row/column completely and replace
+ * it by a cache per item
+ *
+ * Two functions must be provided:
+ * - getItem(rowIndex, columnIndex): return the item at the given row and column
+ * - getItemId(item): return a unique id for an item
+ *
+ * The structure of per item caches are the following:
+ *
+ *  cachedItemHeight = {
+ *    height: 150,
+ *    item: Object
+ *  }
+ *
+ *  cachedItemHeight = {
+ *    width: 300,
+ *    items: Object
+ *  }
+ *
+ * The cached value is returned only if the itemId is found and if the item
+ * reference didn't change since last time
+ *
+ */
+export default class DefaultCellSizeCache {
+  constructor ({
+    getItem,
+    getItemId,
+    uniformRowHeight = false,
+    uniformColumnWidth = false,
+    uniformItemHeight = false,
+    uniformItemWidth = false
+  } = {}) {
+
+    this._getItem = getItem
+    this._getItemId = getItemId
+
+    this._uniformRowHeight = uniformRowHeight
+    this._uniformColumnWidth = uniformColumnWidth
+
+    this._cachedColumnWidth = undefined
+    this._cachedRowHeight = undefined
+
+    this._cachedItemWidth = undefined
+    this._cachedItemHeight = undefined
+
+    this._cachedItemWidths = {}
+    this._cachedItemHeights = {}
+  }
+
+  /*
+   * Row/column caching
+   * This has been disabled since we cache per item
+   */
+  clearAllColumnWidths () {
+    this._cachedColumnWidth = undefined
+    // this._cachedColumnWidths = {}
+  }
+
+  clearAllRowHeights () {
+    this._cachedRowHeight = undefined
+    // this._cachedRowHeights = {}
+  }
+
+  clearColumnWidth (index) {
+    this._cachedColumnWidth = undefined
+    // delete this._cachedColumnWidths[index]
+  }
+
+  clearRowHeight (index) {
+    this._cachedRowHeight = undefined
+    // delete this._cachedRowHeights[index]
+  }
+
+  // Don't return the width for each column
+  getColumnWidth (index) {
+    return this._uniformColumnWidth
+      ? this._cachedColumnWidth
+      : null;
+  }
+
+  // Don't return the height for each row
+  getRowHeight (index) {
+    return this._uniformRowHeight
+      ? this._cachedRowHeight
+      : null;
+  }
+
+  // Don't cache the width for each column
+  setColumnWidth (index, width) {
+    this._cachedColumnWidth = width
+  }
+
+  // Don't cache the height for each column
+  setRowHeight (index, height) {
+    this._cachedRowHeight = height
+  }
+
+
+  /*
+   * Item caching
+   */
+  clearAllItemWidths () {
+    this._cachedItemWidth = undefined
+    this._cachedItemWidths = {}
+  }
+
+  clearAllItemHeights () {
+    this._cachedItemHeight = undefined
+    this._cachedItemHeights = {}
+  }
+
+  clearItemWidth (rowIndex, columnIndex) {
+    this._cachedItemWidth = undefined
+    var item = this._getItem(rowIndex, columnIndex);
+    delete this._cachedItemWidths[this.getItemId(item)]
+  }
+
+  clearItemHeight (rowIndex, columnIndex) {
+    this._cachedItemWidth = undefined
+    var item = this._getItem(rowIndex, columnIndex);
+    delete this._cachedItemHeights[this.getItemId(item)]
+  }
+
+  getItemWidth (rowIndex, columnIndex) {
+    if (this._uniformItemWidth) {
+      return this._cachedItemWidth;
+    }
+
+    var item = this._getItem(rowIndex, columnIndex);
+    var cached = this._cachedItemWidths[this._getItemId(item)]
+    if(cached && cached.item && cached.item === item) {
+      return cached.width;
+    }
+    return null;
+  }
+
+  getItemHeight (rowIndex, columnIndex) {
+    if (this._uniformItemHeight) {
+      return this._cachedItemHeight;
+    }
+
+    var item = this._getItem(rowIndex, columnIndex);
+    var cached = this._cachedItemHeights[this._getItemId(item)]
+    if(cached && cached.item && cached.item === item) {
+      return cached.height;
+    }
+    return null;
+  }
+
+  setItemWidth (rowIndex, columnIndex, width) {
+    this._cachedItemWidth = width
+
+    var item = this._getItem(rowIndex, columnIndex);
+    this._cachedItemWidths[this._getItemId(item)] = {
+      width: width,
+      item: item,
+    };
+  }
+
+  setItemHeight (rowIndex, columnIndex, height) {
+    this._cachedItemHeight = height
+
+    var item = this._getItem(rowIndex, columnIndex);
+    this._cachedItemHeights[this._getItemId(item)] = {
+      height: height,
+      item: item,
+    };
+  }
+}