Fixed scrolling multiple tables

Author: easeq

src/hoc/withScrollSpy.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, { Component, useRef, useState, useEffect, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import ConfigContext from '../context';
+import { isUndefined } from '../utils';
 
 export let scrollerMap = {};
 
@@ -10,10 +11,14 @@ const withScrollSpy = WrappedComponent => (props) => {
     const id = _.uniqueId(name);
     const ref = useRef(null);
     const [ scrollData, setScrollData ] = useState({ top: 0, pointerEvents: 'none' });
-    const { getData, minWidth, config: { height } } = useContext(ConfigContext);
+    const { getData, minWidth, config: { name: tableName, height } } = useContext(ConfigContext);
 
     const handleScroll = (event) => {
-        _.map(scrollerMap, (ref, key, index) => (
+        if (isUndefined(scrollerMap[tableName])) {
+            return;
+        }
+
+        _.map(scrollerMap[tableName], (ref, key, index) => (
             ref.current.scrollLeft = event.target.scrollLeft
         ));
 
@@ -27,14 +32,18 @@ const withScrollSpy = WrappedComponent => (props) => {
             ref.current.removeEventListener('scroll', handleScroll, true);
             ref.current.addEventListener('scroll', handleScroll, true);
         } else {
-            scrollerMap[id] = ref;
+            if (isUndefined(scrollerMap[tableName])) {
+                scrollerMap[tableName] = {};
+            }
+
+            scrollerMap[tableName][id] = ref;
         }
 
         return () => {
             if (name === 'Body') {
                 ref.current.removeEventListener('scroll', handleScroll, true);
             } else {
-                delete scrollerMap[id];
+                delete scrollerMap[tableName][id];
             }
         };
     }, [ handleScroll ]);