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

package/src/components/form/ScanInput/types.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 type { Html5QrcodeSupportedFormats } from 'html5-qrcode';
+
+export type CodeFormatsToSupport = Html5QrcodeSupportedFormats[];

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -0,0 +1,136 @@
+/**
+ * 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 { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
+import { useCallback, useEffect, useState } from 'react';
+import type { CodeFormatsToSupport } from './types';
+
+type ScannerSize = {
+  width: number;
+  height: number;
+};
+
+type UseCodeScannerOptions = {
+  enabled: boolean;
+  elementId: string;
+  formatsToSupport?: CodeFormatsToSupport;
+  scanBoxSize?: ScannerSize;
+  onScannerSizeChanged?: (size: ScannerSize) => void;
+  onScanSuccess: (text: string) => void;
+  onScanFailure?: () => void;
+};
+
+export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
+  Html5QrcodeSupportedFormats.QR_CODE,
+  Html5QrcodeSupportedFormats.CODE_128,
+  Html5QrcodeSupportedFormats.CODE_39,
+  Html5QrcodeSupportedFormats.CODE_93,
+  Html5QrcodeSupportedFormats.CODABAR,
+  Html5QrcodeSupportedFormats.EAN_13,
+  Html5QrcodeSupportedFormats.EAN_8,
+  Html5QrcodeSupportedFormats.ITF,
+  Html5QrcodeSupportedFormats.UPC_A,
+  Html5QrcodeSupportedFormats.UPC_E,
+  Html5QrcodeSupportedFormats.DATA_MATRIX,
+  Html5QrcodeSupportedFormats.PDF_417,
+];
+
+export function getCodeScanBoxSize(width: number, height: number) {
+  return {
+    width: Math.floor(Math.min(width * 0.82, 520)),
+    height: Math.floor(Math.min(height * 0.32, 240)),
+  };
+}
+
+async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } = {}) {
+  if (!scanner) {
+    return;
+  }
+
+  const state = scanner.getState();
+  if ([Html5QrcodeScannerState.SCANNING, Html5QrcodeScannerState.PAUSED].includes(state)) {
+    await scanner.stop();
+  }
+  if (options.clear) {
+    scanner.clear();
+  }
+}
+
+export function useCodeScanner({
+  enabled,
+  elementId,
+  formatsToSupport,
+  scanBoxSize,
+  onScannerSizeChanged,
+  onScanSuccess,
+  onScanFailure,
+}: UseCodeScannerOptions) {
+  const [scanner, setScanner] = useState<Html5Qrcode>();
+
+  const startScanCamera = useCallback(
+    async (scannerInstance: Html5Qrcode) => {
+      await scannerInstance.start(
+        { facingMode: 'environment' },
+        {
+          fps: 10,
+          qrbox(width, height) {
+            onScannerSizeChanged?.({ width, height });
+            return scanBoxSize ?? getCodeScanBoxSize(width, height);
+          },
+        },
+        (decodedText) => {
+          onScanSuccess(decodedText);
+        },
+        undefined,
+      );
+    },
+    [onScanSuccess, onScannerSizeChanged, scanBoxSize],
+  );
+
+  const startScanFile = useCallback(
+    async (file: File) => {
+      if (!scanner) {
+        return;
+      }
+
+      await stopScanner(scanner);
+      try {
+        const result = await scanner.scanFileV2(file, false);
+        onScanSuccess(result.decodedText);
+      } catch (error) {
+        onScanFailure?.();
+        await startScanCamera(scanner);
+      }
+    },
+    [onScanFailure, onScanSuccess, scanner, startScanCamera],
+  );
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const scannerInstance = new Html5Qrcode(elementId, {
+      formatsToSupport: formatsToSupport?.length ? formatsToSupport : DEFAULT_CODE_FORMATS,
+      verbose: false,
+    });
+    setScanner(scannerInstance);
+    startScanCamera(scannerInstance).catch(() => {
+      onScanFailure?.();
+    });
+
+    return () => {
+      stopScanner(scannerInstance, { clear: true }).catch(() => undefined);
+    };
+  }, [elementId, enabled, formatsToSupport, onScanFailure, startScanCamera]);
+
+  return {
+    startScanFile,
+  };
+}

package/src/components/form/index.tsx

@@ -16,5 +16,6 @@ export * from './FileSizeInput';
 export * from './JsonTextArea';
 export * from './PasswordInput';
 export * from './RemoteSelect';
+export * from './ScanInput';
 export * from './TypedVariableInput';
 export * from './VariableInput';

package/src/flow/actions/__tests__/actionLinkageRules.race.repro.test.ts

@@ -10,6 +10,9 @@
 import { describe, expect, it, vi } from 'vitest';
 import { actionLinkageRules } from '../linkageRules';
 
+class ActionModel {}
+class PopupSubTableEditActionModel extends ActionModel {}
+
 function createActionModel() {
   const model: any = {
     uid: 'edit-action',
@@ -196,4 +199,46 @@ describe('actionLinkageRules props patch isolation', () => {
 
     expect(model.hidden).toBe(true);
   });
+
+  it('does not sync row action hidden state to the popup subtable field path', async () => {
+    const model = createActionModel();
+    Object.defineProperty(model, 'constructor', {
+      value: PopupSubTableEditActionModel,
+    });
+    model.isFork = true;
+    model.context = {
+      blockModel: { uid: 'form-block' },
+      fieldPathArray: ['org_o2m'],
+    };
+    const fieldModel: any = {
+      uid: 'org-o2m-field',
+      hidden: false,
+      context: {
+        blockModel: { uid: 'form-block' },
+        fieldPathArray: ['org_o2m'],
+      },
+    };
+    const { ctx } = createRuntime(model, { pauseHiddenAction: false });
+    ctx.engine = {
+      forEachModel: (visitor: (m: any) => void) => {
+        visitor(model);
+        visitor(fieldModel);
+      },
+    };
+
+    await actionLinkageRules.handler(
+      ctx,
+      createLinkageParams([
+        {
+          name: 'linkageSetActionProps',
+          params: {
+            value: 'hidden',
+          },
+        },
+      ]),
+    );
+
+    expect(model.hidden).toBe(true);
+    expect(fieldModel.hidden).toBe(false);
+  });
 });

package/src/flow/actions/linkageRules.tsx

@@ -106,6 +106,18 @@ const getLinkageScopeDepthFromContext = (ctx: FlowContext): number => {
   return getLinkageScopeDepthFromModel((ctx as any)?.model);
 };
 
+const isActionFlowModel = (model: any): boolean => {
+  if (!model || typeof model !== 'object') return false;
+
+  let proto = model.constructor?.prototype;
+  while (proto) {
+    if (proto.constructor?.name === 'ActionModel') return true;
+    proto = Object.getPrototypeOf(proto);
+  }
+
+  return false;
+};
+
 // 获取表单中所有字段的 model 实例的通用函数
 const getFormFields = (ctx: any) => {
   try {
@@ -2142,12 +2154,12 @@ const commonLinkageRulesHandler = async (ctx: FlowContext, params: any) => {
     model.setProps(_.omit(newProps, ['hiddenModel', 'value', 'hiddenText']));
     syncFieldOptionsToForks(model, patchProps);
     if (typeof model.setHidden === 'function') {
-      model.setHidden(!!newProps.hiddenModel);
+      model.setHidden(nextHidden);
     } else {
       model.hidden = nextHidden;
-      if (prevHidden !== nextHidden) {
-        hiddenStatePatches.push({ model, hidden: nextHidden });
-      }
+    }
+    if (prevHidden !== nextHidden && !isActionFlowModel(model)) {
+      hiddenStatePatches.push({ model, hidden: nextHidden });
     }
 
     if (newProps.required === true) {

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/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'),
 });