Removed cell-wrapper <div> in Collection

Author: bvaughn

docs/Collection.md

@@ -13,7 +13,7 @@ Unlike `Grid`, which renders checkerboard data, `Collection` can render arbitrar
 | className | String |  | Optional custom CSS class name to attach to root Collection element. |
 | cellCount | Number | ✓ | Number of cells in collection. |
 | cellGroupRenderer | Function | ✓ | Responsible for rendering a group of cells given their indices.: `({ cellSizeAndPositionGetter:Function, indices: Array<number>, cellRenderer: Function }): Array<PropTypes.node>` |
-| cellRenderer | Function | ✓ | Responsible for rendering a cell given an row and column index: `({ index: number, isScrolling: boolean }): PropTypes.element` |
+| cellRenderer | Function | ✓ | Responsible for rendering a cell given an row and column index: `({ index: number, isScrolling: boolean, key: string, style: object }): PropTypes.element` |
 | cellSizeAndPositionGetter | Function | ✓ | Callback responsible for returning size and offset/position information for a given cell (index): `({ index: number }): { height: number, width: number, x: number, y: number }` |
 | height | Number | ✓ | Height of Collection; this property determines the number of visible (vs virtualized) rows. |
 | horizontalOverscanSize | Number |  | Enables the `Collection` to horiontally "overscan" its content similar to how `Grid` does. This can reduce flicker around the edges when a user scrolls quickly. This property defaults to `0`; |
@@ -46,14 +46,13 @@ The Collection component supports the following static class names
 |:---|:---|
 | ReactVirtualized__Collection | Main (outer) element |
 | ReactVirtualized__Collection__innerScrollContainer | Inner scrollable area |
-| ReactVirtualized__Collection__cell | Individual cell |
 
 ### Examples
 
 Below is a very basic `Collection` example. It displays an array of objects with fixed row and column sizes.
 [See here](../source/Collection/Collection.example.js) for a more full-featured example.
 
-```javascript
+```jsx
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Collection } from 'react-virtualized';
@@ -65,20 +64,34 @@ const list = [
   // And so on...
 ];
 
+function cellRenderer ({ index, key, style }) {
+  return (
+    <div
+      key={key}
+      style={style}
+    >
+      {list[index].name}
+    </div>
+  )
+}
+
+function cellSizeAndPositionGetter ({ index }) {
+  const datum = list[index]
+
+  return {
+    height: datum.height,
+    width: datum.width,
+    x: datum.x,
+    y: datum.y
+  }
+}
+
 // Render your grid
 ReactDOM.render(
   <Collection
     cellCount={list.length}
-    cellRenderer={({ index }) => list[index].name}
-    cellSizeAndPositionGetter={({ index }) => {
-      const datum = list[index]
-      return {
-        height: datum.height,
-        width: datum.width,
-        x: datum.x,
-        y: datum.y
-      }
-    }}
+    cellRenderer={cellRenderer}
+    cellSizeAndPositionGetter={cellSizeAndPositionGetter}
     height={300}
     width={300}
   />,

source/Collection/Collection.example.js

@@ -130,18 +130,20 @@ export default class CollectionExample extends Component {
     return shallowCompare(this, nextProps, nextState)
   }
 
-  _cellRenderer ({ index, isScrolling }) {
+  _cellRenderer ({ index, isScrolling, key, style }) {
     const { list } = this.props
     const { showScrollingPlaceholder } = this.state
 
     const datum = list.get(index % list.size)
 
+    // Customize style
+    style.backgroundColor = datum.color
+
     return (
       <div
         className={styles.cell}
-        style={{
-          backgroundColor: datum.color
-        }}
+        key={key}
+        style={style}
       >
         {showScrollingPlaceholder && isScrolling ? '...' : index}
       </div>

source/Collection/Collection.js

@@ -31,7 +31,7 @@ export default class Collection extends Component {
 
     /**
      * Responsible for rendering a cell given an row and column index.
-     * Should implement the following interface: ({ index: number }): PropTypes.element
+     * Should implement the following interface: ({ index: number, key: string, style: object }): PropTypes.element
      */
     cellRenderer: PropTypes.func.isRequired,
 
@@ -210,46 +210,32 @@ function defaultCellGroupRenderer ({
     .map((index) => {
       const cellMetadata = cellSizeAndPositionGetter({ index })
 
+      let cellRendererProps = {
+        index,
+        isScrolling,
+        key: index,
+        style: {
+          height: cellMetadata.height,
+          left: cellMetadata.x,
+          position: 'absolute',
+          top: cellMetadata.y,
+          width: cellMetadata.width
+        }
+      }
+
       // Avoid re-creating cells while scrolling.
       // This can lead to the same cell being created many times and can cause performance issues for "heavy" cells.
       // If a scroll is in progress- cache and reuse cells.
       // This cache will be thrown away once scrolling complets.
-      let renderedCell
-
       if (isScrolling) {
         if (!(index in cellCache)) {
-          cellCache[index] = cellRenderer({
-            index,
-            isScrolling
-          })
+          cellCache[index] = cellRenderer(cellRendererProps)
         }
 
-        renderedCell = cellCache[index]
+        return cellCache[index]
       } else {
-        renderedCell = cellRenderer({
-          index,
-          isScrolling
-        })
+        return cellRenderer(cellRendererProps)
       }
-
-      if (renderedCell == null || renderedCell === false) {
-        return null
-      }
-
-      return (
-        <div
-          className='ReactVirtualized__Collection__cell'
-          key={index}
-          style={{
-            height: cellMetadata.height,
-            left: cellMetadata.x,
-            top: cellMetadata.y,
-            width: cellMetadata.width
-          }}
-        >
-          {renderedCell}
-        </div>
-      )
     })
     .filter((renderedCell) => !!renderedCell)
 }

source/Collection/Collection.test.js

@@ -11,9 +11,13 @@ import Collection from './Collection'
 import { CELLS, SECTION_SIZE } from './TestData'
 
 describe('Collection', () => {
-  function defaultCellRenderer ({ index }) {
+  function defaultCellRenderer ({ index, key, style }) {
     return (
-      <div className='cell'>
+      <div
+        className='cell'
+        key={key}
+        style={style}
+      >
         cell:{index}
       </div>
     )
@@ -70,12 +74,16 @@ describe('Collection', () => {
 
     // Small performance tweak added in 5.5.6
     it('should not render/parent cells that are null or false', () => {
-      function cellRenderer ({ index }) {
+      function cellRenderer ({ index, key, style }) {
         if (index > 2) {
           return null
         } else {
           return (
-            <div className='cell'>
+            <div
+              className='cell'
+              key={key}
+              style={style}
+            >
               {index}
             </div>
           )
@@ -511,7 +519,14 @@ describe('Collection', () => {
     it('should use a custom :cellGroupRenderer if specified', () => {
       let cellGroupRendererCalled = 0
       let cellGroupRendererParams
-      const cellRenderer = ({ index }) => index
+      const cellRenderer = ({ index, key, style }) => (
+        <div
+          key={key}
+          style={style}
+        >
+          {index}
+        </div>
+      )
       findDOMNode(render(getMarkup({
         cellRenderer,
         cellGroupRenderer: (params) => {
@@ -532,9 +547,9 @@ describe('Collection', () => {
 
   it('should pass the cellRenderer an :isScrolling flag when scrolling is in progress', () => {
     const cellRendererCalls = []
-    function cellRenderer ({ index, isScrolling }) {
+    function cellRenderer ({ index, isScrolling, key, style }) {
       cellRendererCalls.push(isScrolling)
-      return defaultCellRenderer({ index })
+      return defaultCellRenderer({ index, key, style })
     }
     const collection = render(getMarkup({
       cellRenderer
@@ -601,9 +616,9 @@ describe('Collection', () => {
   describe('cell caching', () => {
     it('should not cache cells if the Grid is not scrolling', () => {
       const cellRendererCalls = []
-      function cellRenderer ({ isScrolling, index }) {
+      function cellRenderer ({ isScrolling, index, key, style }) {
         cellRendererCalls.push({ isScrolling, index })
-        return defaultCellRenderer({ index })
+        return defaultCellRenderer({ index, key, style })
       }
 
       const props = {
@@ -628,9 +643,9 @@ describe('Collection', () => {
 
     it('should cache a cell once it has been rendered while scrolling', () => {
       const cellRendererCalls = []
-      function cellRenderer ({ isScrolling, index }) {
+      function cellRenderer ({ isScrolling, index, key, style }) {
         cellRendererCalls.push({ isScrolling, index })
-        return defaultCellRenderer({ index })
+        return defaultCellRenderer({ index, key, style })
       }
 
       const props = {
@@ -670,9 +685,9 @@ describe('Collection', () => {
 
     it('should clear cache once :isScrolling is false', async (done) => {
       const cellRendererCalls = []
-      function cellRenderer ({ isScrolling, index }) {
+      function cellRenderer ({ isScrolling, index, key, style }) {
         cellRendererCalls.push({ isScrolling, index })
-        return defaultCellRenderer({ isScrolling, index })
+        return defaultCellRenderer({ isScrolling, index, key, style })
       }
 
       const props = {

source/styles.css

@@ -16,10 +16,6 @@
   overflow: hidden;
 }
 
-.ReactVirtualized__Collection__cell {
-  position: absolute;
-}
-
 /* Grid default theme */
 
 .ReactVirtualized__Grid {