@nocobase/client-v2 2.4.0-alpha.7 → 2.4.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.4.0-alpha.7",
+  "version": "2.4.0-alpha.8",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.4.0-alpha.7",
-    "@nocobase/flow-engine": "2.4.0-alpha.7",
-    "@nocobase/sdk": "2.4.0-alpha.7",
-    "@nocobase/shared": "2.4.0-alpha.7",
-    "@nocobase/utils": "2.4.0-alpha.7",
+    "@nocobase/evaluators": "2.4.0-alpha.8",
+    "@nocobase/flow-engine": "2.4.0-alpha.8",
+    "@nocobase/sdk": "2.4.0-alpha.8",
+    "@nocobase/shared": "2.4.0-alpha.8",
+    "@nocobase/utils": "2.4.0-alpha.8",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -49,5 +49,5 @@
     "react-router-dom": "^6.30.1",
     "zxing-wasm": "^3.1.3"
   },
-  "gitHead": "bb018bfc8bdcc0f399244d2f248c55e51ceb2d1e"
+  "gitHead": "e8ec2bff07f4b405e08f984c9e92b44491bde462"
 }

package/src/flow/internal/utils/__tests__/quickEditViewContainer.test.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { getQuickEditViewContainer, syncQuickEditPreventClose } from '../quickEditViewContainer';
+
+describe('quickEditViewContainer', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('only resolves the view container of a QuickEditFormModel parent', () => {
+    const viewContainer = { update: vi.fn() };
+    expect(getQuickEditViewContainer({ parent: { use: 'QuickEditFormModel', viewContainer } })).toBe(viewContainer);
+    expect(getQuickEditViewContainer({ parent: { use: 'EditFormModel', viewContainer } })).toBeUndefined();
+    expect(getQuickEditViewContainer({ parent: null })).toBeUndefined();
+    expect(getQuickEditViewContainer(undefined)).toBeUndefined();
+  });
+
+  it('locks the popover while the dropdown is open and releases it after the closing click', () => {
+    const update = vi.fn();
+    const model = { parent: { use: 'QuickEditFormModel', viewContainer: { update } } };
+
+    syncQuickEditPreventClose(model, true);
+    expect(update).toHaveBeenCalledWith({ preventClose: true });
+
+    syncQuickEditPreventClose(model, false);
+    expect(update).toHaveBeenCalledTimes(1);
+
+    vi.runAllTimers();
+    expect(update).toHaveBeenCalledTimes(2);
+    expect(update).toHaveBeenLastCalledWith({ preventClose: false });
+  });
+
+  it('is a no-op outside of quick edit', () => {
+    const update = vi.fn();
+    syncQuickEditPreventClose({ parent: { use: 'EditFormModel', viewContainer: { update } } }, true);
+    syncQuickEditPreventClose({ parent: { use: 'QuickEditFormModel' } }, true);
+    vi.runAllTimers();
+    expect(update).not.toHaveBeenCalled();
+  });
+});

package/src/flow/internal/utils/quickEditViewContainer.ts

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+type QuickEditViewContainerLike = {
+  update?: (newConfig: { preventClose?: boolean }) => unknown;
+};
+
+type QuickEditFieldModelLike = {
+  parent?: {
+    use?: string;
+    viewContainer?: QuickEditViewContainerLike;
+  } | null;
+};
+
+export function getQuickEditViewContainer(model: QuickEditFieldModelLike | undefined) {
+  const parent = model?.parent;
+  if (parent?.use !== 'QuickEditFormModel') {
+    return undefined;
+  }
+  return parent.viewContainer;
+}
+
+/**
+ * Keeps the quick edit popover open while a nested dropdown (Select / Cascader) is open. The outside click that
+ * closes the dropdown would otherwise also close the popover and drop the unsaved edit. Releasing is deferred so the
+ * closing click itself never reaches the popover as a close request.
+ */
+export function syncQuickEditPreventClose(model: QuickEditFieldModelLike | undefined, dropdownOpen: boolean) {
+  const container = getQuickEditViewContainer(model);
+  if (!container?.update) {
+    return;
+  }
+  if (dropdownOpen) {
+    container.update({ preventClose: true });
+    return;
+  }
+  setTimeout(() => {
+    container.update?.({ preventClose: false });
+  }, 0);
+}

package/src/flow/models/blocks/form/QuickEditFormModel.tsx

@@ -36,6 +36,14 @@ const QUICK_EDIT_MOBILE_CONTENT_PADDING = '8px var(--nb-mobile-page-tabs-content
 const QUICK_EDIT_MOBILE_ACTIONS_PADDING =
   '8px var(--nb-mobile-page-tabs-content-padding, 12px) calc(80px + env(safe-area-inset-bottom, 0px))';
 const QUICK_EDIT_MOBILE_MEDIA_QUERY = '(max-width: 768px)';
+// Dropdown-style editors open upwards inside the desktop popover so the option list does not cover the Submit and
+// Cancel buttons rendered right below the field. antd still flips the list downwards when there is no room above.
+const QUICK_EDIT_DROPDOWN_UP_MODELS = [
+  'SelectFieldModel',
+  'RecordSelectFieldModel',
+  'CascadeSelectFieldModel',
+  'CascadeSelectListFieldModel',
+];
 
 type QuickEditViewBeforeClosePayload = {
   result?: unknown;
@@ -435,6 +443,13 @@ QuickEditFormModel.registerFlow({
           });
           fieldModel.setProps(getQuickEditFieldProps(collectionField, ctx.model._fieldProps));
           fieldModel.setProps({ sourceFieldModelUid: ctx.inputArgs.sourceFieldModelUid });
+          if (
+            !ctx.model.context.isMobileLayout &&
+            QUICK_EDIT_DROPDOWN_UP_MODELS.includes(use) &&
+            fieldModel.props.placement == null
+          ) {
+            fieldModel.setProps({ placement: 'topLeft' });
+          }
           ctx.model.context.defineProperty('collectionField', {
             get: () => collectionField,
           });

package/src/flow/models/blocks/form/__tests__/QuickEditFormModel.quickEdit.test.ts

@@ -10,6 +10,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { FlowEngine, FlowModel, SingleRecordResource } from '@nocobase/flow-engine';
 import { QuickEditFormModel } from '../QuickEditFormModel';
+import { SelectFieldModel } from '../../../fields/SelectFieldModel';
 
 describe('QuickEditFormModel - quick edit save triggers API (regression)', () => {
   let engine: FlowEngine;
@@ -414,4 +415,47 @@ describe('QuickEditFormModel - quick edit save triggers API (regression)', () =>
 
     expect(api.request).toHaveBeenCalledTimes(1);
   });
+
+  it('opens dropdown editors upwards in the desktop popover so they do not cover the actions', async () => {
+    engine.registerModels({ QuickEditFormModel, SelectFieldModel });
+    const ds = engine.context.dataSourceManager.getDataSource('main');
+    ds.addCollection({
+      name: 'users',
+      fields: [
+        {
+          name: 'tags',
+          type: 'array',
+          interface: 'multipleSelect',
+          uiSchema: { title: 'Tags', enum: [{ label: 'A', value: 'a' }] },
+        },
+      ],
+    });
+
+    const desktopModel = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: 'qe-desktop',
+      stepParams: {
+        quickEditFormSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'users', fieldPath: 'tags' },
+        },
+      },
+    });
+    await desktopModel.applyFlow('quickEditFormSettings', { record: {} });
+    const desktopField = desktopModel.subModels.fields[0];
+    expect(desktopField.use).toBe('SelectFieldModel');
+    expect(desktopField.props.placement).toBe('topLeft');
+
+    const mobileModel = engine.createModel<QuickEditFormModel>({
+      use: QuickEditFormModel,
+      uid: 'qe-mobile',
+      stepParams: {
+        quickEditFormSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'users', fieldPath: 'tags' },
+        },
+      },
+    });
+    mobileModel.context.defineProperty('isMobileLayout', { value: true });
+    await mobileModel.applyFlow('quickEditFormSettings', { record: {} });
+    expect(mobileModel.subModels.fields[0].props.placement).toBeUndefined();
+  });
 });

package/src/flow/models/fields/AssociationFieldModel/CascadeSelectFieldModel.tsx

@@ -25,6 +25,7 @@ import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable }
 import { CSS } from '@dnd-kit/utilities';
 import { AssociationFieldModel } from './AssociationFieldModel';
 import { transformNestedData } from '../ClickableFieldModel';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 type CascadeHydrateStatus = 'pending' | 'done';
 
@@ -373,7 +374,12 @@ export class CascadeSelectInnerFieldModel extends AssociationFieldModel {
     this.setProps({ onPopupScroll: fn });
   }
   set onDropdownVisibleChange(fn) {
-    this.setProps({ onDropdownVisibleChange: fn });
+    this.setProps({
+      onDropdownVisibleChange: (visible: boolean) => {
+        syncQuickEditPreventClose(this, visible);
+        fn(visible);
+      },
+    });
   }
   set onSearch(fn) {
     this.setProps({ onSearch: fn });

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -41,6 +41,7 @@ import { BlockSceneEnum } from '../../base/BlockModel';
 import { ActionWithoutPermission } from '../../base/ActionModel';
 import { EditFormModel } from '../../blocks';
 import { hasAncestorModel } from './recordSelectSettingsUtils';
+import { syncQuickEditPreventClose } from '../../../internal/utils/quickEditViewContainer';
 
 function RemoteModelRenderer({ options }) {
   const ctx = useFlowViewContext();
@@ -308,6 +309,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
             }
             setKeepOpenRuntime({ preventCloseOnSelect: false, open });
           }
+          syncQuickEditPreventClose(model, open);
           others.onDropdownVisibleChange?.(open);
         }}
         optionRender={({ data }) => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -209,7 +209,7 @@ function hasFormValueDrivenDataScopeField(fieldModel: any) {
 }
 
 const MemoFieldRenderer = React.memo(FieldModelRenderer, (prev, next) => {
-  return prev.value === next.value && prev.model === next.model;
+  return prev.value === next.value && prev.model === next.model && prev.disabled === next.disabled;
 });
 
 export function buildRowPathFromFieldIndex(fieldIndex: unknown): Array<string | number> | null {
@@ -345,11 +345,14 @@ interface CellProps {
   memoKey?: string;
   width?: number;
   commitOnChange?: boolean;
+  disabled?: boolean;
 }
 
 const MemoCell: React.FC<CellProps> = React.memo(
-  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange }) => {
+  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange, disabled }) => {
     const isNew = record?.__is_new__;
+    // 子表格整体被禁用时，列上的显示模式可能仍是“可编辑”，这里需要把父级的禁用状态一并合并进来，否则单元格仍可编辑。
+    const columnDisabled = disabled || parent.props.disabled;
     return (
       <div
         style={{
@@ -442,9 +445,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
               style={{ marginBottom: 0 }}
               showLabel={false}
               disabled={
-                parent.props.disabled ||
-                (!isNew && parent.props.aclDisabled) ||
-                (isNew && parent.props.aclCreateDisabled)
+                columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
               }
             >
               {fork.constructor.isLargeField ? (
@@ -456,9 +457,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
                   }}
                   defaultValue={value}
                   disabled={
-                    parent.props.disabled ||
-                    (!isNew && parent.props.aclDisabled) ||
-                    (isNew && parent.props.aclCreateDisabled)
+                    columnDisabled || (!isNew && parent.props.aclDisabled) || (isNew && parent.props.aclCreateDisabled)
                   }
                 />
               ) : (
@@ -481,7 +480,8 @@ const MemoCell: React.FC<CellProps> = React.memo(
       prev.memoKey === next.memoKey &&
       prev.width === next.width &&
       prev.commitOnChange === next.commitOnChange &&
-      prev.rowIdx === next.rowIdx
+      prev.rowIdx === next.rowIdx &&
+      prev.disabled === next.disabled
     );
   },
 );
@@ -740,7 +740,7 @@ export class SubTableColumnModel<
   }
   renderItem(): any {
     return (props) => {
-      const { value, id, rowIdx, record, parentFieldIndex, parentItem } = props || {};
+      const { value, id, rowIdx, record, parentFieldIndex, parentItem, disabled: subTableDisabled } = props || {};
       // 子表格列模型本身没有行级 fieldIndex，上下文中无法把 `roles.name` 解析成 `roles[0].name`，
       // 导致“默认值/赋值规则”在对多关系字段下无法生效。
       // 这里为每一行创建一个 column fork，并注入 fieldIndex，让规则引擎能够按行解析与写入。
@@ -754,6 +754,7 @@ export class SubTableColumnModel<
       const fieldModel: any = this.subModels.field;
       const cellModeKey = [
         rowForkKey,
+        subTableDisabled ? 'disabled' : 'enabled',
         this.props.pattern,
         this.props.readPretty,
         this.props.titleField,
@@ -828,6 +829,7 @@ export class SubTableColumnModel<
           parentItem={parentItem}
           rowFork={rowFork}
           memoKey={cellModeKey}
+          disabled={subTableDisabled}
           width={this.props.width}
           commitOnChange={this.hasFormulaColumn || this.hasFormValueDrivenDataScopeColumn}
         />

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableField.tsx

@@ -192,6 +192,7 @@ export function SubTableField(props) {
           rowIdx: pageRowIdx,
           id: `field-${String(columnKey)}-${rowBindingKey}`,
           value: text,
+          disabled,
           parentFieldIndex,
           parentItem,
           onChange: (value) => {

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/__tests__/SubTableField.disabled.test.tsx

@@ -0,0 +1,90 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@nocobase/test/client';
+import { SubTableField } from '../SubTableField';
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useTranslation: () => ({
+    t: (value: string) => value,
+  }),
+}));
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<any>('antd');
+  return {
+    ...actual,
+    Table: ({ dataSource = [], columns = [] }: any) => (
+      <div data-testid="subtable">
+        <div data-testid="column-keys">{columns.map((column: any) => String(column.key)).join(',')}</div>
+        {dataSource.map((record: any, rowIdx: number) => (
+          <div data-testid={`row-${rowIdx}`} key={record.__index__ || rowIdx}>
+            {columns.map((column: any) => (
+              <div data-testid={`cell-${rowIdx}-${String(column.dataIndex || column.key)}`} key={column.key}>
+                {column.render?.(record[column.dataIndex], record, rowIdx)}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    ),
+  };
+});
+
+function renderSubTableField(disabled?: boolean) {
+  const renderArgs: any[] = [];
+  const columns = [
+    {
+      key: 'name',
+      dataIndex: 'name',
+      render: (args: any) => {
+        renderArgs.push(args);
+        return <span>{args.value || 'empty'}</span>;
+      },
+    },
+  ];
+
+  render(
+    <SubTableField
+      columns={columns}
+      disabled={disabled}
+      pageSize={10}
+      filterTargetKey="id"
+      fieldPathArray={['roles']}
+      getCurrentValue={() => [{ __index__: 'row-1', id: 1, name: 'admin' }]}
+    />,
+  );
+
+  return renderArgs;
+}
+
+describe('SubTableField disabled', () => {
+  it('passes the disabled state down to every column cell', () => {
+    const renderArgs = renderSubTableField(true);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(true);
+  });
+
+  it('keeps cells editable when the sub-table is not disabled', () => {
+    const renderArgs = renderSubTableField(false);
+
+    expect(renderArgs).toHaveLength(1);
+    expect(renderArgs[0].disabled).toBe(false);
+  });
+
+  it('hides the remove column when the sub-table is disabled', () => {
+    renderSubTableField(true);
+
+    expect(screen.getByTestId('column-keys')).not.toHaveTextContent('delete');
+  });
+});

package/src/flow/models/fields/SelectFieldModel.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
+import { syncQuickEditPreventClose } from '../../internal/utils/quickEditViewContainer';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
   const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
@@ -62,6 +63,10 @@ export class SelectFieldModel extends FieldModel {
           this.props.onChange?.(nextValue?.value);
         }}
         options={options}
+        onDropdownVisibleChange={(open) => {
+          syncQuickEditPreventClose(this, open);
+          this.props.onDropdownVisibleChange?.(open);
+        }}
         labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (

package/src/flow/models/fields/__tests__/SelectFieldModel.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { SelectFieldModel } from '../SelectFieldModel';
 
 function mockT(text: string) {
@@ -40,4 +40,32 @@ describe('SelectFieldModel', () => {
 
     expect(element.props.value).toEqual({ label: '是', value: true });
   });
+
+  it('keeps the quick edit popover open while the dropdown is open', () => {
+    vi.useFakeTimers();
+    try {
+      const update = vi.fn();
+      const onDropdownVisibleChange = vi.fn();
+      const model = {
+        props: { value: undefined, onDropdownVisibleChange },
+        parent: { use: 'QuickEditFormModel', viewContainer: { update } },
+        context: { collectionField: { uiSchema: { enum: [] } } },
+        translate: mockT,
+      } as unknown as SelectFieldModel;
+
+      const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+      element.props.onDropdownVisibleChange(true);
+      expect(update).toHaveBeenCalledWith({ preventClose: true });
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
+
+      element.props.onDropdownVisibleChange(false);
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+      expect(update).toHaveBeenCalledTimes(1);
+      vi.runAllTimers();
+      expect(update).toHaveBeenLastCalledWith({ preventClose: false });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });