@rainbow-oh/yee-c 0.14.5 → 0.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Form/List.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+// act 需要（仓库无全局 vitest setup，逐文件声明）
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+import Field from './Field';
+import FieldContext from './FieldContext';
+import List from './List';
+import { FormStore } from './form-store';
+
+function renderListWithStore() {
+  const store = new FormStore().getForm();
+  const { getByTestId } = render(
+    <FieldContext.Provider value={store}>
+      <List name="options">
+        {(fields) => (
+          <div data-testid="rows">
+            {fields.map((field) => (
+              <Field key={field.key} name={[field.name, 'label']}>
+                <input />
+              </Field>
+            ))}
+          </div>
+        )}
+      </List>
+    </FieldContext.Provider>,
+  );
+  return { getByTestId, store };
+}
+
+afterEach(() => {
+  cleanup();
+});
+
+// List 只在自身 render 时读 store：外部 form.setFieldsValue 整体替换 List 值时
+// 若不订阅自身 path，行数不刷新、新行永不挂载（app 侧 issue #99 首开不显示的根因）
+describe('Form.List 外部 setFieldsValue 驱动重渲染', () => {
+  it('整体替换 List 值后行数更新', () => {
+    const { getByTestId, store } = renderListWithStore();
+    expect(getByTestId('rows').children.length).toBe(0);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }, { label: 'c' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(3);
+  });
+
+  it('缩减 List 值后行数同步减少', () => {
+    const { getByTestId, store } = renderListWithStore();
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(2);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(1);
+  });
+
+  it('resetFields 后行数清零', () => {
+    const { getByTestId, store } = renderListWithStore();
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    expect(getByTestId('rows').children.length).toBe(2);
+
+    act(() => {
+      store.resetFields();
+    });
+    expect(getByTestId('rows').children.length).toBe(0);
+  });
+
+  it('行内编辑不重渲染 List（长度未变时跳过）', () => {
+    let renders = 0;
+    const store = new FormStore().getForm();
+    render(
+      <FieldContext.Provider value={store}>
+        <List name="options">
+          {() => {
+            renders += 1;
+            return null;
+          }}
+        </List>
+      </FieldContext.Provider>,
+    );
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }, { label: 'b' }] });
+    });
+    const afterInit = renders;
+
+    act(() => {
+      store.setFieldsValue({ 'options.0.label': 'z' });
+    });
+    expect(renders).toBe(afterInit);
+  });
+
+  it('订阅按 path 隔离：改无关字段不触发渲染，改本 List path 触发', () => {
+    let renders = 0;
+    const store = new FormStore().getForm();
+    render(
+      <FieldContext.Provider value={store}>
+        <List name="options">
+          {() => {
+            renders += 1;
+            return null;
+          }}
+        </List>
+      </FieldContext.Provider>,
+    );
+    const before = renders;
+
+    act(() => {
+      store.setFieldsValue({ other: 'x' });
+    });
+    expect(renders).toBe(before);
+
+    act(() => {
+      store.setFieldsValue({ options: [{ label: 'a' }] });
+    });
+    expect(renders).toBeGreaterThan(before);
+  });
+});

package/src/Form/List.tsx

@@ -28,7 +28,7 @@ const List: React.FC<FormListProps> = ({
   children,
   initialValue = [],
 }) => {
-  const { getFieldValue, setFieldsValue, validateFields } =
+  const { getFieldValue, setFieldsValue, validateFields, subscribe } =
     useContext(FieldContext);
 
   // Normalize list name path
@@ -49,6 +49,9 @@ const List: React.FC<FormListProps> = ({
   // State for triggering re-renders
   const [, forceUpdate] = useState(0);
 
+  // 上一次渲染的行数：订阅回调里跳过行内编辑（长度未变）触发的无效重渲染
+  const listLengthRef = useRef(0);
+
   // Initialize list value - Fix: use prefixName instead of listNamePath
   useLayoutEffect(() => {
     const pathStr = prefixName.join('.');
@@ -59,6 +62,24 @@ const List: React.FC<FormListProps> = ({
     }
   }, [prefixName, initialValue, getFieldValue, setFieldsValue]);
 
+  // Subscribe to the list's own path: List re-reads the store only on its own render,
+  // so a whole-value replacement via form.setFieldsValue (row count changed) never
+  // re-rendered it and new rows never mounted. Field instances already refresh through
+  // registerFieldEntities, but the row count lives here. Aligned with rc-field-form.
+  useLayoutEffect(
+    () =>
+      subscribe?.(prefixName.join('.'), () => {
+        // isRelatedNamePath 双向前缀匹配，行内编辑（options.i.label）也命中本 watcher；
+        // 但 List 渲染输出只取决于行数，行内 Field 会经 registerFieldEntities 自行刷新，
+        // 长度未变则跳过，避免大列表逐键全列表重渲染
+        const next = getFieldValue?.(prefixName.join('.'));
+        const nextLen = Array.isArray(next) ? next.length : 0;
+        if (nextLen === listLengthRef.current) return;
+        forceUpdate((prev) => prev + 1);
+      }),
+    [prefixName, subscribe, getFieldValue],
+  );
+
   // Get current list value
   const getListValue = (): any[] => {
     const pathStr = prefixName.join('.');
@@ -120,7 +141,6 @@ const List: React.FC<FormListProps> = ({
         setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
       }
       keyManager.id += 1;
-      forceUpdate((prev) => prev + 1);
     };
 
     const remove = (index: number | number[]) => {
@@ -137,7 +157,6 @@ const List: React.FC<FormListProps> = ({
       // Update list values
       const newList = currentValue.filter((_, i) => !indexSet.has(i));
       setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
-      forceUpdate((prev) => prev + 1);
     };
 
     const moveFunc = (from: number, to: number) => {
@@ -160,6 +179,7 @@ const List: React.FC<FormListProps> = ({
       // Move list values
       const newList = move(currentValue, from, to);
       setFieldsValue?.({ [pathStr]: newList }, 'update' as any);
+      // 同长度重排不会触发上方订阅回调（长度未变被跳过），须显式重渲染
       forceUpdate((prev) => prev + 1);
     };
 
@@ -168,6 +188,7 @@ const List: React.FC<FormListProps> = ({
 
   // Build field list - removed useMemo, compute directly
   const listValue = getListValue();
+  listLengthRef.current = listValue.length;
 
   // Ensure enough keys
   while (keyManager.keys.length < listValue.length) {

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.14.5";
+export const version = "0.14.6";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;