master: Fixes header scroll issue. Coses #201

packages/ui/screens/Results/ResultsTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { UIEventHandler, HTMLAttributes } from 'react';
 import ReactTable, { ReactTableDefaults, GlobalColumn, Column, CellInfo, RowInfo, Filter } from 'react-table';
 import ReactDOM from 'react-dom';
 import Menu from './../../components/Menu';
@@ -42,6 +42,28 @@ const FilterComponent = ({ filter = { value: '' }, column, onChange }) => {
   );
 };
 
+const TbodyComponent = React.forwardRef<any, { onScroll: UIEventHandler<HTMLDivElement> } & HTMLAttributes<any>>(({ onScroll, ...props }, ref) => {
+  for (let i = 0; i < props.children[0].length; i++) {
+    props.children[0][i] = React.cloneElement(props.children[0][i], {
+      minWidth: props.style.minWidth
+    });
+  }
+
+  return <div className="rt-tbody" id="tbody" onScroll={onScroll} ref={ref}>{props.children}</div>;
+});
+
+const TrGroupComponent = props => {
+  return (
+    <div
+      className="rt-tr-group"
+      role="rowgroup"
+      style={{ minWidth: props.minWidth }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
 // @TODO: use the real column types here instead of a sample;
 const getSizeForItem = (colname: string, sample: any): Column => {
   const props: Column = {
@@ -73,6 +95,7 @@ interface ResultsTableProps {
   connId: string;
 }
 interface ResultsTableState {
+  page: number,
   filtered: { [id: string]: Filter & { regex: RegExp | string } };
   clickedData: {
     value: any,
@@ -88,6 +111,7 @@ interface ResultsTableState {
 
 export default class ResultsTable extends React.PureComponent<ResultsTableProps, ResultsTableState> {
   static initialState: ResultsTableState = {
+    page: 0,
     filtered: {},
     clickedData: {
       value: undefined,
@@ -235,6 +259,8 @@ export default class ResultsTable extends React.PureComponent<ResultsTableProps,
     }, () => cb ? cb(value) : void 0);
   }
 
+  onPageChange = (page: number) => this.setState({ page });
+
   onMenuSelect = (choice: string) => {
     const { clickedData } = this.state;
     switch(choice) {
@@ -308,51 +334,39 @@ export default class ResultsTable extends React.PureComponent<ResultsTableProps,
     this.onTableClick();
   }
 
-  handleScroll(event) {
-    let headers = document.getElementsByClassName("rt-thead");
-    for (let i = 0; i < headers.length; i++) {
-      headers[i].scrollLeft = event.target.scrollLeft;
-    }
-  }
-
-  _tBodyComponent: Element = null;
-
-  componentDidMount() {
-    try {
-      this.componentWillUnmount();
-    } catch (error) { };
-    setTimeout(() => {
-      this._tBodyComponent = document.getElementsByClassName("rt-tbody")[0];
-      this._tBodyComponent && this._tBodyComponent.addEventListener("scroll", this.handleScroll);
-    }, 300);
+  handleScroll = () => {
+    const tbody = this.tbodyRef && this.tbodyRef.current;
+    if (!tbody) return;
+    let headers = document.querySelectorAll('.rt-thead') || [];
+    headers.forEach(header => {
+      header.scrollLeft = tbody.scrollLeft
+    });
   }
 
-  componentWillUnmount() {
-    this._tBodyComponent && this._tBodyComponent.removeEventListener("scroll", this.handleScroll);
-  }
+  tbodyRef = React.createRef<HTMLDivElement>();
 
   getSnapshotBeforeUpdate() {
     try {
-      if (document.getElementsByClassName("rt-tbody")[0]) {
-        const { scrollHeight, scrollLeft, scrollTop, scrollWidth } = document.getElementsByClassName("rt-tbody")[0];
+      const tbody = this.tbodyRef && this.tbodyRef.current;
+      if (tbody) {
+        const { scrollHeight, scrollLeft, scrollTop, scrollWidth } = tbody;
         return {
           scrollHeight, scrollLeft, scrollTop, scrollWidth
         };
       }
-    } catch (e) {
-      return null;
-    }
+    } catch (e) { }
     return null;
   }
 
   componentDidUpdate(_, __, snapshot) {
-    if (
-        snapshot !== null
-        && document.getElementsByClassName("rt-tbody")[0]
-      ) {
-      document.getElementsByClassName("rt-tbody")[0].scrollLeft = snapshot.scrollLeft;
-      document.getElementsByClassName("rt-tbody")[0].scrollTop = snapshot.scrollTop;
-    }
+    if (!snapshot) return;
+
+    const tbody = this.tbodyRef && this.tbodyRef.current;
+
+    if (!tbody) return;
+
+    tbody.scrollLeft = snapshot.scrollLeft;
+    tbody.scrollTop = snapshot.scrollTop;
   }
 
   render() {
@@ -362,27 +376,6 @@ export default class ResultsTable extends React.PureComponent<ResultsTableProps,
       delete cols[0].width;
     }
 
-    const TbodyComponent = props => {
-      for (let i = 0; i < props.children[0].length; i++) {
-        props.children[0][i] = React.cloneElement(props.children[0][i], {
-          minWidth: props.style.minWidth
-        });
-      }
-
-      return <div className="rt-tbody">{props.children}</div>;
-    };
-
-    const TrGroupComponent = props => {
-      return (
-        <div
-          className="rt-tr-group"
-          role="rowgroup"
-          style={{ minWidth: props.minWidth }}
-        >
-          {props.children}
-        </div>
-      );
-    };
     return (
       <div onContextMenu={this.openContextMenu} onClick={this.onTableClick} className="react-table-clickable">
         <ReactTable
@@ -402,6 +395,8 @@ export default class ResultsTable extends React.PureComponent<ResultsTableProps,
               return { className: ' active-row' };
             return {};
           }}
+          onPageChange={this.onPageChange}
+          page={this.state.page}
           getTdProps={(_, rowInfo: RowInfo, column: Column) => {
             if (!rowInfo || !column) return {};
             try {
@@ -434,7 +429,7 @@ export default class ResultsTable extends React.PureComponent<ResultsTableProps,
             return position !== -1;
           }}
           className="-striped -highlight"
-          TbodyComponent={TbodyComponent}
+          TbodyComponent={(props) => <TbodyComponent {...props} onScroll={this.handleScroll} ref={this.tbodyRef} />}
           TrGroupComponent={TrGroupComponent}
           style={{
             width: '100%',