Merge pull request #645 from illacloud/fix/trigger_zIndex

fix: trigger's zindex
illacloud · Dec 29, 2022 · fd044e1 · fd044e1
2 parents 6a0cfdc + faaa3b6
commit fd044e1
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/packages/modal/src/modal.tsx b/packages/modal/src/modal.tsx
@@ -115,7 +115,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
   }, [title, type])
 
   return (
-    <TriggerProvider renderInBody={false}>
+    <TriggerProvider renderInBody={false} zIndex={10}>
       <AnimatePresence>
         {visible && (
           <>

diff --git a/packages/trigger/src/interface.tsx b/packages/trigger/src/interface.tsx
@@ -35,6 +35,7 @@ export type TriggerTrigger = "hover" | "click" | "focus" | "contextmenu"
 
 export interface TriggerContext {
   renderInBody?: boolean
+  zIndex?: number
   children?: ReactNode
 }
 

diff --git a/packages/trigger/src/trigger.tsx b/packages/trigger/src/trigger.tsx
@@ -72,13 +72,15 @@ export const Trigger: FC<TriggerProps> = (props) => {
     trigger = "hover",
     alignPoint,
     renderInBody,
+    zIndex,
   } = props
 
   const tipsContainerRef = useRef<HTMLDivElement>(null)
   const [visible, setVisible] = useState<boolean>(false)
   const finalVisible = popupVisible === undefined ? visible : popupVisible
   const triggerContext = useContext(TriggerProviderContext)
   const _renderInBody = renderInBody ?? triggerContext.renderInBody ?? true
+  const _zIndex = zIndex ?? triggerContext.zIndex ?? 1
 
   useEffect(() => {
     if (defaultPopupVisible) {
@@ -359,7 +361,7 @@ export const Trigger: FC<TriggerProps> = (props) => {
                 css={[
                   css`
                     display: inline-flex;
-                    z-index: 1;
+                    z-index: ${_zIndex};
                   `,
                   applyBoxStyle(props),
                 ]}

diff --git a/packages/trigger/src/triggerContext.tsx b/packages/trigger/src/triggerContext.tsx
@@ -1,15 +1,16 @@
 import { TriggerContext } from "./interface"
-import { createContext, FC, useEffect } from "react"
+import { createContext, FC } from "react"
 
 export const TriggerProviderContext = createContext<TriggerContext>({
   renderInBody: true,
+  zIndex: 1,
 } as TriggerContext)
 
 export const TriggerProvider: FC<TriggerContext> = (props) => {
-  const { renderInBody } = props
+  const { renderInBody, zIndex } = props
 
   return (
-    <TriggerProviderContext.Provider value={{ renderInBody }}>
+    <TriggerProviderContext.Provider value={{ renderInBody, zIndex }}>
       {props.children}
     </TriggerProviderContext.Provider>
   )