react-scroll-sync - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

dist/index.js

@@ -130,27 +130,35 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	
-	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScrollSync.__proto__ || Object.getPrototypeOf(ScrollSync)).call.apply(_ref, [this].concat(args))), _this), _this.panes = [], _this.registerPane = function (node) {
-	      if (!_this.findPane(node)) {
-	        _this.addEvents(node);
-	        _this.panes.push(node);
+	    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ScrollSync.__proto__ || Object.getPrototypeOf(ScrollSync)).call.apply(_ref, [this].concat(args))), _this), _this.panes = {}, _this.registerPane = function (node, group) {
+	      if (!_this.panes[group]) {
+	        _this.panes[group] = [];
 	      }
-	    }, _this.unregisterPane = function (node) {
-	      if (_this.findPane(node)) {
+	
+	      if (!_this.findPane(node, group)) {
+	        _this.addEvents(node, group);
+	        _this.panes[group].push(node);
+	      }
+	    }, _this.unregisterPane = function (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);
 	      }
-	    }, _this.addEvents = function (node) {
+	    }, _this.addEvents = function (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
 	    }, _this.removeEvents = function (node) {
 	      /* For some reason element.removeEventListener doesnt work with document.body */
 	      node.onscroll = null; // eslint-disable-line
-	    }, _this.findPane = function (node) {
-	      return _this.panes.find(function (pane) {
+	    }, _this.findPane = function (node, group) {
+	      if (!_this.panes[group]) {
+	        return false;
+	      }
+	
+	      return _this.panes[group].find(function (pane) {
 	        return pane === node;
 	      });
-	    }, _this.handlePaneScroll = function (node) {
+	    }, _this.handlePaneScroll = function (node, group) {
 	      window.requestAnimationFrame(function () {
-	        _this.syncScrollPositions(node);
+	        _this.syncScrollPositions(node, group);
 	      });
-	    }, _this.syncScrollPositions = function (scrolledPane) {
+	    }, _this.syncScrollPositions = function (scrolledPane, group) {
 	      var scrollTop = scrolledPane.scrollTop,
@@ -173,7 +181,7 @@ scrollHeight = scrolledPane.scrollHeight,
 	
-	      _this.panes.forEach(function (pane) {
+	      _this.panes[group].forEach(function (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 */
@@ -191,3 +199,3 @@ var paneHeight = pane.scrollHeight - clientHeight;
 	          window.requestAnimationFrame(function () {
-	            _this.addEvents(pane);
+	            _this.addEvents(pane, group);
 	          });
@@ -1367,8 +1375,16 @@ }
 	      this.node = this.props.attachTo || _reactDom2.default.findDOMNode(this);
-	      this.context.registerPane(this.node);
+	      this.context.registerPane(this.node, this.props.group);
 	    }
 	  }, {
+	    key: 'componentWillReceiveProps',
+	    value: function componentWillReceiveProps(nextProps) {
+	      if (this.props.group !== nextProps.group) {
+	        this.context.unregisterPane(this.node, this.props.group);
+	        this.context.registerPane(this.node, nextProps.group);
+	      }
+	    }
+	  }, {
 	    key: 'componentWillUnmount',
 	    value: function componentWillUnmount() {
-	      this.context.unregisterPane(this.node);
+	      this.context.unregisterPane(this.node, this.props.group);
 	    }
@@ -1387,4 +1403,8 @@ }, {
 	  children: _propTypes2.default.node.isRequired,
-	  attachTo: _propTypes2.default.object
+	  attachTo: _propTypes2.default.object,
+	  group: _propTypes2.default.string
 	};
+	ScrollSyncPane.defaultProps = {
+	  group: 'default'
+	};
 	ScrollSyncPane.contextTypes = {
@@ -1391,0 +1411,0 @@ registerPane: _propTypes2.default.func.isRequired,

package.json

 {
   "name": "react-scroll-sync",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Syncronize scroll positions across multiple scrollable containers",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/example.md

@@ -48,1 +48,58 @@ To use ScrollSync you have to wrap your scrollable content (ensure that you have `overflow: auto`
 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>
+```

src/ScrollSync.js

@@ -36,21 +36,25 @@ import React, { Component } from 'react'
 
-  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
   }
@@ -63,11 +67,17 @@
 
-  findPane = node => this.panes.find(pane => pane === node)
+  findPane = (node, group) => {
+    if (!this.panes[group]) {
+      return false
+    }
 
-  handlePaneScroll = (node) => {
+    return this.panes[group].find(pane => pane === node)
+  }
+
+  handlePaneScroll = (node, group) => {
     window.requestAnimationFrame(() => {
-      this.syncScrollPositions(node)
+      this.syncScrollPositions(node, group)
     })
   }
 
-  syncScrollPositions = (scrolledPane) => {
+  syncScrollPositions = (scrolledPane, group) => {
     const {
@@ -87,7 +97,7 @@ scrollTop,
 
-    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 */
@@ -105,3 +115,3 @@ const paneHeight = pane.scrollHeight - clientHeight
         window.requestAnimationFrame(() => {
-          this.addEvents(pane)
+          this.addEvents(pane, group)
         })
@@ -108,0 +118,0 @@ }

src/ScrollSyncPane.js

@@ -20,5 +20,10 @@ /* eslint react/no-find-dom-node: 0 */
     children: PropTypes.node.isRequired,
-    attachTo: PropTypes.object
+    attachTo: PropTypes.object,
+    group: PropTypes.string
   }
 
+  static defaultProps = {
+    group: 'default'
+  }
+
   static contextTypes = {
@@ -31,7 +36,14 @@ registerPane: PropTypes.func.isRequired,
     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)
   }
@@ -38,0 +50,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

118003

4.42%

Lines of code

1413

2.61%

Number of medium supply chain risk alerts

0

-100%

No dependency changes