From 21f857143a5b524410c05add1e71168b550a7ac1 Mon Sep 17 00:00:00 2001
From: Mikhail Gekhman <45306345+avlnche64@users.noreply.github.com>
Date: Wed, 13 Jan 2021 13:30:31 +0500
Subject: [PATCH] feat(popup): remove html scroll in fullscreen popup (#1257)

---
 src/popup/popup.tsx | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index e578ce0781..cfc380637f 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -274,6 +274,8 @@ export class Popup extends React.Component<PopupProps, PopupState> {
             this.setGradientStyles();
         }
 
+        this.updateDocumentOverflow();
+
         window.addEventListener('resize', this.handleWindowResize);
 
         /* eslint-disable react/no-did-mount-set-state */
@@ -324,6 +326,8 @@ export class Popup extends React.Component<PopupProps, PopupState> {
                 this.ensureClickEvent(!this.props.visible);
             }
         }
+
+        this.updateDocumentOverflow();
     }
 
     componentWillUnmount() {
@@ -331,6 +335,8 @@ export class Popup extends React.Component<PopupProps, PopupState> {
             this.ensureClickEvent(true);
         }
 
+        this.updateDocumentOverflow(true);
+
         // Cancel debouncing to avoid `this.setState()` invocation in unmounted component state
         this.handleWindowResize.cancel();
         window.removeEventListener('resize', this.handleWindowResize);
@@ -694,6 +700,22 @@ export class Popup extends React.Component<PopupProps, PopupState> {
             },
         });
     }
+
+    /**
+     * Обновляет overflow у html. Нужно чтобы в полноэкранном режиме не скроллился документ
+     * @param willComponentUnmount указывает на то, что функция вызывается при размонтировании компонента
+     */
+    private updateDocumentOverflow(willComponentUnmount?: boolean) {
+        if (this.props.target !== 'screen') {
+            return;
+        }
+
+        if (this.props.visible && !willComponentUnmount) {
+            document.documentElement.style.overflow = 'hidden';
+        } else {
+            document.documentElement.style.overflow = '';
+        }
+    }
 }
 
 export default withTheme<PopupProps, Popup>(Popup);