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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-beta.47",
+  "version": "2.1.0-beta.48",
   "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.1.0-beta.47",
-    "@nocobase/flow-engine": "2.1.0-beta.47",
-    "@nocobase/sdk": "2.1.0-beta.47",
-    "@nocobase/shared": "2.1.0-beta.47",
-    "@nocobase/utils": "2.1.0-beta.47",
+    "@nocobase/evaluators": "2.1.0-beta.48",
+    "@nocobase/flow-engine": "2.1.0-beta.48",
+    "@nocobase/sdk": "2.1.0-beta.48",
+    "@nocobase/shared": "2.1.0-beta.48",
+    "@nocobase/utils": "2.1.0-beta.48",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -39,11 +39,12 @@
     "classnames": "^2.3.1",
     "dayjs": "^1.11.10",
     "file-saver": "^2.0.5",
+    "html5-qrcode": "^2.3.8",
     "i18next": "^22.4.9",
     "json5": "^2.2.3",
     "lodash": "4.17.21",
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "bf8fc3790e3494c901b4d22861c5471a0d27c464"
+  "gitHead": "f8c27a286db015c5e433b48241f14c0412e50530"
 }

package/src/components/form/ScanInput/CodeScanner.tsx

@@ -0,0 +1,219 @@
+/**
+ * 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 { FileImageOutlined, LeftOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { Button, message, theme } from 'antd';
+import { Html5Qrcode } from 'html5-qrcode';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { ScanBox } from './ScanBox';
+import type { CodeFormatsToSupport } from './types';
+import { getCodeScanBoxSize, useCodeScanner } from './useCodeScanner';
+
+type CodeScannerProps = {
+  visible: boolean;
+  formatsToSupport?: CodeFormatsToSupport;
+  onClose: () => void;
+  onScanSuccess: (result: string) => void;
+};
+
+const MAX_CODE_IMAGE_SIZE = 10 * 1024 * 1024;
+
+function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess }: CodeScannerProps) {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const inputId = useId().replace(/:/g, '');
+  const scannerElementId = `code-scanner-${inputId}`;
+  const imgUploaderRef = useRef<HTMLInputElement>(null);
+  const [cameraAvailable, setCameraAvailable] = useState(false);
+
+  const viewport = useMemo(() => {
+    const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    const height = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+    return { width, height };
+  }, []);
+  const scanBoxSize = useMemo(
+    () => getCodeScanBoxSize(viewport.width, viewport.height),
+    [viewport.height, viewport.width],
+  );
+
+  const showScanFailure = useCallback(() => {
+    message.error(t('Code recognition failed, please scan again'));
+  }, [t]);
+
+  const handleScanSuccess = useCallback(
+    (text: string) => {
+      onScanSuccess(text);
+      onClose();
+    },
+    [onClose, onScanSuccess],
+  );
+
+  const { startScanFile } = useCodeScanner({
+    enabled: visible && cameraAvailable,
+    elementId: scannerElementId,
+    formatsToSupport,
+    scanBoxSize,
+    onScanSuccess: handleScanSuccess,
+    onScanFailure: showScanFailure,
+  });
+
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    let canceled = false;
+    Html5Qrcode.getCameras()
+      .then((cameras) => {
+        if (canceled) {
+          return;
+        }
+        if (cameras.length > 0) {
+          setCameraAvailable(true);
+          return;
+        }
+        message.error(t('No camera device detected'));
+        onClose();
+      })
+      .catch((error: Error) => {
+        if (canceled) {
+          return;
+        }
+        const errorMap: Record<string, string> = {
+          NotFoundError: t('No camera device detected'),
+          NotAllowedError: t('You have not granted permission to use the camera'),
+        };
+        message.error(errorMap[error.name] ?? error.message);
+        onClose();
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [onClose, t, visible]);
+
+  if (!visible) {
+    return null;
+  }
+
+  const handleImageButtonClick = () => {
+    imgUploaderRef.current?.click();
+  };
+
+  const handleImageUploaded = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    if (file.size > MAX_CODE_IMAGE_SIZE) {
+      message.error(t('The image size is too large. Please compress it to below 10MB before uploading'));
+      return;
+    }
+
+    startScanFile(file).catch(showScanFailure);
+    event.target.value = '';
+  };
+
+  const rootClass = css`
+    position: fixed;
+    inset: 0;
+    z-index: ${token.zIndexPopupBase + 1000};
+    overflow: hidden;
+    background: ${token.colorBgMask};
+  `;
+  const scannerWrapperClass = css`
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  `;
+  const scannerClass = css`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      width: auto !important;
+      height: 100% !important;
+      max-width: none !important;
+    }
+
+    #qr-shaded-region {
+      display: none !important;
+    }
+  `;
+  const closeButtonClass = css`
+    position: absolute;
+    top: ${token.padding}px;
+    left: ${token.padding}px;
+    z-index: ${token.zIndexPopupBase + 1003};
+    color: ${token.colorTextLightSolid};
+  `;
+  const albumClass = css`
+    position: absolute;
+    bottom: ${token.paddingLG}px;
+    left: ${token.paddingLG}px;
+    z-index: ${token.zIndexPopupBase + 1003};
+    color: ${token.colorTextLightSolid};
+  `;
+  const hiddenInputClass = css`
+    display: none;
+  `;
+
+  return (
+    <div className={rootClass}>
+      <div className={scannerWrapperClass}>
+        <div id={scannerElementId} className={scannerClass} />
+      </div>
+      {cameraAvailable && (
+        <>
+          <ScanBox
+            style={{
+              position: 'fixed',
+              top: `${(viewport.height - scanBoxSize.height) / 2}px`,
+              left: `${(viewport.width - scanBoxSize.width) / 2}px`,
+              width: `${scanBoxSize.width}px`,
+              height: `${scanBoxSize.height}px`,
+            }}
+          />
+          <Button
+            aria-label={t('Close')}
+            className={closeButtonClass}
+            icon={<LeftOutlined />}
+            type="text"
+            onClick={onClose}
+          />
+          <Button className={albumClass} icon={<FileImageOutlined />} type="text" onClick={handleImageButtonClick}>
+            {t('Album')}
+          </Button>
+          <input
+            ref={imgUploaderRef}
+            accept="image/*"
+            className={hiddenInputClass}
+            type="file"
+            onChange={handleImageUploaded}
+          />
+        </>
+      )}
+    </div>
+  );
+}
+
+export function CodeScanner(props: CodeScannerProps) {
+  if (!props.visible) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(<CodeScannerContent {...props} />, document.body);
+}

package/src/components/form/ScanInput/ScanBox.tsx

@@ -0,0 +1,30 @@
+/**
+ * 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';
+
+export function ScanBox({ style = {} }: { style?: React.CSSProperties }) {
+  const commonStyle: React.CSSProperties = {
+    position: 'absolute',
+    backgroundColor: 'rgb(255, 255, 255)',
+  };
+
+  return (
+    <div id="code-scan-box" style={{ boxSizing: 'border-box', inset: '0px', ...style }}>
+      <div style={{ width: '40px', height: '5px', top: '-5px', left: '0px', ...commonStyle }} />
+      <div style={{ width: '40px', height: '5px', top: '-5px', right: '0px', ...commonStyle }} />
+      <div style={{ width: '40px', height: '5px', bottom: '-5px', left: '0px', ...commonStyle }} />
+      <div style={{ width: '40px', height: '5px', bottom: '-5px', right: '0px', ...commonStyle }} />
+      <div style={{ width: '5px', height: '45px', top: '-5px', left: '-5px', ...commonStyle }} />
+      <div style={{ width: '5px', height: '45px', bottom: '-5px', left: '-5px', ...commonStyle }} />
+      <div style={{ width: '5px', height: '45px', top: '-5px', right: '-5px', ...commonStyle }} />
+      <div style={{ width: '5px', height: '45px', bottom: '-5px', right: '-5px', ...commonStyle }} />
+    </div>
+  );
+}

package/src/components/form/ScanInput/ScanInput.tsx

@@ -0,0 +1,150 @@
+/**
+ * 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 { ScanOutlined } from '@ant-design/icons';
+import { Button, Input, Tooltip } from 'antd';
+import type { InputProps } from 'antd';
+import type { InputRef } from 'antd/es/input';
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CodeScanner } from './CodeScanner';
+import type { CodeFormatsToSupport } from './types';
+
+export type ScanInputProps = Omit<InputProps, 'onChange'> & {
+  disableManualInput?: boolean;
+  enableScan?: boolean;
+  formatsToSupport?: CodeFormatsToSupport;
+  onChange?: (value: string | React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+type JsBridgeScanResult = string | { url?: string; text?: string; value?: string };
+
+type JsBridge = {
+  invoke?: (params: { action: 'scan' }, callback: (data: JsBridgeScanResult) => void) => void;
+};
+
+function getJsBridgeScanText(data: JsBridgeScanResult) {
+  if (typeof data === 'string') {
+    return data;
+  }
+  return data.url || data.text || data.value || '';
+}
+
+export function ScanInput({
+  value,
+  onChange,
+  disabled,
+  disableManualInput,
+  enableScan: _enableScan,
+  formatsToSupport,
+  onFocus,
+  suffix,
+  ...rest
+}: ScanInputProps) {
+  const { t } = useTranslation();
+  const [scanVisible, setScanVisible] = useState(false);
+  const inputRef = useRef<InputRef>(null);
+  const suppressInputFocusRef = useRef(false);
+
+  const handleScanSuccess = (text: string) => {
+    if (!text) {
+      return;
+    }
+    onChange?.(text);
+  };
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(event);
+  };
+
+  const openScanner = () => {
+    if (disabled) {
+      return;
+    }
+    suppressInputFocusRef.current = true;
+    inputRef.current?.blur();
+    const releaseInputFocusSuppression = () => {
+      window.setTimeout(() => {
+        suppressInputFocusRef.current = false;
+      }, 300);
+    };
+    const jsBridge = (window as Window & { JsBridge?: JsBridge }).JsBridge;
+    if (jsBridge?.invoke) {
+      jsBridge.invoke({ action: 'scan' }, (data) => {
+        handleScanSuccess(getJsBridgeScanText(data));
+      });
+      releaseInputFocusSuppression();
+      return;
+    }
+    setScanVisible(true);
+    releaseInputFocusSuppression();
+  };
+
+  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (suppressInputFocusRef.current) {
+      inputRef.current?.blur();
+      event.preventDefault();
+      return;
+    }
+    onFocus?.(event);
+  };
+
+  const handleScanButtonPointerDownCapture = (event: React.PointerEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openScanner();
+  };
+
+  const handleScanButtonClick = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openScanner();
+  };
+
+  const scanButton = (
+    <Tooltip title={t('Scan to input')}>
+      <Button
+        aria-label={t('Scan to input')}
+        disabled={disabled}
+        htmlType="button"
+        icon={<ScanOutlined />}
+        size="small"
+        type="text"
+        onClick={handleScanButtonClick}
+        onPointerDownCapture={handleScanButtonPointerDownCapture}
+      />
+    </Tooltip>
+  );
+
+  return (
+    <>
+      <Input
+        {...rest}
+        ref={inputRef}
+        disabled={disabled}
+        readOnly={disableManualInput || rest.readOnly}
+        suffix={
+          <>
+            {suffix}
+            {scanButton}
+          </>
+        }
+        value={value}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+      />
+      <CodeScanner
+        formatsToSupport={formatsToSupport}
+        visible={scanVisible}
+        onClose={() => setScanVisible(false)}
+        onScanSuccess={handleScanSuccess}
+      />
+    </>
+  );
+}

package/src/components/form/ScanInput/__tests__/ScanInput.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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 { act, fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { ScanInput } from '../ScanInput';
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../CodeScanner', () => ({
+  CodeScanner: ({ visible, onScanSuccess }: { visible: boolean; onScanSuccess: (result: string) => void }) =>
+    visible ? <button onClick={() => onScanSuccess('CODE-128')}>mock scan result</button> : null,
+}));
+
+describe('ScanInput', () => {
+  it('passes manual input changes through', () => {
+    const handleChange = vi.fn();
+
+    render(<ScanInput value="" onChange={handleChange} />);
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'manual-code' } });
+
+    expect(handleChange.mock.calls[0][0].target.value).toBe('manual-code');
+  });
+
+  it('passes scanned text through as the field value', () => {
+    const handleChange = vi.fn();
+
+    render(<ScanInput value="" onChange={handleChange} />);
+    fireEvent.pointerDown(screen.getByRole('button', { name: 'Scan to input' }));
+    fireEvent.click(screen.getByText('mock scan result'));
+
+    expect(handleChange).toHaveBeenCalledWith('CODE-128');
+  });
+
+  it('opens scanner on pointer down without focusing the input', () => {
+    const handleFocus = vi.fn();
+
+    render(<ScanInput value="" onChange={() => undefined} onFocus={handleFocus} />);
+
+    const input = screen.getByRole('textbox');
+    const button = screen.getByRole('button', { name: 'Scan to input' });
+
+    expect(button).not.toHaveAttribute('tabindex', '-1');
+    fireEvent.pointerDown(button);
+
+    act(() => {
+      input.focus();
+    });
+
+    expect(handleFocus).not.toHaveBeenCalled();
+    expect(screen.getByText('mock scan result')).toBeInTheDocument();
+  });
+
+  it('opens scanner from the button click path', () => {
+    render(<ScanInput value="" onChange={() => undefined} />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Scan to input' }));
+
+    expect(screen.getByText('mock scan result')).toBeInTheDocument();
+  });
+
+  it('uses the mobile native scan bridge when available', () => {
+    const testWindow = window as Window & {
+      JsBridge?: {
+        invoke: (params: { action: 'scan' }, callback: (data: { url: string }) => void) => void;
+      };
+    };
+    const originalJsBridge = testWindow.JsBridge;
+    const handleChange = vi.fn();
+    const invoke = vi.fn((params: { action: 'scan' }, callback: (data: { url: string }) => void) => {
+      callback({ url: 'BRIDGE-CODE' });
+    });
+    testWindow.JsBridge = { invoke };
+
+    try {
+      render(<ScanInput value="" onChange={handleChange} />);
+      fireEvent.click(screen.getByRole('button', { name: 'Scan to input' }));
+
+      expect(invoke).toHaveBeenCalledWith({ action: 'scan' }, expect.any(Function));
+      expect(handleChange).toHaveBeenCalledWith('BRIDGE-CODE');
+      expect(screen.queryByText('mock scan result')).not.toBeInTheDocument();
+    } finally {
+      testWindow.JsBridge = originalJsBridge;
+    }
+  });
+
+  it('does not call preventDefault from touchstart', () => {
+    render(<ScanInput value="" onChange={() => undefined} />);
+
+    const event = new Event('touchstart', { bubbles: true, cancelable: true });
+    const preventDefault = vi.spyOn(event, 'preventDefault');
+
+    screen.getByRole('button', { name: 'Scan to input' }).dispatchEvent(event);
+
+    expect(preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('keeps scan available when manual input is disabled', () => {
+    render(<ScanInput disableManualInput value="" onChange={() => undefined} />);
+
+    expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+    expect(screen.getByRole('button', { name: 'Scan to input' })).not.toBeDisabled();
+  });
+
+  it('disables the scan button when the field is disabled', () => {
+    render(<ScanInput disabled value="" onChange={() => undefined} />);
+
+    expect(screen.getByRole('button', { name: 'Scan to input' })).toBeDisabled();
+  });
+});

package/src/components/form/ScanInput/__tests__/useCodeScanner.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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 { render, waitFor } from '@testing-library/react';
+import React, { useCallback } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { DEFAULT_CODE_FORMATS, getCodeScanBoxSize, useCodeScanner } from '../useCodeScanner';
+
+type MockScannerInstance = {
+  clear: ReturnType<typeof vi.fn>;
+  getState: ReturnType<typeof vi.fn>;
+  scanFileV2: ReturnType<typeof vi.fn>;
+  start: ReturnType<typeof vi.fn>;
+  stop: ReturnType<typeof vi.fn>;
+};
+
+const mocks = vi.hoisted(() => {
+  const start = vi.fn().mockResolvedValue(null);
+  const stop = vi.fn().mockResolvedValue(null);
+  const clear = vi.fn();
+  const getState = vi.fn(() => 1);
+  const scanFileV2 = vi.fn();
+  const Html5Qrcode = vi.fn(function MockHtml5Qrcode(this: MockScannerInstance) {
+    this.start = start;
+    this.stop = stop;
+    this.clear = clear;
+    this.getState = getState;
+    this.scanFileV2 = scanFileV2;
+  });
+
+  return {
+    clear,
+    getState,
+    Html5Qrcode,
+    scanFileV2,
+    start,
+    stop,
+  };
+});
+
+vi.mock('html5-qrcode', () => ({
+  Html5Qrcode: mocks.Html5Qrcode,
+  Html5QrcodeScannerState: {
+    PAUSED: 3,
+    SCANNING: 2,
+  },
+  Html5QrcodeSupportedFormats: {
+    CODABAR: 2,
+    CODE_128: 5,
+    CODE_39: 3,
+    CODE_93: 4,
+    DATA_MATRIX: 6,
+    EAN_13: 9,
+    EAN_8: 10,
+    ITF: 8,
+    PDF_417: 11,
+    QR_CODE: 0,
+    UPC_A: 14,
+    UPC_E: 15,
+  },
+}));
+
+function ScannerHost({ scanBoxSize }: { scanBoxSize?: { width: number; height: number } } = {}) {
+  const handleScanSuccess = useCallback(() => undefined, []);
+
+  useCodeScanner({
+    elementId: 'scanner',
+    enabled: true,
+    scanBoxSize,
+    onScanSuccess: handleScanSuccess,
+  });
+
+  return <div id="scanner" />;
+}
+
+describe('useCodeScanner', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('starts scanning with QR code and barcode formats by default', async () => {
+    render(<ScannerHost />);
+
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    expect(mocks.Html5Qrcode).toHaveBeenCalledWith('scanner', {
+      formatsToSupport: DEFAULT_CODE_FORMATS,
+      verbose: false,
+    });
+    expect(DEFAULT_CODE_FORMATS).toEqual(expect.arrayContaining([0, 5, 9, 14]));
+  });
+
+  it('uses the visible scan box as the camera scan region', async () => {
+    render(<ScannerHost />);
+
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    const config = mocks.start.mock.calls[0]?.[1] as
+      | { qrbox?: (width: number, height: number) => { width: number; height: number } }
+      | undefined;
+
+    expect(config?.qrbox?.(390, 844)).toEqual({ width: 319, height: 240 });
+    expect(getCodeScanBoxSize(390, 844)).toEqual({ width: 319, height: 240 });
+  });
+
+  it('can use the visible viewport scan box when the camera video is wider than the viewport', async () => {
+    render(<ScannerHost scanBoxSize={{ width: 319, height: 240 }} />);
+
+    await waitFor(() => expect(mocks.start).toHaveBeenCalled());
+
+    const config = mocks.start.mock.calls[0]?.[1] as
+      | { qrbox?: (width: number, height: number) => { width: number; height: number } }
+      | undefined;
+
+    expect(config?.qrbox?.(1200, 844)).toEqual({ width: 319, height: 240 });
+  });
+});

package/src/components/form/ScanInput/index.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.
+ */
+
+export * from './CodeScanner';
+export * from './ScanInput';
+export * from './types';