@rainbow-oh/yee-c 0.8.20 → 0.9.1

package/package.json

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

package/src/Form/Field.tsx

@@ -44,7 +44,7 @@ const Field: React.FC<FieldProps> = (props) => {
   } = props;
   const {
     getCallbacks,
-    getFieldValidate,
+    getFieldStatus,
     getFieldValue,
     getFieldsValue,
     setFieldsValue,
@@ -88,7 +88,7 @@ const Field: React.FC<FieldProps> = (props) => {
     );
   };
 
-  const validate = getFieldValidate?.(normalizedName);
+  const fieldStatus = getFieldStatus?.(normalizedName);
 
   // Normalize tooltip into { icon, ...tooltipProps }, or null when not provided.
   // Everything except `icon` is forwarded to <Tooltip>, so any Tooltip prop
@@ -152,8 +152,7 @@ const Field: React.FC<FieldProps> = (props) => {
         `${prefixCls}-item`,
         `${prefixCls}-item-${layout}`,
         {
-          [`${prefixCls}-item-${validate?.status}`]:
-            validate && validate.status,
+          [`${prefixCls}-item-${fieldStatus?.status}`]: fieldStatus?.status,
         },
         className,
       )}
@@ -200,18 +199,18 @@ const Field: React.FC<FieldProps> = (props) => {
         </div>
       </div>
       <AnimatePresence>
-        {validate && (
+        {fieldStatus?.message && (
           <motion.small
             initial={{ opacity: 0, y: -10 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
             transition={{ duration: 0.16 }}
             className={clsx(`${prefixCls}-item-additional`, {
-              [`${prefixCls}-item-additional-${validate.status}`]:
-                validate.status,
+              [`${prefixCls}-item-additional-${fieldStatus.status}`]:
+                fieldStatus.status,
             })}
           >
-            {validate.message}
+            {fieldStatus.message}
           </motion.small>
         )}
       </AnimatePresence>

package/src/Form/demo/async-validate.tsx

@@ -1,4 +1,5 @@
 import { Button, Form, Grid, Input, Space } from '@rainbow-oh/yee-c';
+import type { ValidateMessage } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 // Simulate an async uniqueness check against a backend API.
@@ -16,8 +17,8 @@ export default () => {
     console.log('Received values:', values);
   };
 
-  const onFinishFailed = (errorInfo: unknown) => {
-    console.log('Failed:', errorInfo);
+  const onFinishFailed = (errors: ValidateMessage[]) => {
+    console.log('Failed:', errors);
   };
 
   return (

package/src/Form/demo/field-status.tsx

@@ -0,0 +1,108 @@
+import {
+  Button,
+  Form,
+  Input,
+  Space,
+  type FieldStatusData,
+} from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [form] = Form.useForm();
+  const [currentStatus, setCurrentStatus] = useState<FieldStatusData | null>(
+    null,
+  );
+  const [submitResult, setSubmitResult] = useState('');
+
+  const applyStatus = (status: FieldStatusData | null) => {
+    form.setFieldStatus('username', status);
+    setCurrentStatus(form.getFieldStatus('username'));
+    setSubmitResult('');
+  };
+
+  return (
+    <Form
+      form={form}
+      initialValues={{ username: 'demo-user' }}
+      onFinish={() => setSubmitResult('Submit succeeded')}
+      onFinishFailed={() =>
+        setSubmitResult('Submit blocked by the blocking error')
+      }
+    >
+      <Form.Field
+        name="username"
+        label="Username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <Input placeholder="Please input your username" />
+      </Form.Field>
+
+      <Space style={{ marginTop: 28, flexWrap: 'wrap' }}>
+        <Button
+          onClick={() =>
+            applyStatus({
+              status: 'error',
+              message: 'This username is unavailable',
+            })
+          }
+        >
+          Error
+        </Button>
+        <Button
+          onClick={() =>
+            applyStatus({
+              status: 'error',
+              message: 'This error prevents submission',
+              blocking: true,
+            })
+          }
+        >
+          Blocking error
+        </Button>
+        <Button
+          onClick={() =>
+            applyStatus({
+              status: 'warning',
+              message: 'This username is commonly used',
+            })
+          }
+        >
+          Warning
+        </Button>
+        <Button
+          onClick={() =>
+            applyStatus({
+              status: 'success',
+              message: 'This username is available',
+            })
+          }
+        >
+          Success
+        </Button>
+        <Button
+          onClick={() =>
+            applyStatus({
+              status: 'info',
+              message: 'The username can be changed later',
+            })
+          }
+        >
+          Info
+        </Button>
+        <Button onClick={() => applyStatus(null)}>Clear</Button>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Space>
+
+      <pre style={{ marginTop: 16 }}>
+        Current status: {JSON.stringify(currentStatus, null, 2)}
+      </pre>
+      {submitResult ? <div>{submitResult}</div> : null}
+      <div style={{ marginTop: 8, color: '#999' }}>
+        Tip: set Success, then clear the input — the rule error takes display
+        precedence over the manually set status.
+      </div>
+    </Form>
+  );
+};

package/src/Form/demo/validate.tsx

@@ -1,4 +1,5 @@
 import { Button, Form, Grid, Input, Space } from '@rainbow-oh/yee-c';
+import type { ValidateMessage } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
@@ -8,8 +9,8 @@ export default () => {
     console.log('Received values:', values);
   };
 
-  const onFinishFailed = (errorInfo: unknown) => {
-    console.log('Failed:', errorInfo);
+  const onFinishFailed = (errors: ValidateMessage[]) => {
+    console.log('Failed:', errors);
   };
 
   return (

package/src/Form/form-store.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { ReactElement } from 'react';
+import { FormStore } from './form-store';
+import type { FieldEntity, Rule } from './interface';
+
+const createEntity = (
+  name: string,
+  onStoreChange = vi.fn(),
+  rules?: Rule[],
+): FieldEntity => ({
+  props: {
+    name,
+    rules,
+    children: {} as unknown as ReactElement,
+  },
+  onStoreChange,
+});
+
+describe('FormStore.clearFields', () => {
+  it('keeps values of unrelated fields on partial clear', () => {
+    const store = new FormStore();
+    store.setFieldsValue({ a: 1, b: 2 }, 'fill');
+
+    store.clearFields(['a']);
+
+    expect(store.getFieldsValue()).toEqual({ a: undefined, b: 2 });
+  });
+
+  it('clears a nested path leaf and keeps its siblings', () => {
+    const store = new FormStore();
+    store.setFieldsValue({ 'user.name': 'tom', 'user.age': 18 }, 'fill');
+
+    store.clearFields(['user.name']);
+
+    expect(store.getFieldValue('user.name')).toBeUndefined();
+    expect(store.getFieldValue('user.age')).toBe(18);
+  });
+
+  it('sets every top-level key to undefined when name is omitted', () => {
+    const store = new FormStore();
+    store.setFieldsValue({ a: 1, 'user.name': 'tom' }, 'fill');
+
+    store.clearFields();
+
+    const values = store.getFieldsValue();
+    expect(values.a).toBeUndefined();
+    expect(store.getFieldValue('user.name')).toBeUndefined();
+    expect(Object.keys(values)).toEqual(['a', 'user']);
+  });
+
+  it('clears validation messages only for cleared fields', async () => {
+    const store = new FormStore();
+    store.registerFieldEntities(
+      createEntity('a', vi.fn(), [{ required: true, message: 'a required' }]),
+    );
+    store.registerFieldEntities(
+      createEntity('b', vi.fn(), [{ required: true, message: 'b required' }]),
+    );
+
+    const errors = await store.validateFields();
+    expect(errors).toHaveLength(2);
+    expect(store.getFieldValidate('a')?.message).toBe('a required');
+
+    store.clearFields(['a']);
+
+    expect(store.getFieldValidate('a')).toBeNull();
+    expect(store.getFieldValidate('b')?.message).toBe('b required');
+  });
+
+  it('clears manual field statuses only for cleared fields', () => {
+    const store = new FormStore();
+    store.setFieldStatus('a', { status: 'warning', message: 'check a' });
+    store.setFieldStatus('b', { status: 'warning', message: 'check b' });
+
+    store.clearFields(['a']);
+
+    expect(store.getFieldStatus('a')).toBeNull();
+    expect(store.getFieldStatus('b')?.message).toBe('check b');
+  });
+
+  it('refreshes only fields related to the cleared names', () => {
+    const store = new FormStore();
+    const onChangeA = vi.fn();
+    const onChangeB = vi.fn();
+    const onChangeNested = vi.fn();
+    store.registerFieldEntities(createEntity('a', onChangeA));
+    store.registerFieldEntities(createEntity('b', onChangeB));
+    store.registerFieldEntities(createEntity('a.x', onChangeNested));
+    store.setFieldsValue({ a: 1, b: 2 }, 'fill');
+    onChangeA.mockClear();
+    onChangeB.mockClear();
+    onChangeNested.mockClear();
+
+    store.clearFields(['a']);
+
+    expect(onChangeA).toHaveBeenCalled();
+    expect(onChangeNested).toHaveBeenCalled();
+    expect(onChangeB).not.toHaveBeenCalled();
+  });
+
+  it('notifies only watchers related to the cleared names', () => {
+    const store = new FormStore();
+    const watchA = vi.fn();
+    const watchB = vi.fn();
+    const watchAll = vi.fn();
+    store.subscribe('a', watchA);
+    store.subscribe('b', watchB);
+    store.subscribe(undefined, watchAll);
+
+    store.setFieldsValue({ a: 1, b: 2 }, 'fill');
+    watchA.mockClear();
+    watchB.mockClear();
+    watchAll.mockClear();
+
+    store.clearFields(['a']);
+
+    expect(watchA).toHaveBeenCalled();
+    expect(watchAll).toHaveBeenCalled();
+    expect(watchB).not.toHaveBeenCalled();
+  });
+
+  it('fires the onClear callback', () => {
+    const store = new FormStore();
+    const onClear = vi.fn();
+    store.setCallbacks({ onClear });
+
+    store.clearFields(['a']);
+
+    expect(onClear).toHaveBeenCalled();
+  });
+});
+
+describe('FormStore.initialize initialValues', () => {
+  it('resolves nested objects by field path', () => {
+    const store = new FormStore();
+    store.initialize({ initialValues: { user: { name: 'tom' }, age: 18 } });
+
+    expect(store.getFieldValue('user.name')).toBe('tom');
+    expect(store.getFieldValue('age')).toBe(18);
+
+    store.setFieldsValue({ 'user.name': 'jerry' }, 'fill');
+    store.resetFields(['user.name']);
+    expect(store.getFieldValue('user.name')).toBe('tom');
+  });
+});
+
+describe('FormStore.setFieldsValue with clear trigger', () => {
+  it('merges over the store instead of replacing it', () => {
+    const store = new FormStore();
+    store.setFieldsValue({ a: 1, b: 2 }, 'fill');
+
+    store.setFieldsValue({ a: undefined }, 'clear');
+
+    expect(store.getFieldsValue()).toEqual({ a: undefined, b: 2 });
+  });
+});

package/src/Form/form-store.ts

@@ -9,6 +9,7 @@ import validate from './utils/validate';
 import type {
   Callbacks,
   FieldEntity,
+  FieldStatusData,
   FormInstance,
   FormListField,
   FormListOperation,
@@ -43,6 +44,7 @@ export class FormStore {
   private fieldEntities: FieldEntity[] = [];
   private fieldMap: Map<Name, FieldEntity> = new Map();
   private validateMessages: Map<Name, ValidateMessage[]> = new Map();
+  private fieldStatuses: Map<Name, FieldStatusData> = new Map();
   private initialized = false;
   private initialValues: Store = {};
   // List key manager
@@ -114,9 +116,81 @@ export class FormStore {
     return null;
   };
 
+  getFieldStatus = (name: NamePath): FieldStatusData | null => {
+    const normalizedName = stringifyPath(getNamePath(name));
+    const manualStatus = this.fieldStatuses.get(normalizedName);
+    const validateMessage = this.validateMessages.get(normalizedName)?.[0];
+
+    // Rule errors reflect the current value and auto-clear once validation
+    // passes, so they always take display precedence — a stale manually set
+    // status must never hide why submission failed.
+    if (validateMessage?.status === 'error') {
+      return {
+        status: 'error',
+        message: validateMessage.message,
+      };
+    }
+
+    if (manualStatus) {
+      return { ...manualStatus };
+    }
+
+    if (validateMessage) {
+      return {
+        status: validateMessage.status,
+        message: validateMessage.message,
+      };
+    }
+
+    return null;
+  };
+
+  setFieldStatus = (name: NamePath, status: FieldStatusData | null) => {
+    const normalizedName = stringifyPath(getNamePath(name));
+    if (!normalizedName) return;
+
+    if (status) {
+      this.fieldStatuses.set(normalizedName, { ...status });
+    } else {
+      this.fieldStatuses.delete(normalizedName);
+    }
+
+    this.fieldMap.get(normalizedName)?.onStoreChange();
+  };
+
+  // Delete entries whose key equals or nests under one of `names`
+  // (no names = delete all). Keeps rule messages and manual statuses in
+  // sync with the fields that reset/clear actually touched.
+  private deleteRelatedEntries = <T>(
+    entries: Map<Name, T>,
+    names?: NamePath[],
+  ): void => {
+    if (!names) {
+      entries.clear();
+      return;
+    }
+
+    const normalizedNames = names.map((name) =>
+      stringifyPath(getNamePath(name)),
+    );
+    Array.from(entries.keys()).forEach((fieldName) => {
+      if (normalizedNames.some((name) => isRelatedNamePath(fieldName, name))) {
+        entries.delete(fieldName);
+      }
+    });
+  };
+
+  private clearFieldStatuses = (names?: NamePath[]) => {
+    this.deleteRelatedEntries(this.fieldStatuses, names);
+  };
+
   setFieldsValue = (newStore: Store, trigger: TRIGGER = 'onChange') => {
     if (trigger === 'reset' || trigger === 'clear') {
-      this.store = newStore;
+      // 'reset' replaces the whole store; 'clear' merges the given keys
+      // (typically undefined) over the store so a partial clear never
+      // wipes values of unrelated fields.
+      this.store =
+        trigger === 'reset' ? newStore : { ...this.store, ...newStore };
       if (trigger === 'reset') {
         this.callbacks?.onReset?.();
       } else {
@@ -196,7 +270,10 @@ export class FormStore {
       });
     }
     this.callbacks?.onReset?.();
-    this.validateMessages.clear();
+    // A named reset only clears rule messages of the fields it touched;
+    // unrelated fields keep their (still valid) validation state.
+    this.deleteRelatedEntries(this.validateMessages, name);
+    this.clearFieldStatuses(name);
     this.groupEntities.forEach((entity) => entity.reset());
     this.refreshField();
   };
@@ -204,11 +281,29 @@ export class FormStore {
   clearFields = (name?: Name[]) => {
     const names = name || Object.keys(this.store);
 
-    const clearStore = names.reduce((acc, name) => {
-      acc[name] = undefined;
-      return acc;
-    }, {} as Store);
-    this.setFieldsValue(clearStore, 'clear');
+    // Merge undefined over the current store (nested paths included) —
+    // unrelated fields keep their values.
+    let clearStore = { ...this.store };
+    names.forEach((n) => {
+      const parsedPath = parsePath(n);
+      if (parsedPath.length > 1) {
+        clearStore = setValueByPath(clearStore, parsedPath, undefined);
+      } else {
+        clearStore[n] = undefined;
+      }
+    });
+    this.deleteRelatedEntries(this.validateMessages, name);
+    this.clearFieldStatuses(name);
+    this.store = clearStore;
+    this.callbacks?.onClear?.();
+
+    // clearStore carries the whole store (nested paths must materialize
+    // it), so derive the refresh scope from `names` — only cleared
+    // fields re-render, not the entire form.
+    this.getRelatedFieldNames(names).forEach((fieldName) => {
+      this.fieldMap.get(fieldName)?.onStoreChange();
+    });
+    this.notifyWatchers(names);
   };
 
   validateField = async (
@@ -567,7 +662,19 @@ export class FormStore {
     const { onFinish, onFinishFailed } = this.callbacks;
     const fieldErrors = await this.validateFields();
     const groupErrors = await this.validateGroups(true);
-    const allErrors = [...fieldErrors, ...groupErrors];
+    const statusErrors = Array.from(this.fieldStatuses.entries())
+      .filter(
+        ([, status]) => status.status === 'error' && status.blocking === true,
+      )
+      .map(
+        ([name, status]): ValidateMessage => ({
+          name,
+          message: status.message ?? '',
+          value: this.getFieldValue(name),
+          status: 'error',
+        }),
+      );
+    const allErrors = [...fieldErrors, ...groupErrors, ...statusErrors];
     if (allErrors.length === 0) {
       onFinish?.(this.getFieldsValue());
     } else {
@@ -580,6 +687,8 @@ export class FormStore {
   getForm(): FormInstance {
     return {
       getFieldValidate: this.getFieldValidate,
+      getFieldStatus: this.getFieldStatus,
+      setFieldStatus: this.setFieldStatus,
       getFieldsValue: this.getFieldsValue,
       getFieldValue: this.getFieldValue,
       setFieldsValue: this.setFieldsValue,