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

package/src/flow/models/fields/__tests__/ClickableFieldModel.test.ts

@@ -0,0 +1,87 @@
+/**
+ * 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 { describe, expect, it, vi } from 'vitest';
+import { FlowEngine } from '@nocobase/flow-engine';
+import { ClickableFieldModel } from '../ClickableFieldModel';
+
+function createRolesFieldModel(sourceRecord: Record<string, any>) {
+  const engine = new FlowEngine();
+  engine.registerModels({ ClickableFieldModel });
+
+  const usersCollection = {
+    name: 'users',
+    filterTargetKey: 'id',
+  };
+  const rolesCollection = {
+    name: 'roles',
+    filterTargetKey: 'name',
+  };
+  const rolesField = {
+    name: 'roles',
+    target: 'roles',
+    targetKey: 'name',
+    type: 'belongsToMany',
+    interface: 'm2m',
+    collection: usersCollection,
+    targetCollection: rolesCollection,
+    isAssociationField: () => true,
+  };
+
+  const model = engine.createModel<ClickableFieldModel>({
+    use: ClickableFieldModel,
+    uid: `clickable-roles-${sourceRecord?.id ?? 'new'}`,
+  });
+  model.context.defineProperty('collectionField', { value: rolesField });
+  model.context.defineProperty('blockModel', { value: { collection: usersCollection } });
+  model.context.defineProperty('record', { value: sourceRecord });
+
+  const dispatchEvent = vi.spyOn(model, 'dispatchEvent').mockResolvedValue([]);
+  return { model, dispatchEvent };
+}
+
+describe('ClickableFieldModel', () => {
+  it('opens an association display value as a normal target record when source record has no id', () => {
+    const { model, dispatchEvent } = createRolesFieldModel({});
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'roles',
+        associationName: null,
+        sourceId: null,
+      },
+      { debounce: true },
+    );
+  });
+
+  it('keeps using the association resource when the source record has an id', () => {
+    const { model, dispatchEvent } = createRolesFieldModel({ id: 1 });
+    const event = { type: 'click' };
+
+    model.onClick(event, { name: 'admin', title: 'Admin' });
+
+    expect(dispatchEvent).toHaveBeenCalledWith(
+      'click',
+      {
+        event,
+        filterByTk: 'admin',
+        collectionName: 'users',
+        associationName: 'users.roles',
+        sourceId: 1,
+      },
+      { debounce: true },
+    );
+  });
+});

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

@@ -0,0 +1,210 @@
+/**
+ * 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 { act, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { FlowEngine, FlowEngineProvider, FlowModel, FlowModelRenderer } from '@nocobase/flow-engine';
+import { JSEditableFieldModel } from '../JSEditableFieldModel';
+
+function createField(props?: Record<string, any>, code = '') {
+  const engine = new FlowEngine();
+  engine.registerModels({ JSEditableFieldModel });
+  return engine.createModel<JSEditableFieldModel>({
+    use: 'JSEditableFieldModel',
+    uid: `js-field-${props?.pattern || 'editable'}`,
+    props,
+    stepParams: {
+      jsSettings: {
+        runJs: {
+          code,
+        },
+      },
+    },
+  });
+}
+
+function renderField(props?: Record<string, any>, code?: string) {
+  const field = createField(props, code);
+
+  render(<>{field.render()}</>);
+
+  return field;
+}
+
+const EDITABLE_CODE = `
+function JsEditableField() {
+  const React = ctx.React;
+  const { Input } = ctx.antd;
+  const [value, setValue] = React.useState(ctx.getValue?.() ?? '');
+
+  React.useEffect(() => {
+    const handler = (ev) => setValue(ev?.detail ?? '');
+    ctx.element?.addEventListener('js-field:value-change', handler);
+    return () => ctx.element?.removeEventListener('js-field:value-change', handler);
+  }, []);
+
+  const onChange = (e) => {
+    const v = e?.target?.value ?? '';
+    setValue(v);
+    ctx.setValue?.(v);
+  };
+
+  return (
+    <Input
+      {...ctx.model.props}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
+ctx.render(<JsEditableField />);
+`;
+
+const READONLY_AWARE_CODE = `
+const React = ctx.React;
+ctx.render(<span data-testid="js-readonly-state">{String(ctx.readOnly)}</span>);
+`;
+
+class ParentModel extends FlowModel<any> {
+  render() {
+    return <FlowModelRenderer model={this.subModels.field} />;
+  }
+}
+
+function renderParentFieldWithFlowRenderer(
+  fieldProps?: Record<string, any>,
+  parentProps?: Record<string, any>,
+  code = EDITABLE_CODE,
+) {
+  const engine = new FlowEngine();
+  engine.registerModels({ JSEditableFieldModel, ParentModel });
+  const parent = engine.createModel<ParentModel>({
+    use: ParentModel,
+    uid: 'js-field-parent',
+    props: parentProps,
+    subModels: {
+      field: {
+        use: 'JSEditableFieldModel',
+        uid: 'js-field-with-parent',
+        props: fieldProps,
+        stepParams: {
+          jsSettings: {
+            runJs: {
+              code,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  render(
+    <FlowEngineProvider engine={engine}>
+      <FlowModelRenderer model={parent} />
+    </FlowEngineProvider>,
+  );
+
+  return parent;
+}
+
+describe('JSEditableFieldModel', () => {
+  it('renders configured JavaScript in display only mode', async () => {
+    const field = renderParentFieldWithFlowRenderer(
+      { pattern: 'readPretty', value: 'hello' },
+      undefined,
+      READONLY_AWARE_CODE,
+    ).subModels.field as JSEditableFieldModel;
+
+    await waitFor(() => {
+      expect(screen.getByTestId('js-readonly-state')).toHaveTextContent('true');
+      expect(field.context.ref.current).toBeInstanceOf(HTMLSpanElement);
+    });
+  });
+
+  it('renders fallback as text in display only mode when code is empty', () => {
+    renderField({ pattern: 'readPretty', value: 'hello' });
+
+    expect(screen.getByText('hello')).toBeInTheDocument();
+    expect(screen.queryByDisplayValue('hello')).not.toBeInTheDocument();
+  });
+
+  it('renders fallback input for editable mode', () => {
+    renderField({ value: 'hello' });
+
+    expect(screen.getByDisplayValue('hello')).toBeInTheDocument();
+  });
+
+  it('rerenders as text when owner form item switches to display only', async () => {
+    const parent = renderParentFieldWithFlowRenderer({ value: 'hello' }, undefined, '');
+
+    await act(async () => {
+      parent.setProps({ pattern: 'readPretty' });
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('hello')).toBeInTheDocument();
+      expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+  });
+
+  it('does not rerun JavaScript settings when field value changes', async () => {
+    const parent = renderParentFieldWithFlowRenderer({ value: 'hello' });
+    const field = parent.subModels.field as JSEditableFieldModel;
+    const applyFlowSpy = vi.spyOn(field, 'applyFlow');
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+
+    applyFlowSpy.mockClear();
+
+    await act(async () => {
+      field.setProps({ value: 'hello1' });
+    });
+
+    expect(applyFlowSpy).not.toHaveBeenCalled();
+  });
+
+  it('coalesces script and pattern changes into one JavaScript settings run', async () => {
+    const parent = renderParentFieldWithFlowRenderer({ value: 'hello' }, undefined, '');
+    const field = parent.subModels.field as JSEditableFieldModel;
+    const applyFlowSpy = vi.spyOn(field, 'applyFlow');
+
+    await act(async () => {
+      field.setStepParams('jsSettings', 'runJs', { code: READONLY_AWARE_CODE });
+      parent.setProps({ pattern: 'readPretty' });
+      field.scheduleApplyJsSettings();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('js-readonly-state')).toHaveTextContent('true');
+    });
+
+    expect(applyFlowSpy).toHaveBeenCalledTimes(1);
+    expect(applyFlowSpy).toHaveBeenCalledWith('jsSettings');
+  });
+
+  it('applies JavaScript settings once on initial render', async () => {
+    const applyFlowSpy = vi.spyOn(FlowModel.prototype, 'applyFlow');
+    renderParentFieldWithFlowRenderer({ value: 'hello' });
+
+    try {
+      await waitFor(() => {
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+      });
+
+      expect(applyFlowSpy).toHaveBeenCalledTimes(1);
+      expect(applyFlowSpy.mock.calls).toEqual([['jsSettings']]);
+    } finally {
+      applyFlowSpy.mockRestore();
+    }
+  });
+});

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

package/src/flow-compat/data.ts

@@ -7,15 +7,37 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { DataSourceManager } from '@nocobase/flow-engine';
+import { getCollectionFieldInterface } from '@nocobase/flow-engine';
+import type { CollectionFieldInterfaceDataSourceManager } from '@nocobase/flow-engine';
 
 export interface CollectionFieldOptions {
   interface?: string;
   [key: string]: any;
 }
 
+type FieldInterfaceOptions = { titleUsable?: boolean } | null | undefined;
+
 export const DEFAULT_DATA_SOURCE_KEY = 'main';
 
-export const isTitleField = (dm: DataSourceManager, field: CollectionFieldOptions) => {
-  return dm.collectionFieldInterfaceManager?.getFieldInterface(field.interface)?.titleUsable;
+export const getFlowFieldInterfaceOptions = (
+  interfaceName: string | undefined,
+  ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>
+) => getCollectionFieldInterface(interfaceName, ...dataSourceManagers);
+
+export const hasFlowFieldInterfaceLookup = (
+  ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>
+) =>
+  dataSourceManagers.some(
+    (dataSourceManager) => typeof dataSourceManager?.collectionFieldInterfaceManager?.getFieldInterface === 'function',
+  );
+
+export const isTitleFieldInterface = (fieldInterfaceOptions: FieldInterfaceOptions) => {
+  return fieldInterfaceOptions?.titleUsable;
+};
+
+export const isTitleField = (
+  dataSourceManager: CollectionFieldInterfaceDataSourceManager | null | undefined,
+  field: CollectionFieldOptions | null | undefined,
+) => {
+  return isTitleFieldInterface(getFlowFieldInterfaceOptions(field?.interface, dataSourceManager));
 };

package/src/flow-compat/index.ts

@@ -11,7 +11,13 @@ export { Plugin } from '../Plugin';
 export { useApp } from '../hooks/useApp';
 export { usePlugin } from '../hooks/usePlugin';
 export { ColorPicker } from './ColorPicker';
-export { DEFAULT_DATA_SOURCE_KEY, isTitleField } from './data';
+export {
+  DEFAULT_DATA_SOURCE_KEY,
+  getFlowFieldInterfaceOptions,
+  hasFlowFieldInterfaceLookup,
+  isTitleField,
+  isTitleFieldInterface,
+} from './data';
 export { FieldValidation } from './FieldValidation';
 export { HighPerformanceSpin } from './HighPerformanceSpin';
 export { Icon, hasIcon, icons, registerIcon, registerIcons } from './Icon';

package/src/index.ts

@@ -32,4 +32,5 @@ export * from './collection-field-interface/CollectionFieldInterface';
 export * from './collection-field-interface/CollectionFieldInterfaceManager';
 export * from './collection-manager/interfaces';
 export * from './flow';
+export { DEFAULT_DATA_SOURCE_KEY, isTitleField, isTitleFieldInterface } from './flow-compat';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';

package/src/utils/globalDeps.ts

@@ -9,15 +9,18 @@
 
 import * as antdCssinjs from '@ant-design/cssinjs';
 import * as antdIcons from '@ant-design/icons';
+import * as emotionCss from '@emotion/css';
 import * as formilyCore from '@formily/core';
 import * as formilyReact from '@formily/react';
 import * as formilyReactive from '@formily/reactive';
 import * as formilyShared from '@formily/shared';
 import * as nocobaseClientUtils from '@nocobase/utils/client';
+import { dayjs } from '@nocobase/utils/client';
 import * as nocobaseFlowEngine from '@nocobase/flow-engine';
 import * as ahooks from 'ahooks';
 import * as antd from 'antd';
 import * as i18next from 'i18next';
+import lodash from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as reactI18next from 'react-i18next';
@@ -65,4 +68,7 @@ export function defineGlobalDeps(requirejs: RequireJS) {
 
   // utils
   requirejs.define('ahooks', () => ahooks);
+  requirejs.define('dayjs', () => dayjs);
+  requirejs.define('lodash', () => lodash);
+  requirejs.define('@emotion/css', () => emotionCss);
 }