chore: wrapper

Author: zombieJ

docs/examples/two-buttons.tsx

@@ -1,5 +1,5 @@
 import Trigger, { UniqueProvider } from '@rc-component/trigger';
-import React from 'react';
+import React, { useState } from 'react';
 import '../../assets/index.less';
 
 const builtinPlacements = {
@@ -26,51 +26,63 @@ function getPopupContainer(trigger) {
 }
 
 const MovingPopupDemo = () => {
-  return (
-    <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>
+  const [useUniqueProvider, setUseUniqueProvider] = useState(true);
+  
+  const content = (
+    <div style={{ margin: 100 }}>
+      <div style={{ marginBottom: 20 }}>
+        <label>
+          <input
+            type="checkbox"
+            checked={useUniqueProvider}
+            onChange={(e) => setUseUniqueProvider(e.target.checked)}
+          />
+          使用 UniqueProvider
+        </label>
       </div>
-    </UniqueProvider>
+      <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>
   );
+  
+  return useUniqueProvider ? <UniqueProvider>{content}</UniqueProvider> : content;
 };
 
 export default MovingPopupDemo;

src/UniqueProvider/index.tsx

@@ -1,29 +1,39 @@
 import * as React from 'react';
-import { UniqueContext, type UniqueContextProps } from '../context';
+import Portal from '@rc-component/portal';
+import TriggerContext, {
+  UniqueContext,
+  type UniqueContextProps,
+  type TriggerContextProps,
+  type UniqueShowOptions,
+} from '../context';
 import useDelay from '../hooks/useDelay';
+import Popup from '../Popup';
 
 export interface UniqueProviderProps {
   children: React.ReactNode;
 }
 
 const UniqueProvider = ({ children }: UniqueProviderProps) => {
+  const [open, setOpen] = React.useState(false);
   const [target, setTarget] = React.useState<HTMLElement | null>(null);
   const [currentNode, setCurrentNode] = React.useState<React.ReactNode>(null);
+  const [options, setOptions] = React.useState<UniqueShowOptions | null>(null);
 
   // ========================== Register ==========================
   const delayInvoke = useDelay();
 
-  const show = (node: React.ReactNode, targetElement: HTMLElement, delay: number) => {
+  const show = (showOptions: UniqueShowOptions) => {
     delayInvoke(() => {
-      setCurrentNode(node);
-      setTarget(targetElement);
-    }, delay);
+      setOpen(true);
+      setCurrentNode(showOptions.popup);
+      setTarget(showOptions.target);
+      setOptions(showOptions);
+    }, showOptions.delay);
   };
 
   const hide = (delay: number) => {
     delayInvoke(() => {
-      setTarget(null);
-      setCurrentNode(null);
+      setOpen(false);
     }, delay);
   };
 
@@ -35,20 +45,60 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
     [],
   );
 
-  /**
-   * TODO: 参考 index.tsx 的逻辑，增加 Popup 支持：
-   * <TriggerContext.Provider value={context}>
-            <Popup ...
-
-    如果渲染需要的 props 不够，可以给 UniqueContextProps 里修改定义以实现需求。
+  // ======================== Trigger Context =====================
+  const subPopupElements = React.useRef<Record<string, HTMLElement>>({});
+  const parentContext = React.useContext(TriggerContext);
 
-    用法 demo 在 docs/examples/two-buttons.tsx 中。
-   */
+  const triggerContextValue = React.useMemo<TriggerContextProps>(
+    () => ({
+      registerSubPopup: (id, subPopupEle) => {
+        subPopupElements.current[id] = subPopupEle;
+        parentContext?.registerSubPopup(id, subPopupEle);
+      },
+    }),
+    [parentContext],
+  );
 
   // =========================== Render ===========================
   return (
     <UniqueContext.Provider value={contextValue}>
       {children}
+      {options && (
+        <TriggerContext.Provider value={triggerContextValue}>
+          <Popup
+            portal={Portal}
+            prefixCls={options.prefixCls || 'rc-trigger-popup'}
+            popup={currentNode}
+            className={options.popupClassName}
+            style={options.popupStyle}
+            target={target}
+            open={open}
+            keepDom={false}
+            fresh={true}
+            onVisibleChanged={() => {}}
+            ready={true}
+            offsetX={0}
+            offsetY={0}
+            offsetR={0}
+            offsetB={0}
+            onAlign={() => {}}
+            onPrepare={() => Promise.resolve()}
+            arrowPos={{}}
+            align={
+              options.popupAlign || {
+                points: ['tl', 'bl'],
+                offset: [0, 4],
+              }
+            }
+            zIndex={options.zIndex}
+            mask={options.mask}
+            arrow={options.arrow}
+            motion={options.popupMotion}
+            maskMotion={options.maskMotion}
+            getPopupContainer={options.getPopupContainer}
+          />
+        </TriggerContext.Provider>
+      )}
     </UniqueContext.Provider>
   );
 };

src/context.ts

@@ -11,8 +11,27 @@ const TriggerContext = React.createContext<TriggerContextProps | null>(null);
 export default TriggerContext;
 
 // ==================== Unique ====================
+export interface UniqueShowOptions {
+  popup: TriggerProps['popup'];
+  target: HTMLElement;
+  delay: number;
+  prefixCls?: string;
+  popupClassName?: string;
+  popupStyle?: React.CSSProperties;
+  popupPlacement?: string;
+  builtinPlacements?: any;
+  popupAlign?: any;
+  zIndex?: number;
+  mask?: boolean;
+  maskClosable?: boolean;
+  popupMotion?: any;
+  maskMotion?: any;
+  arrow?: any;
+  getPopupContainer?: TriggerProps['getPopupContainer'];
+}
+
 export interface UniqueContextProps {
-  show: (popup: TriggerProps['popup'], target: HTMLElement, delay: number) => void;
+  show: (options: UniqueShowOptions) => void;
   hide: (delay: number) => void;
 }
 

src/index.tsx

@@ -327,7 +327,24 @@ export function generateTrigger(
       // If UniqueContext exists, pass delay to Provider instead of handling it internally
       if (uniqueContext) {
         if (nextOpen && targetEle) {
-          uniqueContext.show(popup, targetEle, delay);
+          uniqueContext.show({
+            popup,
+            target: targetEle,
+            delay,
+            prefixCls,
+            popupClassName,
+            popupStyle,
+            popupPlacement,
+            builtinPlacements,
+            popupAlign,
+            zIndex,
+            mask,
+            maskClosable,
+            popupMotion,
+            maskMotion,
+            arrow,
+            getPopupContainer,
+          });
         } else {
           uniqueContext.hide(delay);
         }