Replace React.cloneElement inside of VirtualScroll with a wrapper ele…

…ment for positioning.
sriverag · Jan 19, 2016 · b45171e · b45171e
1 parent 632056b
commit b45171e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -55,11 +55,7 @@ ReactDOM.render(
     rowsCount={list.length}
     rowHeight={20}
     rowRenderer={
-      index => (
-        <div key={index}>
-          {list[index]}
-        </div>
-      )
+      index => list[index] // Could also be a DOM element
     }
   />,
   document.getElementById('example')
@@ -130,11 +126,7 @@ ReactDOM.render(
       rowsCount={list.length}
       rowHeight={20}
       rowRenderer={
-        index => (
-          <div key={index}>
-            {list[index]}
-          </div>
-        )
+        index => list[index] // Could also be a DOM element
       }
     />
   </AutoSizer>,
@@ -178,11 +170,7 @@ ReactDOM.render(
       rowsCount={list.length}
       rowHeight={20}
       rowRenderer={
-        index => (
-          <div key={index}>
-            {list[index]}
-          </div>
-        )
+        index => list[index] // Could also be a DOM element
       }
     />
   </InfiniteLoader>,

diff --git a/docs/VirtualScroll.md b/docs/VirtualScroll.md
@@ -11,7 +11,7 @@ Describes the header and cell contents of a table column
 | noRowsRenderer |  | Function | Callback used to render placeholder content when `rowsCount` is 0 |
 | onRowsRendered |  | Function | Callback invoked with information about the slice of rows that were just rendered: `({ startIndex, stopIndex }): void` |
 | rowHeight | Number or Function | ✓ | Either a fixed row height (number) or a function that returns the height of a row given its index: `(index: number): number` |
-| rowRenderer | Function | ✓ | Responsbile for rendering a row given an index. Rendered rows must have a unique `key` attribute. |
+| rowRenderer | Function | ✓ | Responsbile for rendering a row given an index. Signature should look like `(index: number): React.PropTypes.node` |
 | rowsCount | Number | ✓ | Number of rows in list. |
 | scrollToIndex | Number |  | Row index to ensure visible (by forcefully scrolling if necessary) |
 

diff --git a/source/VirtualScroll/VirtualScroll.example.js b/source/VirtualScroll/VirtualScroll.example.js
@@ -147,12 +147,9 @@ export default class VirtualScrollExample extends Component {
 
   _rowRenderer (index) {
     const { list } = this.props
-    const { useDynamicRowHeight, virtualScrollRowHeight } = this.state
+    const { useDynamicRowHeight } = this.state
 
     const datum = list.get(index)
-    const height = useDynamicRowHeight
-      ? datum.size
-      : virtualScrollRowHeight
 
     let additionalContent
 
@@ -169,9 +166,8 @@ export default class VirtualScrollExample extends Component {
 
     return (
       <div
-        key={index}
         className={styles.row}
-        style={{ height }}
+        style={{ height: '100%' }}
       >
         <div
           className={styles.letter}

diff --git a/source/VirtualScroll/VirtualScroll.js b/source/VirtualScroll/VirtualScroll.js
@@ -247,17 +247,18 @@ export default class VirtualScroll extends Component {
       for (let i = start; i <= stop; i++) {
         let datum = this._cellMetadata[i]
         let child = rowRenderer(i)
-        child = React.cloneElement(
-          child,
-          {
-            style: {
-              ...child.props.style,
+        child = (
+          <div
+            key={i}
+            style={{
               position: 'absolute',
               top: datum.offset,
               width: '100%',
               height: this._getRowHeight(i)
-            }
-          }
+            }}
+          >
+            {child}
+          </div>
         )
 
         childrenToDisplay.push(child)