test: fixed useEffect by add $ when trigger ctx menu

packages/sheets-ui/src/components/menu-item-input/MenuItemInput.tsx

@@ -24,9 +24,9 @@ import styles from './index.module.less';
 
 export const MenuItemInput = (props: IMenuItemInputProps) => {
     const { prefix, suffix, value, onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER } = props;
-    if (props.prefix === 'rightClick.insertRowsAfter') {
-        console.log('menu input', value);
-    }
+    // if (props.prefix === 'rightClick.insertRowsAfter') {
+    //     console.log('menu input', value);
+    // }
 
     const localeService = useDependency(LocaleService);
     const contextMenuService = useDependency(IContextMenuService);

packages/ui/src/components/menu/desktop/Menu.tsx

@@ -34,6 +34,7 @@ import clsx from 'clsx';
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { combineLatest, isObservable, of } from 'rxjs';
+import { IContextMenuService } from '../../../services/contextmenu/contextmenu.service';
 import { ILayoutService } from '../../../services/layout/layout.service';
 import { MenuItemType } from '../../../services/menu/menu';
 import { IMenuManagerService } from '../../../services/menu/menu-manager.service';
@@ -204,7 +205,8 @@ interface IMenuItemProps {
 
 function MenuItem({ menuItem, onClick }: IMenuItemProps) {
     const menuManagerService = useDependency(IMenuManagerService);
-
+    const contextMenuService = useDependency(IContextMenuService);
+    // console.log('contextMenuService', contextMenuService);
     const disabled = useObservable<boolean>(menuItem.disabled$, false);
     const activated = useObservable<boolean>(menuItem.activated$, false);
     const hidden = useObservable(menuItem.hidden$, false);
@@ -213,10 +215,19 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
     const item = menuItem as IDisplayMenuItem<IMenuSelectorItem>;
     const selectionsFromObservable = useObservable(isObservable(item.selections) ? item.selections : undefined);
     const [inputValue, setInputValue] = useState(value);
+    const [trigger, setMenuTrigger] = useState(0);
 
-    if (menuItem.id === 'sheet.command.insert-multi-rows-after') {
-        console.log('MENU', value, inputValue);
-    }
+    useEffect(() => {
+        const subscription = contextMenuService.trigger$.subscribe((value) => {
+            setMenuTrigger(value);
+        });
+
+        return () => subscription.unsubscribe();
+    }, []);
+
+    useEffect(() => {
+        setInputValue(value);
+    }, [value, trigger]);
 
     if (hidden) {
         return null;
@@ -228,10 +239,6 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
      */
     const onChange = (v: string | number) => {
         const newValue = isRealNum(v) && typeof v === 'string' ? Number.parseInt(v) : v;
-
-        if (menuItem.id === 'sheet.command.insert-multi-rows-after') {
-            console.log('MENU setInputValue', newValue);
-        }
         setInputValue(newValue);
     };
 
@@ -248,12 +255,13 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
                     [styles.menuItemActivated]: activated,
                 })}
                 onClick={() => {
+                    // console.log('MENU CLICK______', menuItem.id, inputValue);
                     onClick({ commandId: item.commandId, value: inputValue, id: item.id });
                 }}
             >
                 <span className={styles.menuItemContent}>
                     <CustomLabel
-                        value={inputValue}
+                        value={value}
                         title={title}
                         label={label}
                         icon={item.icon}

packages/ui/src/services/contextmenu/contextmenu.service.ts

@@ -14,9 +14,12 @@
  * limitations under the License.
  */
 
-import { createIdentifier, Disposable, toDisposable } from '@univerjs/core';
 import type { IDisposable } from '@univerjs/core';
 import type { IMouseEvent, IPointerEvent } from '@univerjs/engine-render';
+import type { Subject } from 'rxjs';
+import { createIdentifier, Disposable, toDisposable } from '@univerjs/core';
+import { BehaviorSubject } from 'rxjs';
+import { L } from 'vitest/dist/chunks/reporters.0x019-V2.js';
 
 export interface IContextMenuHandler {
     /** A callback to open context menu with given position and menu type. */
@@ -34,15 +37,16 @@ export interface IContextMenuService {
     disable(): void;
     triggerContextMenu(event: IPointerEvent | IMouseEvent, menuType: string): void;
     hideContextMenu(): void;
-
     registerContextMenuHandler(handler: IContextMenuHandler): IDisposable;
+
+    trigger$: BehaviorSubject<number>;
 }
 
 export const IContextMenuService = createIdentifier<IContextMenuService>('ui.contextmenu.service');
 
 export class ContextMenuService extends Disposable implements IContextMenuService {
     private _currentHandler: IContextMenuHandler | null = null;
-
+    trigger$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
     disabled: boolean = false;
 
     get visible(): boolean {

packages/ui/src/views/components/context-menu/ContextMenu.tsx

@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
+import type { IMouseEvent } from '@univerjs/engine-render';
 import { ICommandService, useDependency, useInjector } from '@univerjs/core';
 import { Popup } from '@univerjs/design';
 import React, { useEffect, useRef, useState } from 'react';
-import type { IMouseEvent } from '@univerjs/engine-render';
 
 import { Menu } from '../../../components/menu/desktop/Menu';
 import { IContextMenuService } from '../../../services/contextmenu/contextmenu.service';
@@ -67,11 +67,13 @@ export function DesktopContextMenu() {
             setMenuType(menuType);
             setOffset([event.clientX, event.clientY]);
             setVisible(true);
+            contextMenuService.trigger$.next(1);
         });
     }
 
     function handleClose() {
         setVisible(false);
+        contextMenuService.trigger$.next(0);
     }
 
     return (