@nocobase/flow-engine 2.2.0-alpha.1 → 2.2.0-alpha.3

package/src/__tests__/runjsRuntimeFeatures.test.ts

@@ -8,9 +8,9 @@
  */
 
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { FlowContext, FlowEngineContext, FlowRunJSContext } from '../flowContext';
+import { RUNJS_OPEN_VIEW_ROUTE_STATE } from '../utils/openViewRouteState';
 import { FlowEngine } from '../flowEngine';
-import { FlowContext } from '../flowContext';
 import { setupRunJSContexts } from '../runjs-context/setup';
 import { createJSRunnerWithVersion } from '..';
 import { RunJSContextRegistry } from '../runjs-context/registry';
@@ -267,6 +267,19 @@ describe('RunJS Runtime Features', () => {
       expect(runCtx.libs.dayjs).toBeDefined();
       expect(runCtx.libs.antdIcons).toBeDefined();
     });
+
+    it('should mark ctx.openView calls with route state only when RunJS passes display overrides', async () => {
+      const parentCtx = new FlowContext();
+      const openView = vi.fn(async () => undefined);
+      parentCtx.defineMethod('openView', openView);
+
+      const runCtx = new FlowRunJSContext(parentCtx);
+      await (runCtx as any).openView('popup', { mode: 'dialog', size: 'large' });
+      await (runCtx as any).openView('popup', { filterByTk: 1 });
+
+      expect(openView.mock.calls[0][1][RUNJS_OPEN_VIEW_ROUTE_STATE]).toEqual({ mode: 'dialog', size: 'large' });
+      expect(Object.prototype.hasOwnProperty.call(openView.mock.calls[1][1], RUNJS_OPEN_VIEW_ROUTE_STATE)).toBe(false);
+    });
   });
 
   describe('Actual code execution', () => {

package/src/components/FieldModelRenderer.tsx

@@ -10,7 +10,7 @@
 import type { FlowModelRendererProps } from './FlowModelRenderer';
 import { FlowModelRenderer } from './FlowModelRenderer';
 import _ from 'lodash';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
   'model',
@@ -28,49 +28,63 @@ const flowModelRendererPropKeys: (keyof FlowModelRendererProps)[] = [
 ];
 
 export function FieldModelRenderer(props: any) {
-  const { model, ...rest } = props;
+  const { model, onChange, ...rest } = props;
   const composingRef = useRef(false);
 
-  const handleChange = (e: any) => {
-    let val;
-    if (e && e.target && typeof e.target.value !== 'undefined') {
-      val = e.target.value;
-    } else if (
-      typeof e === 'string' ||
-      typeof e === 'number' ||
-      typeof e === 'boolean' ||
-      (typeof e === 'object' && !(e instanceof Event))
-    ) {
-      val = e;
-    } else {
-      val = null;
-    }
+  const handleChange = useCallback(
+    (e: any) => {
+      let val;
+      if (e && e.target && typeof e.target.value !== 'undefined') {
+        val = e.target.value;
+      } else if (
+        typeof e === 'string' ||
+        typeof e === 'number' ||
+        typeof e === 'boolean' ||
+        (typeof e === 'object' && !(e instanceof Event))
+      ) {
+        val = e;
+      } else {
+        val = null;
+      }
 
-    model.setProps({ value: val });
-    if (!composingRef.current) {
-      props.onChange?.(val);
-    }
-  };
-  const handleCompositionStart = () => {
+      const isComposing = composingRef.current || e?.nativeEvent?.isComposing;
+      if (isComposing) {
+        return;
+      }
+
+      model.setProps({ value: val });
+      if (!composingRef.current) {
+        onChange?.(val);
+      }
+    },
+    [model, onChange],
+  );
+  const handleCompositionStart = useCallback(() => {
     composingRef.current = true;
-  };
+  }, []);
 
-  const handleCompositionEnd = (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
-    composingRef.current = false;
-    if (flag) {
-      props.onChange(e);
-    }
-  };
+  const handleCompositionEnd = useCallback(
+    (e: React.CompositionEvent<HTMLInputElement>, flag = true) => {
+      composingRef.current = false;
+      if (flag) {
+        handleChange(e);
+      }
+    },
+    [handleChange],
+  );
 
-  const modelProps = {
-    onCompositionStart: handleCompositionStart,
-    onCompositionEnd: handleCompositionEnd,
-    ..._.omit(rest, flowModelRendererPropKeys),
-    onChange: handleChange,
-  };
+  const modelProps = useMemo(
+    () => ({
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      ..._.omit(rest, flowModelRendererPropKeys),
+      onChange: handleChange,
+    }),
+    [handleChange, handleCompositionEnd, handleCompositionStart, rest],
+  );
   useEffect(() => {
     model && model.setProps(modelProps);
-  }, [modelProps]);
+  }, [model, modelProps]);
 
   return <FlowModelRenderer model={model} {...rest} />;
 }

package/src/components/FlowContextSelector.tsx

@@ -85,6 +85,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -92,6 +93,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
+  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = theme.useToken();
@@ -265,13 +267,13 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
   // 默认按钮组件
   const defaultChildren = useMemo(() => {
-    const hasSelected = currentPath && currentPath.length > 0;
+    const hasSelected = active ?? Boolean(currentPath && currentPath.length > 0);
     return (
       <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle}>
         x
       </Button>
     );
-  }, [currentPath]);
+  }, [active, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(
@@ -360,12 +362,41 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
     [cascaderOnDropdownVisibleChange, open],
   );
 
+  // Footer hint at the bottom of the dropdown. Defaults to the "double click to choose entire object" hint whenever
+  // non-leaf selection is allowed (double-clicking a non-leaf selects the whole object). Callers can override with
+  // their own node, or pass `null` to hide it.
+  const footerNode = useMemo(() => {
+    if (dropdownFooter !== undefined) {
+      return dropdownFooter;
+    }
+    if (onlyLeafSelectable) {
+      return null;
+    }
+    return (
+      <div
+        className={css`
+          padding: 6px 12px;
+          color: ${token.colorTextDescription};
+          border-top: 1px solid ${token.colorSplit};
+          font-size: ${token.fontSizeSM}px;
+        `}
+      >
+        {flowCtx.t('Double click to choose entire object')}
+      </div>
+    );
+  }, [dropdownFooter, onlyLeafSelectable, token, flowCtx]);
+
   const renderDropdown = useCallback(
     (menu: React.ReactElement) => {
       const cascaderMenuNode = cascaderDropdownRender ? cascaderDropdownRender(menu) : menu;
       const cascaderMenu = React.isValidElement(cascaderMenuNode) ? cascaderMenuNode : <>{cascaderMenuNode}</>;
       if (!isSearchEnabled || children === null) {
-        return cascaderMenu;
+        return (
+          <>
+            {cascaderMenu}
+            {footerNode}
+          </>
+        );
       }
 
       return (
@@ -381,10 +412,11 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
             />
           </div>
           {cascaderMenu}
+          {footerNode}
         </>
       );
     },
-    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText],
+    [cascaderDropdownRender, cascaderSearchInputClassName, children, flowCtx, isSearchEnabled, searchText, footerNode],
   );
 
   const inlinePlaceholder =

package/src/components/MobilePopup.style.ts

@@ -11,7 +11,7 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { merge } from '@formily/shared';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
-import { useMemo, useContext } from 'react';
+import { useContext, useRef } from 'react';
 import { ConfigProvider, theme } from 'antd';
 
 const usePrefixCls = (
@@ -83,6 +83,10 @@ type UseComponentStyleResult = {
   componentCls: string;
   rootPrefixCls: string;
 };
+type WrapSSRCache = {
+  deps: unknown[];
+  wrapSSR: ReturnType<typeof useStyleRegister>;
+};
 
 const genStyleHook = <ComponentName extends OverrideComponent>(
   component: ComponentName,
@@ -122,9 +126,18 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
 
     // useStyleRegister 有 BUG，会导致重复渲染，所以这里做了一层缓存
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
-    const memoizedWrapSSR = useMemo(() => {
-      return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    const wrapSSRDeps = [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props];
+    const wrapSSRCacheRef = useRef<WrapSSRCache>();
+    const currentCache = wrapSSRCacheRef.current;
+    let memoizedWrapSSR: ReturnType<typeof useStyleRegister> = currentCache?.wrapSSR || wrapSSR;
+
+    if (!currentCache || wrapSSRDeps.some((dep, index) => dep !== currentCache.deps[index])) {
+      wrapSSRCacheRef.current = {
+        deps: wrapSSRDeps,
+        wrapSSR,
+      };
+      memoizedWrapSSR = wrapSSR;
+    }
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -140,7 +153,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
   return {
     [componentCls]: {
       '.nb-mobile-action-drawer-header': {
-        height: 'var(--nb-mobile-page-header-height)',
+        height: 'var(--nb-mobile-page-header-height, 46px)',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
@@ -171,7 +184,10 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-body': {
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
-        maxHeight: 'calc(100% - var(--nb-mobile-page-header-height))',
+        maxHeight: 'calc(100vh - var(--nb-mobile-page-header-height, 46px))',
+        '@supports (height: 100dvh)': {
+          maxHeight: 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))',
+        },
         overflowY: 'auto',
         overflowX: 'hidden',
         backgroundColor: token.colorBgLayout,

package/src/components/__tests__/FieldModelRenderer.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { vi } from 'vitest';
+import { FlowEngine } from '../../flowEngine';
+import { FlowModel } from '../../models/flowModel';
+import { FlowEngineProvider } from '../../provider';
+import { FieldModelRenderer } from '../FieldModelRenderer';
+
+class InputModel extends FlowModel {
+  render(): React.ReactNode {
+    return (
+      <input
+        data-testid="field-input"
+        value={this.props.value ?? ''}
+        onChange={this.props.onChange}
+        onCompositionStart={this.props.onCompositionStart}
+        onCompositionEnd={this.props.onCompositionEnd}
+      />
+    );
+  }
+}
+
+describe('FieldModelRenderer', () => {
+  it('updates model and form value for normal input changes', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'normal-input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.change(input, { target: { value: 'abc' } });
+
+    expect(model.props.value).toBe('abc');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('abc');
+  });
+
+  it('updates model and form value when field components pass values directly', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'direct-value-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onChange(123);
+    });
+
+    expect(model.props.value).toBe(123);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(123);
+  });
+
+  it('defers model and form value updates while IME composition is active', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'input-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    const input = await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+    });
+
+    fireEvent.compositionStart(input);
+    fireEvent.change(input, { target: { value: 't' }, nativeEvent: { isComposing: true } });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.compositionEnd(input, { target: { value: 'te' } });
+
+    expect(model.props.value).toBe('te');
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('te');
+  });
+
+  it('does not commit composition value when composition end opts out', async () => {
+    const flowEngine = new FlowEngine();
+    const model = new InputModel({
+      uid: 'composition-opt-out-field-model',
+      flowEngine,
+      props: {
+        value: '',
+      },
+    });
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+    const onChange = vi.fn();
+
+    render(
+      <FlowEngineProvider engine={flowEngine}>
+        <FieldModelRenderer model={model} onChange={onChange} />
+      </FlowEngineProvider>,
+    );
+
+    await screen.findByTestId('field-input');
+    await waitFor(() => {
+      expect(model.props.onChange).toBeTypeOf('function');
+      expect(model.props.onCompositionStart).toBeTypeOf('function');
+      expect(model.props.onCompositionEnd).toBeTypeOf('function');
+    });
+
+    act(() => {
+      model.props.onCompositionStart();
+      model.props.onChange({ target: { value: 'search' }, nativeEvent: { isComposing: true } });
+      model.props.onCompositionEnd({ target: { value: 'search' } }, false);
+    });
+
+    expect(model.props.value).toBe('');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/__tests__/MobilePopup.style.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * 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 React, { CSSProperties, ReactNode } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import { vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+import { useMobileActionDrawerStyle } from '../MobilePopup.style';
+
+vi.mock('antd-mobile', () => ({
+  Popup: ({
+    bodyClassName,
+    bodyStyle,
+    children,
+    className,
+    visible,
+  }: {
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    children?: ReactNode;
+    className?: string;
+    visible?: boolean;
+  }) =>
+    visible ? (
+      <div className={className} data-testid="popup-root">
+        <div className={`adm-popup-body ${bodyClassName || ''}`} data-testid="popup-body" style={bodyStyle}>
+          {children}
+        </div>
+      </div>
+    ) : null,
+}));
+
+vi.mock('antd-mobile-icons', () => ({
+  CloseOutline: () => <span data-testid="close-outline" />,
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+function StyleProbe() {
+  const { componentCls, hashId } = useMobileActionDrawerStyle();
+
+  return (
+    <div className={`${componentCls} ${hashId}`}>
+      <div className="nb-mobile-action-drawer-header" data-testid="drawer-header" />
+      <div className="nb-mobile-action-drawer-body" data-testid="drawer-body" />
+    </div>
+  );
+}
+
+function getInjectedStyles() {
+  return Array.from(document.querySelectorAll('style'))
+    .map((style) => style.textContent || '')
+    .join('\n')
+    .replace(/\s+/g, '');
+}
+
+describe('MobilePopup styles', () => {
+  it('mounts the action drawer class on the real popup body', async () => {
+    render(
+      <MobilePopup visible title="Edit" onClose={vi.fn()}>
+        <div style={{ height: 1200 }}>Long content</div>
+      </MobilePopup>,
+    );
+
+    const popupBody = await screen.findByTestId('popup-body');
+
+    expect(screen.getByTestId('popup-root')).toHaveClass('ant-nb-mobile-action-drawer');
+    expect(popupBody).toHaveClass('adm-popup-body');
+    expect(popupBody).toHaveClass('nb-mobile-action-drawer-body');
+    expect(popupBody).toHaveStyle({ padding: '0px' });
+  });
+
+  it('limits the mobile action drawer body by viewport height', async () => {
+    render(
+      <ConfigProvider>
+        <StyleProbe />
+      </ConfigProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getInjectedStyles()).toContain('.nb-mobile-action-drawer-body');
+    });
+
+    const styles = getInjectedStyles();
+
+    expect(styles).toContain('height:var(--nb-mobile-page-header-height,46px)');
+    expect(styles).toContain('max-height:calc(100vh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('max-height:calc(100dvh-var(--nb-mobile-page-header-height,46px))');
+    expect(styles).toContain('overflow-y:auto');
+    expect(styles).not.toContain('max-height:calc(100%-var(--nb-mobile-page-header-height))');
+  });
+});

package/src/components/dnd/index.tsx

@@ -35,6 +35,10 @@ type ToolbarDragAnchorDetail = {
   point: ToolbarDragAnchorPoint | null;
 };
 
+const getToolbarModelUidFromNode = (node: HTMLElement | null): string | null => {
+  return node?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]')?.getAttribute('data-model-uid') || null;
+};
+
 export const resolveOverlayAnchorTransform = ({
   activeId,
   active,
@@ -62,7 +66,7 @@ export const resolveOverlayAnchorTransform = ({
 const resolveDraggableHostNode = (activatorNode: HTMLElement | null) => {
   const ownerDocument = activatorNode?.ownerDocument;
   const floatToolbarContainer = activatorNode?.closest<HTMLElement>('.nb-toolbar-container[data-model-uid]');
-  const toolbarModelUid = floatToolbarContainer?.getAttribute('data-model-uid');
+  const toolbarModelUid = getToolbarModelUidFromNode(activatorNode);
 
   if (!ownerDocument || !toolbarModelUid) {
     return activatorNode;
@@ -95,6 +99,7 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
   const dragHandlerRef = useRef<HTMLSpanElement | null>(null);
   const draggableNodeRef = useRef<HTMLElement | null>(null);
   const pointerPressCleanupRef = useRef<(() => void) | null>(null);
+  const toolbarDragModelUidRef = useRef<string | null>(null);
   const isDraggingRef = useRef(isDragging);
   const isPointerPressActiveRef = useRef(false);
   const isToolbarDragActiveRef = useRef(false);
@@ -126,9 +131,13 @@ export const DragHandler: FC<{ model: FlowModel; children?: React.ReactNode }> =
         return;
       }
 
+      const toolbarModelUid =
+        getToolbarModelUidFromNode(dragHandlerRef.current) || toolbarDragModelUidRef.current || model.uid;
+      toolbarDragModelUidRef.current = active ? toolbarModelUid : null;
+
       ownerDocument.dispatchEvent(
         new CustomEvent(TOOLBAR_DRAG_ACTIVITY_EVENT, {
-          detail: { active, modelUid: model.uid },
+          detail: { active, modelUid: toolbarModelUid },
         }),
       );
     },