feat: Extend enable prop to work with ScrollSyncPane

bigbinary · Aug 14, 2018 · 5d6b000 · 5d6b000
1 parent 0b4309b
commit 5d6b000
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/ScrollSyncPane.js b/src/ScrollSyncPane.js
@@ -18,11 +18,13 @@ export default class ScrollSyncPane extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
     attachTo: PropTypes.object,
-    group: PropTypes.string
+    group: PropTypes.string,
+    enabled: PropTypes.bool
   }
 
   static defaultProps = {
-    group: 'default'
+    group: 'default',
+    enabled: true
   }
 
   static contextTypes = {
@@ -31,19 +33,23 @@ export default class ScrollSyncPane extends Component {
   };
 
   componentDidMount() {
-    this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
-    this.context.registerPane(this.node, this.props.group)
+    if (this.props.enabled) {
+      this.node = this.props.attachTo || ReactDOM.findDOMNode(this)
+      this.context.registerPane(this.node, this.props.group)
+    }
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.group !== nextProps.group) {
+    if (this.props.enabled && 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.props.group)
+    if (this.props.enabled) {
+      this.context.unregisterPane(this.node, this.props.group)
+    }
   }
 
   render() {

diff --git a/src/example.md b/src/example.md
@@ -1,7 +1,7 @@
 To use ScrollSync you have to wrap your scrollable content (ensure that you have `overflow: auto`
  in CSS) in `ScrollSyncPane` and then wrap everything in `ScrollSync`.
 
-If you want to provide a toggle for users to turn the scroll syncing on and off, you can use the `enabled={false}` setting on the main `ScrollSync` element. Note that this disables the scroll syncing for all groups.
+If you want to provide a toggle for users to turn the scroll syncing on and off, you can use the `enabled={false}` setting on the `ScrollSync` or `ScrollSyncPane` elements. Note that `<ScrollSync enabled={false}>` disables the scroll syncing for all groups.
 
 ```
 <ScrollSync>