@nocobase/client-v2 2.2.0-beta.1 → 2.2.0-beta.11

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

@@ -8,6 +8,7 @@
  */
 
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
+import jsQR from 'jsqr';
 import { useCallback, useEffect, useState } from 'react';
 import type { CodeFormatsToSupport } from './types';
 
@@ -26,6 +27,27 @@ type UseCodeScannerOptions = {
   onScanFailure?: () => void;
 };
 
+type ImageDataVariant = {
+  imageData: ImageData;
+  maxSize: number;
+};
+
+type JsQRImageTransform = {
+  contrast?: number;
+  threshold?: number;
+};
+
+const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
+const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
+  {},
+  { contrast: 3, threshold: 105 },
+  { contrast: 2, threshold: 105 },
+  { contrast: 3, threshold: 120 },
+  { contrast: 2, threshold: 120 },
+  { contrast: 3, threshold: 90 },
+  { contrast: 4, threshold: 105 },
+];
+
 export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
   Html5QrcodeSupportedFormats.QR_CODE,
   Html5QrcodeSupportedFormats.CODE_128,
@@ -62,6 +84,126 @@ async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } =
   }
 }
 
+function isSafariBrowser() {
+  const { userAgent, vendor } = navigator;
+  return /Apple/i.test(vendor) && /Safari/i.test(userAgent) && !/CriOS|FxiOS|EdgiOS|Chrome/i.test(userAgent);
+}
+
+function loadImage(file: File) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    const url = URL.createObjectURL(file);
+    const cleanup = () => URL.revokeObjectURL(url);
+
+    image.onload = () => {
+      cleanup();
+      resolve(image);
+    };
+    image.onerror = (event) => {
+      cleanup();
+      reject(event);
+    };
+    image.onabort = (event) => {
+      cleanup();
+      reject(event);
+    };
+    image.src = url;
+  });
+}
+
+function getScanImageSizes(naturalWidth: number, naturalHeight: number) {
+  const maxSize = Math.max(naturalWidth, naturalHeight);
+  const cappedMaxSize = Math.min(maxSize, QR_SCAN_IMAGE_SIZES[0]);
+  return Array.from(new Set([cappedMaxSize, ...QR_SCAN_IMAGE_SIZES.filter((size) => size < cappedMaxSize)])).sort(
+    (a, b) => b - a,
+  );
+}
+
+function getImageDataFromImage(image: HTMLImageElement, maxSize: number): ImageDataVariant | undefined {
+  const naturalWidth = image.naturalWidth || image.width;
+  const naturalHeight = image.naturalHeight || image.height;
+
+  const scale = Math.min(1, maxSize / Math.max(naturalWidth, naturalHeight));
+  const width = Math.max(1, Math.round(naturalWidth * scale));
+  const height = Math.max(1, Math.round(naturalHeight * scale));
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(image, 0, 0, width, height);
+  return {
+    imageData: context.getImageData(0, 0, width, height),
+    maxSize,
+  };
+}
+
+async function getImageDataVariants(file: File) {
+  const image = await loadImage(file);
+  const naturalWidth = image.naturalWidth || image.width;
+  const naturalHeight = image.naturalHeight || image.height;
+
+  if (!naturalWidth || !naturalHeight) {
+    return;
+  }
+
+  return getScanImageSizes(naturalWidth, naturalHeight)
+    .map((maxSize) => getImageDataFromImage(image, maxSize))
+    .filter((variant): variant is ImageDataVariant => !!variant);
+}
+
+function getTransformedImageData(imageData: ImageData, transform: JsQRImageTransform) {
+  const { contrast = 1, threshold } = transform;
+  if (contrast === 1 && threshold == null) {
+    return imageData.data;
+  }
+
+  const data = new Uint8ClampedArray(imageData.data);
+  for (let index = 0; index < data.length; index += 4) {
+    let luminance = data[index] * 0.299 + data[index + 1] * 0.587 + data[index + 2] * 0.114;
+    luminance = Math.max(0, Math.min(255, (luminance - 128) * contrast + 128));
+    if (threshold != null) {
+      luminance = luminance < threshold ? 0 : 255;
+    }
+    data[index] = luminance;
+    data[index + 1] = luminance;
+    data[index + 2] = luminance;
+  }
+  return data;
+}
+
+async function scanFileWithJsQR(file: File, formatsToSupport?: CodeFormatsToSupport) {
+  const formats = formatsToSupport?.length ? formatsToSupport : DEFAULT_CODE_FORMATS;
+  if (!formats.includes(Html5QrcodeSupportedFormats.QR_CODE)) {
+    throw new Error('QR_CODE is not included in the requested formats');
+  }
+
+  const variants = await getImageDataVariants(file);
+  if (!variants?.length) {
+    throw new Error('Failed to prepare uploaded image for QR decoding');
+  }
+
+  for (const { imageData } of variants) {
+    for (const transform of QR_SCAN_IMAGE_TRANSFORMS) {
+      const data = getTransformedImageData(imageData, transform);
+      const qrCode = jsQR(data, imageData.width, imageData.height, { inversionAttempts: 'attemptBoth' });
+      if (qrCode?.data) {
+        return qrCode.data;
+      }
+    }
+  }
+
+  throw new Error('No QR code decoded by jsQR');
+}
+
+function shouldScanQrWithJsQR(formatsToSupport?: CodeFormatsToSupport) {
+  const formats = formatsToSupport?.length ? formatsToSupport : DEFAULT_CODE_FORMATS;
+  return formats.includes(Html5QrcodeSupportedFormats.QR_CODE);
+}
+
 export function useCodeScanner({
   enabled,
   elementId,
@@ -95,6 +237,16 @@ export function useCodeScanner({
 
   const startScanFile = useCallback(
     async (file: File) => {
+      if (isSafariBrowser() && shouldScanQrWithJsQR(formatsToSupport)) {
+        try {
+          const decodedText = await scanFileWithJsQR(file, formatsToSupport);
+          onScanSuccess(decodedText);
+          return;
+        } catch {
+          // Fall through to html5-qrcode so barcode uploads still work in Safari.
+        }
+      }
+
       if (!scanner) {
         return;
       }
@@ -103,12 +255,12 @@ export function useCodeScanner({
       try {
         const result = await scanner.scanFileV2(file, false);
         onScanSuccess(result.decodedText);
-      } catch (error) {
+      } catch {
         onScanFailure?.();
         await startScanCamera(scanner);
       }
     },
-    [onScanFailure, onScanSuccess, scanner, startScanCamera],
+    [formatsToSupport, onScanFailure, onScanSuccess, scanner, startScanCamera],
   );
 
   useEffect(() => {

package/src/components/form/VariableJsonTextArea.tsx

@@ -0,0 +1,175 @@
+/**
+ * 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 { css, cx } from '@emotion/css';
+import {
+  FlowContextSelector,
+  formatPathToValue as formatFlowPathToValue,
+  useFlowContext,
+  type MetaTreeNode,
+} from '@nocobase/flow-engine';
+import { Button, theme } from 'antd';
+import type { TextAreaRef } from 'antd/es/input/TextArea';
+import React, { useCallback, useMemo, useRef } from 'react';
+import { JsonTextArea, type JsonTextAreaProps } from './JsonTextArea';
+import { useFilteredMetaTree } from './VariableInput';
+
+export interface VariableJsonTextAreaProps extends JsonTextAreaProps {
+  namespaces?: string[];
+  extraNodes?: MetaTreeNode[];
+  metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+  formatPathToValue?: (meta: MetaTreeNode) => string | undefined;
+}
+
+export const VariableJsonTextArea = React.memo((props: VariableJsonTextAreaProps) => {
+  const {
+    value,
+    onChange,
+    space = 2,
+    json5 = false,
+    showError = true,
+    className,
+    status,
+    onBlur,
+    namespaces,
+    extraNodes,
+    metaTree,
+    formatPathToValue: customFormatPathToValue,
+    ...textAreaProps
+  } = props;
+  const { token } = theme.useToken();
+  const flowCtx = useFlowContext();
+  const filteredMetaTree = useFilteredMetaTree({ namespaces, extraNodes });
+  const ref = useRef<TextAreaRef>(null);
+
+  const insertAtCaret = useCallback((valueToInsert: string) => {
+    const textArea = ref.current?.resizableTextArea?.textArea;
+    if (!textArea) return;
+
+    const start = textArea.selectionStart ?? textArea.value.length;
+    const end = textArea?.selectionEnd ?? start;
+    const nextText = textArea.value.slice(0, start) + valueToInsert + textArea.value.slice(end);
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')?.set;
+
+    nativeInputValueSetter?.call(textArea, nextText);
+    textArea.dispatchEvent(new Event('input', { bubbles: true }));
+
+    requestAnimationFrame(() => {
+      const nextPosition = start + valueToInsert.length;
+      textArea.setSelectionRange(start, nextPosition);
+      textArea.focus();
+    });
+  }, []);
+
+  const handleVariableSelected = useCallback(
+    (nextValue: string) => {
+      if (nextValue) {
+        insertAtCaret(nextValue);
+      }
+    },
+    [insertAtCaret],
+  );
+
+  const selectorMetaTree = useMemo(
+    () => metaTree ?? filteredMetaTree ?? (() => flowCtx.getPropertyMetaTree?.() ?? []),
+    [filteredMetaTree, flowCtx, metaTree],
+  );
+
+  const formatPathToValue = useMemo(() => {
+    if (!customFormatPathToValue) {
+      return;
+    }
+    return (meta: MetaTreeNode) => customFormatPathToValue(meta) ?? formatFlowPathToValue(meta);
+  }, [customFormatPathToValue]);
+
+  const wrapperClassName = useMemo(
+    () => css`
+      position: relative;
+      width: 100%;
+
+      .ant-input {
+        width: 100%;
+      }
+    `,
+    [],
+  );
+
+  const textAreaClassName = useMemo(
+    () => css`
+      font-size: ${token.fontSizeSM}px;
+      font-family: ${token.fontFamilyCode};
+    `,
+    [token.fontFamilyCode, token.fontSizeSM],
+  );
+
+  const selectorClassName = useMemo(
+    () => css`
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      z-index: 1;
+      line-height: 0;
+
+      .ant-btn {
+        font-size: ${token.fontSizeSM}px;
+      }
+    `,
+    [token.fontSizeSM],
+  );
+
+  const buttonClassName = useMemo(
+    () => css`
+      &:not(:hover) {
+        border-inline-end-color: transparent;
+        border-block-start-color: transparent;
+        background-color: transparent;
+      }
+    `,
+    [],
+  );
+
+  return (
+    <div className={wrapperClassName}>
+      <JsonTextArea
+        {...textAreaProps}
+        ref={ref}
+        value={value}
+        onChange={onChange}
+        space={space}
+        json5={json5}
+        showError={showError}
+        className={cx(textAreaClassName, className)}
+        status={status}
+        onBlur={onBlur}
+        disabled={textAreaProps.disabled}
+      />
+      <div className={selectorClassName}>
+        <FlowContextSelector
+          metaTree={selectorMetaTree}
+          disabled={textAreaProps.disabled}
+          formatPathToValue={formatPathToValue}
+          onChange={handleVariableSelected}
+        >
+          <Button
+            aria-label="variable-json-switcher"
+            disabled={textAreaProps.disabled}
+            className={buttonClassName}
+            style={{ fontStyle: 'italic', fontFamily: token.fontFamilyCode }}
+          >
+            x
+          </Button>
+        </FlowContextSelector>
+      </div>
+    </div>
+  );
+});
+
+VariableJsonTextArea.displayName = 'VariableJsonTextArea';
+
+export const VariableJSON = VariableJsonTextArea;

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

@@ -0,0 +1,43 @@
+/**
+ * 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 { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { JsonTextArea } from '../JsonTextArea';
+
+describe('JsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const handleChange = vi.fn();
+
+    render(<JsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,86 @@
+/**
+ * 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 { FlowContext, FlowContextProvider } from '@nocobase/flow-engine';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { VariableJsonTextArea } from '../VariableJsonTextArea';
+
+function createContextWithEnv() {
+  const ctx = new FlowContext();
+  (ctx as unknown as { t: (key: string) => string }).t = (key: string) => key;
+
+  ctx.defineProperty('$env', {
+    value: { API_KEY: 'secret' },
+    meta: {
+      title: 'Env',
+      type: 'object',
+      properties: {
+        API_KEY: { title: 'API Key', type: 'string' },
+      },
+    },
+  });
+
+  return ctx;
+}
+
+function renderWithCtx(ctx: FlowContext, node: React.ReactNode) {
+  return render(<FlowContextProvider context={ctx}>{node}</FlowContextProvider>);
+}
+
+describe('VariableJsonTextArea', () => {
+  it('formats object values and emits parsed JSON on blur', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{ foo: 'bar' }} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    expect(textArea).toHaveValue('{\n  "foo": "bar"\n}');
+
+    fireEvent.change(textArea, { target: { value: '{"foo":"baz"}' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).toHaveBeenCalledWith({ foo: 'baz' });
+    expect(textArea).toHaveValue('{\n  "foo": "baz"\n}');
+  });
+
+  it('shows JSON parse errors and does not emit invalid values', async () => {
+    const ctx = createContextWithEnv();
+    const handleChange = vi.fn();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={{}} onChange={handleChange} />);
+
+    const textArea = await screen.findByRole('textbox');
+    fireEvent.change(textArea, { target: { value: '{' } });
+    fireEvent.blur(textArea);
+
+    expect(handleChange).not.toHaveBeenCalled();
+    expect(await screen.findByText(/JSON/)).toBeInTheDocument();
+  });
+
+  it('inserts selected variables with the client-v2 template format', async () => {
+    const ctx = createContextWithEnv();
+
+    renderWithCtx(ctx, <VariableJsonTextArea value={null} namespaces={['$env']} onChange={() => undefined} />);
+
+    fireEvent.click(await screen.findByRole('button', { name: 'variable-json-switcher' }));
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('Env'));
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByText('API Key'));
+    });
+
+    expect(await screen.findByRole('textbox')).toHaveValue('{{ ctx.$env.API_KEY }}');
+  });
+});

package/src/components/form/index.tsx

@@ -19,3 +19,4 @@ export * from './RemoteSelect';
 export * from './ScanInput';
 export * from './TypedVariableInput';
 export * from './VariableInput';
+export * from './VariableJsonTextArea';

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './BlankComponent';
 export * from './form/table/dnd';
 export * from './form';
 export * from './Icon';
+export * from './KeepAlive';
 export * from './PoweredBy';
 export * from './RouterContextCleaner';
 export * from './SwitchLanguage';

package/src/entry-actions/EntryActionManager.ts

@@ -0,0 +1,76 @@
+/**
+ * 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 {
+  define,
+  observable,
+  type FlowModelContext,
+  type SubModelItem,
+  type SubModelItemsType,
+} from '@nocobase/flow-engine';
+
+export type EntryActionScope = 'action-panel' | 'app-switcher' | string;
+
+export type EntryActionProvider = (ctx: FlowModelContext) => SubModelItem[] | Promise<SubModelItem[]>;
+
+type ProviderRecord = {
+  name: string;
+  scope: EntryActionScope;
+  provider: EntryActionProvider;
+  sort: number;
+};
+
+export class EntryActionManager {
+  private readonly providers = new Map<string, ProviderRecord>();
+  revision = 0;
+
+  constructor() {
+    define(this, {
+      revision: observable.ref,
+    });
+  }
+
+  register(name: string, options: { scope: EntryActionScope; provider: EntryActionProvider; sort?: number }) {
+    this.providers.set(name, {
+      name,
+      scope: options.scope,
+      provider: options.provider,
+      sort: options.sort ?? 0,
+    });
+    this.invalidate();
+  }
+
+  unregister(name: string) {
+    this.providers.delete(name);
+    this.invalidate();
+  }
+
+  invalidate() {
+    this.revision += 1;
+  }
+
+  getItems(scope: EntryActionScope): SubModelItemsType {
+    return async (ctx) => {
+      const providers = [...this.providers.values()]
+        .filter((item) => item.scope === scope)
+        .sort((a, b) => a.sort - b.sort);
+      const groups = await Promise.all(
+        providers.map(async (item) => {
+          try {
+            return await item.provider(ctx);
+          } catch (error) {
+            console.error(`[NocoBase] Failed to load entry action provider "${item.name}".`, error);
+            return [];
+          }
+        }),
+      );
+      return groups.flat();
+    };
+  }
+}

package/src/entry-actions/index.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 './EntryActionManager';

package/src/flow/FlowPage.tsx

@@ -14,7 +14,7 @@ import {
   useFlowModelById,
   useFlowViewContext,
 } from '@nocobase/flow-engine';
-import type { FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
+import type { FlowEngineContext, FlowModel, FlowModelRendererProps, ModelConstructor } from '@nocobase/flow-engine';
 import { useRequest } from 'ahooks';
 import React from 'react';
 import FlowRoute from './components/FlowRoute';
@@ -57,10 +57,38 @@ type FlowPageProps = {
   showFlowSettings?: FlowModelRendererProps['showFlowSettings'];
 };
 
+type FlowPageViewContext = FlowEngineContext & {
+  view?: {
+    inputArgs?: {
+      filterByTk?: unknown;
+      isMobileLayout?: unknown;
+      sourceId?: unknown;
+    };
+  };
+};
+
+const bindViewLayoutState = (model: FlowModel, ctx?: FlowPageViewContext | null) => {
+  const hasViewMobileLayout = typeof ctx?.view?.inputArgs?.isMobileLayout === 'boolean';
+  const hasContextMobileLayout = typeof ctx?.isMobileLayout === 'boolean';
+  if (!hasViewMobileLayout && !hasContextMobileLayout) {
+    return;
+  }
+
+  model.context.defineProperty('isMobileLayout', {
+    get: () => {
+      if (typeof ctx?.isMobileLayout === 'boolean') {
+        return ctx.isMobileLayout;
+      }
+      return !!ctx?.view?.inputArgs?.isMobileLayout;
+    },
+    cache: false,
+  });
+};
+
 export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknown>) => {
   const { pageModelClass = 'ChildPageModel', parentId, onModelLoaded, defaultTabTitle, ...rest } = props;
   const flowEngine = useFlowEngine();
-  const ctx = useFlowViewContext();
+  const ctx = useFlowViewContext<FlowPageViewContext>();
   const { loading, data, error } = useRequest(
     async () => {
       const ModelClass = await flowEngine.getModelClassAsync(pageModelClass);
@@ -76,6 +104,10 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
         subType: 'object',
         use: pageModelClass,
       };
+      const isRuntimeRecordScopedPage =
+        !flowEngine.context.flowSettingsEnabled &&
+        (typeof ctx?.view?.inputArgs?.filterByTk !== 'undefined' ||
+          typeof ctx?.view?.inputArgs?.sourceId !== 'undefined');
       if (shouldInjectDefaultChildTab) {
         const tabTitle = defaultTabTitle || flowEngine.translate?.('Details');
         options['subModels'] = {
@@ -102,9 +134,12 @@ export const FlowPage = React.memo((props: FlowPageProps & Record<string, unknow
           },
         };
       }
-      const data = await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled });
+      const data =
+        (isRuntimeRecordScopedPage && (await flowEngine.loadModel({ ...options, refresh: true }))) ||
+        (await flowEngine.loadOrCreateModel(options, { skipSave: !flowEngine.context.flowSettingsEnabled }));
       if (data?.uid && onModelLoaded) {
         data.context.addDelegate(ctx);
+        bindViewLayoutState(data, ctx);
         data.removeParentDelegate();
         onModelLoaded(data.uid, data);
       }