Merge pull request #21 from qlik-oss/feature/QPE-474

[QPE-474] replace jquery scroll linking

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.1.2",
+    "@babel/plugin-proposal-class-properties": "7.3.3",
     "@babel/plugin-transform-async-to-generator": "7.1.0",
     "@babel/polyfill": "7.0.0",
     "@babel/preset-env": "7.1.0",

src/linked-scroll/index.js

@@ -0,0 +1,2 @@
+export { default as LinkedScrollWrapper } from './linked-scroll-wrapper.jsx';
+export { default as LinkedScrollSection } from './linked-scroll-section.jsx';

src/linked-scroll/linked-scroll-section.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { LinkedScrollContext } from './linked-scroll-wrapper.jsx';
+
+class LinkedScrollSection extends React.PureComponent {
+  static contextType = LinkedScrollContext;
+
+  componentDidMount () {
+    const { link } = this.context;
+    link(this);
+  }
+
+  componentWillUnmount () {
+    const { unlink } = this.context;
+    unlink(this);
+  }
+
+  render () {
+    const { children } = this.props;
+
+    return children;
+  }
+}
+
+LinkedScrollSection.propTypes = {
+  children: PropTypes.any
+};
+
+export default LinkedScrollSection;

src/linked-scroll/linked-scroll-wrapper.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+export const LinkedScrollContext = React.createContext();
+
+class LinkedScrollWrapper extends React.PureComponent {
+  constructor (props) {
+    super(props);
+
+    this.linkComponent = this.linkComponent.bind(this);
+    this.unlinkComponent = this.unlinkComponent.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.scrollElements = [];
+
+    this.linkActions = {
+      link: this.linkComponent,
+      unlink: this.unlinkComponent
+    };
+  }
+
+  linkComponent (component) {
+    // eslint-disable-next-line react/no-find-dom-node
+    const node = ReactDOM.findDOMNode(component);
+    const element = {
+      component,
+      node
+    };
+    this.scrollElements.push(element);
+    node.onscroll = this.handleScroll.bind(this, element);
+  }
+
+  unlinkComponent (component) {
+    const componentIndex = this.scrollElements.map(element => element.component).indexOf(component);
+    if (componentIndex !== -1) {
+      this.scrollElements.removeAt(componentIndex);
+      // eslint-disable-next-line react/no-find-dom-node
+      const node = ReactDOM.findDOMNode(component);
+      node.onscroll = null;
+    }
+  }
+
+  handleScroll (element) {
+    window.requestAnimationFrame(() => {
+      this.sync(element);
+    });
+  }
+
+  sync (scrollElement) {
+    this.scrollElements.forEach(element => {
+      if (scrollElement === element) {
+        return;
+      }
+      element.node.onscroll = null;
+      if (element.component.props.linkHorizontal) {
+        element.node.scrollLeft = scrollElement.node.scrollLeft;
+      }
+
+      if (element.component.props.linkVertical) {
+        element.node.scrollTop = scrollElement.node.scrollTop;
+      }
+      window.requestAnimationFrame(() => {
+        element.node.onscroll = this.handleScroll.bind(this, element);
+      });
+    });
+  }
+
+  render () {
+    const { children } = this.props;
+    return (
+      <LinkedScrollContext.Provider value={this.linkActions}>
+        {children}
+      </LinkedScrollContext.Provider>
+    );
+  }
+}
+
+LinkedScrollWrapper.propTypes = {
+  children: PropTypes.any
+};
+
+export default LinkedScrollWrapper;

src/main.less

@@ -12,8 +12,6 @@
   }
 
 	div.qv-object-content-container {
-		overflow-x: scroll;
-		overflow-y: hidden;
 		z-index: 110;
 	}
 
@@ -151,12 +149,6 @@
   	width: 350px;
   }
 
-  .header-wrapper {
-  	position: absolute;
-  	top: 0;
-  	z-index: 1;
-  }
-
   /*popups for headers*/
   .tooltip {
   	position: fixed !important;
@@ -168,11 +160,7 @@
 
   /*end popups*/
   .row-wrapper {
-  	position: absolute;
-  	top: 97px;
   	height: calc(~"100% - 97px");
-  	overflow-x: hidden;
-  	overflow-y: scroll;
   	padding: 0;
   	margin-top: 0;
   }
@@ -188,30 +176,54 @@
   .kpi-table {
   	width: @KpiTableWidth !important;
   	overflow: hidden !important;
-  	display: table;
-  	height: 100%;
+    height: 100%;
   	margin: 0;
   	padding: 0;
-  	z-index: 100;
   	position: absolute;
   	top: 0;
   	left: 0;
   	border-right: 1px solid white;
   	box-shadow: 4px 2px 8px #e1e1e1;
-  }
 
-  .kpi-table .row-wrapper {
-  	overflow: hidden;
+    .row-wrapper {
+    	height: calc(~"100% - 97px");
+      overflow: scroll;
+      position: absolute;
+    	padding: 0;
+    	margin-top: 0;
+    }
   }
 
   .data-table {
-  	width: 272px !important;
-  	float: left;
-  	display: table;
   	height: 100%;
-  	z-index: 90;
+    width: calc(100% - 243px);
   	position: absolute;
   	margin-left: @KpiTableWidth + 13px;
-  	-ms-overflow-style: none;
+
+    .header-wrapper {
+      overflow: scroll;
+      width: 100%;
+    }
+
+    .row-wrapper {
+    	height: calc(~"100% - 97px");
+      width: 100%;
+      overflow: scroll;
+    	padding: 0;
+    	margin-top: 0;
+    }
+  }
+
+  // hide scrollbars
+  .kpi-table .header-wrapper,
+  .kpi-table .row-wrapper,
+  .data-table .header-wrapper,
+  .data-table .row-wrapper {
+    -ms-overflow-style: none;  // IE 10+
+    -moz-overflow: -moz-scrollbars-none;  // Firefox
+
+    &::-webkit-scrollbar {
+      display: none;  // Safari and Chrome
+    }
   }
 }