styles && body overflow

Wolox · May 17, 2020 · 712dc57 · 712dc57
1 parent 1d14550
commit 712dc57
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 24 deletions.
diff --git a/src/components/Widget/components/FullScreenPreview/index.tsx b/src/components/Widget/components/FullScreenPreview/index.tsx
@@ -42,21 +42,6 @@ export default function FullScreenPreview({ fullScreenMode, zoomStep }:Props) {
     }
   }, [src])
 
-  /**
-   * Previewer needs to prevent body scroll behavior,
-   * Except fullScreenMode is true
-   */
-  useEffect(() => {
-    if(fullScreenMode) {
-      return;
-    }
-    if(visible) {
-      document.body.setAttribute('style', "overflow: hidden")
-    } else {
-      document.body.setAttribute('style', "overflow: auto")
-    }
-  }, [visible])
-
   const pDom = usePortal()
 
   const onClosePreview = () => {

diff --git a/src/components/Widget/components/FullScreenPreview/styles.scss b/src/components/Widget/components/FullScreenPreview/styles.scss
@@ -1,3 +1,5 @@
+@import 'variables/colors';
+
 .rcw-previewer-container {
   width: 100vw;
   height: 100vh;
@@ -39,7 +41,7 @@
     align-items: center;
     justify-content: center;
     outline: none;
-    background-color: #ffffff;
+    background-color: $white;
     border: none;
   }
 

diff --git a/src/components/Widget/layout.tsx b/src/components/Widget/layout.tsx
@@ -58,9 +58,10 @@ function WidgetLayout({
   zoomStep,
 }: Props) {
   const dispatch = useDispatch();
-  const { dissableInput, showChat } = useSelector((state: GlobalState) => ({
+  const { dissableInput, showChat, visible } = useSelector((state: GlobalState) => ({
     showChat: state.behavior.showChat,
-    dissableInput: state.behavior.disabledInput
+    dissableInput: state.behavior.disabledInput,
+    visible: state.preview.visible,
   }));
 
   const messageRef = useRef<HTMLDivElement | null>(null);
@@ -102,12 +103,8 @@ function WidgetLayout({
   }, [imagePreview, showChat]);
 
   useEffect(() => {
-    if(fullScreenMode) {
-      document.body.setAttribute('style', "overflow: hidden")
-    } else {
-      document.body.setAttribute('style', "overflow: auto")
-    }
-  }, [fullScreenMode])
+    document.body.setAttribute('style', `overflow: ${visible || fullScreenMode ? 'hidden' : 'auto'}`)
+  }, [fullScreenMode, visible])
 
   return (
     <div