fix: modal root portal

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

packages/kami-design/components/Portal/index.tsx

@@ -4,11 +4,16 @@ import { createPortal } from 'react-dom'
 
 import { useIsClient } from '~/hooks/use-is-client'
 
-export const RootPortal: FC = memo((props) => {
+import { useRootPortal } from './provider'
+
+export const RootPortal: FC<{
+  to?: HTMLElement
+}> = memo((props) => {
   const isClient = useIsClient()
+  const to = useRootPortal()
   if (!isClient) {
     return null
   }
 
-  return createPortal(props.children, document.body)
+  return createPortal(props.children, props.to || to || document.body)
 })

packages/kami-design/components/Portal/provider.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+
+import { isClientSide } from '~/utils/env'
+
+export const useRootPortal = () => {
+  const ctx = useContext(RootPortalContext)
+  if (!isClientSide()) {
+    return null
+  }
+  return ctx.to || document.body
+}
+
+const RootPortalContext = createContext<{
+  to?: HTMLElement | undefined
+}>({
+  to: undefined,
+})
+export const RootPortalProvider = RootPortalContext.Provider

src/components/layouts/AppLayout.tsx

@@ -22,7 +22,7 @@ import { loadStyleSheet } from '~/utils/load-script'
 import { useStore } from '../../store'
 
 export const Content: FC = observer((props) => {
-  const { userStore: master } = useStore()
+  const { userStore: master, appUIStore } = useStore()
 
   useScreenMedia()
   const { check: checkBrowser } = useCheckOldBrowser()
@@ -56,7 +56,7 @@ export const Content: FC = observer((props) => {
   }, [])
 
   return (
-    <ModalStackProvider>
+    <ModalStackProvider isMobileSize={appUIStore.viewport.mobile}>
       <DynamicHeadMeta />
       <NextSeo
         title={`${initialData.seo.title} · ${initialData.seo.description}`}

src/components/layouts/DebugLayout.tsx

@@ -14,7 +14,7 @@ export const DebugLayout: FC = (props) => {
     }
   }, [])
   return (
-    <ModalStackProvider>
+    <ModalStackProvider isMobileSize={false}>
       <div
         style={{
           maxWidth: '600px',

src/components/universal/Modal/Modal.tsx

@@ -9,7 +9,9 @@ import {
 } from 'react'
 
 import { CloseIcon } from '@mx-space/kami-design/components/Icons/layout'
+import { RootPortalProvider } from '@mx-space/kami-design/components/Portal/provider'
 
+import { useIsMountedState } from '~/hooks/use-is-mounted'
 import { useStore } from '~/store'
 
 import { BottomUpTransitionView } from '../Transition/bottom-up'
@@ -18,17 +20,18 @@ import { ScaleModalTransition } from './scale-transition'
 
 export interface ModalProps {
   title?: string
-  // TODO action
   closeable?: boolean
   onClose?: () => any
   modalClassName?: string
   contentClassName?: string
   noBlur?: boolean
   fixedWidth?: boolean
+  useRootPortal?: boolean
 }
 
 export type ModalRefObject = {
   dismiss: () => Promise<void>
+  getElement: () => HTMLElement
 }
 export const Modal = observer(
   forwardRef<
@@ -50,8 +53,13 @@ export const Modal = observer(
       })
     }, [props.disposer])
 
+    const $wrapper = useRef<HTMLDivElement>(null)
+
     useImperativeHandle(ref, () => ({
       dismiss,
+      getElement: () => {
+        return $wrapper.current as HTMLElement
+      },
     }))
 
     const {
@@ -60,10 +68,27 @@ export const Modal = observer(
       },
     } = useStore()
 
-    const { title, closeable } = props
+    const { title, closeable, modalId, useRootPortal } = props
     const useDrawerStyle = mobile && props.useBottomDrawerInMobile
+
+    const isMounted = useIsMountedState()
+
+    const Content = (
+      <div
+        className={clsx(
+          styles['content'],
+          title && styles['has-title'],
+          props.contentClassName,
+        )}
+      >
+        {props.children}
+      </div>
+    )
+
     const Children = (
       <div
+        id={modalId}
+        ref={$wrapper}
         className={clsx(
           styles['modal'],
           props.fixedWidth && styles['fixed-width'],
@@ -86,15 +111,15 @@ export const Modal = observer(
             <CloseIcon />
           </div>
         )}
-        <div
-          className={clsx(
-            styles['content'],
-            title && styles['has-title'],
-            props.contentClassName,
-          )}
-        >
-          {props.children}
-        </div>
+        {useRootPortal ? (
+          isMounted ? (
+            <RootPortalProvider value={{ to: $wrapper.current as HTMLElement }}>
+              {Content}
+            </RootPortalProvider>
+          ) : null
+        ) : (
+          Content
+        )}
       </div>
     )
 

src/components/universal/Modal/stack-context.tsx

@@ -1,6 +1,5 @@
 import { clsx } from 'clsx'
 import uniqueId from 'lodash-es/uniqueId'
-import { observer } from 'mobx-react-lite'
 import type {
   FC,
   FunctionComponentElement,
@@ -11,14 +10,14 @@ import type {
 import React, {
   createContext,
   createElement,
+  memo,
   useContext,
   useRef,
   useState,
 } from 'react'
 import { useStateToRef } from 'react-shortcut-guide'
 
 import { useIsClient } from '~/hooks/use-is-client'
-import { useStore } from '~/store'
 
 import type { OverlayProps } from '../Overlay'
 import { Overlay } from '../Overlay'
@@ -93,9 +92,10 @@ interface IModalStackStateType extends UniversalProps {
 }
 
 export const ModalStackProvider: FC<{
+  isMobileSize: boolean
   children?: ReactNode | ReactChildren
-}> = observer((props) => {
-  const { children } = props
+}> = memo((props) => {
+  const { children, isMobileSize } = props
   const [modalStack, setModalStack] = useState<IModalStackStateType[]>([])
   const modalStackRef = useStateToRef(modalStack)
 
@@ -229,13 +229,6 @@ export const ModalStackProvider: FC<{
 
   const isClient = useIsClient()
 
-  // TODO  抽离 不再依赖
-  const {
-    appUIStore: {
-      viewport: { mobile },
-    },
-  } = useStore()
-
   return (
     <ModalStackContext.Provider
       value={
@@ -281,9 +274,11 @@ export const ModalStackProvider: FC<{
           dismissFnMapRef.current.set(Component, onClose)
           return (
             <Overlay
-              center={!mobile && useBottomDrawerInMobile}
+              center={!isMobileSize && useBottomDrawerInMobile}
               standaloneWrapperClassName={clsx(
-                mobile && useBottomDrawerInMobile && 'items-end justify-center',
+                isMobileSize &&
+                  useBottomDrawerInMobile &&
+                  'items-end justify-center',
               )}
               show={extraProps.overlayShow}
               onClose={() => disposer()}

src/components/widgets/Comment/box.tsx

@@ -289,7 +289,6 @@ export const CommentBox: FC<{
       >
         <div className="flex-shrink-0 flex space-x-2 items-center">
           <FloatPopover
-            popoverWrapperClassNames="z-100 relative"
             triggerComponent={
               useRef(() => (
                 <button
@@ -301,15 +300,11 @@ export const CommentBox: FC<{
               )).current
             }
           >
-            {
-              useRef(
-                <div className="leading-7">
-                  <p>评论支持部分 Markdown 语法</p>
-                  <p>评论可能被移入垃圾箱</p>
-                  <p>评论可能需要审核，审核通过后才会显示</p>
-                </div>,
-              ).current
-            }
+            <div className="leading-7">
+              <p>评论支持部分 Markdown 语法</p>
+              <p>评论可能被移入垃圾箱</p>
+              <p>评论可能需要审核，审核通过后才会显示</p>
+            </div>
           </FloatPopover>
           <KaomojiButton onClickKaomoji={handleInsertEmoji} />
         </div>
@@ -392,8 +387,6 @@ const CommentBoxOption = observer<{ commentId?: string; refId: string }>(
   },
 )
 
-// TODO root portal to and modal zIndex
-// popoverWrapperClassNames="z-100 relative"
 const KaomojiButton: FC<{ onClickKaomoji: (kaomoji: string) => any }> = memo(
   ({ onClickKaomoji }) => {
     const { event } = useAnalyze()
@@ -406,7 +399,6 @@ const KaomojiButton: FC<{ onClickKaomoji: (kaomoji: string) => any }> = memo(
       <FloatPopover
         trigger="both"
         wrapperClassNames="flex-shrink-0"
-        popoverWrapperClassNames="z-100 relative"
         triggerComponent={memo(() => (
           <button className="btn green mr-[12px] cursor-pointer">
             {randomKaomoji.current}

src/hooks/use-is-mounted.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from 'react'
+
+export const useIsMountedState = () => {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+  return mounted
+}

src/pages/recently/index.module.css

@@ -62,6 +62,10 @@
         border-radius: 25px;
         float: right;
 
+        :global(blockquote) {
+          background: #3b82df;
+        }
+
         &::after {
           border-color: var(--bg);
           border-radius: 50%;

src/pages/recently/index.tsx

@@ -159,6 +159,7 @@ const RecentlyPage: NextPage = () => {
         title: '评论',
         closeable: true,
         fixedWidth: true,
+        useRootPortal: true,
       },
       component: (
         <CommentLazy allowComment id={id} warpperClassName={'!mt-0'} />