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

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

@@ -40,6 +40,18 @@ type SelectedPathInfo = {
   meta?: ContextSelectorItem['meta'];
 };
 
+type MetaNodeTooltipOptions = { tooltip?: React.ReactNode };
+
+function getMetaNodeTooltip(meta?: ContextSelectorItem['meta']): React.ReactNode {
+  if (!meta) {
+    return undefined;
+  }
+
+  const metaWithTooltip = meta as ContextSelectorItem['meta'] & MetaNodeTooltipOptions;
+  const options = meta.options as MetaNodeTooltipOptions | undefined;
+  return metaWithTooltip.tooltip ?? options?.tooltip;
+}
+
 const normalizePath = (path: unknown): string[] | undefined => {
   if (!Array.isArray(path)) {
     return undefined;
@@ -85,6 +97,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   value,
   onChange,
   children,
+  active,
   metaTree,
   showSearch = false,
   parseValueToPath: customParseValueToPath = parseValueToPath,
@@ -92,6 +105,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
   open,
   onlyLeafSelectable = false,
   ignoreFieldNames,
+  dropdownFooter,
   ...cascaderProps
 }) => {
   const { token } = theme.useToken();
@@ -119,17 +133,28 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
 
         // 文本国际化：仅当 label 为字符串时进行翻译
         const baseLabel = typeof o.label === 'string' ? flowCtx.t(o.label) : o.label;
+        const labelText = typeof baseLabel === 'string' ? baseLabel : String(o.value);
+        const tooltip = getMetaNodeTooltip(meta);
+        const tooltipTitle = disabled
+          ? disabledReason || tooltip || flowCtx.t('This variable is not available')
+          : tooltip;
 
-        const label = disabled ? (
+        const label = tooltipTitle ? (
           <span>
             {baseLabel}
             <Tooltip
-              title={disabledReason || flowCtx.t('This variable is not available')}
-              placement="right"
-              overlayClassName="flow-variable-disabled-tip"
+              title={typeof tooltipTitle === 'string' ? flowCtx.t(tooltipTitle) : tooltipTitle}
+              placement="top"
+              classNames={{ root: 'flow-variable-tip' }}
               destroyTooltipOnHide
             >
-              <QuestionCircleOutlined style={{ marginLeft: 6, color: 'rgba(0,0,0,0.35)' }} />
+              <QuestionCircleOutlined
+                aria-label={`${labelText} tooltip`}
+                style={{
+                  marginLeft: token.marginXXS,
+                  color: disabled ? token.colorTextDisabled : token.colorTextDescription,
+                }}
+              />
             </Tooltip>
           </span>
         ) : (
@@ -144,7 +169,7 @@ const FlowContextSelectorComponent: React.FC<FlowContextSelectorProps> = ({
         };
       });
     },
-    [flowCtx],
+    [flowCtx, token.colorTextDescription, token.colorTextDisabled, token.marginXXS],
   );
 
   // 用于强制重新渲染的状态
@@ -265,13 +290,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}>
+      <Button type={hasSelected ? 'primary' : 'default'} style={defaultButtonStyle} disabled={cascaderProps.disabled}>
         x
       </Button>
     );
-  }, [currentPath]);
+  }, [active, cascaderProps.disabled, currentPath]);
 
   // 处理选择变化事件
   const handleChange = useCallback(
@@ -360,12 +385,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 +435,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/FormItem.tsx

@@ -54,15 +54,20 @@ const formItemPropKeys: (keyof ExtendedFormItemProps)[] = [
   'showLabel',
 ];
 
+const modelInternalPropKeys = ['globalSort'];
+
 export const FormItem = ({
   children,
   showLabel = true,
   labelWidth,
   ...rest
 }: ExtendedFormItemProps & ChildExtraProps) => {
+  const forwardedRest = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => !modelInternalPropKeys.includes(key)),
+  ) as ExtendedFormItemProps & ChildExtraProps;
   // 过滤掉 Form.Item 专用 props，只保留要传给子组件的
   const childProps = Object.fromEntries(
-    Object.entries(rest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
+    Object.entries(forwardedRest).filter(([key]) => !formItemPropKeys.includes(key as keyof ExtendedFormItemProps)),
   );
 
   const processedChildren =
@@ -74,7 +79,7 @@ export const FormItem = ({
           }
           return child;
         });
-  const { label, labelWrap, colon = true, layout } = rest;
+  const { label, labelWrap, colon = true, layout } = forwardedRest;
   const effectiveLabelWrap = !layout || layout === 'vertical' ? true : labelWrap;
   const labelColStyle =
     layout === 'vertical' ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
@@ -122,17 +127,17 @@ export const FormItem = ({
   };
   return (
     <Form.Item
-      {...rest}
-      style={{ ...formItemStyle, ...rest.style }}
+      {...forwardedRest}
+      style={{ ...formItemStyle, ...forwardedRest.style }}
       labelCol={{ style: labelColStyle }}
       layout={layout}
       label={renderLabel()}
       colon={false}
-      extra={rest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{rest.extra}</span>}
+      extra={forwardedRest.extra && <span style={{ whiteSpace: 'pre-wrap' }}>{forwardedRest.extra}</span>}
       tooltip={
-        rest.tooltip &&
+        forwardedRest.tooltip &&
         ({
-          title: rest.tooltip,
+          title: forwardedRest.tooltip,
           overlayInnerStyle: { whiteSpace: 'pre-line' },
         } as TooltipProps)
       }

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,14 +153,14 @@ 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',
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -159,19 +172,33 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
       '.nb-mobile-action-drawer-placeholder': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         visibility: 'hidden',
       },
 
+      '.nb-mobile-action-drawer-title': {
+        flex: '1 1 auto',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'center',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+
       '.nb-mobile-action-drawer-close-icon': {
         display: 'inline-block',
         padding: 12,
+        flex: '0 0 auto',
         cursor: 'pointer',
       },
 
       '.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/MobilePopup.tsx

@@ -8,7 +8,7 @@
  */
 
 import { ConfigProvider } from 'antd';
-import React, { FC, ReactNode, useMemo } from 'react';
+import React, { FC, ReactNode, useCallback, useMemo } from 'react';
 import { useMobileActionDrawerStyle } from './MobilePopup.style';
 import { useTranslation } from 'react-i18next';
 import { lazy } from '../lazy-helper';
@@ -26,16 +26,50 @@ interface MobilePopupProps {
   footer?: ReactNode;
 }
 
+const getMobilePopupMaxHeight = () => {
+  if (typeof CSS !== 'undefined' && CSS.supports?.('height', '100dvh')) {
+    return 'calc(100dvh - var(--nb-mobile-page-header-height, 46px))';
+  }
+
+  return 'calc(100vh - var(--nb-mobile-page-header-height, 46px))';
+};
+
 export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const defaultMaxHeight = getMobilePopupMaxHeight();
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight ?? defaultMaxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, defaultMaxHeight, minHeight]);
+
+  const bodyStyle = useMemo<React.CSSProperties>(() => {
+    return {
+      padding: 0,
+      maxHeight: defaultMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      ...bodyStyles,
+    };
+  }, [bodyStyles, defaultMaxHeight]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +91,8 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
         onClose={closePopup}
         onMaskClick={closePopup}
         bodyClassName="nb-mobile-action-drawer-body"
-        bodyStyle={{
-          padding: 0,
-        }}
-        maskStyle={style}
-        style={style}
+        bodyStyle={bodyStyle}
+        style={popupStyle}
         destroyOnClose
       >
         <div className="nb-mobile-action-drawer-header">
@@ -69,13 +100,14 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
           <span className="nb-mobile-action-drawer-placeholder">
             <CloseOutline />
           </span>
-          <span>{title}</span>
+          <span className="nb-mobile-action-drawer-title">{title}</span>
           <span
             className="nb-mobile-action-drawer-close-icon"
             onClick={closePopup}
             role="button"
             tabIndex={0}
             aria-label={t('Close')}
+            onKeyDown={handleCloseKeyDown}
           >
             <CloseOutline />
           </span>

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