fix: auto adjust guide popup positon (DimensionDev#4558)

* fix: auto adjust guide popup positon * fix: typo
dmrazzy · Oct 8, 2021 · 5e06bcd · 5e06bcd
1 parent ee398f1
commit 5e06bcd
Showing 1 changed file with 31 additions and 14 deletions.
diff --git a/packages/maskbook/src/components/GuideStep/index.tsx b/packages/maskbook/src/components/GuideStep/index.tsx
@@ -32,7 +32,7 @@ const useStyles = makeStyles()((theme) => ({
         borderRadius: '16px',
         background: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 0.8)' : '#fff',
         color: theme.palette.mode === 'light' ? '#fff' : '#111432',
-        '&.arrow:after': {
+        '&.arrow-top:after': {
             content: '""',
             display: 'inline-block',
             width: 0,
@@ -45,6 +45,19 @@ const useStyles = makeStyles()((theme) => ({
             top: '-13px',
             left: '24px',
         },
+        '&.arrow-bottom:after': {
+            content: '""',
+            display: 'inline-block',
+            width: 0,
+            height: 0,
+            border: 'solid 8px transparent',
+            borderTopColor: theme.palette.mode === 'light' ? 'rgba(15, 20, 25, 0.8)' : '#fff',
+            borderTopWidth: '13px',
+            borderBottomWidth: 0,
+            position: 'absolute',
+            bottom: '-13px',
+            left: '24px',
+        },
     },
     buttonContainer: {
         display: 'flex',
@@ -157,33 +170,28 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
     const childrenRef = useRef<HTMLElement>()
     const [clientRect, setClientRect] = useState<any>({})
     const [open, setOpen] = useState(false)
+    const [bottomAvailable, setBottomAvailable] = useState(true)
     const ui = activatedSocialNetworkUI
     const lastStepRef = currentSetupGuideStatus[ui.networkIdentifier]
     const lastStep = useValueRef(lastStepRef)
 
     useEffect(() => {
         const open = +lastStep === step
         setOpen(open)
-
-        if (open) {
-            document.body.style.overflow = 'hidden'
-        }
     }, [lastStep])
 
-    const resetOverflow = () => {
-        document.body.style.overflow = ''
-    }
+    useEffect(() => {
+        document.body.style.overflow = open ? 'hidden' : ''
+    }, [open])
 
     const onSkip = () => {
         setOpen(false)
-        resetOverflow()
         currentSetupGuideStatus[ui.networkIdentifier].value = ''
         userGuideStatus[ui.networkIdentifier].value = 'completed'
     }
 
     const onNext = () => {
         setOpen(false)
-        resetOverflow()
         if (step !== total) {
             currentSetupGuideStatus[ui.networkIdentifier].value = String(step + 1)
         }
@@ -198,8 +206,14 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
         const onResize = () => {
             const cr = childrenRef.current?.getBoundingClientRect()
 
-            if (cr && !cr.width) {
-                setClientRect({ ...cr, top: 30, left: 'calc(100vw - 300px)' })
+            if (cr) {
+                const bottomAvailable = window.innerHeight - cr.height - cr.top > 200
+                setBottomAvailable(bottomAvailable)
+                if (!cr.width) {
+                    setClientRect({ ...cr, top: 30, left: 'calc(100vw - 300px)' })
+                } else {
+                    setClientRect(cr)
+                }
             } else {
                 setClientRect(cr)
             }
@@ -235,9 +249,12 @@ export default function GuideStep({ total, step, tip, children, arrow = true, on
                                         height: clientRect.height,
                                     }}>
                                     <div
-                                        className={classNames(classes.card, arrow ? 'arrow' : '')}
+                                        className={classNames(
+                                            classes.card,
+                                            arrow ? (bottomAvailable ? 'arrow-top' : 'arrow-bottom') : '',
+                                        )}
                                         style={{
-                                            top: clientRect.height + 16,
+                                            [bottomAvailable ? 'top' : 'bottom']: clientRect.height + 16,
                                         }}>
                                         <div style={{ paddingBottom: '16px' }}>
                                             <Typography sx={{ fontSize: 20 }}>