@rainbow-oh/yee-c 0.9.0 → 0.9.2

package/package.json

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

package/src/Badge/badge.tsx

@@ -27,6 +27,7 @@ const InternalBadge: React.FC<BadgeProps> = (baseprops) => {
     className,
     styles,
     classNames,
+    title,
     ...rest
   } = props;
 
@@ -43,7 +44,7 @@ const InternalBadge: React.FC<BadgeProps> = (baseprops) => {
     if (count === null || count === undefined) return null;
 
     if (typeof count === 'number') {
-      supTitle = String(count);
+      supTitle = title || String(count);
 
       // When count is 0 and showZero is false, return null
       if (count === 0 && !showZero) return null;

package/src/Badge/interface.ts

@@ -27,6 +27,10 @@ export interface BadgeProps extends DataAttributeProps {
    * Child component
    */
   children?: React.ReactNode;
+  /**
+   * Native Title
+  */
+  title?: string;
   /**
    * Number to display or custom content
    */

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/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

@@ -174,9 +174,7 @@ export class FormStore {
       stringifyPath(getNamePath(name)),
     );
     Array.from(entries.keys()).forEach((fieldName) => {
-      if (
-        normalizedNames.some((name) => isRelatedNamePath(fieldName, name))
-      ) {
+      if (normalizedNames.some((name) => isRelatedNamePath(fieldName, name))) {
         entries.delete(fieldName);
       }
     });
@@ -188,7 +186,11 @@ export class FormStore {
 
   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 {
@@ -279,12 +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);
+    // 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.setFieldsValue(clearStore, 'clear');
+    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 (

package/src/Form/hooks/useForm.ts

@@ -1,178 +1,3 @@
-// import { useRef } from 'react';
-// import type {
-//   Callbacks,
-//   FieldEntity,
-//   FormInstance,
-//   NamePath,
-//   Store,
-//   validateMessage,
-// } from './interface';
-// import validate from './utils/validate';
-
-// class FormStore {
-//   private store: Store = {};
-//   private callbacks: Callbacks = {};
-//   private fieldEntities: FieldEntity[] = [];
-//   private validateMessages: validateMessage[] = [];
-//   private initialized = false;
-//   // 初始化form实例
-//   initialize = ({
-//     initialValues,
-//     callbacks,
-//   }: {
-//     initialValues?: Store;
-//     callbacks?: Callbacks;
-//   }) => {
-//     if (!this.initialized) {
-//       this.initialized = true;
-
-//       if (initialValues) {
-//         this.store = initialValues;
-//       } else {
-//         this.store = {};
-//       }
-
-//       if (callbacks) {
-//         this.setCallbacks(callbacks);
-//       }
-//     }
-//   };
-
-//   getFieldsValue = () => {
-//     return { ...this.store };
-//   };
-
-//   getFieldValue = (name: NamePath) => {
-//     return this.store[name];
-//   };
-
-//   getFieldValidate = (name: NamePath) => {
-//     return this.validateMessages?.find((item) => item.name === name);
-//   };
-
-//   resetFields = (name?: NamePath[]) => {
-//     if (name) {
-//       name.forEach((n) => {
-//         this.setFieldsValue({ [n]: undefined });
-//       });
-//     } else {
-//       Object.keys(this.store).forEach((key) => {
-//         this.setFieldsValue({ [key]: undefined });
-//       });
-//     }
-//   };
-
-//   validateFields = () => {
-//     const err: validateMessage[] = [];
-//     this.fieldEntities.forEach((entity) => {
-//       const { name, rules, required } = entity.props;
-//       const value: NamePath = name && this.getFieldValue(name);
-
-//       const mergedRules = rules || [];
-
-//       if (required) {
-//         mergedRules.push({
-//           required: true,
-//           message: 'This is required field.',
-//         });
-//       }
-
-//       mergedRules.forEach((rule) => {
-//         const mark = validate(rule, value);
-//         if (name && !mark) {
-//           err.push({
-//             name: name,
-//             status: 'error',
-//             value,
-//             ...rule
-//           });
-//         }
-//       });
-//     });
-//     return err;
-//   };
-
-//   setFieldsValue = (newStore: Store, isChange?: boolean) => {
-//     // const { onValuesChange } = this.callbacks;
-//     this.store = {
-//       ...this.store,
-//       ...newStore,
-//     };
-//     // onValuesChange?.(newStore, this.store);
-//     this.refreshField(newStore, isChange);
-//   };
-
-//   refreshField = (newStore?: Store, isChange?: boolean) => {
-//     if (newStore) {
-//       this.fieldEntities.forEach((entity) => {
-//         Object.keys(newStore).forEach((k) => {
-//           if (k === entity.props.name) {
-//             if (isChange) {
-//               this.validateMessages = this.validateFields();
-//             }
-//             entity.onStoreChange();
-//           }
-//         });
-//       });
-//     } else {
-//       this.fieldEntities.forEach((entity) => {
-//         if (entity.props.rules || entity.props.required) {
-//           entity?.onStoreChange();
-//         }
-//       });
-//     }
-//   };
-
-//   setCallbacks = (callbacks: Callbacks) => {
-//     this.callbacks = { ...this.callbacks, ...callbacks };
-//   };
-
-//   getCallbacks = () => {
-//     return this.callbacks;
-//   };
-
-//   // 订阅与取消订阅
-//   registerFieldEntities = (entity: FieldEntity) => {
-//     this.fieldEntities.push(entity);
-//     if (entity.props.name) {
-//       this.store = { ...this.store, [entity.props.name]: undefined };
-//     }
-//     return () => {
-//       this.fieldEntities = this.fieldEntities.filter((item) => item !== entity);
-//       const { name } = entity.props;
-//       if (name) {
-//         delete this.store[name];
-//       }
-//     };
-//   };
-
-//   submit = () => {
-//     const { onFinish, onFinishFailed } = this.callbacks;
-//     this.validateMessages = this.validateFields();
-//     if (this.validateMessages.length === 0) {
-//       onFinish?.(this.getFieldsValue());
-//     } else {
-//       onFinishFailed?.(this.validateMessages);
-//     }
-//     this.refreshField();
-//   };
-
-//   getForm(): FormInstance {
-//     return {
-//       getFieldValidate: this.getFieldValidate,
-//       getFieldsValue: this.getFieldsValue,
-//       getFieldValue: this.getFieldValue,
-//       setFieldsValue: this.setFieldsValue,
-//       resetFields: this.resetFields,
-//       submit: this.submit,
-//       setCallbacks: this.setCallbacks,
-//       getCallbacks: this.getCallbacks,
-//       registerFieldEntities: this.registerFieldEntities,
-//       initialize: this.initialize,
-//     };
-//   }
-// }
-
 import { useRef } from 'react';
 import { useLocale } from '../../locale';
 import { FormStore } from '../form-store';