Merge branch 'master' of https://github.com/famiprog/fork-fixed-data-…

…table-2.git

build_helpers/buildStaticSite.sh

@@ -1,6 +1,5 @@
 #!/bin/bash
 set -e
-PATH=$(npm bin):$PATH
 
 rm -rf ./__site__
 rm -rf ./__site_prerender__

build_helpers/startSiteDevServer.sh

@@ -1,6 +1,5 @@
 #!/bin/bash
 set -e
-PATH=$(npm bin):$PATH
 
 rm -rf ./__site__
 rm -rf ./__site_prerender__

examples/ColumnGroupsResizeReorderExample.js

@@ -156,6 +156,7 @@ class ColumnGroupsExample extends React.Component {
         rowsCount={dataList.getSize()}
         width={1000}
         height={500}
+        touchScrollEnabled={true}
         {...this.props}
       >
         {this.state.columnGroupOrder.map(function (columnGroupKey, i) {

examples/ReorderExample.js

@@ -90,6 +90,7 @@ class ReorderExample extends React.Component {
         rowsCount={dataList.getSize()}
         width={1000}
         height={500}
+        touchScrollEnabled={true}
         {...this.props}
       >
         {this.state.columnOrder.map(function (columnKey, i) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fixed-data-table-2",
-  "version": "2.0.0",
+  "version": "2.0.5",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
   "main": "dist/cjs/fixed-data-table-2.js",
   "module": "dist/es/fixed-data-table-2.js",

src/FixedDataTable.js

@@ -813,6 +813,7 @@ class FixedDataTable extends React.Component {
           fixedRightColumns={fixedRightColumnGroups}
           scrollableColumns={scrollableColumnGroups}
           visible={true}
+          touchEnabled={touchScrollEnabled}
           onColumnResizeEndCallback={onColumnResizeEndCallback}
           onColumnReorderEndCallback={onColumnReorderEndCallback}
           showScrollbarY={scrollEnabledY}

src/FixedDataTableCell.js

@@ -177,6 +177,7 @@ class FixedDataTableCell extends React.Component {
       isVisible,
       columnKey,
       isHeaderOrFooter,
+      touchEnabled,
       ...props
     } = this.props;
 
@@ -205,6 +206,7 @@ class FixedDataTableCell extends React.Component {
     );
 
     let cellProps = {
+      touchEnabled,
       isVisible,
       isHeader: this.props.isHeader,
       isGroupHeader: this.props.isGroupHeader,

src/FixedDataTableCellDefault.js

@@ -91,6 +91,7 @@ class FixedDataTableCellDefault extends React.Component {
       isGroupHeader,
       maxWidth,
       minWidth,
+      touchEnabled,
       ...props
     } = this.props;
 

src/FixedDataTableCellDefaultDeprecated.js

@@ -96,6 +96,7 @@ class FixedDataTableCellDefault extends React.Component {
       isGroupHeader,
       maxWidth,
       minWidth,
+      touchEnabled,
       ...props
     } = this.props;
 

src/api/apiData.js

@@ -9,11 +9,12 @@
  */
 import columnWidths from '../selectors/columnWidths';
 import shallowEqualSelector from '../helper/shallowEqualSelector';
+import tableHeightsSelector from '../selectors/tableHeights';
 
 const getApiDataSelector = () =>
   shallowEqualSelector(
     [
-      (state) => state.tableSize.height,
+      (state) => tableHeightsSelector(state).componentHeight,
       (state) => state.elementHeights.groupHeaderHeight,
       (state) => state.scrollX,
       (state) => state.maxScrollX,

src/css/layout/fixedDataTableColumnResizerLineLayout.css

@@ -26,7 +26,7 @@
   border-right-width: 1px;
   box-sizing: border-box;
   position: absolute;
-  z-index: 10;
+  z-index: 100;
   pointer-events: none;
 }
 

src/css/style/fixedDataTableColumnResizerLine.css

@@ -16,5 +16,4 @@
 .public/fixedDataTableColumnResizerLine/main {
   border-color: #0284ff;
   width: 1px;
-  position: fixed;
 }

src/index.js

@@ -20,7 +20,7 @@ import { FixedDataTableContext as Context } from './FixedDataTableContext';
 import ResizeCell from './plugins/ResizeReorder/ResizeCell';
 import ReorderCell from './plugins/ResizeReorder/ReorderCell';
 
-const version = '2.0.0';
+const version = '2.0.5';
 
 const Plugins = {
   ResizeCell,

src/plugins/ResizeReorder/ReorderCell.js

@@ -115,11 +115,10 @@ class ReorderCell extends React.PureComponent {
       onColumnReorderStart,
       onColumnReorderEnd,
       reorderStartEvent,
+      children,
       ...props
     } = this.props;
 
-    const { children, left } = props;
-
     let className = joinClasses(
       cx({
         'public/fixedDataTableCell/resizeReorderCellContainer': true,
@@ -167,17 +166,27 @@ class ReorderCell extends React.PureComponent {
 
     return (
       <div
+        ref={this.setReorderHandle}
         className={cx({
           'fixedDataTableCellLayout/columnReorderContainer': true,
           'fixedDataTableCellLayout/columnReorderContainer/active': false,
         })}
-        onMouseDown={this.onMouseDown}
-        onTouchStart={this.onTouchStart}
         style={style}
       />
     );
   }
 
+  setReorderHandle = (element) => {
+    if (element) {
+      element.addEventListener('mousedown', this.onMouseDown, {
+        passive: false,
+      });
+      element.addEventListener('touchstart', this.onTouchStart, {
+        passive: false,
+      });
+    }
+  };
+
   onTouchStart = (ev) => {
     if (!this.props.touchEnabled) {
       return;

src/plugins/ResizeReorder/ResizerKnob.js

@@ -35,11 +35,6 @@ class ResizerKnob extends React.PureComponent {
      * @type {number} Total displacement of mouse calculated from initial position when resizing started
      */
     totalDisplacement: 0,
-
-    /**
-     * @type {number} Top position of ResizerKnow. It is passed to ResizerLine to render at appropriate position.
-     */
-    top: 0,
   };
 
   state = { ...this.initialState };
@@ -48,7 +43,7 @@ class ResizerKnob extends React.PureComponent {
    * Ref to ResizerKnob
    * @type {HTMLDivElement}
    */
-  curRef = null;
+  resizerKnobRef = null;
 
   /**
    *
@@ -61,9 +56,11 @@ class ResizerKnob extends React.PureComponent {
   }
 
   componentDidMount() {
-    this.setState({
-      top: this.curRef.getBoundingClientRect().top,
-    });
+    this.setupHandlers();
+  }
+
+  componentWillUnmount() {
+    this.cleanupHandlers();
   }
 
   render() {
@@ -75,25 +72,65 @@ class ResizerKnob extends React.PureComponent {
         height={this.props.resizerLineHeight}
         visible={!!this.state.isColumnResizing}
         left={this.state.currentMouseXCoordinate}
-        top={this.state.top}
+        parentRef={this.resizerKnobRef}
       />
     );
 
     return (
       <div
         className={cx('fixedDataTableCellLayout/columnResizerContainer')}
-        ref={(element) => (this.curRef = element)}
+        ref={this.setResizerKnobRef}
         style={resizerKnobStyle}
-        onMouseDown={this.onMouseDown}
-        onTouchStart={this.props.touchEnabled ? this.onMouseDown : null}
-        onTouchEnd={this.props.touchEnabled ? this.suppressEvent : null}
-        onTouchMove={this.props.touchEnabled ? this.suppressEvent : null}
       >
         {resizerLine}
       </div>
     );
   }
 
+  setResizerKnobRef = (element) => {
+    this.resizerKnobRef = element;
+  };
+
+  setupHandlers() {
+    // TODO (pradeep): Remove these and pass to our knob component directly after React
+    // provides an API where event handlers can be specified to be non-passive (facebook/react#6436).
+    this.resizerKnobRef.addEventListener('mousedown', this.onMouseDown, {
+      passive: false,
+    });
+    this.resizerKnobRef.addEventListener('touchstart', this.onTouchStart, {
+      passive: false,
+    });
+    this.resizerKnobRef.addEventListener(
+      'touchmove',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+    this.resizerKnobRef.addEventListener(
+      'touchend',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+  }
+
+  cleanupHandlers() {
+    this.resizerKnobRef.removeEventListener('mousedown', this.onMouseDown, {
+      passive: false,
+    });
+    this.resizerKnobRef.removeEventListener('touchstart', this.onTouchStart, {
+      passive: false,
+    });
+    this.resizerKnobRef.removeEventListener(
+      'touchmove',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+    this.resizerKnobRef.removeEventListener(
+      'touchend',
+      this.suppressEventIfInTouchMode,
+      { passive: false }
+    );
+  }
+
   /**
    * Registers event listeners for mouse tracking
    * @param {MouseEvent} event
@@ -108,13 +145,25 @@ class ResizerKnob extends React.PureComponent {
     this.mouseMoveTracker.captureMouseMoves(event);
   };
 
+  /**
+   * @param {TouchEvent} event The touch start event
+   */
+  onTouchStart = (event) => {
+    if (this.props.touchEnabled) {
+      this.onMouseDown(event);
+    }
+  };
+
   /**
    * @param {MouseEvent} ev Mouse down event
    */
   onMouseDown = (ev) => {
     this.initializeDOMMouseMoveTracker(ev);
     const initialMouseXCoordinate =
-      FixedDataTableEventHelper.getCoordinatesFromEvent(ev).x;
+      FixedDataTableEventHelper.getCoordinatesFromEvent(ev).x -
+      ev.currentTarget
+        .closest(cx('.fixedDataTableLayout/main'))
+        .getBoundingClientRect().left;
     this.setState({
       initialMouseXCoordinate,
       isColumnResizing: true,
@@ -185,7 +234,10 @@ class ResizerKnob extends React.PureComponent {
   /**
    * @param {Object} event
    */
-  suppressEvent = (event) => {
+  suppressEventIfInTouchMode = (event) => {
+    if (!this.props.touchEnabled) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
   };

src/plugins/ResizeReorder/ResizerLine.js

@@ -39,24 +39,29 @@ class ResizerLine extends React.PureComponent {
     left: PropTypes.number.isRequired,
 
     /**
-     * Top position of resizer line
+     * The parent HTML Element.
      */
-    top: PropTypes.number.isRequired,
+    parentRef: PropTypes.object,
   };
 
   render() {
     if (!this.props.visible) {
       return null;
     }
 
+    const tableRef = this.getTableRef();
+    if (!tableRef) {
+      return null;
+    }
+
     const style = {
       height: this.props.height,
-      top: this.props.top,
+      top: 0,
       left: this.props.left,
     };
 
     return (
-      <Portal>
+      <Portal node={tableRef}>
         <div
           className={joinClasses(
             cx('fixedDataTableColumnResizerLineLayout/main'),
@@ -72,6 +77,15 @@ class ResizerLine extends React.PureComponent {
       </Portal>
     );
   }
+
+  getTableRef() {
+    const parentRef = this.props.parentRef;
+    if (!parentRef) {
+      return null;
+    }
+
+    return parentRef.closest(cx('.fixedDataTableLayout/main'));
+  }
 }
 
 export default ResizerLine;

src/reducers/index.js

@@ -30,7 +30,8 @@ import updateRowHeight from './updateRowHeight';
  * @typedef {{
  *   rowBufferSet: IntegerBufferSet,
  *   rowOffsetIntervalTree: PrefixIntervalTree,
- *   storedHeights: !Array.<number>
+ *   storedHeights: !Array.<number>,
+ *   rowUntilOffsetsAreExact: number
  * }}
  */
 const InternalState = {};
@@ -129,6 +130,7 @@ function createInternalState() {
     rowBufferSet: new IntegerBufferSet(),
     rowOffsetIntervalTree: null, // PrefixIntervalTree
     storedHeights: [],
+    rowUntilOffsetsAreExact: 0,
   };
 }
 
@@ -210,7 +212,6 @@ const slice = createSlice({
       state.scrolling = true;
       state.scrollX = scrollX;
     },
-
     updateRowHeights(state, action) {
       let firstUpdatedRowIndex = action.payload || 0;
       if (firstUpdatedRowIndex >= state.rowSettings.rowsCount) {