chore: post info

Author: zombieJ

docs/examples/two-buttons.tsx

@@ -1,4 +1,4 @@
-import Trigger from '@rc-component/trigger';
+import Trigger, { UniqueProvider } from '@rc-component/trigger';
 import React from 'react';
 import '../../assets/index.less';
 
@@ -27,47 +27,49 @@ function getPopupContainer(trigger) {
 
 const MovingPopupDemo = () => {
   return (
-    <div style={{ margin: 100 }}>
-      <div style={{ display: 'flex', gap: 20 }}>
-        <Trigger
-          action={['hover']}
-          popupPlacement="top"
-          builtinPlacements={builtinPlacements}
-          getPopupContainer={getPopupContainer}
-          popupMotion={{
-            motionName: 'rc-trigger-popup-zoom',
-          }}
-          popup={<div>这是左侧按钮的提示信息</div>}
-          popupStyle={{
-            border: '1px solid #ccc',
-            padding: 10,
-            background: 'white',
-            boxSizing: 'border-box',
-          }}
-        >
-          <button type="button">左侧按钮</button>
-        </Trigger>
-        
-        <Trigger
-          action={['hover']}
-          popupPlacement="top"
-          builtinPlacements={builtinPlacements}
-          getPopupContainer={getPopupContainer}
-          popupMotion={{
-            motionName: 'rc-trigger-popup-zoom',
-          }}
-          popup={<div>This is the tooltip for the right button</div>}
-          popupStyle={{
-            border: '1px solid #ccc',
-            padding: 10,
-            background: 'white',
-            boxSizing: 'border-box',
-          }}
-        >
-          <button type="button">Right Button</button>
-        </Trigger>
+    <UniqueProvider>
+      <div style={{ margin: 100 }}>
+        <div style={{ display: 'flex', gap: 20 }}>
+          <Trigger
+            action={['hover']}
+            popupPlacement="top"
+            builtinPlacements={builtinPlacements}
+            getPopupContainer={getPopupContainer}
+            popupMotion={{
+              motionName: 'rc-trigger-popup-zoom',
+            }}
+            popup={<div>这是左侧按钮的提示信息</div>}
+            popupStyle={{
+              border: '1px solid #ccc',
+              padding: 10,
+              background: 'white',
+              boxSizing: 'border-box',
+            }}
+          >
+            <button type="button">左侧按钮</button>
+          </Trigger>
+          
+          <Trigger
+            action={['hover']}
+            popupPlacement="top"
+            builtinPlacements={builtinPlacements}
+            getPopupContainer={getPopupContainer}
+            popupMotion={{
+              motionName: 'rc-trigger-popup-zoom',
+            }}
+            popup={<div>This is the tooltip for the right button</div>}
+            popupStyle={{
+              border: '1px solid #ccc',
+              padding: 10,
+              background: 'white',
+              boxSizing: 'border-box',
+            }}
+          >
+            <button type="button">Right Button</button>
+          </Trigger>
+        </div>
       </div>
-    </div>
+    </UniqueProvider>
   );
 };
 

src/UniqueProvider.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { UniqueContext, type UniqueContextProps } from '../context';
+
+export interface UniqueProviderProps {
+  children: React.ReactNode;
+}
+
+const UniqueProvider = ({ children }: UniqueProviderProps) => {
+  const [target, setTarget] = React.useState<HTMLElement | null>(null);
+  const delayRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearDelay = () => {
+    if (delayRef.current) {
+      clearTimeout(delayRef.current);
+      delayRef.current = null;
+    }
+  };
+
+  const show = (targetElement: HTMLElement, delay: number) => {
+    clearDelay();
+    
+    if (delay === 0) {
+      setTarget(targetElement);
+    } else {
+      delayRef.current = setTimeout(() => {
+        setTarget(targetElement);
+      }, delay * 1000);
+    }
+  };
+
+  const hide = (targetElement: HTMLElement, delay: number) => {
+    clearDelay();
+    
+    if (delay === 0) {
+      setTarget(null);
+    } else {
+      delayRef.current = setTimeout(() => {
+        setTarget(null);
+      }, delay * 1000);
+    }
+  };
+
+  const contextValue = React.useMemo<UniqueContextProps>(() => ({
+    show,
+    hide,
+  }), []);
+
+  return (
+    <UniqueContext.Provider value={contextValue}>
+      {children}
+    </UniqueContext.Provider>
+  );
+};
+
+export default UniqueProvider;

src/UniqueProvider/index.tsx

@@ -11,8 +11,8 @@ export default TriggerContext;
 
 // ==================== Unique ====================
 export interface UniqueContextProps {
-  show: (target: HTMLElement) => void;
-  hide: (target: HTMLElement) => void;
+  show: (target: HTMLElement, delay: number) => void;
+  hide: (target: HTMLElement, delay: number) => void;
 }
 
 export const UniqueContext = React.createContext<UniqueContextProps | null>(

src/context.ts

@@ -9,7 +9,7 @@ import useId from '@rc-component/util/lib/hooks/useId';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import Popup, { type MobileConfig } from './Popup';
-import type { TriggerContextProps, UniqueContextProps } from './context';
+import type { TriggerContextProps } from './context';
 import TriggerContext, { UniqueContext } from './context';
 import useAction from './hooks/useAction';
 import useAlign from './hooks/useAlign';
@@ -31,6 +31,8 @@ export type {
   BuildInPlacements,
 };
 
+export { default as UniqueProvider } from './UniqueProvider';
+
 export interface TriggerRef {
   nativeElement: HTMLElement;
   popupElement: HTMLDivElement;
@@ -301,13 +303,13 @@ export function generateTrigger(
     const lastTriggerRef = React.useRef<boolean[]>([]);
     lastTriggerRef.current = [];
 
-    const internalTriggerOpen = useEvent((nextOpen: boolean) => {
+    const internalTriggerOpen = useEvent((nextOpen: boolean, delay: number = 0) => {
       // If UniqueContext exists, delegate show/hide to Provider
       if (uniqueContext) {
         if (nextOpen && targetEle) {
-          uniqueContext.show(targetEle);
+          uniqueContext.show(targetEle, delay);
         } else {
-          uniqueContext.hide(targetEle);
+          uniqueContext.hide(targetEle, delay);
         }
         return;
       }
@@ -335,6 +337,12 @@ export function generateTrigger(
     };
 
     const triggerOpen = (nextOpen: boolean, delay = 0) => {
+      // If UniqueContext exists, pass delay to Provider instead of handling it internally
+      if (uniqueContext) {
+        internalTriggerOpen(nextOpen, delay);
+        return;
+      }
+
       clearDelay();
 
       if (delay === 0) {