@nocobase/client-v2 2.1.0-beta.46 → 2.1.0-beta.48

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

@@ -31,7 +31,90 @@ import {
   createRootItemChain,
   type ItemChain,
 } from './itemChain';
-import { buildOpenerUids, LabelByField } from './recordSelectShared';
+import { buildOpenerUids, LabelByField, type AssociationFieldNames } from './recordSelectShared';
+
+const MULTIPLE_ASSOCIATION_TYPES = ['belongsToMany', 'hasMany', 'belongsToArray'];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+export function canRecordPickerSelectMultiple(
+  collectionField: { type?: string } | null | undefined,
+  allowMultiple?: boolean,
+) {
+  return (
+    !!collectionField?.type && MULTIPLE_ASSOCIATION_TYPES.includes(collectionField.type) && allowMultiple !== false
+  );
+}
+
+export function shouldClearRecordPickerValueOnMultipleChange(
+  collectionField: { type?: string } | null | undefined,
+  previousAllowMultiple?: boolean,
+  nextAllowMultiple?: boolean,
+) {
+  return (
+    canRecordPickerSelectMultiple(collectionField, previousAllowMultiple) !==
+    canRecordPickerSelectMultiple(collectionField, nextAllowMultiple)
+  );
+}
+
+export function normalizeRecordPickerSelectedRows(value: unknown, allowMultiple: boolean) {
+  if (!value) {
+    return [];
+  }
+  if (allowMultiple) {
+    return Array.isArray(value) ? value : [value];
+  }
+  return Array.isArray(value) ? value.slice(0, 1) : [value];
+}
+
+export function getRecordPickerEmptyValue(allowMultiple: boolean) {
+  return allowMultiple ? [] : undefined;
+}
+
+export function getRecordPickerClearedValue() {
+  return undefined;
+}
+
+export function normalizeRecordPickerValue(value: unknown, fieldNames: AssociationFieldNames, allowMultiple: boolean) {
+  if (!value) {
+    return getRecordPickerEmptyValue(allowMultiple);
+  }
+  const toSelectItem = (item: Record<string, unknown>) => ({
+    ...item,
+    label: item[fieldNames.label],
+    value: item[fieldNames.value],
+  });
+  if (!allowMultiple) {
+    const item = Array.isArray(value) ? value[0] : value;
+    return isRecord(item) ? toSelectItem(item) : undefined;
+  }
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter(isRecord).map(toSelectItem);
+}
+
+function applyRecordPickerAllowMultiple(ctx: any, params: any, previousParams?: any) {
+  const shouldClearValue =
+    previousParams &&
+    shouldClearRecordPickerValueOnMultipleChange(
+      ctx.collectionField,
+      previousParams?.allowMultiple,
+      params?.allowMultiple,
+    );
+  const emptyValue = getRecordPickerClearedValue();
+
+  ctx.model.setProps({
+    allowMultiple: params?.allowMultiple,
+    ...(shouldClearValue ? { value: emptyValue } : {}),
+  });
+  if (shouldClearValue) {
+    ctx.model.selectedRows.value = emptyValue;
+    ctx.model.props.onChange?.(emptyValue);
+  }
+}
 
 export function buildRecordPickerParentItemContext(ctx: any): {
   parentItem: ItemChain;
@@ -241,25 +324,10 @@ export function RecordPickerContent({ model, toOne = false }) {
 function RecordPickerField(props) {
   const { fieldNames, onClick, disabled } = props;
   const ctx = useFlowContext();
-  const toOne = ['belongsTo', 'hasOne'].includes(ctx.collectionField.type);
+  const allowMultiple = canRecordPickerSelectMultiple(ctx.collectionField, props.allowMultiple);
   useEffect(() => {
     ctx.model.selectedRows.value = props.value;
-  }, [props.value]);
-  const normalizeValue = (value, fieldNames, toOne) => {
-    if (!value) return toOne ? undefined : [];
-    if (toOne) {
-      return {
-        ...value,
-        label: value[fieldNames.label],
-        value: value[fieldNames.value],
-      };
-    }
-    return value.map((v) => ({
-      ...v,
-      label: v[fieldNames.label],
-      value: v[fieldNames.value],
-    }));
-  };
+  }, [ctx.model.selectedRows, props.value]);
 
   return (
     <Select
@@ -270,12 +338,12 @@ function RecordPickerField(props) {
           onClick(e);
         }
       }}
-      value={normalizeValue(props.value, fieldNames, toOne)}
+      value={normalizeRecordPickerValue(props.value, fieldNames, allowMultiple)}
       labelRender={(item) => {
         return <LabelByField option={item} fieldNames={fieldNames} />;
       }}
       labelInValue
-      mode={toOne ? undefined : 'multiple'}
+      mode={allowMultiple ? 'multiple' : undefined}
       options={props.value}
       allowClear
       onChange={(newValue, option) => {
@@ -405,7 +473,7 @@ RecordPickerFieldModel.registerFlow({
       },
       handler(ctx, params) {
         const { onChange } = ctx.inputArgs;
-        const toOne = ['belongsTo', 'hasOne'].includes(ctx.collectionField.type);
+        const allowMultiple = canRecordPickerSelectMultiple(ctx.collectionField, ctx.model.props.allowMultiple);
         const sizeToWidthMap: Record<string, any> = {
           drawer: {
             small: '30%',
@@ -441,9 +509,9 @@ RecordPickerFieldModel.registerFlow({
               currentItemValue: ctx.inputArgs.currentItemValue ?? {},
             }),
             rowSelectionProps: {
-              type: toOne ? 'radio' : 'checkbox',
+              type: allowMultiple ? 'checkbox' : 'radio',
               defaultSelectedRows: () => {
-                return ctx.model.props.value;
+                return normalizeRecordPickerSelectedRows(ctx.model.props.value, allowMultiple);
               },
               renderCell: undefined,
               selectedRowKeys: undefined,
@@ -452,8 +520,7 @@ RecordPickerFieldModel.registerFlow({
                 const selectTable = selectBlockModel.findSubModel('items', (m) => {
                   return m;
                 });
-                if (toOne) {
-                  // 单选
+                if (!allowMultiple) {
                   ctx.model.selectedRows.value = selectedRows?.[0];
                   onChange(ctx.model.selectedRows.value);
                   ctx.model._closeView?.();
@@ -475,7 +542,7 @@ RecordPickerFieldModel.registerFlow({
               },
             },
           },
-          content: () => <RecordPickerContent model={ctx.model} toOne={toOne} />,
+          content: () => <RecordPickerContent model={ctx.model} toOne={!allowMultiple} />,
           styles: {
             content: {
               padding: 0,
@@ -500,6 +567,24 @@ RecordPickerFieldModel.registerFlow({
     fieldNames: {
       use: 'titleField',
     },
+    allowMultiple: {
+      title: tExpr('Multiple'),
+      uiMode: { type: 'switch', key: 'allowMultiple' },
+      hideInSettings(ctx) {
+        return !canRecordPickerSelectMultiple(ctx.collectionField, true);
+      },
+      defaultParams(ctx) {
+        return {
+          allowMultiple: canRecordPickerSelectMultiple(ctx.collectionField, true),
+        };
+      },
+      afterParamsSave(ctx, params, previousParams) {
+        applyRecordPickerAllowMultiple(ctx, params, previousParams);
+      },
+      handler(ctx, params) {
+        applyRecordPickerAllowMultiple(ctx, params);
+      },
+    },
   },
 });
 

package/src/flow/models/fields/AssociationFieldModel/__tests__/RecordPickerFieldModel.itemContext.test.ts

@@ -20,6 +20,14 @@ import {
   resolveRecordPersistenceState,
 } from '../itemChain';
 import { injectRecordPickerPopupContext } from '@nocobase/client-v2';
+import {
+  canRecordPickerSelectMultiple,
+  getRecordPickerClearedValue,
+  getRecordPickerEmptyValue,
+  normalizeRecordPickerSelectedRows,
+  normalizeRecordPickerValue,
+  shouldClearRecordPickerValueOnMultipleChange,
+} from '../RecordPickerFieldModel';
 
 function createMockCollection() {
   return {
@@ -32,6 +40,59 @@ function createMockCollection() {
 }
 
 describe('RecordPickerFieldModel item context', () => {
+  it('resolves popup select multiple mode for association fields', () => {
+    expect(canRecordPickerSelectMultiple({ type: 'belongsToMany' })).toBe(true);
+    expect(canRecordPickerSelectMultiple({ type: 'hasMany' })).toBe(true);
+    expect(canRecordPickerSelectMultiple({ type: 'belongsToArray' })).toBe(true);
+    expect(canRecordPickerSelectMultiple({ type: 'belongsToMany' }, false)).toBe(false);
+    expect(canRecordPickerSelectMultiple({ type: 'belongsTo' })).toBe(false);
+    expect(canRecordPickerSelectMultiple({ type: 'hasOne' })).toBe(false);
+  });
+
+  it('normalizes popup select selected rows according to multiple mode', () => {
+    const rows = [
+      { id: 1, name: 'A' },
+      { id: 2, name: 'B' },
+    ];
+
+    expect(normalizeRecordPickerSelectedRows(rows, true)).toEqual(rows);
+    expect(normalizeRecordPickerSelectedRows(rows, false)).toEqual([{ id: 1, name: 'A' }]);
+    expect(normalizeRecordPickerSelectedRows({ id: 1, name: 'A' }, false)).toEqual([{ id: 1, name: 'A' }]);
+    expect(normalizeRecordPickerSelectedRows(undefined, true)).toEqual([]);
+  });
+
+  it('normalizes popup select display value according to multiple mode', () => {
+    const fieldNames = { label: 'name', value: 'id' };
+    const rows = [
+      { id: 1, name: 'A' },
+      { id: 2, name: 'B' },
+    ];
+
+    expect(normalizeRecordPickerValue(rows, fieldNames, true)).toEqual([
+      { id: 1, name: 'A', label: 'A', value: 1 },
+      { id: 2, name: 'B', label: 'B', value: 2 },
+    ]);
+    expect(normalizeRecordPickerValue(rows, fieldNames, false)).toEqual({ id: 1, name: 'A', label: 'A', value: 1 });
+    expect(normalizeRecordPickerValue(undefined, fieldNames, true)).toEqual([]);
+    expect(normalizeRecordPickerValue(undefined, fieldNames, false)).toBeUndefined();
+  });
+
+  it('returns the empty popup select value for the current multiple mode', () => {
+    expect(getRecordPickerEmptyValue(true)).toEqual([]);
+    expect(getRecordPickerEmptyValue(false)).toBeUndefined();
+  });
+
+  it('clears popup select value to undefined when multiple mode changes', () => {
+    expect(getRecordPickerClearedValue()).toBeUndefined();
+  });
+
+  it('detects when changing multiple mode should clear popup select value', () => {
+    expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsToMany' }, true, false)).toBe(true);
+    expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsToMany' }, false, true)).toBe(true);
+    expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsToMany' }, true, true)).toBe(false);
+    expect(shouldClearRecordPickerValueOnMultipleChange({ type: 'belongsTo' }, true, false)).toBe(false);
+  });
+
   it('itemChain helpers: createParentItemAccessorsFromInputArgs works', () => {
     const inputArgs = {
       parentItem: { value: { id: 1 } },

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

@@ -13,6 +13,7 @@ import { Tag } from 'antd';
 import React from 'react';
 import { castArray } from 'lodash';
 import { ClickableFieldModel } from './ClickableFieldModel';
+import { translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 interface FieldNames {
   value: string;
@@ -70,7 +71,7 @@ export class DisplayEnumFieldModel extends ClickableFieldModel {
     }
     return currentOptions.map((option) => (
       <Tag key={option[fieldNames.value]} color={option[fieldNames.color]} icon={<Icon type={option['icon']} />}>
-        {this.translate(option[fieldNames.label])}
+        {translateOptionLabel(option[fieldNames.label], this.translate)}
       </Tag>
     ));
   }

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

@@ -9,7 +9,8 @@
 
 import { css, cx } from '@emotion/css';
 import { DisplayItemModel } from '@nocobase/flow-engine';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import type { CSSProperties } from 'react';
 import { Tooltip } from 'antd';
 import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
 
@@ -21,8 +22,14 @@ const JSONClassName = css`
   border: none !important;
 `;
 
-const EllipsisJSON = ({ content, style, className }) => {
-  const ref = useRef(null);
+interface EllipsisJSONProps {
+  content: string;
+  style?: CSSProperties;
+  className?: string;
+}
+
+const EllipsisJSON = ({ content, style, className }: EllipsisJSONProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [overflow, setOverflow] = useState(false);
 
   useEffect(() => {
@@ -75,7 +82,7 @@ const EllipsisJSON = ({ content, style, className }) => {
 };
 
 export class DisplayJSONFieldModel extends DisplayTitleFieldModel {
-  public renderComponent(value) {
+  public renderComponent(value: unknown) {
     const { space, style, className, overflowMode } = this.props;
     let content = '';
     if (value !== undefined && value !== null) {
@@ -96,6 +103,10 @@ export class DisplayJSONFieldModel extends DisplayTitleFieldModel {
       </pre>
     );
   }
+
+  public render() {
+    return this.renderComponent(this.props.value);
+  }
 }
 
 DisplayItemModel.bindModelToInterface('DisplayJSONFieldModel', ['json'], {

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

@@ -12,10 +12,15 @@ import { Input } from 'antd';
 import React from 'react';
 import { customAlphabet as Alphabet } from 'nanoid';
 import { FieldModel } from '../base/FieldModel';
+import { ScanInput } from '../../../components/form/ScanInput';
 
 export class InputFieldModel extends FieldModel {
   render() {
-    return <Input {...this.props} />;
+    if (this.props.enableScan) {
+      return <ScanInput {...this.props} />;
+    }
+    const { enableScan, disableManualInput, ...inputProps } = this.props;
+    return <Input {...inputProps} />;
   }
 }
 
@@ -36,6 +41,56 @@ InputFieldModel.registerFlow({
   },
 });
 
+InputFieldModel.registerFlow({
+  key: 'scanInputSettings',
+  sort: 800,
+  title: tExpr('Scan input settings'),
+  steps: {
+    enableScan: {
+      title: tExpr('Enable Scan'),
+      uiMode: { type: 'switch', key: 'enableScan' },
+      hideInSettings(ctx) {
+        return ctx.model.getProps().pattern === 'readPretty' || ctx.model.getProps().disabled;
+      },
+      defaultParams(ctx) {
+        return {
+          enableScan: !!ctx.model.props.enableScan,
+        };
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          enableScan: !!params.enableScan,
+          disableManualInput: params.enableScan ? ctx.model.props.disableManualInput : false,
+        });
+      },
+    },
+    disableManualInput: {
+      title: tExpr('Disable manual input'),
+      uiMode: { type: 'switch', key: 'disableManualInput' },
+      hideInSettings(ctx) {
+        const enableScanParams = ctx.model.getStepParams?.('scanInputSettings', 'enableScan') as
+          | { enableScan?: boolean }
+          | undefined;
+        const enableScan = Object.prototype.hasOwnProperty.call(enableScanParams || {}, 'enableScan')
+          ? !!enableScanParams?.enableScan
+          : !!ctx.model.props.enableScan;
+
+        return !enableScan || ctx.model.getProps().pattern === 'readPretty' || !!ctx.model.getProps().disabled;
+      },
+      defaultParams(ctx) {
+        return {
+          disableManualInput: !!ctx.model.props.disableManualInput,
+        };
+      },
+      handler(ctx, params) {
+        ctx.model.setProps({
+          disableManualInput: !!ctx.model.props.enableScan && !!params.disableManualInput,
+        });
+      },
+    },
+  },
+});
+
 InputFieldModel.define({
   label: tExpr('Input'),
 });

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

@@ -12,7 +12,7 @@ import { Select, Tag, Tooltip } from 'antd';
 import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
-import { enumToOptions, getSelectedEnumLabels } from '../../internal/utils/enumOptionsUtils';
+import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
   const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, (text) => text) || [];
@@ -29,12 +29,12 @@ export class SelectFieldModel extends FieldModel {
     const options = this.props.options?.map((v) => {
       return {
         ...v,
-        label: this.translate(v.label),
+        label: translateOptionLabel(v.label, this.translate),
       };
     });
     const selectedLabels = getSelectedEnumLabels(this.props.value, fallbackOptions).map((item) => ({
       ...item,
-      label: this.translate(item.label),
+      label: translateOptionLabel(item.label, this.translate),
     }));
     const value = Array.isArray(this.props.value)
       ? selectedLabels

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

@@ -0,0 +1,36 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { DisplayJSONFieldModel } from '../DisplayJSONFieldModel';
+
+describe('DisplayJSONFieldModel', () => {
+  it('renders object field values as formatted JSON', () => {
+    const engine = new FlowEngine();
+    engine.registerModels({ DisplayJSONFieldModel });
+
+    const model = engine.createModel<DisplayJSONFieldModel>({
+      use: DisplayJSONFieldModel,
+      uid: 'display-json-object-value',
+      props: {
+        value: {
+          enabled: true,
+          name: 'NocoBase',
+        },
+      },
+    });
+
+    const { container } = render(model.render());
+
+    expect(container.textContent).toContain('"enabled": true');
+    expect(container.textContent).toContain('"name": "NocoBase"');
+  });
+});

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

@@ -0,0 +1,116 @@
+/**
+ * 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 { FlowEngine } from '@nocobase/flow-engine';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { InputFieldModel } from '../InputFieldModel';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+function createInputFieldModel(props?: Record<string, unknown>) {
+  const engine = new FlowEngine();
+  return new InputFieldModel({
+    uid: 'input-field-model-test',
+    flowEngine: engine,
+    props,
+  });
+}
+
+describe('InputFieldModel', () => {
+  it('renders the normal input when scan input is disabled', () => {
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    const model = createInputFieldModel({ disableManualInput: true, enableScan: false });
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Scan to input' })).not.toBeInTheDocument();
+    expect(consoleError).not.toHaveBeenCalledWith(
+      expect.stringContaining('React does not recognize the `disableManualInput` prop'),
+      expect.anything(),
+    );
+
+    consoleError.mockRestore();
+  });
+
+  it('renders ScanInput when scan input is enabled', () => {
+    const model = createInputFieldModel({ enableScan: true });
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Scan to input' })).toBeInTheDocument();
+  });
+
+  it('stores enableScan and clears disableManualInput when scan input is turned off', () => {
+    const model = createInputFieldModel();
+    const step = model.getFlow('scanInputSettings')?.steps.enableScan;
+    const setProps = vi.fn();
+
+    step?.handler(
+      {
+        model: {
+          props: { disableManualInput: true },
+          setProps,
+        },
+      },
+      { enableScan: false },
+    );
+
+    expect(setProps).toHaveBeenCalledWith({
+      enableScan: false,
+      disableManualInput: false,
+    });
+  });
+
+  it('does not restore manual input disabling after scan input is turned off', () => {
+    const model = createInputFieldModel({ enableScan: true, disableManualInput: true });
+    const flow = model.getFlow('scanInputSettings');
+    const ctx = { model };
+
+    flow?.steps.enableScan.handler(ctx, { enableScan: false });
+    flow?.steps.disableManualInput.handler(ctx, { disableManualInput: true });
+
+    expect(model.props).toMatchObject({
+      enableScan: false,
+      disableManualInput: false,
+    });
+  });
+
+  it('hides disableManualInput until scan input is enabled', () => {
+    const model = createInputFieldModel();
+    const step = model.getFlow('scanInputSettings')?.steps.disableManualInput;
+
+    const hidden = step?.hideInSettings({
+      model: {
+        props: { enableScan: false },
+        getProps: () => ({}),
+      },
+    });
+
+    expect(hidden).toBe(true);
+  });
+
+  it('updates disableManualInput visibility from the current enableScan setting params', () => {
+    const model = createInputFieldModel({ enableScan: false });
+    const step = model.getFlow('scanInputSettings')?.steps.disableManualInput;
+
+    model.setStepParams('scanInputSettings', 'enableScan', { enableScan: true });
+
+    expect(step?.hideInSettings({ model })).toBe(false);
+
+    model.setStepParams('scanInputSettings', 'enableScan', { enableScan: false });
+
+    expect(step?.hideInSettings({ model })).toBe(true);
+  });
+});