fixed-data-table-2 - npm Package Compare versions

Comparing version 1.0.0-beta.10 to 1.0.0-beta.11

docs/api/ColumnAPI.md

@@ -25,2 +25,10 @@ <!-- File generated from "src/FixedDataTableColumn.js" -->
 
+### `fixedRight`
+
+Controls if the column is fixed to the right side of the table when scrolling in the X axis.
+
+type: `bool`
+defaultValue: `false`
+
+
 ### `header`
@@ -27,0 +35,0 @@

docs/api/TableAPI.md

@@ -124,2 +124,16 @@ <!-- File generated from "src/FixedDataTable.js" -->
 
+### `keyboardScrollEnabled`
+
+Boolean flags to control if scrolling with keys is enabled
+
+type: `bool`
+defaultValue: `false`
+
+
+### `keyboardPageEnabled`
+
+type: `bool`
+defaultValue: `false`
+
+
 ### `showScrollbarX`
@@ -321,2 +335,9 @@
 
+### `stopReactWheelPropagation`
+
+If enabled scroll events will not be propagated outside of the table.
+
+type: `bool`
+
+
 ### `stopScrollPropagation`
@@ -346,2 +367,9 @@
 
+### `onRowContextMenu`
+
+Callback that is called when a contextual-menu event happens on a row.
+
+type: `func`
+
+
 ### `onRowDoubleClick`
@@ -348,0 +376,0 @@

examples/TouchScrollExample.js

@@ -21,6 +21,14 @@ /**
   render() {
-    let {dataList, collapsedRows} = this.state;
+    const { dataList } = this.state;
 
+    // Recent browser versions are making touch events passive by default. Unfortunately, React doesn't allow us
+    // to specify the event handlers as passive/active (see #6436 on facebook/react). This can lead to unneeded
+    // scrolling of parent containers of FDT. This style is a work around to fix this. By applying 'none' to
+    // touch-action, we are disabling touch events from propagating.
+    const tableParentStyle = {
+      'touch-action': 'none'
+    };
+
     return (
-      <div>
+      <div style={tableParentStyle}>
         <Table
@@ -27,0 +35,0 @@ rowHeight={50}

internal/ActionTypes.js

@@ -19,5 +19,7 @@ /**
 var PROP_CHANGE = exports.PROP_CHANGE = 'PROP_CHANGE';
+var SCROLL_START = exports.SCROLL_START = 'SCROLL_START';
 var SCROLL_END = exports.SCROLL_END = 'SCROLL_END';
-var SCROLL_START = exports.SCROLL_START = 'SCROLL_START';
+var SCROLL_JUMP_X = exports.SCROLL_JUMP_X = 'SCROLL_JUMP_X';
+var SCROLL_JUMP_Y = exports.SCROLL_JUMP_Y = 'SCROLL_JUMP_Y';
 var SCROLL_TO_X = exports.SCROLL_TO_X = 'SCROLL_TO_X';
 var SCROLL_TO_Y = exports.SCROLL_TO_Y = 'SCROLL_TO_Y';

internal/columnStateHelper.js

@@ -56,2 +56,5 @@ /**
 
+  // if scrollX changed due to scrollLeft or scrollToColumn, then set scrollJumpedX
+  var scrollJumpedX = scrollX != state.scrollX;
+
   var _columnWidths = (0, _columnWidths6.default)(state),
@@ -70,3 +73,4 @@ maxScrollX = _columnWidths.maxScrollX;
     maxScrollX: maxScrollX,
-    scrollX: scrollX
+    scrollX: scrollX,
+    scrollJumpedX: scrollJumpedX
   });
@@ -73,0 +77,0 @@ };

internal/FixedDataTable.js

@@ -206,7 +206,8 @@ 'use strict';
       var _scrollbarsVisible = (0, _scrollbarsVisible4.default)(_this.props),
-          scrollEnabledY = _scrollbarsVisible.scrollEnabledY;
+          scrollEnabledY = _scrollbarsVisible.scrollEnabledY,
+          scrolling = _scrollbarsVisible.scrolling;
 
       var props = _this.props;
       return _React2.default.createElement(_FixedDataTableBufferedRows2.default, {
-        isScrolling: _this._isScrolling,
+        isScrolling: scrolling,
         fixedColumns: fixedCellTemplates,
@@ -314,3 +315,4 @@ fixedRightColumns: fixedRightCellTemplates,
           scrollX = _this$props4.scrollX,
-          scrollY = _this$props4.scrollY;
+          scrollY = _this$props4.scrollY,
+          scrolling = _this$props4.scrolling;
       var overflowX = scrollFlags.overflowX,
@@ -320,5 +322,6 @@ overflowY = scrollFlags.overflowY;
 
-      if (!_this._isScrolling) {
+      if (!scrolling) {
         _this._didScrollStart();
       }
+
       var x = scrollX;
@@ -355,3 +358,4 @@ var y = scrollY;
           scrollActions = _this$props5.scrollActions,
-          scrollX = _this$props5.scrollX;
+          scrollX = _this$props5.scrollX,
+          scrolling = _this$props5.scrolling;
 
@@ -363,3 +367,3 @@
 
-      if (!_this._isScrolling) {
+      if (!scrolling) {
         _this._didScrollStart();
@@ -380,3 +384,4 @@ }
           scrollActions = _this$props6.scrollActions,
-          scrollY = _this$props6.scrollY;
+          scrollY = _this$props6.scrollY,
+          scrolling = _this$props6.scrolling;
 
@@ -388,3 +393,3 @@
 
-      if (!_this._isScrolling) {
+      if (!scrolling) {
         _this._didScrollStart();
@@ -404,15 +409,47 @@ }
           scrollX = _this$props7.scrollX,
-          scrollY = _this$props7.scrollY;
+          scrollY = _this$props7.scrollY,
+          scrolling = _this$props7.scrolling;
 
 
-      if (_this._isScrolling) {
+      if (scrolling) {
         return;
       }
 
-      _this._isScrolling = true;
       scrollActions.startScroll();
-
       if (onScrollStart) {
         onScrollStart(scrollX, scrollY, firstRowIndex);
       }
+    }, _this._didScrollJump = function ( /* ?object */nextProps) {
+      var _ref2 = nextProps || _this.props,
+          firstRowIndex = _ref2.firstRowIndex,
+          onScrollEnd = _ref2.onScrollEnd,
+          scrollActions = _ref2.scrollActions,
+          scrollX = _ref2.scrollX,
+          scrollY = _ref2.scrollY,
+          scrollJumpedX = _ref2.scrollJumpedX,
+          scrollJumpedY = _ref2.scrollJumpedY,
+          onHorizontalScroll = _ref2.onHorizontalScroll,
+          onVerticalScroll = _ref2.onVerticalScroll;
+
+      // no jump happened, so just return
+
+
+      if (!scrollJumpedX && !scrollJumpedY) {
+        return;
+      }
+
+      if (scrollJumpedX) {
+        scrollActions.jumpScrollX();
+        onHorizontalScroll && onHorizontalScroll(scrollX);
+      }
+
+      if (scrollJumpedY) {
+        scrollActions.jumpScrollY();
+        onVerticalScroll && onVerticalScroll(scrollY);
+      }
+
+      // any jump must have happened, so call onScrollEnd
+      if (onScrollEnd) {
+        onScrollEnd(scrollX, scrollY, firstRowIndex);
+      }
     }, _this._didScrollStopSync = function () {
@@ -424,10 +461,10 @@ var _this$props8 = _this.props,
           scrollX = _this$props8.scrollX,
-          scrollY = _this$props8.scrollY;
+          scrollY = _this$props8.scrollY,
+          scrolling = _this$props8.scrolling;
 
 
-      if (!_this._isScrolling) {
+      if (!scrolling) {
         return;
       }
 
-      _this._isScrolling = false;
       scrollActions.stopScroll();
@@ -525,5 +562,3 @@
 
-      // Cancel any pending debounced scroll handling and handle immediately.
-      this._didScrollStop.reset();
-      this._didScrollStopSync();
+      this._didScrollJump(nextProps);
     }
@@ -568,2 +603,3 @@ }, {
           scrollY = _props.scrollY,
+          scrolling = _props.scrolling,
           tableSize = _props.tableSize,
@@ -588,3 +624,3 @@ touchScrollEnabled = _props.touchScrollEnabled;
           key: 'group_header',
-          isScrolling: this._isScrolling,
+          isScrolling: scrolling,
           className: (0, _joinClasses2.default)((0, _cx2.default)('fixedDataTableLayout/header'), (0, _cx2.default)('public/fixedDataTable/header')),
@@ -616,3 +652,4 @@ width: width,
           verticalTop: bodyOffsetTop,
-          position: scrollY
+          position: scrollY,
+          touchEnabled: touchScrollEnabled
         });
@@ -628,3 +665,4 @@ }
           position: scrollX,
-          size: width
+          size: width,
+          touchEnabled: touchScrollEnabled
         });
@@ -651,3 +689,3 @@ }
           key: 'footer',
-          isScrolling: this._isScrolling,
+          isScrolling: scrolling,
           className: (0, _joinClasses2.default)((0, _cx2.default)('fixedDataTableLayout/footer'), (0, _cx2.default)('public/fixedDataTable/footer')),
@@ -672,3 +710,3 @@ width: width,
         key: 'header',
-        isScrolling: this._isScrolling,
+        isScrolling: scrolling,
         className: (0, _joinClasses2.default)((0, _cx2.default)('fixedDataTableLayout/header'), (0, _cx2.default)('public/fixedDataTable/header')),
@@ -714,3 +752,6 @@ width: width,
       }
-
+      var tabIndex = null;
+      if (this.props.keyboardPageEnabled || this.props.keyboardScrollEnabled) {
+        tabIndex = 0;
+      }
       return _React2.default.createElement(
@@ -720,3 +761,3 @@ 'div',
           className: (0, _joinClasses2.default)(className, (0, _cx2.default)('fixedDataTableLayout/main'), (0, _cx2.default)('public/fixedDataTable/main')),
-          tabIndex: 0,
+          tabIndex: tabIndex,
           onKeyDown: this._onKeyDown,
@@ -828,3 +869,2 @@ onWheel: this._wheelHandler.onWheel,
 
-  // TODO (jordan) Remove propType of showScrollbarX & showScrollbarY without losing documentation (moved to scrollFlags)
   /**
@@ -836,2 +876,3 @@ * Boolean flags to control if scrolling with keys is enabled
 
+  // TODO (jordan) Remove propType of showScrollbarX & showScrollbarY without losing documentation (moved to scrollFlags)
   /**
@@ -838,0 +879,0 @@ * Hide the scrollbar but still enable scroll functionality

internal/FixedDataTableContainer.js

@@ -124,3 +124,3 @@ 'use strict';
       var state = this.reduxStore.getState();
-      var boundState = (0, _pick2.default)(state, ['columnGroupProps', 'columnProps', 'columnReorderingData', 'columnResizingData', 'elementHeights', 'elementTemplates', 'firstRowIndex', 'isColumnReordering', 'isColumnResizing', 'maxScrollX', 'maxScrollY', 'rows', 'rowHeights', 'rowSettings', 'scrollContentHeight', 'scrollFlags', 'scrollX', 'scrollY', 'tableSize']);
+      var boundState = (0, _pick2.default)(state, ['columnGroupProps', 'columnProps', 'columnReorderingData', 'columnResizingData', 'elementHeights', 'elementTemplates', 'firstRowIndex', 'isColumnReordering', 'isColumnResizing', 'maxScrollX', 'maxScrollY', 'rows', 'rowHeights', 'rowSettings', 'scrollContentHeight', 'scrollFlags', 'scrollX', 'scrollY', 'scrolling', 'scrollJumpedX', 'scrollJumpedY', 'tableSize']);
 
@@ -127,0 +127,0 @@ this.setState(boundState);

internal/FixedDataTableRoot.js

@@ -39,3 +39,3 @@ /**
 
-FixedDataTableRoot.version = '1.0.0-beta.10';
+FixedDataTableRoot.version = '1.0.0-beta.11';
 module.exports = FixedDataTableRoot;

internal/ReactTouchHandler.js

@@ -111,2 +111,3 @@ /**
     value: function onTouchStart( /*object*/event) {
+
       // Start tracking drag delta for scrolling
@@ -161,2 +162,3 @@ this._lastTouchX = event.touches[0].pageX;
     value: function onTouchMove( /*object*/event) {
+
       var moveX = event.touches[0].pageX;
@@ -163,0 +165,0 @@ var moveY = event.touches[0].pageY;

internal/reducers.js

@@ -120,4 +120,7 @@ /**
     scrollContentHeight: 0,
+    scrollJumpedX: false,
+    scrollJumpedY: false,
     scrollX: 0,
     scrollY: 0,
+    scrolling: false,
 
@@ -176,2 +179,4 @@ /*
 
+        _newState.scrollJumpedY = _scrollAnchor.didScrollToRow;
+
         _newState = _columnStateHelper2.default.initialize(_newState, newProps, oldProps);
@@ -191,2 +196,14 @@
       }
+    case ActionTypes.SCROLL_JUMP_X:
+      {
+        return _extends({}, state, {
+          scrollJumpedX: false
+        });
+      }
+    case ActionTypes.SCROLL_JUMP_Y:
+      {
+        return _extends({}, state, {
+          scrollJumpedY: false
+        });
+      }
     case ActionTypes.SCROLL_START:
@@ -193,0 +210,0 @@ {

internal/roughHeights.js

@@ -155,3 +155,3 @@ 'use strict';
  *   showScrollbarX: boolean,
- * }}
+ * }} scrollFlags
  * @param {number} width
@@ -158,0 +158,0 @@ * @return {ScrollbarState}

internal/scrollActions.js

@@ -13,3 +13,3 @@ /**
 });
-exports.stopScroll = exports.startScroll = exports.scrollToY = exports.scrollToX = undefined;
+exports.jumpScrollY = exports.jumpScrollX = exports.stopScroll = exports.startScroll = exports.scrollToY = exports.scrollToX = undefined;
 
@@ -58,2 +58,20 @@ var _ActionTypes = require('././ActionTypes');
   };
+};
+
+/**
+ * Fire when fdt does a jump scroll due to a jump onto a row
+ */
+var jumpScrollX = exports.jumpScrollX = function jumpScrollX() {
+  return {
+    type: _ActionTypes.SCROLL_JUMP_X
+  };
+};
+
+/**
+ * Fire when fdt does a jump scroll due to a jump onto a column
+ */
+var jumpScrollY = exports.jumpScrollY = function jumpScrollY() {
+  return {
+    type: _ActionTypes.SCROLL_JUMP_Y
+  };
 };

internal/scrollAnchor.js

@@ -24,2 +24,6 @@ /**
 
+var _set = require('lodash/set');
+
+var _set2 = _interopRequireDefault(_set);
+
 var _updateRowHeight = require('./updateRowHeight');
@@ -48,2 +52,3 @@
  *   changed: boolean,
+ *   didScrollToRow: (boolean|undefined),
  * }}
@@ -53,3 +58,4 @@ */
   if (newProps.scrollToRow !== undefined && newProps.scrollToRow !== null && (!oldProps || newProps.scrollToRow !== oldProps.scrollToRow)) {
-    return scrollToRow(state, newProps.scrollToRow);
+    var scrollAnchor = scrollToRow(state, newProps.scrollToRow);
+    return (0, _set2.default)(scrollAnchor, 'didScrollToRow', scrollAnchor.changed);
   }
@@ -56,0 +62,0 @@

internal/Scrollbar.js

@@ -154,2 +154,3 @@ 'use strict';
 
+      mainStyle.touchAction = 'none';
       mainStyle.zIndex = this.props.zIndex;
@@ -168,6 +169,10 @@
           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 },
         _React2.default.createElement('div', {
@@ -194,3 +199,3 @@ ref: this._onRefFace,
     value: function componentDidMount() {
-      this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMouseMove, this._onMouseMoveEnd, document.documentElement);
+      this._mouseMoveTracker = new _DOMMouseMoveTracker2.default(this._onMouseMove, this._onMouseMoveEnd, document.documentElement, this.props.touchEnabled);
 
@@ -226,2 +231,3 @@ if (this.props.position !== undefined && this.state.position !== this.props.position) {
   trackColor: _propTypes2.default.oneOf(['gray']),
+  touchEnabled: _propTypes2.default.bool,
   zIndex: _propTypes2.default.number,
@@ -245,2 +251,6 @@ verticalTop: _propTypes2.default.number
 
+  this._onRefRoot = function (ref) {
+    return _this2._rootRef = ref;
+  };
+
   this.scrollBy = function ( /*number*/delta) {
@@ -347,3 +357,3 @@ _this2._onWheel(delta);
       var nativeEvent = event.nativeEvent;
-      var position = _this2.state.isHorizontal ? nativeEvent.offsetX || nativeEvent.layerX : nativeEvent.offsetY || nativeEvent.layerY;
+      var position = _this2.state.isHorizontal ? nativeEvent.offsetX || nativeEvent.layerX || _this2.getTouchX(nativeEvent) : nativeEvent.offsetY || nativeEvent.layerY || _this2.getTouchY(nativeEvent);
 
@@ -364,5 +374,22 @@ // MouseDown on the scroll-track directly, move the center of the
     // Focus the node so it may receive keyboard event.
-    _ReactDOM2.default.findDOMNode(_this2).focus();
+    _this2._rootRef.focus();
   };
 
+  this._onTouchCancel = function ( /*object*/event) {
+    event.stopPropagation();
+  };
+
+  this._onTouchEnd = function ( /*object*/event) {
+    event.stopPropagation();
+  };
+
+  this._onTouchMove = function ( /*object*/event) {
+    event.stopPropagation();
+  };
+
+  this._onTouchStart = function ( /*object*/event) {
+    event.stopPropagation();
+    _this2._onMouseDown(event);
+  };
+
   this._onMouseMove = function ( /*number*/deltaX, /*number*/deltaY) {
@@ -483,2 +510,10 @@ var props = _this2.props;
 
+  this.getTouchX = function ( /*object*/e) {
+    return Math.round(e.targetTouches[0].pageX - e.target.getBoundingClientRect().x);
+  };
+
+  this.getTouchY = function ( /*object*/e) {
+    return Math.round(e.targetTouches[0].pageY - e.target.getBoundingClientRect().y);
+  };
+
   this._setNextState = function ( /*object*/nextState, /*?object*/props) {
@@ -485,0 +520,0 @@ props = props || _this2.props;

internal/translateDOMPositionXY.js

@@ -39,3 +39,2 @@ /**
         style[TRANSFORM] = 'translate3d(' + x + 'px,' + y + 'px,0)';
-        style[BACKFACE_VISIBILITY] = 'hidden';
       };
@@ -42,0 +41,0 @@ } else {

package.json

 {
   "name": "fixed-data-table-2",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
@@ -41,3 +41,3 @@ "main": "main.js",
     "marked": "^0.3.2",
-    "mocha": "^2.5.3",
+    "mocha": "5.2.0",
     "mocha-loader": "^1.0.0",
@@ -62,2 +62,3 @@ "mocha-webpack": "1.0.0-rc.1",
   "scripts": {
+    "webpack": "webpack",
     "site-dev-server": "./build_helpers/startSiteDevServer.sh",
@@ -64,0 +65,0 @@ "site-build": "./build_helpers/buildStaticSite.sh",

README.md

@@ -41,3 +41,3 @@ Fixed Data Table 2 for React ![Travic CI status](https://api.travis-ci.org/schrodinger/fixed-data-table-2.svg?branch=master) [![npm version](https://badge.fury.io/js/fixed-data-table-2.svg)](https://www.npmjs.com/package/fixed-data-table-2)
 
-`<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.
 
@@ -54,3 +54,2 @@ ```javascript
     headerHeight={50}
-    data={rows}>
     ...
@@ -57,0 +56,0 @@ </Table>

test/reducers/columnStateHelper-test.js

@@ -206,2 +206,3 @@ /**
         scrollX: 300,
+        scrollJumpedX: false,
       };
@@ -252,2 +253,3 @@ availableWidth = 200;
         scrollX: 100,
+        scrollJumpedX: true,
       }));
@@ -278,2 +280,3 @@ });
         scrollX: 100,
+        scrollJumpedX: true,
       }));
@@ -292,2 +295,3 @@ });
         scrollX: 150,
+        scrollJumpedX: true,
       }));
@@ -322,3 +326,3 @@ });
 
-    it('should not change scroll when column is unchange', function() {
+    it('should not change scroll when column is unchanged', function() {
       oldState.scrollX = 250;
@@ -325,0 +329,0 @@ availableWidth = 350;

test/reducers/scrollAnchor-test.js

@@ -105,2 +105,3 @@ /**
         changed: true,
+        didScrollToRow: true,
       });
@@ -118,2 +119,3 @@ });
         changed: true,
+        didScrollToRow: true,
       });
@@ -133,2 +135,3 @@ });
         changed: false,
+        didScrollToRow: false,
       });
@@ -148,2 +151,3 @@ });
         changed: true,
+        didScrollToRow: true,
       });
@@ -161,2 +165,3 @@ });
         changed: true,
+        didScrollToRow: true,
       });
@@ -174,2 +179,3 @@ });
         changed: true,
+        didScrollToRow: true,
       });
@@ -176,0 +182,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

1606383

increased by5.02%

Number of low supply chain risk alerts

17

decreased by-5.56%

Worsened metrics

Number of package files

132

decreased by-2.94%

Lines of code

27817

decreased by-1.1%

Number of lines in readme file

208

decreased by-0.48%

No dependency changes