docs: update demo

Author: zombieJ

docs/examples/two-buttons.tsx

@@ -25,25 +25,17 @@ const builtinPlacements = {
 
 const MovingPopupDemo = () => {
   const [useUniqueProvider, setUseUniqueProvider] = useState(true);
+  const [triggerControl, setTriggerControl] = useState('none'); // 'button1', 'button2', 'none'
 
   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>
       <div style={{ display: 'flex', gap: 20 }}>
         <Trigger
           mouseLeaveDelay={LEAVE_DELAY}
           action={['hover']}
           popupPlacement="top"
           builtinPlacements={builtinPlacements}
+          popupVisible={triggerControl === 'button1' || undefined}
           popupMotion={{
             motionName: 'rc-trigger-popup-zoom',
           }}
@@ -63,6 +55,7 @@ const MovingPopupDemo = () => {
           action={['hover']}
           popupPlacement="top"
           builtinPlacements={builtinPlacements}
+          popupVisible={triggerControl === 'button2' || undefined}
           popupMotion={{
             motionName: 'rc-trigger-popup-zoom',
           }}
@@ -77,6 +70,51 @@ const MovingPopupDemo = () => {
           <button type="button">Right Button</button>
         </Trigger>
       </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <label>
+          <input
+            type="checkbox"
+            checked={useUniqueProvider}
+            onChange={(e) => setUseUniqueProvider(e.target.checked)}
+          />
+          使用 UniqueProvider
+        </label>
+      </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <div>Trigger 控制:</div>
+        <label>
+          <input
+            type="radio"
+            name="triggerControl"
+            value="button1"
+            checked={triggerControl === 'button1'}
+            onChange={(e) => setTriggerControl(e.target.value)}
+          />
+          Button 1 显示 Trigger
+        </label>
+        <label style={{ marginLeft: 20 }}>
+          <input
+            type="radio"
+            name="triggerControl"
+            value="button2"
+            checked={triggerControl === 'button2'}
+            onChange={(e) => setTriggerControl(e.target.value)}
+          />
+          Button 2 显示 Trigger
+        </label>
+        <label style={{ marginLeft: 20 }}>
+          <input
+            type="radio"
+            name="triggerControl"
+            value="none"
+            checked={triggerControl === 'none'}
+            onChange={(e) => setTriggerControl(e.target.value)}
+          />
+          都不受控 (Hover 控制)
+        </label>
+      </div>
     </div>
   );
 

src/UniqueProvider/index.tsx

@@ -47,13 +47,13 @@ const UniqueProvider = ({ children }: UniqueProviderProps) => {
   const hide = (delay: number) => {
     delayInvoke(() => {
       trigger(false);
-      // 不要立即清空 target, currentNode, options，等动画结束后再清空
+      // Don't clear target, currentNode, options immediately, wait until animation completes
     }, delay);
   };
 
-  // 动画完成后的回调
+  // Callback after animation completes
   const onVisibleChanged = useEvent((visible: boolean) => {
-    // 调用 useTargetState 的回调来处理动画状态
+    // Call useTargetState callback to handle animation state
     onTargetVisibleChanged(visible);
     // if (!visible) {
     //   setTarget(null);

src/UniqueProvider/useTargetState.ts

@@ -25,45 +25,42 @@ export default function useTargetState(): [
 
   const trigger = useEvent((nextOptions: UniqueShowOptions | false) => {
     if (nextOptions === false) {
-      // 隐藏时清除待处理的选项
+      // Clear pending options when hiding
       pendingOptionsRef.current = null;
       setOpen(false);
     } else {
       if (isAnimating && open) {
-        // 如果正在动画中（appear 或 enter），缓存新的 options
+        // If animating (appear or enter), cache new options
         pendingOptionsRef.current = nextOptions;
       } else {
-        // 没有动画或者是首次显示，直接应用
         setOpen(true);
+        // Use functional update to ensure re-render is always triggered
         setOptions(nextOptions);
         pendingOptionsRef.current = null;
+
+        // Only mark as animating when transitioning from closed to open
+        if (!open) {
+          setIsAnimating(true);
+        }
       }
     }
   });
 
   const onVisibleChanged = useEvent((visible: boolean) => {
     if (visible) {
-      // 动画进入完成，检查是否有待处理的选项
+      // Animation enter completed, check if there are pending options
       setIsAnimating(false);
       if (pendingOptionsRef.current) {
-        const pendingOptions = pendingOptionsRef.current;
+        // Apply pending options - Use functional update to ensure re-render is triggered
+        setOptions(pendingOptionsRef.current);
         pendingOptionsRef.current = null;
-        // 应用待处理的选项
-        setOptions(pendingOptions);
       }
     } else {
-      // 动画离开完成
+      // Animation leave completed
       setIsAnimating(false);
       pendingOptionsRef.current = null;
     }
   });
 
-  // 当开始显示时标记为动画中
-  React.useEffect(() => {
-    if (open && options) {
-      setIsAnimating(true);
-    }
-  }, [open, options]);
-
   return [trigger, open, options, onVisibleChanged];
 }