@nocobase/client-v2 2.1.0-alpha.30 → 2.1.0-alpha.31

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

@@ -22,6 +22,7 @@ import { FieldModel } from '../../base/FieldModel';
 import { DetailsItemModel } from '../details/DetailsItemModel';
 import { EditFormModel } from './EditFormModel';
 import _ from 'lodash';
+import { Tooltip } from 'antd';
 import { coerceForToOneField } from '../../../internal/utils/associationValueCoercion';
 import { buildDynamicNamePath } from './dynamicNamePath';
 
@@ -99,54 +100,63 @@ export class FormItemModel<T extends DefaultStructure = DefaultStructure> extend
 
   renderItem() {
     const fieldModel = this.subModels.field as FieldModel;
-    // 行索引（来自数组子表单）
     const idx = this.context.fieldIndex;
     const fieldKey = this.context.fieldKey;
     const parentFieldPathArray = this.parent?.context.fieldPathArray || [];
+    const isHiddenReservedValuePreview =
+      !!this.context.flowSettingsEnabled && !!this.props.hidden && !this.hidden && !this.forbidden;
 
-    // 嵌套场景下继续传透，为字段子模型创建 fork
     const modelForRender =
-      idx != null
+      idx != null || isHiddenReservedValuePreview
         ? (() => {
-            const fork = fieldModel.createFork({}, `${fieldKey}`);
-            fork.context.defineProperty('fieldIndex', {
-              get: () => idx,
-            });
-            fork.context.defineProperty('fieldKey', {
-              get: () => fieldKey,
-            });
-            if (this.context.currentObject) {
-              fork.context.defineProperty('currentObject', {
-                get: () => this.context.currentObject,
+            const forkKey = isHiddenReservedValuePreview ? `${this.uid}:config-visible` : `${fieldKey}`;
+            const fork = fieldModel.createFork({}, forkKey);
+            if (idx != null) {
+              fork.context.defineProperty('fieldIndex', {
+                get: () => idx,
               });
-            }
-            const itemOptions = this.context.getPropertyOptions('item');
-            if (this.context.item) {
-              const { value: _value, ...rest } = (itemOptions || {}) as any;
-              fork.context.defineProperty('item', {
-                ...rest,
-                get: () => this.context.item,
-                cache: false,
+              fork.context.defineProperty('fieldKey', {
+                get: () => fieldKey,
               });
+              if (this.context.currentObject) {
+                fork.context.defineProperty('currentObject', {
+                  get: () => this.context.currentObject,
+                });
+              }
+              const itemOptions = this.context.getPropertyOptions('item');
+              if (this.context.item) {
+                const { value: _value, ...rest } = (itemOptions || {}) as any;
+                fork.context.defineProperty('item', {
+                  ...rest,
+                  get: () => this.context.item,
+                  cache: false,
+                });
+              }
+              if (this.context.pattern) {
+                fork.context.defineProperty('pattern', {
+                  get: () => this.context.pattern,
+                });
+              }
             }
-            if (this.context.pattern) {
-              fork.context.defineProperty('pattern', {
-                get: () => this.context.pattern,
-              });
+            if (isHiddenReservedValuePreview) {
+              fork.setProps({ hidden: false });
             }
             return fork;
           })()
         : fieldModel;
     const mergedProps = this.context.pattern ? { ...this.props, pattern: this.context.pattern } : this.props;
-    const { initialValue, ...mergedPropsWithoutInitial } = mergedProps as any;
+    const { initialValue, hidden, ...mergedPropsWithoutInitial } = mergedProps as any;
+    const formItemProps = isHiddenReservedValuePreview
+      ? mergedPropsWithoutInitial
+      : { hidden, ...mergedPropsWithoutInitial };
     const fieldPath = buildDynamicNamePath(this.props.name, idx);
     this.context.defineProperty('fieldPathArray', {
       value: [...parentFieldPathArray, ..._.castArray(fieldPath)],
     });
     const record = this.context.item?.value || this.context.record;
-    return (
+    const content = (
       <FormItem
-        {...mergedPropsWithoutInitial}
+        {...formItemProps}
         name={fieldPath}
         validateFirst={true}
         disabled={
@@ -158,6 +168,16 @@ export class FormItemModel<T extends DefaultStructure = DefaultStructure> extend
         <FieldModelRenderer model={modelForRender} name={fieldPath} />
       </FormItem>
     );
+
+    if (isHiddenReservedValuePreview) {
+      return (
+        <Tooltip title={this.context.t('The field is hidden and only visible when the UI Editor is active')}>
+          <div style={{ opacity: 0.3 }}>{content}</div>
+        </Tooltip>
+      );
+    }
+
+    return content;
   }
 }
 

package/src/flow/models/blocks/shared/filterOperators.ts

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ */
+
+export function isArrayLikeField(field: any) {
+  return (
+    ['multipleSelect', 'checkboxGroup'].includes(field?.interface) || ['array', 'json', 'jsonb'].includes(field?.type)
+  );
+}

package/src/flow/models/blocks/table/TableBlockModel.tsx

@@ -563,6 +563,9 @@ export class TableBlockModel extends CollectionBlockModel<TableBlockModelStructu
           columns={this.columns.value}
           pagination={this.pagination()}
           highlightedRowKey={highlightedRowKey}
+          selectedRowKeysFromResource={this.resource
+            .getSelectedRows()
+            .map((row) => getRowKey(row, this.collection.filterTargetKey))}
           defaultExpandAllRows={this.props.defaultExpandAllRows}
           expandedRowKeys={this.props.expandedRowKeys}
           heightMode={heightMode}
@@ -581,6 +584,7 @@ const TableBlockContent = (props: {
   columns: any;
   pagination: any;
   highlightedRowKey: string;
+  selectedRowKeysFromResource: string[];
   defaultExpandAllRows?: boolean;
   expandedRowKeys?: any[];
   heightMode?: string;
@@ -594,6 +598,7 @@ const TableBlockContent = (props: {
     columns,
     pagination,
     highlightedRowKey,
+    selectedRowKeysFromResource,
     defaultExpandAllRows,
     expandedRowKeys,
     heightMode,
@@ -620,6 +625,7 @@ const TableBlockContent = (props: {
           columns={columns}
           pagination={pagination}
           highlightedRowKey={highlightedRowKey}
+          selectedRowKeysFromResource={selectedRowKeysFromResource}
           defaultExpandAllRows={defaultExpandAllRows}
           expandedRowKeys={expandedRowKeys}
           tableScroll={tableScroll}
@@ -829,6 +835,7 @@ const HighPerformanceTable = React.memo(
     columns: any;
     pagination: any;
     highlightedRowKey: string;
+    selectedRowKeysFromResource: string[];
     defaultExpandAllRows?: boolean;
     expandedRowKeys?: any[];
     tableScroll;
@@ -841,6 +848,7 @@ const HighPerformanceTable = React.memo(
       columns,
       pagination: _pagination,
       highlightedRowKey,
+      selectedRowKeysFromResource,
       defaultExpandAllRows,
       expandedRowKeys,
       tableScroll,
@@ -848,9 +856,17 @@ const HighPerformanceTable = React.memo(
     const dataSourceRef = useRef(dataSource);
     dataSourceRef.current = dataSource;
 
-    const [selectedRowKeys, setSelectedRowKeys] = React.useState<string[]>(() =>
-      model.resource.getSelectedRows().map((row) => getRowKey(row, model.collection.filterTargetKey)),
-    );
+    const [selectedRowKeys, setSelectedRowKeys] = React.useState<string[]>(selectedRowKeysFromResource || []);
+
+    useEffect(() => {
+      const nextSelectedRowKeys = selectedRowKeysFromResource || [];
+      setSelectedRowKeys((prev) => {
+        if (_.isEqual(prev, nextSelectedRowKeys)) {
+          return prev;
+        }
+        return nextSelectedRowKeys;
+      });
+    }, [selectedRowKeysFromResource]);
 
     const getRowKeyFunc = useCallback(
       (record) => {

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

@@ -38,7 +38,8 @@ import {
 import { MobileLazySelect } from '../mobile-components/MobileLazySelect';
 import { BlockSceneEnum } from '../../base/BlockModel';
 import { ActionWithoutPermission } from '../../base/ActionModel';
-import { EditFormModel } from '../../blocks/form/EditFormModel';
+import { EditFormModel } from '../../blocks';
+import { hasAncestorModel } from './recordSelectSettingsUtils';
 
 function isPlainObject(val: unknown): val is Record<string, any> {
   return !!val && typeof val === 'object' && !Array.isArray(val);
@@ -818,6 +819,9 @@ RecordSelectFieldModel.registerFlow({
         if (ctx?.blockModel?.constructor?.scene === BlockSceneEnum.filter) {
           return true;
         }
+        if (hasAncestorModel(ctx?.model, ['SubTableColumnModel', 'SubTableFieldModel'])) {
+          return true;
+        }
         return false;
       },
       defaultParams: {

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

@@ -194,7 +194,7 @@ function shouldCommitImmediately(value: any) {
 }
 
 const FieldModelRendererOptimize = React.memo((props: any) => {
-  const { model, onChange, value, ...rest } = props;
+  const { model, onChange, value, commitOnChange, ...rest } = props;
   const pendingValueRef = React.useRef<any>(props?.value);
 
   useEffect(() => {
@@ -204,11 +204,11 @@ const FieldModelRendererOptimize = React.memo((props: any) => {
   const handleChange = React.useCallback(
     (value: any) => {
       pendingValueRef.current = value;
-      if (shouldCommitImmediately(value)) {
+      if (commitOnChange || shouldCommitImmediately(value)) {
         onChange?.(value);
       }
     },
-    [onChange],
+    [commitOnChange, onChange],
   );
 
   const handleCommit = React.useCallback(() => {
@@ -241,10 +241,11 @@ interface CellProps {
   rowFork?: any;
   memoKey?: string;
   width?: number;
+  commitOnChange?: boolean;
 }
 
 const MemoCell: React.FC<CellProps> = React.memo(
-  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width }) => {
+  ({ value, record, rowIdx, id, parent, parentFieldIndex, rowFork, width, commitOnChange }) => {
     const isNew = record?.__is_new__;
     return (
       <div
@@ -346,7 +347,11 @@ const MemoCell: React.FC<CellProps> = React.memo(
                   }
                 />
               ) : (
-                <FieldModelRendererOptimize model={fork} id={[(parent as any).context.fieldPath, rowIdx]} />
+                <FieldModelRendererOptimize
+                  model={fork}
+                  id={[(parent as any).context.fieldPath, rowIdx]}
+                  commitOnChange={commitOnChange}
+                />
               )}
             </FormItem>
           );
@@ -360,6 +365,7 @@ const MemoCell: React.FC<CellProps> = React.memo(
       prev.id === next.id &&
       prev.memoKey === next.memoKey &&
       prev.width === next.width &&
+      prev.commitOnChange === next.commitOnChange &&
       prev.rowIdx === next.rowIdx
     );
   },
@@ -428,6 +434,15 @@ export class SubTableColumnModel<
     return this.parent.collection;
   }
 
+  get hasFormulaColumn() {
+    return (
+      this.parent?.mapSubModels('columns', (column: SubTableColumnModel) => {
+        const field = column.collectionField;
+        return field?.interface === 'formula' || field?.type === 'formula';
+      }) || []
+    ).some(Boolean);
+  }
+
   onInit(options: any): void {
     super.onInit(options);
     this.context.defineProperty('resourceName', {
@@ -607,6 +622,7 @@ export class SubTableColumnModel<
           rowFork={rowFork}
           memoKey={rowForkKey}
           width={this.props.width}
+          commitOnChange={this.hasFormulaColumn}
         />
       );
     };

package/src/flow/models/fields/AssociationFieldModel/recordSelectSettingsUtils.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+export function hasAncestorModel(model: any, modelNames: string[]) {
+  let cursor = model;
+  while (cursor) {
+    const modelName = cursor?.constructor?.name;
+    if (modelName && modelNames.includes(modelName)) {
+      return true;
+    }
+    cursor = cursor?.parent;
+  }
+  return false;
+}

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

@@ -8,25 +8,40 @@
  */
 
 import { FormItem } from '@nocobase/flow-engine';
-import { Divider } from 'antd';
+import { Divider, theme } from 'antd';
 import React from 'react';
 import { CommonItemModel } from '../base/CommonItemModel';
 import { NBColorPicker } from './ColorFieldModel';
 
+const resolveThemeColor = (value: string | undefined, fallback: string) => {
+  return value ? value : fallback;
+};
+
+const DividerItem = (props: any) => {
+  const { token } = theme.useToken();
+  const { color, borderColor, label, orientation, dashed } = props;
+
+  return (
+    <Divider
+      type="horizontal"
+      style={{
+        color: resolveThemeColor(color, token.colorText),
+        borderColor: resolveThemeColor(borderColor, token.colorSplit),
+      }}
+      orientationMargin="0"
+      orientation={orientation}
+      dashed={dashed}
+    >
+      {label}
+    </Divider>
+  );
+};
+
 export class DividerItemModel extends CommonItemModel {
   render() {
-    const { color, borderColor, label, orientation, dashed } = this.props;
     return (
       <FormItem shouldUpdate showLabel={false}>
-        <Divider
-          type="horizontal"
-          style={{ color, borderColor }}
-          orientationMargin="0"
-          orientation={orientation}
-          dashed={dashed}
-        >
-          {label}
-        </Divider>
+        <DividerItem {...this.props} />
       </FormItem>
     );
   }
@@ -38,12 +53,12 @@ DividerItemModel.registerFlow({
   steps: {
     title: {
       title: '{{t("Edit divider")}}',
-      defaultParams: {
+      defaultParams: (ctx) => ({
         label: '{{t("Text")}}',
         orientation: 'left',
-        color: 'rgba(0, 0, 0, 0.88)',
-        borderColor: 'rgba(5, 5, 5, 0.06)',
-      },
+        color: ctx.themeToken?.colorText,
+        borderColor: ctx.themeToken?.colorSplit,
+      }),
       uiSchema(ctx) {
         return {
           label: {

package/src/flow/models/fields/mobile-components/MobileSelect.tsx

@@ -13,7 +13,7 @@ import { Button, CheckList, Popup, SearchBar } from 'antd-mobile';
 import React, { useEffect, useMemo, useState } from 'react';
 
 export function MobileSelect(props) {
-  const { value, onChange, disabled, options = [], mode } = props;
+  const { value, onChange, onChangeComplete, disabled, options = [], mode } = props;
   const ctx = useFlowModelContext();
   const t = ctx.t;
   const [visible, setVisible] = useState(false);
@@ -28,6 +28,7 @@ export function MobileSelect(props) {
 
   const handleConfirm = () => {
     onChange(selected);
+    onChangeComplete?.();
     setVisible(false);
   };
   useEffect(() => {
@@ -36,12 +37,18 @@ export function MobileSelect(props) {
     } else {
       setSearchText(null);
     }
-  }, [visible]);
+  }, [visible, value]);
 
   return (
     <>
       <div onClick={() => !disabled && setVisible(true)}>
-        <Select {...props} dropdownStyle={{ display: 'none' }} showSearch={false} />
+        <Select
+          {...props}
+          open={false}
+          dropdownStyle={{ display: 'none' }}
+          showSearch={false}
+          style={{ pointerEvents: 'none', width: '100%' }}
+        />
       </div>
       <Popup
         visible={visible}
@@ -71,6 +78,7 @@ export function MobileSelect(props) {
               } else {
                 setSelected(val[0]);
                 onChange(val[0]);
+                onChangeComplete?.();
                 setVisible(false);
               }
             }}

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -0,0 +1,235 @@
+/**
+ * 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 { beforeEach, describe, it, expect, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { MobileSelect } from '../MobileSelect';
+
+const DEFAULT_OPTIONS = [
+  { label: 'Option A', value: 'a' },
+  { label: 'Option B', value: 'b' },
+];
+
+const mockState = vi.hoisted(() => ({
+  selectProps: undefined as any,
+  popupProps: undefined as any,
+  checklistProps: undefined as any,
+  confirmButtonProps: undefined as any,
+}));
+
+function resetMockState() {
+  mockState.selectProps = undefined;
+  mockState.popupProps = undefined;
+  mockState.checklistProps = undefined;
+  mockState.confirmButtonProps = undefined;
+}
+
+function clickTrigger() {
+  const trigger = screen.getByTestId('antd-select').parentElement as HTMLElement | null;
+  expect(trigger).toBeTruthy();
+  act(() => {
+    fireEvent.click(trigger as HTMLElement);
+  });
+}
+
+function openPopup() {
+  clickTrigger();
+  expect(screen.getByTestId('popup')).toBeInTheDocument();
+}
+
+function selectValues(values: string[]) {
+  act(() => {
+    mockState.checklistProps?.onChange?.(values);
+  });
+}
+
+function confirmSelection() {
+  act(() => {
+    mockState.confirmButtonProps?.onClick?.();
+  });
+}
+
+function renderMobileSelect(props: Record<string, any> = {}) {
+  const onChange = props.onChange ?? vi.fn();
+  const onChangeComplete = props.onChangeComplete ?? vi.fn();
+
+  render(
+    <MobileSelect
+      value={undefined}
+      options={DEFAULT_OPTIONS}
+      onChange={onChange}
+      onChangeComplete={onChangeComplete}
+      {...props}
+    />,
+  );
+
+  return { onChange, onChangeComplete };
+}
+
+vi.mock('@nocobase/flow-engine', async () => {
+  const actual = await vi.importActual<any>('@nocobase/flow-engine');
+  return {
+    ...actual,
+    useFlowModelContext: () => ({
+      t: (value: string) => value,
+    }),
+  };
+});
+
+vi.mock('antd', async () => {
+  const actual = await vi.importActual<any>('antd');
+  return {
+    ...actual,
+    Select: (props: any) => {
+      mockState.selectProps = props;
+      return <div data-testid="antd-select" />;
+    },
+  };
+});
+
+vi.mock('antd-mobile', () => {
+  const MockCheckList: any = (props: any) => {
+    mockState.checklistProps = props;
+    return <div data-testid="checklist">{props.children}</div>;
+  };
+
+  MockCheckList.Item = ({ value, children }: any) => <div data-testid={`item-${value}`}>{children}</div>;
+
+  return {
+    Button: (props: any) => {
+      mockState.confirmButtonProps = props;
+      return (
+        <button type="button" data-testid="confirm" onClick={props.onClick}>
+          {props.children}
+        </button>
+      );
+    },
+    Popup: (props: any) => {
+      mockState.popupProps = props;
+      return props.visible ? <div data-testid="popup">{props.children}</div> : null;
+    },
+    SearchBar: ({ value, onChange }: any) => (
+      <input data-testid="search" value={value ?? ''} onChange={(e) => onChange?.(e.target.value)} />
+    ),
+    CheckList: MockCheckList,
+  };
+});
+
+describe('MobileSelect', () => {
+  beforeEach(() => {
+    resetMockState();
+  });
+
+  it('commits the selected value immediately in single mode', () => {
+    const { onChange, onChangeComplete } = renderMobileSelect();
+
+    openPopup();
+    selectValues(['a']);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('a');
+    expect(onChangeComplete).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+  });
+
+  it('renders filtered options based on search text', () => {
+    const { onChange, onChangeComplete } = renderMobileSelect();
+    openPopup();
+    act(() => {
+      fireEvent.change(screen.getByTestId('search'), { target: { value: 'Option A' } });
+    });
+
+    expect(screen.getByTestId('item-a')).toBeInTheDocument();
+    expect(screen.queryByTestId('item-b')).not.toBeInTheDocument();
+
+    selectValues(['a']);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith('a');
+    expect(onChangeComplete).toHaveBeenCalledTimes(1);
+  });
+
+  it('defers commit until confirm in multiple mode', () => {
+    const { onChange, onChangeComplete } = renderMobileSelect({ value: [], mode: 'multiple' });
+    openPopup();
+
+    selectValues(['a', 'b']);
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onChangeComplete).not.toHaveBeenCalled();
+
+    confirmSelection();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['a', 'b']);
+    expect(onChangeComplete).toHaveBeenCalledTimes(1);
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+  });
+
+  it('does not open popup when disabled', () => {
+    renderMobileSelect({ disabled: true });
+
+    clickTrigger();
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+  });
+});
+
+function SubTableCellHarness({ value, onCommit, mode }: { value: any; onCommit: (value: any) => void; mode?: string }) {
+  const pendingValueRef = React.useRef<any>(value);
+  return (
+    <div>
+      <MobileSelect
+        value={value}
+        mode={mode}
+        options={DEFAULT_OPTIONS}
+        onChange={(next) => {
+          pendingValueRef.current = next;
+          if (Array.isArray(next)) {
+            onCommit(next);
+          }
+        }}
+        onChangeComplete={() => {
+          onCommit(pendingValueRef.current);
+        }}
+      />
+    </div>
+  );
+}
+
+describe('MobileSelect in SubForm/SubTable containers', () => {
+  beforeEach(() => {
+    resetMockState();
+  });
+
+  it('SubTable: single selection commits final value via onChangeComplete', () => {
+    const onCommit = vi.fn();
+
+    render(<SubTableCellHarness value={undefined} onCommit={onCommit} />);
+
+    openPopup();
+    selectValues(['b']);
+
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    expect(onCommit).toHaveBeenCalledWith('b');
+  });
+
+  it('SubTable: multiple mode only commits after confirm, and commit receives the full array', () => {
+    const onCommit = vi.fn();
+
+    render(<SubTableCellHarness value={[]} onCommit={onCommit} mode="multiple" />);
+
+    openPopup();
+    selectValues(['a', 'b']);
+    confirmSelection();
+
+    expect(onCommit).toHaveBeenCalledTimes(2);
+    expect(onCommit).toHaveBeenNthCalledWith(1, ['a', 'b']);
+    expect(onCommit).toHaveBeenNthCalledWith(2, ['a', 'b']);
+  });
+});