@nocobase/client-v2 2.1.0-alpha.45 → 2.1.0-alpha.47

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -12,6 +12,24 @@ import { describe, expect, it, vi } from 'vitest';
 import { TableColumnModel } from '../TableColumnModel';
 
 describe('TableColumnModel sorter settings', () => {
+  it('clamps custom column width to the minimum value', () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({ uid: 'table-column-min-width', flowEngine: engine } as any);
+    const widthStep = model.getFlow('tableColumnSettings')?.steps?.width as any;
+    const setProps = vi.fn();
+
+    widthStep.handler(
+      {
+        model: {
+          setProps,
+        },
+      },
+      { width: 0 },
+    );
+
+    expect(setProps).toHaveBeenCalledWith('width', 10);
+  });
+
   it('hides quick edit setting for relation path columns added from association groups', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-relation-path-quick-edit', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/SubTableFieldModel/SubTableColumnModel.tsx

@@ -33,7 +33,7 @@ import React, { useRef, useMemo, useEffect } from 'react';
 import { SubTableFieldModel } from '.';
 import { FieldModel } from '../../../base/FieldModel';
 import { DetailsItemModel } from '../../../blocks/details/DetailsItemModel';
-import { FieldDeletePlaceholder, CustomWidth } from '../../../blocks/table/TableColumnModel';
+import { FieldDeletePlaceholder, CustomWidth, normalizeTableColumnWidth } from '../../../blocks/table/TableColumnModel';
 import { buildDynamicNamePath } from '../../../blocks/form/dynamicNamePath';
 import { getSubTableRowIdentity } from './rowIdentity';
 import { getFieldBindingUse, rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
@@ -67,7 +67,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
     const dataSourcePrefix = `${t(dataSource.displayName || dataSource.key)} > `;
     const collectionPrefix = collection ? `${t(collection.title) || collection.name || collection.tableName} > ` : '';
     return `${dataSourcePrefix}${collectionPrefix}${name}`;
-  }, []);
+  }, [collection, dataSource.displayName, dataSource.key, name, t]);
   const { actionName } = fieldModel.forbidden || {};
   const messageValue = useMemo(() => {
     return t(
@@ -77,7 +77,7 @@ export function FieldWithoutPermissionPlaceholder({ targetModel }) {
         actionName: t(capitalize(actionName)),
       },
     ).replaceAll('>', '>');
-  }, [nameValue, t]);
+  }, [actionName, nameValue, t]);
   return (
     <Tooltip title={messageValue}>
       <LockOutlined style={{ opacity: '0.3' }} />
@@ -100,10 +100,9 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
     const handleChange = useMemo(
       () =>
         debounce((val) => {
-          if (props.onChange) props.onChange(val);
           if (onChange) onChange(val);
         }, 200),
-      [props.onChange, onChange],
+      [onChange],
     );
 
     return <FieldModelRenderer model={model} {...rest} onChange={handleChange} />;
@@ -149,7 +148,7 @@ const LargeFieldEdit = observer(({ model, params: { fieldPath, index }, defaultV
         </Space>
       );
     }
-  }, [collectionField.interface, defaultValue, fieldModel]);
+  }, [collectionField.interface, defaultValue, disabled, fieldModel]);
   return (
     <div
       ref={ref}
@@ -830,7 +829,7 @@ SubTableColumnModel.registerFlow({
         width: 200,
       },
       handler(ctx, params) {
-        ctx.model.setProps('width', params.width);
+        ctx.model.setProps('width', normalizeTableColumnWidth(params.width));
       },
     },
     aclCheck: {

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -10,7 +10,7 @@
 import { useFlowModelContext } from '@nocobase/flow-engine';
 import { Select } from 'antd';
 import type { CSSProperties } from 'react';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Button, CheckList, Popup, SearchBar, SpinLoading } from 'antd-mobile';
 import { css } from '@emotion/css';
 import {
@@ -51,7 +51,7 @@ function deriveRecordsFromValue(
 ) {
   if (isMultiple) {
     if (Array.isArray(value)) {
-      return (value.filter(Boolean) as any[]).map((item) => {
+      return (value.filter((item) => item !== null && item !== undefined) as any[]).map((item) => {
         if (valueMode === 'value') {
           return optionMap.get(item) ?? { [valueKey]: item };
         }
@@ -113,11 +113,13 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
   );
 
   const [selectedRecords, setSelectedRecords] = useState<AssociationOption[]>(() => derivedRecords);
+  const wasVisibleRef = useRef(visible);
 
   useEffect(() => {
-    if (visible) {
+    if (visible && !wasVisibleRef.current) {
       setSelectedRecords(derivedRecords);
     }
+    wasVisibleRef.current = visible;
   }, [derivedRecords, visible]);
 
   useEffect(() => {

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@nocobase/test/client';
+import { MobileLazySelect } from '../MobileLazySelect';
 import { MobileSelect } from '../MobileSelect';
 
 const DEFAULT_OPTIONS = [
@@ -17,6 +18,11 @@ const DEFAULT_OPTIONS = [
   { label: 'Option B', value: 'b' },
 ];
 
+const RELATION_OPTIONS = [
+  { uuid: '05f6a3b4-bfb7-7943-578a-3819e2687a7e' },
+  { uuid: 'c7d99828-a1de-9e70-4c2d-b0139abdf02e' },
+];
+
 const mockState = vi.hoisted(() => ({
   selectProps: undefined as any,
   popupProps: undefined as any,
@@ -44,6 +50,13 @@ function openPopup() {
   expect(screen.getByTestId('popup')).toBeInTheDocument();
 }
 
+function openLazyPopup() {
+  act(() => {
+    mockState.selectProps?.onClick?.();
+  });
+  expect(screen.getByTestId('popup')).toBeInTheDocument();
+}
+
 function selectValues(values: string[]) {
   act(() => {
     mockState.checklistProps?.onChange?.(values);
@@ -73,6 +86,30 @@ function renderMobileSelect(props: Record<string, any> = {}) {
   return { onChange, onChangeComplete };
 }
 
+function renderMobileLazySelect(props: Record<string, any> = {}) {
+  const onChange = props.onChange ?? vi.fn();
+  const renderComponent = (nextProps: Record<string, any> = {}) => (
+    <MobileLazySelect
+      fieldNames={{ label: 'uuid', value: 'uuid' }}
+      value={[]}
+      multiple
+      allowMultiple
+      options={RELATION_OPTIONS}
+      {...props}
+      {...nextProps}
+      onChange={onChange}
+    />
+  );
+
+  const result = render(renderComponent());
+
+  return {
+    ...result,
+    onChange,
+    rerender: (nextProps: Record<string, any> = {}) => result.rerender(renderComponent(nextProps)),
+  };
+}
+
 vi.mock('@nocobase/flow-engine', async () => {
   const actual = await vi.importActual<any>('@nocobase/flow-engine');
   return {
@@ -80,6 +117,12 @@ vi.mock('@nocobase/flow-engine', async () => {
     useFlowModelContext: () => ({
       t: (value: string) => value,
     }),
+    useFlowModel: () => ({
+      context: {
+        collectionField: {},
+      },
+      subModels: {},
+    }),
   };
 });
 
@@ -240,3 +283,30 @@ describe('MobileSelect in SubForm/SubTable containers', () => {
     expect(onCommit).toHaveBeenNthCalledWith(2, ['a', 'b']);
   });
 });
+
+describe('MobileLazySelect', () => {
+  beforeEach(() => {
+    resetMockState();
+  });
+
+  it('keeps pending relation records selected until confirm', () => {
+    const { onChange, rerender } = renderMobileLazySelect();
+
+    openLazyPopup();
+    expect(mockState.checklistProps?.value).toEqual([]);
+
+    selectValues(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    rerender({
+      options: RELATION_OPTIONS.map((item) => ({ ...item })),
+    });
+
+    expect(mockState.checklistProps?.value).toEqual(['c7d99828-a1de-9e70-4c2d-b0139abdf02e']);
+
+    confirmSelection();
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith([RELATION_OPTIONS[1]]);
+  });
+});