feat: Add scroll sync groups (#11)

* add groups to react-scroll-sync
* update docs

Author: Filip-rspective

src/ScrollSync.js

@@ -33,41 +33,51 @@ export default class ScrollSync extends Component {
     }
   }
 
-  panes = []
+  panes = {}
 
-  registerPane = (node) => {
-    if (!this.findPane(node)) {
-      this.addEvents(node)
-      this.panes.push(node)
+  registerPane = (node, group) => {
+    if (!this.panes[group]) {
+      this.panes[group] = []
+    }
+
+    if (!this.findPane(node, group)) {
+      this.addEvents(node, group)
+      this.panes[group].push(node)
     }
   }
 
-  unregisterPane = (node) => {
-    if (this.findPane(node)) {
+  unregisterPane = (node, group) => {
+    if (this.findPane(node, group)) {
       this.removeEvents(node)
-      this.panes.splice(this.panes.indexOf(node), 1)
+      this.panes[group].splice(this.panes[group].indexOf(node), 1)
     }
   }
 
-  addEvents = (node) => {
+  addEvents = (node, group) => {
     /* For some reason element.addEventListener doesnt work with document.body */
-    node.onscroll = this.handlePaneScroll.bind(this, node) // eslint-disable-line
+    node.onscroll = this.handlePaneScroll.bind(this, node, group) // eslint-disable-line
   }
 
   removeEvents = (node) => {
     /* For some reason element.removeEventListener doesnt work with document.body */
     node.onscroll = null // eslint-disable-line
   }
 
-  findPane = node => this.panes.find(pane => pane === node)
+  findPane = (node, group) => {
+    if (!this.panes[group]) {
+      return false
+    }
+
+    return this.panes[group].find(pane => pane === node)
+  }
 
-  handlePaneScroll = (node) => {
+  handlePaneScroll = (node, group) => {
     window.requestAnimationFrame(() => {
-      this.syncScrollPositions(node)
+      this.syncScrollPositions(node, group)
     })
   }
 
-  syncScrollPositions = (scrolledPane) => {
+  syncScrollPositions = (scrolledPane, group) => {
     const {
       scrollTop,
       scrollHeight,
@@ -82,11 +92,11 @@ export default class ScrollSync extends Component {
 
     const { proportional, vertical, horizontal } = this.props
 
-    this.panes.forEach((pane) => {
+    this.panes[group].forEach((pane) => {
       /* For all panes beside the currently scrolling one */
       if (scrolledPane !== pane) {
         /* Remove event listeners from the node that we'll manipulate */
-        this.removeEvents(pane)
+        this.removeEvents(pane, group)
         /* Calculate the actual pane height */
         const paneHeight = pane.scrollHeight - clientHeight
         const paneWidth = pane.scrollWidth - clientWidth
@@ -99,7 +109,7 @@ export default class ScrollSync extends Component {
         }
         /* Re-attach event listeners after we're done scrolling */
         window.requestAnimationFrame(() => {
-          this.addEvents(pane)
+          this.addEvents(pane, group)
         })
       }
     })

src/ScrollSyncPane.js

@@ -17,7 +17,12 @@ export default class ScrollSyncPane extends Component {
 
   static propTypes = {
     children: PropTypes.node.isRequired,
-    attachTo: PropTypes.object
+    attachTo: PropTypes.object,
+    group: PropTypes.string
+  }
+
+  static defaultProps = {
+    group: 'default'
   }
 
   static contextTypes = {
@@ -27,11 +32,18 @@ export default class ScrollSyncPane extends Component {
 
   componentDidMount() {
     this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
-    this.context.registerPane(this.node)
+    this.context.registerPane(this.node, this.props.group)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.group !== nextProps.group) {
+      this.context.unregisterPane(this.node, this.props.group)
+      this.context.registerPane(this.node, nextProps.group)
+    }
   }
 
   componentWillUnmount() {
-    this.context.unregisterPane(this.node)
+    this.context.unregisterPane(this.node, this.props.group)
   }
 
   render() {

src/example.md

@@ -45,3 +45,60 @@ To use ScrollSync you have to wrap your scrollable content (ensure that you have
 
 Sometimes it is useful to attach the `onScroll` event listener to a different node (for example 
 to a `document.body`). Use `attachTo` prop for that.
+
+Additionally sometimes there is need to use few independent scroll groups inside one ScrollSync.
+Provide an arbitrary group name in the `group` prop to ScrollSyncPane components to limit synchronization to panes with that group name. 
+
+```
+<ScrollSync>
+  <div style={{ display: 'flex', position: 'relative', height: 300 }}>
+    <ScrollSyncPane group="one">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 500 }}>
+          <h1>Left Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane group="two">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 1000 }}>
+          <h1>Middle Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+
+    <ScrollSyncPane group="one">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 2000 }}>
+          <h1>Right Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+    
+    <ScrollSyncPane group="two">
+      <div style={{overflow: 'auto'}}>
+        <section style={{ height: 2000 }}>
+          <h1>Right Pane Content</h1>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
+            dolorum
+            est eum eveniet exercitationem iste labore minus, neque nobis odit officiis omnis
+            possimus quasi rerum sed soluta veritatis.</p>
+        </section>
+      </div>
+    </ScrollSyncPane>
+  </div>
+</ScrollSync>
+```