Merge pull request #161 from jquense/null-render

Clean up Grid to allow more complex ScrollSync

Author: bvaughn

package.json

@@ -25,7 +25,7 @@
     "prebuild": "npm run lint",
     "postpublish": "npm run deploy",
     "prepublish": "npm run build",
-    "start": "webpack-dev-server --hot --inline --config webpack.config.dev.js",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --inline --config webpack.config.dev.js",
     "test": "npm run lint && npm run test:unit",
     "test:unit": "cross-env NODE_ENV=test karma start",
     "watch": "watch 'clear && npm run lint -s && npm run test -s' source"
@@ -125,6 +125,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.3",
+    "dom-helpers": "^2.4.0",
     "raf": "^3.1.0",
     "react-pure-render": "^1.0.2"
   },

source/Grid/Grid.js

@@ -10,6 +10,7 @@ import {
 } from '../utils'
 import cn from 'classnames'
 import raf from 'raf'
+import getScrollbarSize from 'dom-helpers/util/scrollbarSize'
 import React, { Component, PropTypes } from 'react'
 import shouldPureComponentUpdate from 'react-pure-render/function'
 
@@ -208,6 +209,8 @@ export default class Grid extends Component {
   componentDidMount () {
     const { scrollLeft, scrollToColumn, scrollTop, scrollToRow } = this.props
 
+    this._scrollbarSize = getScrollbarSize()
+
     if (scrollLeft >= 0 || scrollTop >= 0) {
       this.setScrollPosition({ scrollLeft, scrollTop })
     }
@@ -427,6 +430,13 @@ export default class Grid extends Component {
           let columnDatum = this._columnMetadata[columnIndex]
           let renderedCell = renderCell({ columnIndex, rowIndex })
           let key = `${rowIndex}-${columnIndex}`
+
+          // any other falsey value will be rendered
+          // as a text node by React
+          if (renderedCell == null || renderedCell === false) {
+            continue
+          }
+
           let child = (
             <div
               key={key}
@@ -732,10 +742,11 @@ export default class Grid extends Component {
     // This causes a series of rapid renders that is slow for long lists.
     // We can avoid that by doing some simple bounds checking to ensure that scrollTop never exceeds the total height.
     const { height, width } = this.props
+    const scrollbarSize = this._scrollbarSize
     const totalRowsHeight = this._getTotalRowsHeight()
     const totalColumnsWidth = this._getTotalColumnsWidth()
-    const scrollLeft = Math.min(totalColumnsWidth - width, event.target.scrollLeft)
-    const scrollTop = Math.min(totalRowsHeight - height, event.target.scrollTop)
+    const scrollLeft = Math.min(totalColumnsWidth - width + scrollbarSize, event.target.scrollLeft)
+    const scrollTop = Math.min(totalRowsHeight - height + scrollbarSize, event.target.scrollTop)
 
     // Certain devices (like Apple touchpad) rapid-fire duplicate events.
     // Don't force a re-render if this is the case.

source/ScrollSync/ScrollSync.example.css

@@ -1,4 +1,5 @@
 .GridRow {
+  position: relative;
   display: flex;
   flex-direction: row;
 }
@@ -9,6 +10,7 @@
 }
 .LeftSideGridContainer {
   flex: 0 0 75px;
+  z-index: 10;
 }
 
 .LeftSideGrid {

source/ScrollSync/ScrollSync.example.js

@@ -5,10 +5,10 @@ import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/Conte
 import AutoSizer from '../AutoSizer'
 import Grid from '../Grid'
 import ScrollSync from './ScrollSync'
-import VirtualScroll from '../VirtualScroll'
 import shouldPureComponentUpdate from 'react-pure-render/function'
 import cn from 'classnames'
 import styles from './ScrollSync.example.css'
+import scrollbarSize from 'dom-helpers/util/scrollbarSize'
 
 const LEFT_COLOR_FROM = hexToRgb('#471061')
 const LEFT_COLOR_TO = hexToRgb('#BC3959')
@@ -83,21 +83,47 @@ export default class GridExample extends Component {
             const middleColor = `#ffffff`
 
             return (
-              <div className={styles.GridRow}>
+              <div className={styles.GridRow }>
                 <div
                   className={styles.LeftSideGridContainer}
                   style={{
-                    backgroundColor: `rgb(${leftBackgroundColor.r},${leftBackgroundColor.g},${leftBackgroundColor.b})`,
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
                     color: leftColor,
-                    marginTop: rowHeight
+                    backgroundColor: `rgb(${topBackgroundColor.r},${topBackgroundColor.g},${topBackgroundColor.b})`
                   }}
                 >
-                  <VirtualScroll
-                    className={styles.LeftSideGrid}
-                    height={height}
+                  <Grid
+                    renderCell={this._renderLeftHeaderCell}
+                    className={styles.HeaderGrid}
+                    width={columnWidth}
+                    height={rowHeight}
+                    rowHeight={rowHeight}
+                    columnWidth={columnWidth}
+                    rowsCount={1}
+                    columnsCount={1}
+                  />
+                </div>
+                <div
+                  className={styles.LeftSideGridContainer}
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: rowHeight,
+                    color: leftColor,
+                    backgroundColor: `rgb(${leftBackgroundColor.r},${leftBackgroundColor.g},${leftBackgroundColor.b})`
+                  }}
+                >
+                  <Grid
+                    overscanColumnsCount={overscanColumnsCount}
                     overscanRowsCount={overscanRowsCount}
+                    renderCell={this._renderLeftSideCell}
+                    columnWidth={columnWidth}
+                    columnsCount={1}
+                    className={styles.LeftSideGrid}
+                    height={height - scrollbarSize()}
                     rowHeight={rowHeight}
-                    rowRenderer={this._renderLeftSideCell}
                     rowsCount={rowsCount}
                     scrollTop={scrollTop}
                     width={columnWidth}
@@ -111,7 +137,7 @@ export default class GridExample extends Component {
                           backgroundColor: `rgb(${topBackgroundColor.r},${topBackgroundColor.g},${topBackgroundColor.b})`,
                           color: topColor,
                           height: rowHeight,
-                          width
+                          width: width - scrollbarSize()
                         }}>
                           <Grid
                             className={styles.HeaderGrid}
@@ -123,7 +149,7 @@ export default class GridExample extends Component {
                             rowHeight={rowHeight}
                             rowsCount={1}
                             scrollLeft={scrollLeft}
-                            width={width}
+                            width={width - scrollbarSize()}
                           />
                         </div>
                         <div
@@ -161,32 +187,38 @@ export default class GridExample extends Component {
   }
 
   _renderBodyCell ({ columnIndex, rowIndex }) {
-    const rowClass = rowIndex % 2 === 0
-      ? columnIndex % 2 === 0 ? styles.evenRow : styles.oddRow
-      : columnIndex % 2 !== 0 ? styles.evenRow : styles.oddRow
-    const classNames = cn(rowClass, styles.cell)
+    if (columnIndex < 1) {
+      return
+    }
 
-    return (
-      <div className={classNames}>
-        {`R${rowIndex}, C${columnIndex}`}
-      </div>
-    )
+    return this._renderLeftSideCell({ columnIndex, rowIndex })
   }
 
   _renderHeaderCell ({ columnIndex, rowIndex }) {
+    if (columnIndex < 1) {
+      return
+    }
+
+    return this._renderLeftHeaderCell({ columnIndex, rowIndex })
+  }
+
+  _renderLeftHeaderCell ({ columnIndex, rowIndex }) {
     return (
       <div className={styles.headerCell}>
         {`C${columnIndex}`}
       </div>
     )
   }
 
-  _renderLeftSideCell (rowIndex) {
-    const classNames = cn(styles.cell, styles.leftCell)
+  _renderLeftSideCell ({ columnIndex, rowIndex }) {
+    const rowClass = rowIndex % 2 === 0
+      ? columnIndex % 2 === 0 ? styles.evenRow : styles.oddRow
+      : columnIndex % 2 !== 0 ? styles.evenRow : styles.oddRow
+    const classNames = cn(rowClass, styles.cell)
 
     return (
       <div className={classNames}>
-        {`R${rowIndex}`}
+        {`R${rowIndex}, C${columnIndex}`}
       </div>
     )
   }