@nocobase/flow-engine 2.2.0-beta.9 → 2.2.0

package/src/components/subModel/LazyDropdown.tsx

@@ -8,8 +8,8 @@
  */
 
 import { css } from '@emotion/css';
-import { Dropdown, DropdownProps, Empty, Input, InputProps, Spin } from 'antd';
-import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ConfigProvider, Dropdown, DropdownProps, Empty, Input, InputProps, Spin, theme } from 'antd';
+import React, { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useFlowEngine } from '../../provider';
 
 // ==================== Types ====================
@@ -69,16 +69,6 @@ interface ExtendedMenuInfo {
 
 // ==================== Custom Hooks ====================
 
-/**
- * 计算合适的下拉菜单最大高度
- */
-const useNiceDropdownMaxHeight = () => {
-  return useMemo(() => {
-    const maxHeight = Math.min(window.innerHeight * 0.6, 400);
-    return maxHeight;
-  }, []);
-};
-
 /**
  * 处理异步菜单项加载的逻辑
  */
@@ -484,13 +474,10 @@ const createSearchItem = (
           if (shouldActivateSearchSubmenu) {
             activateSearchSubmenu(searchKey);
           }
-          if ((e.nativeEvent as any)?.isComposing || searchHandlers.isComposing(searchKey)) {
+          if ((e.nativeEvent as InputEvent).isComposing || searchHandlers.isComposing(searchKey)) {
             searchHandlers.updateInputValue(searchKey, value);
             return;
           }
-          if (!value && shouldActivateSearchSubmenu) {
-            deactivateSearchSubmenu(searchKey);
-          }
           searchHandlers.updateSearchValue(searchKey, value);
         }}
         onCompositionStart={(e) => {
@@ -504,11 +491,7 @@ const createSearchItem = (
           e.stopPropagation();
           const value = e.currentTarget.value;
           if (shouldActivateSearchSubmenu) {
-            if (value) {
-              activateSearchSubmenu(searchKey);
-            } else {
-              deactivateSearchSubmenu(searchKey);
-            }
+            activateSearchSubmenu(searchKey);
           }
           searchHandlers.endComposition(searchKey, value);
         }}
@@ -516,11 +499,21 @@ const createSearchItem = (
           e.stopPropagation();
         }}
         onKeyDown={(e) => {
+          if (e.key === 'Escape' || e.key === 'Tab') {
+            deactivateSearchSubmenu(searchKey);
+            return;
+          }
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
           e.stopPropagation();
         }}
         onMouseDown={(e) => {
           // 防止菜单聚焦丢失或页面滚动
           e.stopPropagation();
+          if (shouldActivateSearchSubmenu) {
+            activateSearchSubmenu(searchKey);
+          }
         }}
         size="small"
         style={{
@@ -552,7 +545,8 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
-const SUBMENU_CLOSE_DELAY = 0.05;
+const DEFAULT_DROPDOWN_MAX_HEIGHT = 400;
+const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
   motionLeave: false,
@@ -561,14 +555,23 @@ const dropdownPersistRegistry: Map<string, number> = new Map();
 
 const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownMenuProps }> = ({ menu, ...props }) => {
   const engine = useFlowEngine();
+  const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext);
+  const { token } = theme.useToken();
+  const triggerId = React.useId();
+  const showArrow = Boolean(props.arrow);
   const [menuVisible, setMenuVisible] = useState(false);
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState(DEFAULT_DROPDOWN_MAX_HEIGHT);
   const [openKeys, setOpenKeys] = useState<Set<string>>(new Set());
-  const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null);
   const [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
+  const activeSearchKeyRef = useRef<string | null>(null);
   const closeByOutsideClickRef = useRef(false);
   const skipPreserveActiveSearchRef = useRef(false);
-  const dropdownMaxHeight = useNiceDropdownMaxHeight();
+  const triggerOpenClassName = `nb-lazy-dropdown-trigger-${triggerId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const defaultOpenClassName = `${getPrefixCls('dropdown', props.prefixCls)}-open`;
+  const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName]
+    .filter(Boolean)
+    .join(' ');
   const t = engine.translate.bind(engine);
 
   // 解构 menu，避免在 effect 中直接依赖整个对象，减少不必要的重跑并满足 exhaustive-deps
@@ -587,15 +590,37 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
 
+  useLayoutEffect(() => {
+    if (!menuVisible) return;
+
+    const updateDropdownMaxHeight = () => {
+      const trigger = document.querySelector<HTMLElement>(`.${triggerOpenClassName}`);
+      if (!trigger) return;
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const placementOffset = token.marginXXS + (showArrow ? token.sizePopupArrow / 2 : 0);
+      const reservedSpace = placementOffset + token.marginXXS;
+      const availableAbove = triggerRect.top - reservedSpace;
+      const availableBelow = window.innerHeight - triggerRect.bottom - reservedSpace;
+      const nextMaxHeight = Math.min(DEFAULT_DROPDOWN_MAX_HEIGHT, Math.max(0, availableAbove, availableBelow));
+
+      setDropdownMaxHeight(nextMaxHeight);
+    };
+
+    updateDropdownMaxHeight();
+    window.addEventListener('resize', updateDropdownMaxHeight);
+    return () => window.removeEventListener('resize', updateDropdownMaxHeight);
+  }, [menuVisible, showArrow, token.marginXXS, token.sizePopupArrow, triggerOpenClassName]);
+
   const closeMenu = useCallback(() => {
     setMenuVisible(false);
-    setActiveSearchKey(null);
+    activeSearchKeyRef.current = null;
     setOpenKeys(new Set());
     clearAllSearchValues();
   }, [clearAllSearchValues]);
 
   const activateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey(key);
+    activeSearchKeyRef.current = key;
     setOpenKeys((prev) => {
       if (prev.has(key)) return prev;
       const next = new Set(prev);
@@ -605,11 +630,14 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   }, []);
 
   const deactivateSearchSubmenu = useCallback((key: string) => {
-    setActiveSearchKey((prev) => (prev === key ? null : prev));
+    if (activeSearchKeyRef.current === key) {
+      activeSearchKeyRef.current = null;
+    }
   }, []);
 
   const closeActiveSearchForPath = useCallback(
     (keyPath: string) => {
+      const activeSearchKey = activeSearchKeyRef.current;
       if (
         !activeSearchKey ||
         keyPath === activeSearchKey ||
@@ -621,25 +649,26 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
       skipPreserveActiveSearchRef.current = true;
       clearSearchValue(activeSearchKey);
-      setActiveSearchKey(null);
+      activeSearchKeyRef.current = null;
       setOpenKeys((prev) => {
         const next = new Set(prev);
         next.delete(activeSearchKey);
         return next;
       });
     },
-    [activeSearchKey, clearSearchValue],
+    [clearSearchValue],
   );
 
   const handleMenuOpenChange = useCallback(
     (nextOpenKeys: string[]) => {
       let normalized = normalizeOpenKeys(nextOpenKeys);
-      if (activeSearchKey && openKeys.has(activeSearchKey) && !normalized.includes(activeSearchKey)) {
-        if (normalized.length || skipPreserveActiveSearchRef.current) {
+      const activeSearchKey = activeSearchKeyRef.current;
+      if (activeSearchKey && !normalized.includes(activeSearchKey)) {
+        if (skipPreserveActiveSearchRef.current) {
           clearSearchValue(activeSearchKey);
-          setActiveSearchKey(null);
+          activeSearchKeyRef.current = null;
         } else {
-          normalized = [activeSearchKey];
+          normalized = Array.from(openKeys);
         }
       }
 
@@ -658,7 +687,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       dropdownMenuProps.onOpenChange?.(normalized);
       skipPreserveActiveSearchRef.current = false;
     },
-    [activeSearchKey, clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
+    [clearSearchValue, dropdownMenuProps, openKeys, shouldPreventClose],
   );
 
   useEffect(() => {
@@ -666,7 +695,9 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
 
     const markOutsideClick = (event: MouseEvent | PointerEvent) => {
       const target = event.target as HTMLElement | null;
-      const isOutside = !target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsidePopup = target?.closest('.ant-dropdown, .ant-dropdown-menu, .ant-dropdown-menu-submenu-popup');
+      const isInsideCurrentTrigger = target?.closest(`.${triggerOpenClassName}`);
+      const isOutside = !isInsidePopup && !isInsideCurrentTrigger;
       closeByOutsideClickRef.current = isOutside;
       if (isOutside) {
         closeMenu();
@@ -679,7 +710,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       document.removeEventListener('pointerdown', markOutsideClick, true);
       document.removeEventListener('mousedown', markOutsideClick, true);
     };
-  }, [closeMenu, menuVisible]);
+  }, [closeMenu, menuVisible, triggerOpenClassName]);
 
   // 在挂载时，若存在 persistKey 且仍在持久期内，则尝试恢复打开状态
   useEffect(() => {
@@ -957,13 +988,15 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
       {...props}
       open={menuVisible}
       destroyPopupOnHide
+      mouseLeaveDelay={props.mouseLeaveDelay ?? MENU_CLOSE_DELAY}
+      openClassName={mergedOpenClassName}
       overlayClassName={overlayClassName}
       placement="bottomLeft"
       menu={{
         ...dropdownMenuProps,
         openKeys: Array.from(openKeys),
         items: items,
-        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? SUBMENU_CLOSE_DELAY,
+        subMenuCloseDelay: dropdownMenuProps.subMenuCloseDelay ?? MENU_CLOSE_DELAY,
         motion: dropdownMenuProps.motion ?? SUBMENU_MOTION_DISABLED,
         onClick: () => {},
         onOpenChange: handleMenuOpenChange,
@@ -974,7 +1007,7 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
         },
       }}
       onOpenChange={(visible, info) => {
-        if (!visible && activeSearchKey && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
+        if (!visible && activeSearchKeyRef.current && info?.source === 'trigger' && !closeByOutsideClickRef.current) {
           return;
         }
 

package/src/components/subModel/__tests__/AddSubModelButton.test.tsx

@@ -411,7 +411,7 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.getAllByText('No data').length).toBeGreaterThan(0));
   });
 
-  it('closes searchable submenu after focus without input', async () => {
+  it('keeps searchable submenu open while interacting with its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();
     class Parent extends FlowModel {}
@@ -451,7 +451,11 @@ describe('transformItems - searchable flags', () => {
     await user.click(screen.getByRole('textbox'));
     fireEvent.mouseLeave(screen.getByText('Fields'));
 
-    await waitFor(() => expect(screen.queryByText('Field 1')).not.toBeInTheDocument());
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 350));
+    });
+
+    expect(screen.getByText('Field 1')).toBeInTheDocument();
   });
 
   it('closes active searchable submenu after outside click', async () => {
@@ -499,6 +503,85 @@ describe('transformItems - searchable flags', () => {
     await waitFor(() => expect(screen.queryByText('Fields')).not.toBeInTheDocument());
   });
 
+  it('keeps the dropdown open when clicking its already-hovered trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="items"
+              items={[
+                {
+                  key: 'child',
+                  label: 'Child',
+                  createModelOptions: { use: 'Parent' },
+                },
+              ]}
+            >
+              Open
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByText('Open');
+    await user.hover(trigger);
+    await waitFor(() => expect(screen.getByText('Child')).toBeInTheDocument());
+    expect(trigger).toHaveClass('ant-dropdown-open');
+
+    await user.click(trigger);
+
+    expect(screen.getByText('Child')).toBeInTheDocument();
+  });
+
+  it('closes the dropdown when clicking another dropdown trigger', async () => {
+    const engine = new FlowEngine();
+    await engine.flowSettings.forceEnable();
+    class Parent extends FlowModel {}
+    engine.registerModels({ Parent });
+    const parent = engine.createModel<FlowModel>({ use: 'Parent' });
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <App>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="firstItems"
+              items={[{ key: 'first-child', label: 'First child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open first
+            </AddSubModelButton>
+            <AddSubModelButton
+              model={parent}
+              subModelKey="secondItems"
+              items={[{ key: 'second-child', label: 'Second child', createModelOptions: { use: 'Parent' } }]}
+            >
+              Open second
+            </AddSubModelButton>
+          </App>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    await user.hover(screen.getByText('Open first'));
+    await waitFor(() => expect(screen.getByText('First child')).toBeInTheDocument());
+
+    fireEvent.pointerDown(screen.getByText('Open second'));
+
+    await waitFor(() => expect(screen.queryByText('First child')).not.toBeInTheDocument());
+  });
+
   it('switches away from active searchable submenu and resets its input', async () => {
     const engine = new FlowEngine();
     await engine.flowSettings.forceEnable();

package/src/components/subModel/__tests__/LazyDropdown.test.tsx

@@ -0,0 +1,202 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { act, render, screen, userEvent, waitFor } from '@nocobase/test/client';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { FlowEngineProvider } from '../../../provider';
+import { FlowEngine } from '../../../flowEngine';
+import LazyDropdown from '../LazyDropdown';
+
+const setViewportHeight = (height: number) => {
+  Object.defineProperty(window, 'innerHeight', {
+    configurable: true,
+    value: height,
+  });
+};
+
+describe('LazyDropdown', () => {
+  const originalInnerHeight = window.innerHeight;
+
+  afterEach(() => {
+    setViewportHeight(originalInnerHeight);
+    vi.restoreAllMocks();
+  });
+
+  it('uses the current viewport space when opening after the viewport height changes', async () => {
+    setViewportHeight(720);
+    const engine = new FlowEngine();
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <LazyDropdown
+            trigger={['click']}
+            menu={{
+              items: [{ key: 'field', label: 'Field' }],
+            }}
+          >
+            <button type="button">Open fields</button>
+          </LazyDropdown>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open fields' });
+    vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({
+      bottom: 196,
+      height: 32,
+      left: 49,
+      right: 141,
+      top: 164,
+      width: 92,
+      x: 49,
+      y: 164,
+      toJSON: () => ({}),
+    });
+    setViewportHeight(460);
+
+    await user.click(trigger);
+
+    const menu = await screen.findByRole('menu');
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '256px', overflowY: 'auto' }));
+  });
+
+  it('updates the available height while the dropdown is open', async () => {
+    setViewportHeight(720);
+    const engine = new FlowEngine();
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <LazyDropdown
+            trigger={['click']}
+            menu={{
+              items: [{ key: 'field', label: 'Field' }],
+            }}
+          >
+            <button type="button">Open fields</button>
+          </LazyDropdown>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open fields' });
+    vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({
+      bottom: 196,
+      height: 32,
+      left: 49,
+      right: 141,
+      top: 164,
+      width: 92,
+      x: 49,
+      y: 164,
+      toJSON: () => ({}),
+    });
+
+    await user.click(trigger);
+
+    const menu = await screen.findByRole('menu');
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '400px', overflowY: 'auto' }));
+
+    act(() => {
+      setViewportHeight(460);
+      window.dispatchEvent(new Event('resize'));
+    });
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '256px', overflowY: 'auto' }));
+
+    act(() => {
+      setViewportHeight(720);
+      window.dispatchEvent(new Event('resize'));
+    });
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '400px', overflowY: 'auto' }));
+  });
+
+  it('reserves the placement offset when the dropdown has an arrow', async () => {
+    setViewportHeight(460);
+    const engine = new FlowEngine();
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <LazyDropdown
+            arrow
+            trigger={['click']}
+            menu={{
+              items: [{ key: 'field', label: 'Field' }],
+            }}
+          >
+            <button type="button">Open fields</button>
+          </LazyDropdown>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open fields' });
+    vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({
+      bottom: 196,
+      height: 32,
+      left: 49,
+      right: 141,
+      top: 164,
+      width: 92,
+      x: 49,
+      y: 164,
+      toJSON: () => ({}),
+    });
+
+    await user.click(trigger);
+
+    const menu = await screen.findByRole('menu');
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '248px', overflowY: 'auto' }));
+  });
+
+  it('uses the space above when it is larger than the space below', async () => {
+    setViewportHeight(460);
+    const engine = new FlowEngine();
+    const user = userEvent.setup();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <ConfigProvider>
+          <LazyDropdown
+            trigger={['click']}
+            menu={{
+              items: [{ key: 'field', label: 'Field' }],
+            }}
+          >
+            <button type="button">Open fields</button>
+          </LazyDropdown>
+        </ConfigProvider>
+      </FlowEngineProvider>,
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open fields' });
+    vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({
+      bottom: 332,
+      height: 32,
+      left: 49,
+      right: 141,
+      top: 300,
+      width: 92,
+      x: 49,
+      y: 300,
+      toJSON: () => ({}),
+    });
+
+    await user.click(trigger);
+
+    const menu = await screen.findByRole('menu');
+    await waitFor(() => expect(menu).toHaveStyle({ maxHeight: '292px', overflowY: 'auto' }));
+  });
+});