@nocobase/client-v2 2.2.0-beta.8 → 2.2.0

package/src/components/category-tabs/SortableCategoryTabs.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 { MenuOutlined } from '@ant-design/icons';
+import {
+  DndContext,
+  DragOverlay,
+  MouseSensor,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type DragStartEvent,
+} from '@dnd-kit/core';
+import { Badge, Button, Dropdown, Space, Tabs } from 'antd';
+import type { TabsProps } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+
+/**
+ * A category descriptor for {@link SortableCategoryTabs}. The component is
+ * i18n-agnostic: `label` is rendered verbatim, so consumers pass an
+ * already-compiled/translated node. `color` is an antd preset color name or a
+ * hex string; `'default'` / `undefined` renders no badge color.
+ */
+export type SortableCategoryTabItem = {
+  id: string | number;
+  label: React.ReactNode;
+  color?: string;
+};
+
+export type SortableCategoryTabsProps = {
+  activeKey: string;
+  onChange: (key: string) => void;
+  /** Draggable category tabs (the fixed leading tab is configured via `allTab`). */
+  categories: SortableCategoryTabItem[];
+  /** The fixed, non-draggable leading tab, e.g. "All". */
+  allTab: { key: string; label: React.ReactNode };
+  /** Show the "+" add button and handle its click. */
+  onAdd?: () => void;
+  /** Per-category edit menu item handler; menu is hidden when omitted. */
+  onEdit?: (id: string | number) => void;
+  /** Per-category delete menu item handler; menu is hidden when omitted. */
+  onDelete?: (id: string | number) => void;
+  /** Reorder handler. Receives the dragged and dropped category ids. */
+  onSort?: (sourceId: string | number, targetId: string | number) => void | Promise<void>;
+  /** Consumer-translated labels for the per-category dropdown menu. */
+  menuLabels?: { edit?: string; delete?: string };
+  className?: string;
+};
+
+function DraggableTab(props: { id: string; children: React.ReactNode }) {
+  const { attributes, listeners, setNodeRef } = useDraggable({ id: props.id });
+  return (
+    <div ref={setNodeRef} {...listeners} {...attributes}>
+      {props.children}
+    </div>
+  );
+}
+
+function DroppableTab(props: { id: string; children: React.ReactNode }) {
+  const { isOver, setNodeRef } = useDroppable({ id: props.id });
+  return (
+    <div ref={setNodeRef} style={isOver ? { color: 'green' } : undefined}>
+      {props.children}
+    </div>
+  );
+}
+
+function CategoryTabContent(props: {
+  item: SortableCategoryTabItem;
+  onEdit?: (id: string | number) => void;
+  onDelete?: (id: string | number) => void;
+  menuLabels?: { edit?: string; delete?: string };
+}) {
+  const { item, onEdit, onDelete, menuLabels } = props;
+  const hasMenu = Boolean(onEdit || onDelete);
+  const editLabel = menuLabels?.edit ?? 'Edit';
+  const deleteLabel = menuLabels?.delete ?? 'Delete';
+
+  return (
+    <Space size={6}>
+      <Badge color={item.color === 'default' ? undefined : item.color} />
+      {item.label}
+      {hasMenu ? (
+        <Dropdown
+          trigger={['click']}
+          menu={{
+            items: [
+              onEdit ? { key: 'edit', label: editLabel } : null,
+              onDelete ? { key: 'delete', label: deleteLabel } : null,
+            ].filter(Boolean) as { key: string; label: string }[],
+            onClick({ key, domEvent }) {
+              domEvent.stopPropagation();
+              if (key === 'edit') {
+                onEdit?.(item.id);
+                return;
+              }
+              onDelete?.(item.id);
+            },
+          }}
+        >
+          <Button
+            aria-label={editLabel}
+            icon={<MenuOutlined />}
+            size="small"
+            type="text"
+            onClick={(event) => event.stopPropagation()}
+          />
+        </Dropdown>
+      ) : null}
+    </Space>
+  );
+}
+
+/**
+ * A draggable, editable category tab bar. Renders only the tab bar (no content
+ * panes) — the page renders its content below and reacts to `activeKey`.
+ *
+ * Shared by settings pages that group records under reorderable categories
+ * (data-source collections, workflows, …). Drag-to-reorder is powered by
+ * `@dnd-kit`; the "+" / per-tab edit-delete affordances are optional.
+ */
+export function SortableCategoryTabs(props: SortableCategoryTabsProps) {
+  const { activeKey, onChange, categories, allTab, onAdd, onEdit, onDelete, onSort, menuLabels, className } = props;
+  const [activeDragId, setActiveDragId] = useState<string | null>(null);
+  const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 10 } }));
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    setActiveDragId(String(event.active.id));
+  }, []);
+
+  const handleDragEnd = useCallback(
+    async (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveDragId(null);
+      if (!over || over.id === active.id) {
+        return;
+      }
+      await onSort?.(active.id as string | number, over.id as string | number);
+    },
+    [onSort],
+  );
+
+  const items = useMemo<TabsProps['items']>(
+    () => [
+      { key: allTab.key, label: allTab.label, closable: false },
+      ...categories.map((item) => ({
+        key: String(item.id),
+        closable: false,
+        label: onSort ? (
+          <DroppableTab id={String(item.id)}>
+            <DraggableTab id={String(item.id)}>
+              <CategoryTabContent item={item} onEdit={onEdit} onDelete={onDelete} menuLabels={menuLabels} />
+            </DraggableTab>
+          </DroppableTab>
+        ) : (
+          <CategoryTabContent item={item} onEdit={onEdit} onDelete={onDelete} menuLabels={menuLabels} />
+        ),
+      })),
+    ],
+    [allTab.key, allTab.label, categories, onSort, onEdit, onDelete, menuLabels],
+  );
+
+  const activeDragItem = useMemo(
+    () => categories.find((item) => String(item.id) === activeDragId),
+    [categories, activeDragId],
+  );
+
+  const tabs = (
+    <Tabs
+      className={className}
+      activeKey={activeKey}
+      type="editable-card"
+      hideAdd={!onAdd}
+      items={items}
+      onChange={onChange}
+      onEdit={(_, action) => {
+        if (action === 'add') {
+          onAdd?.();
+        }
+      }}
+    />
+  );
+
+  if (!onSort) {
+    return tabs;
+  }
+
+  return (
+    <DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      {tabs}
+      <DragOverlay dropAnimation={null}>
+        {activeDragItem ? (
+          <span style={{ whiteSpace: 'nowrap' }}>
+            <CategoryTabContent item={activeDragItem} menuLabels={menuLabels} />
+          </span>
+        ) : null}
+      </DragOverlay>
+    </DndContext>
+  );
+}
+
+export default SortableCategoryTabs;

package/src/components/category-tabs/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 './SortableCategoryTabs';

package/src/components/form/JsonTextArea.tsx

@@ -117,6 +117,10 @@ const JsonTextAreaComponent = React.forwardRef<TextAreaRef, JsonTextAreaProps>((
   return (
     <>
       <Input.TextArea
+        autoSize={{
+          minRows: 5,
+          maxRows: 10,
+        }}
         {...textAreaProps}
         ref={ref}
         value={text}

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

@@ -11,7 +11,7 @@ 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 React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ScanBox } from './ScanBox';
@@ -26,6 +26,14 @@ type CodeScannerProps = {
 };
 
 const MAX_CODE_IMAGE_SIZE = 10 * 1024 * 1024;
+const SCANNER_RENDER_WIDTH = 1280;
+
+function getViewportSize() {
+  return {
+    width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
+    height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
+  };
+}
 
 function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess }: CodeScannerProps) {
   const { t } = useTranslation();
@@ -34,21 +42,35 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   const scannerElementId = `code-scanner-${inputId}`;
   const imgUploaderRef = useRef<HTMLInputElement>(null);
   const [cameraAvailable, setCameraAvailable] = useState(false);
+  const [scannerSize, setScannerSize] = useState({ width: 0, height: 0 });
+  const [viewport, setViewport] = useState(getViewportSize);
 
-  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 previewScale = scannerSize.width
+    ? Math.max(viewport.width / scannerSize.width, viewport.height / scannerSize.height)
+    : Math.min(1, viewport.width / SCANNER_RENDER_WIDTH);
+  const visibleScanBoxSize = scannerSize.width
+    ? getCodeScanBoxSize(viewport.width, viewport.height)
+    : { width: 0, height: 0 };
 
   const showScanFailure = useCallback(() => {
     message.error(t('Code recognition failed, please scan again'));
   }, [t]);
 
+  const showCameraStartFailure = useCallback(
+    (error: unknown) => {
+      const errorName = error instanceof Error ? error.name : '';
+      const errorMessage = error instanceof Error ? error.message : '';
+      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[errorName] || errorMessage || t('You have not granted permission to use the camera'));
+      onClose();
+    },
+    [onClose, t],
+  );
+
   const handleScanSuccess = useCallback(
     (text: string) => {
       onScanSuccess(text);
@@ -61,11 +83,18 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     enabled: visible && cameraAvailable,
     elementId: scannerElementId,
     formatsToSupport,
-    scanBoxSize,
+    onScannerSizeChanged: setScannerSize,
     onScanSuccess: handleScanSuccess,
     onScanFailure: showScanFailure,
+    onCameraStartFailure: showCameraStartFailure,
   });
 
+  useEffect(() => {
+    const handleResize = () => setViewport(getViewportSize());
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   useEffect(() => {
     if (!visible) {
       return;
@@ -129,24 +158,29 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
     inset: 0;
     z-index: ${token.zIndexPopupBase + 1000};
     overflow: hidden;
-    background: ${token.colorBgMask};
+    background: #000;
   `;
   const scannerWrapperClass = css`
     position: absolute;
     inset: 0;
     overflow: hidden;
   `;
+  const scannerSurfaceClass = css`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform-origin: center;
+  `;
   const scannerClass = css`
+    position: relative;
     width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    line-height: 0;
 
     video {
-      width: auto !important;
-      height: 100% !important;
+      width: 100% !important;
+      height: auto !important;
       max-width: none !important;
+      display: block !important;
     }
 
     #qr-shaded-region {
@@ -174,26 +208,36 @@ function CodeScannerContent({ visible, formatsToSupport, onClose, onScanSuccess
   return (
     <div className={rootClass}>
       <div className={scannerWrapperClass}>
-        <div id={scannerElementId} className={scannerClass} />
+        <div
+          className={scannerSurfaceClass}
+          style={{
+            width: `${SCANNER_RENDER_WIDTH}px`,
+            transform: `translate(-50%, -50%) scale(${previewScale})`,
+          }}
+        >
+          <div id={scannerElementId} className={scannerClass} />
+        </div>
       </div>
+      {cameraAvailable && scannerSize.width > 0 && (
+        <ScanBox
+          style={{
+            position: 'fixed',
+            top: `${(viewport.height - visibleScanBoxSize.height) / 2}px`,
+            left: `${(viewport.width - visibleScanBoxSize.width) / 2}px`,
+            width: `${visibleScanBoxSize.width}px`,
+            height: `${visibleScanBoxSize.height}px`,
+          }}
+        />
+      )}
+      <Button
+        aria-label={t('Close')}
+        className={closeButtonClass}
+        icon={<LeftOutlined />}
+        type="text"
+        onClick={onClose}
+      />
       {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>

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

@@ -0,0 +1,101 @@
+/**
+ * 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, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { CodeScanner } from '../CodeScanner';
+
+const mocks = vi.hoisted(() => ({
+  getCameras: vi.fn().mockResolvedValue([{ id: 'rear-camera' }]),
+}));
+
+vi.mock('html5-qrcode', () => ({
+  Html5Qrcode: {
+    getCameras: mocks.getCameras,
+  },
+  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,
+  },
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+vi.mock('../useCodeScanner', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../useCodeScanner')>();
+  const ReactModule = await import('react');
+
+  return {
+    ...actual,
+    useCodeScanner: ({
+      enabled,
+      onScannerSizeChanged,
+    }: {
+      enabled: boolean;
+      onScannerSizeChanged?: (size: { width: number; height: number }) => void;
+    }) => {
+      ReactModule.useEffect(() => {
+        if (enabled) {
+          onScannerSizeChanged?.({ width: 1280, height: 720 });
+        }
+      }, [enabled, onScannerSizeChanged]);
+
+      return { startScanFile: vi.fn() };
+    },
+  };
+});
+
+describe('CodeScanner', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('keeps the camera preview covering portrait and landscape viewports', async () => {
+    let viewportWidth = 390;
+    let viewportHeight = 844;
+    vi.spyOn(window, 'innerWidth', 'get').mockImplementation(() => viewportWidth);
+    vi.spyOn(window, 'innerHeight', 'get').mockImplementation(() => viewportHeight);
+
+    render(<CodeScanner visible onClose={() => undefined} onScanSuccess={() => undefined} />);
+
+    await waitFor(() => expect(document.getElementById('code-scan-box')).toBeInTheDocument());
+
+    const scannerElement = document.querySelector<HTMLElement>('[id^="code-scanner-"]');
+    const scannerSurface = scannerElement?.parentElement;
+    const scanBox = document.getElementById('code-scan-box');
+    expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 720})`);
+    expect(scanBox).toHaveStyle({ width: '351px', height: '540px' });
+
+    viewportWidth = 844;
+    viewportHeight = 390;
+    act(() => window.dispatchEvent(new Event('resize')));
+
+    await waitFor(() => {
+      expect(scannerSurface?.style.transform).toBe(`translate(-50%, -50%) scale(${844 / 1280})`);
+      expect(scanBox).toHaveStyle({ width: '759px', height: '273px' });
+    });
+  });
+});