@nocobase/flow-engine 2.1.21 → 2.1.22

package/lib/components/MobilePopup.js

@@ -48,14 +48,34 @@ var import_lazy_helper = require("../lazy-helper");
 const { Popup } = (0, import_lazy_helper.lazy)(() => import("antd-mobile"), "Popup");
 const { CloseOutline } = (0, import_lazy_helper.lazy)(() => import("antd-mobile-icons"), "CloseOutline");
 const MobilePopup = /* @__PURE__ */ __name((props) => {
+  var _a;
   const { title, visible, onClose: closePopup, children, minHeight, className, footer } = props;
   const { t } = (0, import_react_i18next.useTranslation)();
   const { componentCls, hashId } = (0, import_MobilePopup.useMobileActionDrawerStyle)();
-  const style = (0, import_react.useMemo)(() => {
+  const bodyStyles = (_a = props.styles) == null ? void 0 : _a.body;
+  const popupStyle = (0, import_react.useMemo)(() => {
     return {
-      minHeight
+      minHeight: (bodyStyles == null ? void 0 : bodyStyles.minHeight) ?? minHeight,
+      height: bodyStyles == null ? void 0 : bodyStyles.height,
+      maxHeight: bodyStyles == null ? void 0 : bodyStyles.maxHeight
     };
-  }, [minHeight]);
+  }, [bodyStyles == null ? void 0 : bodyStyles.height, bodyStyles == null ? void 0 : bodyStyles.maxHeight, bodyStyles == null ? void 0 : bodyStyles.minHeight, minHeight]);
+  const bodyStyle = (0, import_react.useMemo)(() => {
+    return {
+      padding: 0,
+      ...bodyStyles
+    };
+  }, [bodyStyles]);
+  const handleCloseKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup]
+  );
   const theme = (0, import_react.useMemo)(() => {
     return {
       token: {
@@ -75,21 +95,19 @@ const MobilePopup = /* @__PURE__ */ __name((props) => {
       onClose: closePopup,
       onMaskClick: closePopup,
       bodyClassName: "nb-mobile-action-drawer-body",
-      bodyStyle: {
-        padding: 0
-      },
-      maskStyle: style,
-      style,
+      bodyStyle,
+      style: popupStyle,
       destroyOnClose: true
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", null, title), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "nb-mobile-action-drawer-header" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-placeholder" }, /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)), /* @__PURE__ */ import_react.default.createElement("span", { className: "nb-mobile-action-drawer-title" }, title), /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: "nb-mobile-action-drawer-close-icon",
         onClick: closePopup,
         role: "button",
         tabIndex: 0,
-        "aria-label": t("Close")
+        "aria-label": t("Close"),
+        onKeyDown: handleCloseKeyDown
       },
       /* @__PURE__ */ import_react.default.createElement(CloseOutline, null)
     )),

package/lib/components/MobilePopup.style.js

@@ -98,7 +98,7 @@ const genStyleHook = /* @__PURE__ */ __name((component, styleFn) => {
     );
     const memoizedWrapSSR = (0, import_react.useMemo)(() => {
       return wrapSSR;
-    }, [theme2, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    }, [wrapSSR]);
     return {
       wrapSSR: memoizedWrapSSR,
       hashId,
@@ -119,7 +119,7 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
         borderBottom: `1px solid ${token.colorSplit}`,
         position: "sticky",
         top: 0,
-        backgroundColor: "white",
+        backgroundColor: token.colorBgContainer,
         zIndex: 1e3,
         // to match the button named 'Add block'
         "& + .nb-grid-container > .nb-grid > .nb-grid-warp > .ant-btn": {
@@ -129,11 +129,21 @@ const useMobileActionDrawerStyle = genStyleHook("nb-mobile-action-drawer", (toke
       ".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": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/flow-engine",
-  "version": "2.1.21",
+  "version": "2.1.22",
   "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.1.21",
-    "@nocobase/shared": "2.1.21",
+    "@nocobase/sdk": "2.1.22",
+    "@nocobase/shared": "2.1.22",
     "ahooks": "^3.7.2",
     "axios": "^1.7.0",
     "dayjs": "^1.11.9",
@@ -37,5 +37,5 @@
   ],
   "author": "NocoBase Team",
   "license": "Apache-2.0",
-  "gitHead": "491141417d8338022651c9e99afbd2d84c1e2b0b"
+  "gitHead": "811fc3d272389739babdfa4338faf843d5bf04ff"
 }

package/src/components/MobilePopup.style.ts

@@ -124,7 +124,7 @@ const genStyleHook = <ComponentName extends OverrideComponent>(
     // 等 https://github.com/ant-design/cssinjs/pull/176 合并后，可以去掉这层缓存
     const memoizedWrapSSR = useMemo(() => {
       return wrapSSR;
-    }, [theme, token, hashId, prefixCls, iconPrefixCls, rootPrefixCls, props]);
+    }, [wrapSSR]);
 
     return {
       wrapSSR: memoizedWrapSSR,
@@ -147,7 +147,7 @@ export const useMobileActionDrawerStyle = genStyleHook('nb-mobile-action-drawer'
         borderBottom: `1px solid ${token.colorSplit}`,
         position: 'sticky',
         top: 0,
-        backgroundColor: 'white',
+        backgroundColor: token.colorBgContainer,
         zIndex: 1000,
 
         // to match the button named 'Add block'
@@ -159,12 +159,23 @@ 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',
       },
 

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';
@@ -31,11 +31,33 @@ export const MobilePopup: FC<MobilePopupProps> = (props) => {
   const { t } = useTranslation();
   const { componentCls, hashId } = useMobileActionDrawerStyle();
 
-  const style = useMemo(() => {
+  const bodyStyles = (props as MobilePopupProps & { styles?: { body?: React.CSSProperties } }).styles?.body;
+  const popupStyle = useMemo(() => {
     return {
-      minHeight,
+      minHeight: bodyStyles?.minHeight ?? minHeight,
+      height: bodyStyles?.height,
+      maxHeight: bodyStyles?.maxHeight,
     };
-  }, [minHeight]);
+  }, [bodyStyles?.height, bodyStyles?.maxHeight, bodyStyles?.minHeight, minHeight]);
+
+  const bodyStyle = useMemo(() => {
+    return {
+      padding: 0,
+      ...bodyStyles,
+    };
+  }, [bodyStyles]);
+
+  const handleCloseKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key !== 'Enter' && event.key !== ' ') {
+        return;
+      }
+
+      event.preventDefault();
+      closePopup();
+    },
+    [closePopup],
+  );
 
   const theme = useMemo(() => {
     return {
@@ -57,11 +79,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 +88,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__/MobilePopup.test.tsx

@@ -0,0 +1,109 @@
+/**
+ * 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 from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MobilePopup } from '../MobilePopup';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock('../MobilePopup.style', () => ({
+  useMobileActionDrawerStyle: () => ({
+    componentCls: 'nb-mobile-action-drawer',
+    hashId: 'hash',
+  }),
+}));
+
+vi.mock('../../lazy-helper', () => ({
+  lazy: (_loader: unknown, name: string) => {
+    if (name === 'Popup') {
+      const Popup = ({
+        children,
+        bodyStyle,
+        maskStyle,
+        style,
+      }: {
+        children: React.ReactNode;
+        bodyStyle?: React.CSSProperties;
+        maskStyle?: React.CSSProperties;
+        style?: React.CSSProperties;
+      }) => (
+        <div data-testid="mobile-popup" style={style}>
+          <div data-testid="mobile-popup-mask" style={maskStyle} />
+          <div data-testid="mobile-popup-body" style={bodyStyle}>
+            {children}
+          </div>
+        </div>
+      );
+
+      return { Popup };
+    }
+
+    return {
+      CloseOutline: () => <span data-testid="close-outline" />,
+    };
+  },
+}));
+
+describe('MobilePopup', () => {
+  const MobilePopupWithDrawerStyles = MobilePopup as React.ComponentType<
+    React.ComponentProps<typeof MobilePopup> & { styles?: { body?: React.CSSProperties } }
+  >;
+
+  it('applies drawer body styles as max bounds without forcing fixed half-window height', () => {
+    render(
+      <MobilePopupWithDrawerStyles visible title="Title" styles={{ body: { maxHeight: '50vh' } }} onClose={vi.fn()}>
+        body
+      </MobilePopupWithDrawerStyles>,
+    );
+
+    expect(screen.getByTestId('mobile-popup')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-body')).toHaveStyle({
+      maxHeight: '50vh',
+    });
+    expect(screen.getByTestId('mobile-popup-mask')).not.toHaveStyle({
+      maxHeight: '50vh',
+    });
+  });
+
+  it('closes from the header close icon with Enter or Space', () => {
+    const onClose = vi.fn();
+    render(
+      <MobilePopup visible title="Title" onClose={onClose}>
+        body
+      </MobilePopup>,
+    );
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    fireEvent.keyDown(closeButton, { key: 'Enter' });
+    fireEvent.keyDown(closeButton, { key: ' ' });
+
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it('keeps long header titles in a constrained title element separate from the close button', () => {
+    const longTitle = 'A very long table column title that should not push the close button outside the drawer';
+
+    render(
+      <MobilePopup visible title={longTitle} onClose={vi.fn()}>
+        body
+      </MobilePopup>,
+    );
+
+    expect(screen.getByText(longTitle)).toHaveClass('nb-mobile-action-drawer-title');
+    expect(screen.getByRole('button', { name: 'Close' })).toHaveClass('nb-mobile-action-drawer-close-icon');
+  });
+});