fix: if ScrollLocker container change

react-component · Jan 5, 2021 · e286142 · e286142
1 parent 16daf81
commit e286142
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/Dom/scrollLocker.ts b/src/Dom/scrollLocker.ts
@@ -24,16 +24,31 @@ let uuid = 0;
 const cacheStyle = new Map<Element, React.CSSProperties>();
 
 export default class ScrollLocker {
-  lockTarget: typeof uuid;
+  private lockTarget: typeof uuid;
 
-  options: scrollLockOptions;
+  private options: scrollLockOptions;
 
   constructor(options?: scrollLockOptions) {
     // eslint-disable-next-line no-plusplus
     this.lockTarget = uuid++;
     this.options = options;
   }
 
+  getContainer = (): HTMLElement | undefined => {
+    return this.options?.container;
+  };
+
+  // if options change...
+  reLock = (options?: scrollLockOptions) => {
+    const findLock = locks.find(({ target }) => target === this.lockTarget);
+    findLock && this.unLock();
+
+    this.options = options;
+    findLock && (findLock.options = options);
+
+    findLock && this.lock();
+  };
+
   lock = () => {
     // If lockTarget exist return
     if (locks.some(({ target }) => target === this.lockTarget)) {

diff --git a/src/PortalWrapper.tsx b/src/PortalWrapper.tsx
@@ -90,11 +90,29 @@ class PortalWrapper extends React.Component<PortalWrapperProps> {
 
   componentDidUpdate(prevProps: PortalWrapperProps) {
     this.updateOpenCount(prevProps);
+    this.updateScrollLocker(prevProps);
 
     this.setWrapperClassName();
     this.attachToParent();
   }
 
+  updateScrollLocker = (prevProps?: Partial<PortalWrapperProps>) => {
+    const { visible: prevVisible, getContainer: prevGetContainer } =
+      prevProps || {};
+    const { getContainer, visible } = this.props;
+
+    if (
+      visible &&
+      visible !== prevVisible &&
+      supportDom &&
+      getParent(getContainer) !== this.scrollLocker.getContainer()
+    ) {
+      this.scrollLocker.reLock({
+        container: getParent(getContainer) as HTMLElement,
+      });
+    }
+  };
+
   updateOpenCount = (prevProps?: Partial<PortalWrapperProps>) => {
     const { visible: prevVisible, getContainer: prevGetContainer } =
       prevProps || {};

diff --git a/tests/scrollLocker.test.ts b/tests/scrollLocker.test.ts
@@ -124,4 +124,22 @@ describe('ScrollLocker', () => {
     expect(testContainer.className).toBe('');
     expect(testContainer.getAttribute('style')).toBe(initialStyle);
   });
+
+  it('reLock', () => {
+    scrollLocker.lock();
+    const testContainer = document.createElement('div');
+
+    expect(document.body.className).toBe(effectClassname);
+    expect(document.body.getAttribute('style')).toBe(effectStyle);
+
+    scrollLocker.reLock({
+      container: testContainer,
+    });
+
+    expect(document.body.className).toBe('');
+    expect(document.body.getAttribute('style')).toBe(initialStyle);
+
+    expect(testContainer.className).toBe(effectClassname);
+    expect(testContainer.getAttribute('style')).toBe(effectStyle);
+  });
 });