@rainbow-oh/yee-c 0.14.4 → 0.14.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.14.4",
+  "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/Form/form-store.test.ts

@@ -144,6 +144,25 @@ describe('FormStore.initialize initialValues', () => {
   });
 });
 
+describe('FormStore.initialize re-binds callbacks', () => {
+  it('re-registers callbacks on remount but applies initialValues once only', () => {
+    const store = new FormStore();
+    const first = vi.fn();
+    const second = vi.fn();
+
+    store.initialize({ initialValues: { a: 1 }, callbacks: { onValuesChange: first } });
+    // 模拟 <Form> 卸载后重挂载（form 实例由外层 useForm 持有而存活）：
+    // 新一次挂载传入新的 useEvent 闭包，store 必须改绑到它
+    store.initialize({ initialValues: { a: 999 }, callbacks: { onValuesChange: second } });
+
+    store.setFieldsValue({ a: 2 });
+    expect(first).not.toHaveBeenCalled();
+    expect(second).toHaveBeenCalledTimes(1);
+    // initialValues 仍只在首次初始化生效
+    expect(store.getFieldValue('a')).toBe(2);
+  });
+});
+
 describe('FormStore.setFieldsValue with clear trigger', () => {
   it('merges over the store instead of replacing it', () => {
     const store = new FormStore();

package/src/Form/form-store.ts

@@ -70,6 +70,13 @@ export class FormStore {
     initialValues?: Store;
     callbacks?: Callbacks;
   }) => {
+    // callbacks 每次挂载重绑：form 实例可由外层 useForm 持有、跨越 <Form> 卸载/重挂载存活，
+    // 若只在此处注册一次，重挂载后 store 仍持旧挂载的 useEvent 闭包，其 ref 已随旧实例
+    // 死亡（不再更新），onValuesChange 等会以过期闭包执行。
+    if (callbacks) {
+      this.setCallbacks(callbacks);
+    }
+
     if (!this.initialized) {
       this.initialized = true;
 
@@ -78,9 +85,6 @@ export class FormStore {
         this.initialValues = JSON.parse(JSON.stringify(initialValues));
       }
 
-      if (callbacks) {
-        this.setCallbacks(callbacks);
-      }
       // Only refresh field entities, do not notify watchers (no value changes to watch during initialization)
       this.fieldEntities.forEach((entity) => {
         entity?.onStoreChange();

package/src/version.ts

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