feat(popup): remove html scroll in fullscreen popup (#1257)

alfa-laboratory · Jan 13, 2021 · 21f8571 · 21f8571
1 parent bef0030
commit 21f8571
Showing 1 changed file with 22 additions and 0 deletions.
diff --git 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,13 +326,17 @@ export class Popup extends React.Component<PopupProps, PopupState> {
                 this.ensureClickEvent(!this.props.visible);
             }
         }
+
+        this.updateDocumentOverflow();
     }
 
     componentWillUnmount() {
         if (this.props.onClickOutside) {
             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);