Overlay refactoring and improvement

pages/_app.tsx

@@ -22,6 +22,10 @@ class MyApp extends App {
                         }
                     }
 
+                    .noscroll { 
+                        overflow: hidden;
+                    }
+
                     #__next {
                         height: 100%;
                     }

src/components/Overlay/Transition.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+
+export interface ITransitionProps {
+    show: boolean
+}
+
+export const Transition: React.FC<ITransitionProps> = props => {
+    const [mounted, setMounted] = React.useState(props.show)
+    const [opacity, setOpacity] = React.useState(0)
+    const onTransitionEnd = React.useCallback(() => {
+        if (opacity === 0) {
+            setMounted(false)
+        }
+    }, [opacity])
+
+    React.useEffect(() => {
+        if (!props.show) {
+            setOpacity(0)
+            return
+        }
+
+        setMounted(true)
+        let t = setTimeout(() => {
+            setOpacity(1)
+        }, 16)
+
+        return () => {
+            clearTimeout(t)
+        }
+    }, [props.show])
+
+    return mounted && (
+        <div
+            style={{
+                opacity,
+                transition: 'all 250ms',
+            }}
+            onTransitionEnd={onTransitionEnd}
+        >
+            {props.children}
+        </div>
+    )
+}

src/components/Overlay/index.tsx

@@ -1,66 +1,45 @@
 import * as React from 'react'
+import { Transition } from './Transition'
 
 export interface IOverlayProps {
     show: boolean
     onClickOverlay: () => void
 }
 
-export const Overlay: React.FC<IOverlayProps> = ({ children, ...props }) => {
-    const [mounted, setMounted] = React.useState(props.show)
-    const [opacity, setOpacity] = React.useState(0)
+export const Overlay: React.FC<IOverlayProps> = props => {
     const onClick = React.useCallback((event: React.MouseEvent<HTMLDivElement>) => {
         if (event.target === event.currentTarget) {
             props.onClickOverlay()
         }
     }, [props.onClickOverlay])
-    const onTransitionEnd = React.useCallback(() => {
-        console.log('transition end', mounted, opacity)
-        if (opacity === 0) {
-            setMounted(false)
-        }
-    }, [opacity])
 
     React.useEffect(() => {
-        if (!props.show) {
-            setOpacity(0)
-            return
-        }
+        document.body.classList.toggle('noscroll', props.show)
 
-        setMounted(true)
-        let t = setTimeout(() => {
-            setOpacity(1)
-        }, 16)
-
-        return () => {
-            clearTimeout(t)
-        }
     }, [props.show])
 
-    return mounted && (
-        <div
-            style={{
-                opacity,
-            }}
-            onClick={onClick}
-            onTransitionEnd={onTransitionEnd}
+    return (
+        <Transition
+            show={props.show}
         >
-            <style jsx>{`
-                div {
-                    position: fixed;
-                    width: 100%;
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    z-index: 1000000;
+            <div
+                onClick={onClick}
+            >
+                <style jsx>{`
+                    div {
+                        position: fixed;
+                        width: 100%;
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+                        z-index: 1000000;
 
-                    background-color: rgb(255, 255, 255);
-                    opacity: 0;
+                        background-color: rgb(255, 255, 255);
+                    }
+                `}</style>
 
-                    transition: all 200ms;
-                }
-            `}</style>
-
-            {children}
-        </div>
+                {props.children}
+            </div>
+        </Transition>
     )
 }