chore: init

Author: zombieJ

docs/demos/two-buttons.md

@@ -0,0 +1,8 @@
+---
+title: Moving Popup
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/two-buttons.tsx"></code>

docs/examples/two-buttons.tsx

@@ -0,0 +1,74 @@
+import Trigger from '@rc-component/trigger';
+import React from 'react';
+import '../../assets/index.less';
+
+const builtinPlacements = {
+  left: {
+    points: ['cr', 'cl'],
+    offset: [-10, 0],
+  },
+  right: {
+    points: ['cl', 'cr'],
+    offset: [10, 0],
+  },
+  top: {
+    points: ['bc', 'tc'],
+    offset: [0, -10],
+  },
+  bottom: {
+    points: ['tc', 'bc'],
+    offset: [0, 10],
+  },
+};
+
+function getPopupContainer(trigger) {
+  return trigger.parentNode;
+}
+
+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>
+      </div>
+    </div>
+  );
+};
+
+export default MovingPopupDemo;

src/UniqueProvider.tsx

@@ -0,0 +1,31 @@
+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 show = (targetElement: HTMLElement) => {
+    setTarget(targetElement);
+  };
+
+  const hide = () => {
+    setTarget(null);
+  };
+
+  const contextValue = React.useMemo<UniqueContextProps>(() => ({
+    show,
+    hide,
+  }), []);
+
+  return (
+    <UniqueContext.Provider value={contextValue}>
+      {children}
+    </UniqueContext.Provider>
+  );
+};
+
+export default UniqueProvider;

src/context.ts

@@ -1,9 +1,20 @@
 import * as React from 'react';
 
+// ===================== Nest =====================
 export interface TriggerContextProps {
   registerSubPopup: (id: string, node: HTMLElement) => void;
 }
 
 const TriggerContext = React.createContext<TriggerContextProps | null>(null);
 
 export default TriggerContext;
+
+// ==================== Unique ====================
+export interface UniqueContextProps {
+  show: (target: HTMLElement) => void;
+  hide: (target: HTMLElement) => void;
+}
+
+export const UniqueContext = React.createContext<UniqueContextProps | null>(
+  null,
+);

src/index.tsx

@@ -9,8 +9,8 @@ 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 } from './context';
-import TriggerContext from './context';
+import type { TriggerContextProps, UniqueContextProps } from './context';
+import TriggerContext, { UniqueContext } from './context';
 import useAction from './hooks/useAction';
 import useAlign from './hooks/useAlign';
 import useWatch from './hooks/useWatch';
@@ -208,6 +208,9 @@ export function generateTrigger(
       };
     }, [parentContext]);
 
+    // ======================== UniqueContext =========================
+    const uniqueContext = React.useContext(UniqueContext);
+
     // =========================== Popup ============================
     const id = useId();
     const [popupEle, setPopupEle] = React.useState<HTMLDivElement>(null);
@@ -299,6 +302,16 @@ export function generateTrigger(
     lastTriggerRef.current = [];
 
     const internalTriggerOpen = useEvent((nextOpen: boolean) => {
+      // If UniqueContext exists, delegate show/hide to Provider
+      if (uniqueContext) {
+        if (nextOpen && targetEle) {
+          uniqueContext.show(targetEle);
+        } else {
+          uniqueContext.hide(targetEle);
+        }
+        return;
+      }
+
       setMergedOpen(nextOpen);
 
       // Enter or Pointer will both trigger open state change