@nocobase/flow-engine 2.2.0-beta.17 → 2.2.0-beta.18

package/lib/components/subModel/LazyDropdown.js

@@ -44,12 +44,6 @@ var import_css = require("@emotion/css");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var import_provider = require("../../provider");
-const useNiceDropdownMaxHeight = /* @__PURE__ */ __name(() => {
-  return (0, import_react.useMemo)(() => {
-    const maxHeight = Math.min(window.innerHeight * 0.6, 400);
-    return maxHeight;
-  }, []);
-}, "useNiceDropdownMaxHeight");
 const useAsyncMenuItems = /* @__PURE__ */ __name((menuVisible, rootItems, resetKey, openKeySet, refreshKeys) => {
   const [loadedChildren, setLoadedChildren] = (0, import_react.useState)({});
   const [loadingKeys, setLoadingKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
@@ -411,6 +405,7 @@ const KEEP_OPEN_LABEL_STYLE = {
   width: "100%"
 };
 const DROPDOWN_PERSIST_TTL_MS = 350;
+const DEFAULT_DROPDOWN_MAX_HEIGHT = 400;
 const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
@@ -420,8 +415,11 @@ const dropdownPersistRegistry = /* @__PURE__ */ new Map();
 const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const engine = (0, import_provider.useFlowEngine)();
   const { getPrefixCls } = import_react.default.useContext(import_antd.ConfigProvider.ConfigContext);
+  const { token } = import_antd.theme.useToken();
   const triggerId = import_react.default.useId();
+  const showArrow = Boolean(props.arrow);
   const [menuVisible, setMenuVisible] = (0, import_react.useState)(false);
+  const [dropdownMaxHeight, setDropdownMaxHeight] = (0, import_react.useState)(DEFAULT_DROPDOWN_MAX_HEIGHT);
   const [openKeys, setOpenKeys] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const [rootItems, setRootItems] = (0, import_react.useState)([]);
   const [rootLoading, setRootLoading] = (0, import_react.useState)(false);
@@ -431,7 +429,6 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   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 dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
   const { items: menuItems, keepDropdownOpen, persistKey, stateVersion, refreshKeys, ...dropdownMenuProps } = menu;
   const { loadedChildren, loadingKeys, handleLoadChildren } = useAsyncMenuItems(
@@ -445,6 +442,23 @@ const LazyDropdown = /* @__PURE__ */ __name(({ menu, ...props }) => {
   const { searchValues, inputValues, clearSearchValue, clearAllSearchValues } = searchHandlers;
   const { requestKeepOpen, shouldPreventClose } = useKeepDropdownOpen();
   useSubmenuStyles(menuVisible, dropdownMaxHeight);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!menuVisible) return;
+    const updateDropdownMaxHeight = /* @__PURE__ */ __name(() => {
+      const trigger = document.querySelector(`.${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");
+    updateDropdownMaxHeight();
+    window.addEventListener("resize", updateDropdownMaxHeight);
+    return () => window.removeEventListener("resize", updateDropdownMaxHeight);
+  }, [menuVisible, showArrow, token.marginXXS, token.sizePopupArrow, triggerOpenClassName]);
   const closeMenu = (0, import_react.useCallback)(() => {
     setMenuVisible(false);
     activeSearchKeyRef.current = null;

package/lib/flowContext.js

@@ -3511,8 +3511,13 @@ function __mergeRunJSDocMeta(base, patch) {
 __name(__mergeRunJSDocMeta, "__mergeRunJSDocMeta");
 const _FlowRunJSContext = class _FlowRunJSContext extends FlowContext {
   constructor(delegate) {
+    var _a, _b;
     super();
     this.addDelegate(delegate);
+    const submit = (_b = (_a = delegate.blockModel) == null ? void 0 : _a.submitFromRunJs) == null ? void 0 : _b.bind(delegate.blockModel);
+    if (delegate.form && submit) {
+      this.defineProperty("form", { value: { ...delegate.form, submit } });
+    }
     this.defineProperty("React", { value: import_react.default });
     this.defineProperty("antd", { value: antd });
     this.defineProperty("dayjs", {

package/lib/resources/flowResource.js

@@ -60,6 +60,7 @@ const _ResourceError = class _ResourceError extends Error {
   constructor(error) {
     const data = toErrMessages(error).shift();
     super(data.message);
+    this.data = data;
     this.name = "ResponseError";
   }
   get code() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.2.0-beta.17",
+  "version": "2.2.0-beta.18",
   "private": false,
   "description": "A standalone flow engine for NocoBase, managing workflows, models, and actions.",
   "main": "lib/index.js",
@@ -8,8 +8,8 @@
   "dependencies": {
     "@formily/antd-v5": "1.x",
     "@formily/reactive": "2.x",
-    "@nocobase/sdk": "2.2.0-beta.17",
-    "@nocobase/shared": "2.2.0-beta.17",
+    "@nocobase/sdk": "2.2.0-beta.18",
+    "@nocobase/shared": "2.2.0-beta.18",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "d7a69c4f47fe38b17a2ce1408258902cf64f6c83"
+  "gitHead": "b74c962f7d35aa12012d908d16bd74fe6ac20a3d"
 }

package/src/__tests__/runjsFormSubmit.test.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { FlowContext, FlowRunJSContext } from '../flowContext';
+import { JSItemRunJSContext } from '../runjs-context/contexts/JSItemRunJSContext';
+
+describe('FlowRunJSContext form submission', () => {
+  it('uses the form block RunJS submit capability without changing the native form', () => {
+    const nativeSubmit = vi.fn();
+    const getFieldsValue = vi.fn(() => ({ name: 'Alice' }));
+    const form = { submit: nativeSubmit, getFieldsValue };
+    const submitFromRunJs = vi.fn();
+    const delegate = new FlowContext();
+    delegate.defineProperty('form', { value: form });
+    delegate.defineProperty('blockModel', { value: { submitFromRunJs } });
+
+    const ctx = new JSItemRunJSContext(delegate);
+
+    expect(ctx.form.getFieldsValue()).toEqual({ name: 'Alice' });
+    ctx.form.submit();
+    expect(submitFromRunJs).toHaveBeenCalledOnce();
+    expect(nativeSubmit).not.toHaveBeenCalled();
+    expect(form.submit).toBe(nativeSubmit);
+  });
+
+  it('keeps the native submit method when the block has no RunJS submit capability', () => {
+    const nativeSubmit = vi.fn();
+    const form = { submit: nativeSubmit };
+    const delegate = new FlowContext();
+    delegate.defineProperty('form', { value: form });
+    delegate.defineProperty('blockModel', { value: {} });
+
+    const ctx = new FlowRunJSContext(delegate);
+
+    ctx.form.submit();
+    expect(nativeSubmit).toHaveBeenCalledOnce();
+  });
+});

package/src/components/subModel/LazyDropdown.tsx

@@ -8,8 +8,8 @@
  */
 
 import { css } from '@emotion/css';
-import { ConfigProvider, 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;
-  }, []);
-};
-
 /**
  * 处理异步菜单项加载的逻辑
  */
@@ -555,6 +545,7 @@ const KEEP_OPEN_LABEL_STYLE: React.CSSProperties = {
 
 // 短暂保持打开状态的注册表（用于跨父节点快速重建时的恢复）
 const DROPDOWN_PERSIST_TTL_MS = 350;
+const DEFAULT_DROPDOWN_MAX_HEIGHT = 400;
 const MENU_CLOSE_DELAY = 0.3;
 const SUBMENU_MOTION_DISABLED = {
   motionEnter: false,
@@ -565,8 +556,11 @@ 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 [rootItems, setRootItems] = useState<Item[]>([]);
   const [rootLoading, setRootLoading] = useState(false);
@@ -578,7 +572,6 @@ const LazyDropdown: React.FC<Omit<DropdownProps, 'menu'> & { menu: LazyDropdownM
   const mergedOpenClassName = [props.openClassName ?? defaultOpenClassName, triggerOpenClassName]
     .filter(Boolean)
     .join(' ');
-  const dropdownMaxHeight = useNiceDropdownMaxHeight();
   const t = engine.translate.bind(engine);
 
   // 解构 menu，避免在 effect 中直接依赖整个对象，减少不必要的重跑并满足 exhaustive-deps
@@ -597,6 +590,28 @@ 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);
     activeSearchKeyRef.current = null;

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' }));
+  });
+});

package/src/flowContext.ts

@@ -4611,6 +4611,10 @@ export class FlowRunJSContext extends FlowContext {
   constructor(delegate: FlowContext) {
     super();
     this.addDelegate(delegate);
+    const submit = delegate.blockModel?.submitFromRunJs?.bind(delegate.blockModel);
+    if (delegate.form && submit) {
+      this.defineProperty('form', { value: { ...delegate.form, submit } });
+    }
     this.defineProperty('React', { value: React });
     this.defineProperty('antd', { value: antd });
     this.defineProperty('dayjs', {

package/src/resources/__tests__/flowResource.test.ts

@@ -79,6 +79,9 @@ describe('FlowResource - error handling', () => {
     expect(r.getError()).toBeNull();
 
     const err = new ResourceError({ response: { data: { error: { message: 'boom', code: 'X' } } } });
+    expect(err.data).toEqual({ message: 'boom', code: 'X' });
+    expect(err.message).toBe('boom');
+    expect(err.code).toBe('X');
     const ret = r.setError(err);
     expect(ret).toBe(r);
     expect(r.error).toBe(err);

package/src/resources/flowResource.ts

@@ -47,6 +47,7 @@ export class ResourceError extends Error {
   constructor(error) {
     const data = toErrMessages(error).shift();
     super(data.message);
+    this.data = data;
     this.name = 'ResponseError';
   }