From 8c003ba8388c4695e03ff3dfbab09e1cc1cf967a Mon Sep 17 00:00:00 2001
From: Anton Korzunov <thekashey@gmail.com>
Date: Tue, 22 Jan 2019 15:06:14 +1100
Subject: [PATCH] fix: support stacked mode

---
 .size-limit       |  2 +-
 README.md         | 13 +++++++++----
 example/app.tsx   |  8 +++++---
 src/component.tsx |  7 +++++++
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/.size-limit b/.size-limit
index c667bad..3bbaea3 100644
--- a/.size-limit
+++ b/.size-limit
@@ -2,6 +2,6 @@
   {
     path: "dist/es2015/index.js",
     ignore: ["react-dom", "tslib"],
-    limit: "1.5 KB"
+    limit: "1.9 KB"
   }
 ]
diff --git a/README.md b/README.md
index 8799a83..8e21ff5 100644
--- a/README.md
+++ b/README.md
@@ -59,10 +59,15 @@ import {RemoveScroll} from 'react-remove-scroll';
 See [react-remove-scroll-bar](https://github.com/theKashey/react-remove-scroll-bar) documentation for details.
 
 ## More than one lock
-This library will silence any scroll(wheel, touch) event outside of whitelisted node. To be able to use more than one lock:
-- disable isolation mode `<RemoveScroll noIsolation />`. Then remove scroll would handle only events, happened inside it.
-To use this mode you have to _cast_ some _shadow_ behind a modal, to redirect all events to your element
-- use [react-scroll-locky](https://github.com/theKashey/react-scroll-locky), or [react-focus-on](https://github.com/theKashey/react-focus-on), but they are lager. 
+When stacked more is active (default) only one (last) component would be active.
+
+# Performance
+To do the job this library setup _non_ passive event listener. Chrome dev tools would complain about it, as a 
+performance no-op.
+
+We have to use synchronous scroll/touch handler, and it may affect scrolling performance.
+
+Consider using `noIsolation` mode, if you have large scrollable areas.
 
 # Size
 1.5kb after compression (excluding tslib).
diff --git a/example/app.tsx b/example/app.tsx
index f5d6515..264c677 100644
--- a/example/app.tsx
+++ b/example/app.tsx
@@ -84,7 +84,7 @@ export default class App extends Component <{}, AppState> {
           // className={zeroRightClassName}
         >
           XXX
-          {(<RemoveScroll enabled={!!(this.state.counter % 2)}>
+          {(<RemoveScroll enabled={1}>
             <div
               style={{
                 position: 'absolute',
@@ -108,6 +108,7 @@ export default class App extends Component <{}, AppState> {
           )}
         </div>
 
+        <RemoveScroll enabled={!!(this.state.counter % 2)}>
         <div
           style={{
             position: 'absolute',
@@ -116,8 +117,8 @@ export default class App extends Component <{}, AppState> {
             right: 0,
             top: '100px',
             //width: '100%',
-            height: '50px',
-            backgroundColor: 'rgba(0,0,0,0.5)'
+            height: '150px',
+            backgroundColor: 'rgba(0,1,0,0.5)'
           }}
           // className={fullWidthClassName}
         >
@@ -126,6 +127,7 @@ export default class App extends Component <{}, AppState> {
           XXX
           {fill(20, 1).map(x => <p>{x}****</p>)}
         </div>
+        </RemoveScroll>
 
         <div
           style={{
diff --git a/src/component.tsx b/src/component.tsx
index b5286bc..6bb3f61 100644
--- a/src/component.tsx
+++ b/src/component.tsx
@@ -25,6 +25,7 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   private ref = React.createRef<HTMLDivElement>();
 
   public static classNames = classNames;
+  public static stack: Array<RemoveScroll> = [];
 
   static defaultProps = {
     enabled: true,
@@ -32,10 +33,12 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   };
 
   componentDidMount() {
+    RemoveScroll.stack.push(this);
     this.componentDidUpdate({enabled: false})
   }
 
   componentWillUnmount() {
+    RemoveScroll.stack = RemoveScroll.stack.filter(inst => inst !== this);
     this.disable()
   }
 
@@ -64,6 +67,10 @@ export class RemoveScroll extends React.Component<RemoveScrollProps> {
   }
 
   shouldPrevent = (event: any) => {
+    if (RemoveScroll.stack[RemoveScroll.stack.length - 1] !== this) {
+      // not current active
+      return;
+    }
     const delta = event.deltaY || getTouchY(event);
     const sourceEvent = this.shouldPreventQueue.filter(
       (e: any) => e.name === event.type && e.delta === delta && e.target === event.target