Merge branch 'commit-14-Remove-Scrollbar-Thumb-Disappearance' into merge-14-Remove-Scrollbar-Thumb-Disappearance

Author: pradeepnschrodinger

README.md

@@ -38,7 +38,7 @@ Add the default stylesheet `dist/fixed-data-table.css` using a link tag or impor
 
 Implementing a table involves three component types- `<Table/>`,`<Column/>`, and `<Cell/>`.
 
-`<Table />` contains configuration information for the entire table, like dimensions and row count. It's also where you pass down the data to be rendered in the table. 
+`<Table />` contains configuration information for the entire table, like dimensions and row count.
 
 ```javascript
 
@@ -50,7 +50,6 @@ Implementing a table involves three component types- `<Table/>`,`<Column/>`, and
     width={5000}
     height={5050}
     headerHeight={50}
-    data={rows}>
     ...
   </Table>
 ```    

examples/PaginationExample.js renamed to examples/InfiniteScrollExample.js

@@ -50,7 +50,7 @@ class PagedData {
   }
 }
 
-class PaginationExample extends React.Component {
+class InfiniteScrollExample extends React.Component {
   constructor(props) {
     super(props);
 
@@ -124,4 +124,4 @@ class PaginationExample extends React.Component {
   }
 }
 
-module.exports = PaginationExample;
+module.exports = InfiniteScrollExample;

package.json

@@ -38,7 +38,7 @@
     "less": "^2.2.0",
     "less-loader": "^2.0.0",
     "marked": "^0.3.2",
-    "mocha": "^2.5.3",
+    "mocha": "5.2.0",
     "mocha-loader": "^1.0.0",
     "mocha-webpack": "1.0.0-rc.1",
     "null-loader": "^0.1.0",
@@ -58,6 +58,7 @@
     "webpack-dev-server": "^2.6.1"
   },
   "scripts": {
+    "webpack": "webpack",
     "site-dev-server": "./build_helpers/startSiteDevServer.sh",
     "site-build": "./build_helpers/buildStaticSite.sh",
     "build-dist": "./build_helpers/buildDist.sh",

site/Constants.js

@@ -96,10 +96,10 @@ exports.ExamplePages = {
     title: 'Column Groups',
     description: 'Table with column groupings.',
   },
-  PAGINATION_EXAMPLE: {
-    location: 'example-pagination.html',
-    fileName: 'PaginationExample.js',
-    title: 'Pagination',
+  INFINITE_SCROLL_EXAMPLE: {
+    location: 'example-infinite-scroll.html',
+    fileName: 'InfiniteScrollExample.js',
+    title: 'Infinite Scroll',
     description: 'A table example that pages in data as the user scrolls. We fake this by having a promise that resolves after a few milliseconds',
   },
   FILTER_EXAMPLE: {

site/examples/ExamplesPage.js

@@ -37,7 +37,7 @@ var EXAMPLE_COMPONENTS = {
   [ExamplePages.EXPANDED_EXAMPLE.location]: require('../../examples/ExpandedExample'),
   [ExamplePages.FLEXGROW_EXAMPLE.location]: require('../../examples/FlexGrowExample'),
   [ExamplePages.COLUMN_GROUPS_EXAMPLE.location]: require('../../examples/ColumnGroupsExample'),
-  [ExamplePages.PAGINATION_EXAMPLE.location]: require('../../examples/PaginationExample'),
+  [ExamplePages.INFINITE_SCROLL_EXAMPLE.location]: require('../../examples/InfiniteScrollExample'),
   [ExamplePages.FILTER_EXAMPLE.location]: require('../../examples/FilterExample'),
   [ExamplePages.SORT_EXAMPLE.location]: require('../../examples/SortExample'),
   [ExamplePages.RESPONSIVE_EXAMPLE.location]: require('../../examples/ResponsiveExample'),

src/FixedDataTable.js

@@ -137,13 +137,13 @@ class FixedDataTable extends React.Component {
      */
     touchScrollEnabled: PropTypes.bool,
 
-    // TODO (jordan) Remove propType of showScrollbarX & showScrollbarY without losing documentation (moved to scrollFlags)
     /**
      * Boolean flags to control if scrolling with keys is enabled
      */
     keyboardScrollEnabled: PropTypes.bool,
     keyboardPageEnabled: PropTypes.bool,
 
+    // TODO (jordan) Remove propType of showScrollbarX & showScrollbarY without losing documentation (moved to scrollFlags)
     /**
      * Hide the scrollbar but still enable scroll functionality
      */
@@ -666,6 +666,7 @@ class FixedDataTable extends React.Component {
           onScroll={this._onVerticalScroll}
           verticalTop={bodyOffsetTop}
           position={scrollY}
+          touchEnabled={touchScrollEnabled}
         />;
     }
 
@@ -678,6 +679,7 @@ class FixedDataTable extends React.Component {
           onScroll={this._onHorizontalScroll}
           position={scrollX}
           size={width}
+          touchEnabled={touchScrollEnabled}
         />;
     }
 
@@ -779,15 +781,18 @@ class FixedDataTable extends React.Component {
           style={{top: footOffsetTop}}
         />;
     }
-
+    var tabIndex = null;
+    if (this.props.keyboardPageEnabled || this.props.keyboardScrollEnabled) {
+      tabIndex = 0;
+    }
     return (
       <div
         className={joinClasses(
           className,
           cx('fixedDataTableLayout/main'),
           cx('public/fixedDataTable/main'),
         )}
-        tabIndex={0}
+        tabIndex={tabIndex}
         onKeyDown={this._onKeyDown}
         onWheel={this._wheelHandler.onWheel}
         onTouchStart={this._touchHandler.onTouchStart}

src/ReactTouchHandler.js

@@ -101,6 +101,7 @@ class ReactTouchHandler {
   }
 
   onTouchStart(/*object*/ event) {
+
     // Start tracking drag delta for scrolling
     this._lastTouchX = event.touches[0].pageX;
     this._lastTouchY = event.touches[0].pageY;
@@ -147,6 +148,7 @@ class ReactTouchHandler {
   }
 
   onTouchMove(/*object*/ event) {
+
     var moveX = event.touches[0].pageX;
     var moveY = event.touches[0].pageY;
 

src/Scrollbar.js

@@ -44,6 +44,7 @@ class Scrollbar extends React.PureComponent {
     position: PropTypes.number,
     size: PropTypes.number.isRequired,
     trackColor: PropTypes.oneOf(['gray']),
+    touchEnabled: PropTypes.bool,
     zIndex: PropTypes.number,
     verticalTop: PropTypes.number
   }
@@ -92,6 +93,8 @@ class Scrollbar extends React.PureComponent {
 
   _onRefFace = (ref) => this._faceRef = ref;
 
+  _onRefRoot = (ref) => this._rootRef = ref;
+
   render() /*?object*/ {
     if (!this.state.scrollable) {
       return null;
@@ -145,6 +148,7 @@ class Scrollbar extends React.PureComponent {
       FixedDataTableTranslateDOMPosition(faceStyle, 0, position, this._initialRender);
     }
 
+    mainStyle.touchAction = 'none';
     mainStyle.zIndex = this.props.zIndex;
 
     if (this.props.trackColor === 'gray') {
@@ -157,10 +161,14 @@ class Scrollbar extends React.PureComponent {
         onBlur={this._onBlur}
         onKeyDown={this._onKeyDown}
         onMouseDown={this._onMouseDown}
+        onTouchCancel={this._onTouchCancel}
+        onTouchEnd={this._onTouchEnd}
+        onTouchMove={this._onTouchMove}
+        onTouchStart={this._onTouchStart}
         onWheel={this._wheelHandler.onWheel}
         className={mainClassName}
         style={mainStyle}
-        tabIndex={0}>
+        ref={this._onRefRoot}>
         <div
           ref={this._onRefFace}
           className={faceClassName}
@@ -186,7 +194,8 @@ class Scrollbar extends React.PureComponent {
     this._mouseMoveTracker = new DOMMouseMoveTracker(
       this._onMouseMove,
       this._onMouseMoveEnd,
-      document.documentElement
+      document.documentElement,
+      this.props.touchEnabled
     );
 
     if (this.props.position !== undefined &&
@@ -322,8 +331,8 @@ class Scrollbar extends React.PureComponent {
       // magically available for browsers somehow.
       var nativeEvent = event.nativeEvent;
       var position = this.state.isHorizontal ?
-        nativeEvent.offsetX || nativeEvent.layerX :
-        nativeEvent.offsetY || nativeEvent.layerY;
+        nativeEvent.offsetX || nativeEvent.layerX || this.getTouchX(nativeEvent) :
+        nativeEvent.offsetY || nativeEvent.layerY || this.getTouchY(nativeEvent);
 
       // MouseDown on the scroll-track directly, move the center of the
       // scroll-face to the mouse position.
@@ -344,7 +353,24 @@ class Scrollbar extends React.PureComponent {
 
     this._mouseMoveTracker.captureMouseMoves(event);
     // Focus the node so it may receive keyboard event.
-    ReactDOM.findDOMNode(this).focus();
+    this._rootRef.focus();
+  }
+
+  _onTouchCancel = (/*object*/ event) => {
+    event.stopPropagation();
+  }
+
+  _onTouchEnd = (/*object*/ event) => {
+    event.stopPropagation();
+  }
+
+  _onTouchMove = (/*object*/ event) => {
+    event.stopPropagation();
+  }
+
+  _onTouchStart = (/*object*/ event) => {
+    event.stopPropagation();
+    this._onMouseDown(event);
   }
 
   _onMouseMove = (/*number*/ deltaX, /*number*/ deltaY) => {
@@ -476,6 +502,14 @@ class Scrollbar extends React.PureComponent {
     }
   }
 
+  getTouchX = (/*object*/ e) => {
+    return Math.round(e.targetTouches[0].pageX - e.target.getBoundingClientRect().x);
+  }
+
+  getTouchY = (/*object*/ e) => {
+    return Math.round(e.targetTouches[0].pageY - e.target.getBoundingClientRect().y);
+  }
+
   _setNextState = (/*object*/ nextState, /*?object*/ props) => {
     props = props || this.props;
     var controlledPosition = props.position;

src/css/layout/ScrollbarLayout.css

@@ -43,7 +43,7 @@
   z-index: 1;
   transition-duration: 250ms;
   transition-timing-function: ease;
-  transition-property: background-color width position;
+  transition-property: width;
 }
 
 /**

src/selectors/roughHeights.js

@@ -126,7 +126,7 @@ function roughHeights(columnProps, elementHeights, rowSettings,
  * @param {{
  *   overflowX: string,
  *   showScrollbarX: boolean,
- * }}
+ * }} scrollFlags
  * @param {number} width
  * @return {ScrollbarState}
  */