Moved functional styles out of styles.css and into components (via inline styles

Author: bvaughn

README.md

@@ -91,13 +91,14 @@ ES6, CommonJS, and UMD builds are available with each distribution.
 For example:
 
 ```js
-// Make sure to import default styles.
+// If you're using the Table component you'll need to include the default styles.
 // This only needs to be done once; probably during your application's bootstrapping process.
+// Grid and List base styles are purely functional and so they're all inline.
 import 'react-virtualized/styles.css';
 
 // Then you can import any react-virtualized components you need.
-// Tree-shaking is supported with ES6 or CommonJS usage.
-import { Grid } from 'react-virtualized'
+// Tree-shaking is supported with ES6 modules (`jsnext:main` package target).
+import { Table } from 'react-virtualized'
 ```
 
 Alternately you can load a global-friendly UMD build:

package.json

@@ -3,7 +3,7 @@
   "description": "React components for efficiently rendering large, scrollable lists and tabular data",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com>",
   "user": "bvaughn",
-  "version": "8.0.0-rc.1",
+  "version": "8.0.0-rc.2",
   "homepage": "https://github.com/bvaughn/react-virtualized",
   "main": "dist/commonjs/index.js",
   "jsnext:main": "dist/es/index.js",

source/Collection/CollectionView.js

@@ -351,8 +351,13 @@ export default class CollectionView extends Component {
       }) : []
 
     const collectionStyle = {
+      boxSizing: 'border-box',
       height: autoHeight ? 'auto' : height,
-      width
+      overflow: 'auto',
+      position: 'relative',
+      webkitOverflowScrolling: 'touch',
+      width,
+      willChange: 'transform'
     }
 
     // Force browser to hide scrollbars when we know they aren't necessary.
@@ -389,6 +394,7 @@ export default class CollectionView extends Component {
               height: totalHeight,
               maxHeight: totalHeight,
               maxWidth: totalWidth,
+              overflow: 'hidden',
               pointerEvents: isScrolling ? 'none' : '',
               width: totalWidth
             }}

source/Grid/Grid.js

@@ -492,8 +492,12 @@ export default class Grid extends Component {
     const { isScrolling } = this.state
 
     const gridStyle = {
+      boxSizing: 'border-box',
       height: autoHeight ? 'auto' : height,
-      width
+      position: 'relative',
+      width,
+      webkitOverflowScrolling: 'touch',
+      willChange: 'transform'
     }
 
     const totalColumnsWidth = this._columnSizeAndPositionManager.getTotalSize()
@@ -548,6 +552,7 @@ export default class Grid extends Component {
               height: totalRowsHeight,
               maxWidth: totalColumnsWidth,
               maxHeight: totalRowsHeight,
+              overflow: 'hidden',
               pointerEvents: isScrolling ? 'none' : ''
             }}
           >

source/Table/Table.js

@@ -266,7 +266,12 @@ export default class Table extends Component {
     // Precompute and cache column styles before rendering rows and columns to speed things up
     this._cachedColumnStyles = []
     React.Children.toArray(children).forEach((column, index) => {
-      this._cachedColumnStyles[index] = this._getFlexStyleForColumn(column, column.props.style)
+      const flexStyles = this._getFlexStyleForColumn(column, column.props.style)
+
+      this._cachedColumnStyles[index] = {
+        ...flexStyles,
+        overflow: 'hidden'
+      }
     })
 
     // Note that we specify :numChildren, :scrollbarWidth, :sortBy, and :sortDirection as properties on Grid even though these have nothing to do with Grid.
@@ -283,6 +288,7 @@ export default class Table extends Component {
             style={{
               ...rowStyleObject,
               height: headerHeight,
+              overflow: 'hidden',
               paddingRight: scrollbarWidth,
               width: width
             }}
@@ -458,6 +464,7 @@ export default class Table extends Component {
       ...style,
       ...rowStyleObject,
       height: this._getRowHeight(index),
+      overflow: 'hidden',
       paddingRight: scrollbarWidth
     }
 

source/styles.css

@@ -1,38 +1,17 @@
 /* Collection default theme */
 
 .ReactVirtualized__Collection {
-  position: relative;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  /* Without this property, Chrome repaints the entire Collection any time a new row or column is added.
-     Firefox only repaints the new row or column (regardless of this property).
-     Safari and IE don't support the property at all. */
-  will-change: transform;
 }
 
 .ReactVirtualized__Collection__innerScrollContainer {
-  box-sizing: border-box;
-  overflow: hidden;
 }
 
 /* Grid default theme */
 
 .ReactVirtualized__Grid {
-  position: relative;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-
-  /* Without this property, Chrome repaints the entire Grid any time a new row or column is added.
-     Firefox only repaints the new row or column (regardless of this property).
-     Safari and IE don't support the property at all. */
-  will-change: transform;
 }
 
 .ReactVirtualized__Grid__innerScrollContainer {
-  box-sizing: border-box;
-  overflow: hidden;
-  position: relative;
 }
 
 /* Table default theme */
@@ -41,8 +20,6 @@
 }
 
 .ReactVirtualized__Table__Grid {
-  overflow-x: hidden;
-  box-sizing: border-box;
 }
 
 .ReactVirtualized__Table__headerRow {
@@ -51,17 +28,14 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  overflow: hidden;
-  box-sizing: border-box;
 }
 .ReactVirtualized__Table__row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  overflow: hidden;
 }
 
-.ReactVirtualized__Table__headerTruncatedText {    
+.ReactVirtualized__Table__headerTruncatedText {
   display: inline-block;
   max-width: 100%;
   white-space: nowrap;
@@ -75,7 +49,6 @@
   min-width: 0px;
 }
 .ReactVirtualized__Table__rowColumn {
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -102,8 +75,4 @@
 /* List default theme */
 
 .ReactVirtualized__List {
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
 }