@rainbow-oh/yee-c 0.6.4 → 0.8.0

package/package.json

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

package/src/Button/style/index.less

@@ -171,7 +171,7 @@
     --m-btn-hover-color: var(--yee-primary-color-hover);
     --m-btn-active-color: var(--yee-primary-color-active);
     --m-btn-bg-color: var(--yee-btn-primary-bg-color);
-    --m-btn-hover-bg-color: var(--yee-primary-color-hover);
+    --m-btn-hover-bg-color: var(--yee-primary-color-border);
     --m-btn-active-bg-color: var(--yee-primary-color-active);
     --m-btn-border-color: var(--yee-primary-color);
     --m-btn-border-hover-color: var(--yee-primary-color-hover);
@@ -186,7 +186,7 @@
     --m-btn-border-color: var(--yee-success-color);
     --m-btn-border-hover-color: var(--yee-success-color-hover);
     --m-btn-border-active-color: var(--yee-success-color-active);
-    --m-btn-hover-bg-color: var(--yee-success-color-hover);
+    --m-btn-hover-bg-color: var(--yee-success-color-border);
     --m-btn-active-bg-color: var(--yee-success-color-active);
     --m-btn-active-shadow-color: var(--yee-success-color-active);
   }
@@ -198,7 +198,8 @@
     --m-btn-border-color: var(--yee-error-color);
     --m-btn-border-hover-color: var(--yee-error-color-hover);
     --m-btn-border-active-color: var(--yee-error-color-active);
-    --m-btn-hover-bg-color: var(--yee-error-color-hover);
+    // --m-btn-hover-bg-color: var(--yee-error-color-hover);
+    --m-btn-hover-bg-color: var(--yee-error-color-border);
     --m-btn-active-bg-color: var(--yee-error-color-active);
     --m-btn-active-shadow-color: var(--yee-error-color-active);
   }
@@ -210,7 +211,7 @@
     --m-btn-border-color: var(--yee-warning-color);
     --m-btn-border-hover-color: var(--yee-warning-color-hover);
     --m-btn-border-active-color: var(--yee-warning-color-active);
-    --m-btn-hover-bg-color: var(--yee-warning-color-hover);
+    --m-btn-hover-bg-color: var(--yee-warning-color-border);
     --m-btn-active-bg-color: var(--yee-warning-color-active);
     --m-btn-active-shadow-color: var(--yee-warning-color-active);
   }

package/src/Drawer/drawer.tsx

@@ -198,7 +198,7 @@ const Drawer = (baseprops: DrawerProps) => {
                 className={clsx(`${prefixCls}-header`, classNames?.header)}
                 style={styles?.header}
               >
-                <div className={`${prefixCls}-title`}>{title}</div>
+                <div className={clsx(`${prefixCls}-title`, classNames?.title)} style={styles?.title}>{title}</div>
               </div>
             ) : null}
             <div

package/src/Drawer/interface.ts

@@ -5,6 +5,7 @@ export type SemanticDOM =
   | 'wrapper'
   | 'close'
   | 'header'
+  | 'title'
   | 'content'
   | 'body'
   | 'footer';

package/src/Drawer/style/index.less

@@ -38,6 +38,7 @@
   }
 
   &-title {
+    font-size: var(--yee-drawer-title-font-size);
     font-weight: var(--yee-drawer-title-font-weight);
   }
 

package/src/Form/form-store.ts

@@ -32,6 +32,11 @@ function move<T>(array: T[], from: number, to: number): T[] {
 
 const GLOBAL_WATCH_KEY = '__ALL__';
 
+const isRelatedNamePath = (first: string, second: string): boolean =>
+  first === second ||
+  first.startsWith(`${second}.`) ||
+  second.startsWith(`${first}.`);
+
 export class FormStore {
   private store: Store = {};
   private callbacks: Callbacks = {};
@@ -145,6 +150,9 @@ export class FormStore {
       });
     }
 
+    const changedKeys = Object.keys(newStore);
+    const relatedFieldNames = this.getRelatedFieldNames(changedKeys);
+
     // Validate on onChange and onBlur (async — fire-and-forget so setFieldsValue
     // stays synchronous for its callers; results surface via onStoreChange).
     if (
@@ -152,10 +160,10 @@ export class FormStore {
       trigger === 'onBlur' ||
       trigger === 'onSubmit'
     ) {
-      void this.validateFields(Object.keys(newStore), trigger);
+      void this.validateFields(relatedFieldNames, trigger);
     }
 
-    this.refreshField(newStore);
+    this.refreshField(newStore, relatedFieldNames);
   };
 
   resetFields = (name?: Name[]) => {
@@ -279,16 +287,22 @@ export class FormStore {
     return err;
   };
 
-  refreshField = (newStore?: Store) => {
+  private getRelatedFieldNames = (changedKeys: string[]): Name[] =>
+    Array.from(this.fieldMap.keys()).filter((fieldName) =>
+      changedKeys.some((changedKey) =>
+        isRelatedNamePath(String(fieldName), changedKey),
+      ),
+    );
+
+  refreshField = (newStore?: Store, relatedFieldNames?: Name[]) => {
     if (newStore) {
-      const keys = Object.keys(newStore);
-      keys.forEach((key) => {
-        const entity = this.fieldMap.get(key);
-        if (entity) {
-          entity?.onStoreChange();
-        }
-        this.notifyWatchers(key);
+      const changedKeys = Object.keys(newStore);
+      const fieldNames =
+        relatedFieldNames ?? this.getRelatedFieldNames(changedKeys);
+      fieldNames.forEach((fieldName) => {
+        this.fieldMap.get(fieldName)?.onStoreChange();
       });
+      this.notifyWatchers(changedKeys);
     } else {
       this.fieldEntities.forEach((entity) => {
         entity?.onStoreChange();
@@ -308,14 +322,27 @@ export class FormStore {
     }
     this.watchers.get(key)!.add(callback);
     return () => {
-      this.watchers.get(key)?.delete(callback);
+      const watchers = this.watchers.get(key);
+      watchers?.delete(callback);
+      if (watchers?.size === 0) {
+        this.watchers.delete(key);
+      }
     };
   };
 
-  private notifyWatchers = (changedKey?: string) => {
-    if (changedKey) {
-      this.watchers.get(changedKey)?.forEach((cb) => cb());
-      this.watchers.get(GLOBAL_WATCH_KEY)?.forEach((cb) => cb());
+  private notifyWatchers = (changedKeys?: string | string[]) => {
+    if (changedKeys) {
+      const keys = Array.isArray(changedKeys) ? changedKeys : [changedKeys];
+      const callbacks = new Set<() => void>();
+      this.watchers.forEach((watchers, watchedKey) => {
+        if (
+          watchedKey === GLOBAL_WATCH_KEY ||
+          keys.some((changedKey) => isRelatedNamePath(watchedKey, changedKey))
+        ) {
+          watchers.forEach((callback) => callbacks.add(callback));
+        }
+      });
+      callbacks.forEach((callback) => callback());
     } else {
       this.watchers.forEach((set) => set.forEach((cb) => cb()));
     }

package/src/List/demo/virtual.tsx

@@ -0,0 +1,20 @@
+import { List } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const items = Array.from({ length: 10000 }, (_, i) => ({
+  key: String(i),
+  label: `List item ${i + 1}`,
+  value: String(i),
+}));
+
+export default () => {
+  return (
+    <List
+      virtual
+      height={300}
+      itemHeight={32}
+      items={items}
+      onClick={(item) => console.log('Clicked:', item.label)}
+    />
+  );
+};

package/src/List/hooks/useListKeyboard.ts

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { ListItemProps } from '../interface';
+
+interface UseListKeyboardParams {
+  items: Array<ListItemProps>;
+  /**
+   * Number of columns in the grid layout.
+   * Affects ArrowUp/Down (jump by columns) and ArrowLeft/Right behavior.
+   * @default 1
+   */
+  columns?: number;
+  /**
+   * Controlled focused key from the parent.
+   * When provided, the hook uses this value instead of internal state.
+   */
+  focusedKey?: string | number;
+  /**
+   * Callback when focused key changes.
+   */
+  onFocusChange?: (key: string | number) => void;
+  /**
+   * Callback when Enter is pressed on a focused item.
+   */
+  onClick?: (item: ListItemProps) => void;
+}
+
+export default function useListKeyboard({
+  items,
+  columns = 1,
+  focusedKey: controlledFocusedKey,
+  onFocusChange,
+  onClick,
+}: UseListKeyboardParams) {
+  const [internalFocusedKey, setInternalFocusedKey] = useState<
+    string | number
+  >('');
+
+  const isControlled = controlledFocusedKey !== undefined;
+  const focusedKey = isControlled ? controlledFocusedKey : internalFocusedKey;
+
+  const setFocusedKey = useCallback(
+    (key: string | number) => {
+      if (!isControlled) {
+        setInternalFocusedKey(key);
+      }
+      onFocusChange?.(key);
+    },
+    [isControlled, onFocusChange],
+  );
+
+  // Reset internal focused key if it no longer exists in items
+  useEffect(() => {
+    if (
+      !isControlled &&
+      internalFocusedKey !== '' &&
+      !items.some((item) => item.key === internalFocusedKey)
+    ) {
+      setInternalFocusedKey('');
+    }
+  }, [items, isControlled, internalFocusedKey]);
+
+  const getFocusedIndex = (): number => {
+    if (focusedKey === '' || focusedKey === undefined) return -1;
+    return items.findIndex((item) => item.key === focusedKey);
+  };
+
+  const findNextEnabledIndex = (
+    startIndex: number,
+    direction: 1 | -1,
+  ): number => {
+    const count = items.length;
+    if (count === 0) return -1;
+    let next =
+      direction === 1
+        ? startIndex + 1 >= count
+          ? 0
+          : startIndex + 1
+        : startIndex - 1 < 0
+          ? count - 1
+          : startIndex - 1;
+
+    // Guard against infinite loop if all items are disabled
+    let attempts = 0;
+    while (items[next].disabled && attempts < count) {
+      next =
+        direction === 1
+          ? next + 1 >= count
+            ? 0
+            : next + 1
+          : next - 1 < 0
+            ? count - 1
+            : next - 1;
+      attempts++;
+    }
+    return items[next].disabled ? -1 : next;
+  };
+
+  const handleArrowUp = () => {
+    const focusedIndex = getFocusedIndex();
+    let nextIndex: number;
+
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(items.length - 1, -1);
+      } else {
+        const target = focusedIndex - columns;
+        if (target >= 0) {
+          nextIndex = items[target].disabled
+            ? findNextEnabledIndex(target, -1)
+            : target;
+        } else {
+          // Wrap to last row, same column
+          const lastRowStart =
+            Math.floor((items.length - 1) / columns) * columns;
+          const col = focusedIndex % columns;
+          const wrapTarget = Math.min(lastRowStart + col, items.length - 1);
+          nextIndex = items[wrapTarget]?.disabled
+            ? findNextEnabledIndex(wrapTarget, -1)
+            : wrapTarget;
+        }
+      }
+    } else {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(items.length - 1, -1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, -1);
+      }
+    }
+
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowDown = () => {
+    const focusedIndex = getFocusedIndex();
+    let nextIndex: number;
+
+    if (columns > 1) {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(-1, 1);
+      } else {
+        const target = focusedIndex + columns;
+        if (target < items.length) {
+          nextIndex = items[target].disabled
+            ? findNextEnabledIndex(target, 1)
+            : target;
+        } else {
+          // Wrap to first row, same column
+          const col = focusedIndex % columns;
+          const wrapTarget = col;
+          nextIndex = items[wrapTarget]?.disabled
+            ? findNextEnabledIndex(wrapTarget, 1)
+            : wrapTarget;
+        }
+      }
+    } else {
+      if (focusedIndex === -1) {
+        nextIndex = findNextEnabledIndex(-1, 1);
+      } else {
+        nextIndex = findNextEnabledIndex(focusedIndex, 1);
+      }
+    }
+
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowLeft = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex <= 0) return;
+    const nextIndex = findNextEnabledIndex(focusedIndex, -1);
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleArrowRight = () => {
+    const focusedIndex = getFocusedIndex();
+    if (focusedIndex >= items.length - 1 && focusedIndex !== -1) return;
+    const nextIndex = findNextEnabledIndex(
+      focusedIndex === -1 ? -1 : focusedIndex,
+      1,
+    );
+    if (nextIndex !== -1) {
+      setFocusedKey(items[nextIndex].key);
+    }
+  };
+
+  const handleEnter = () => {
+    if (focusedKey === '' || focusedKey === undefined) return;
+    const item = items.find((i) => i.key === focusedKey);
+    if (item && !item.disabled) {
+      onClick?.(item);
+    }
+  };
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (!items || items.length === 0) return;
+
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        handleArrowUp();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        handleArrowDown();
+        break;
+      case 'ArrowLeft':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowLeft();
+        }
+        break;
+      case 'ArrowRight':
+        if (columns > 1) {
+          event.preventDefault();
+          handleArrowRight();
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        handleEnter();
+        break;
+      default:
+    }
+  };
+
+  return {
+    focusedKey,
+    onKeyDown,
+  };
+}

package/src/List/index.en-US.md

@@ -18,6 +18,7 @@ A list component for displaying a collection of items.
 <code src="./demo/bordered.tsx" title="Bordered" description="List with border"></code>
 <code src="./demo/renderItem.tsx" title="Custom Render" description="List with custom item rendering"></code>
 <code src="./demo/disabled.tsx" title="Disabled Items" description="List with disabled items"></code>
+<code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (10,000 items), only rendering items in the visible area"></code>
 
 ## API
 
@@ -33,6 +34,11 @@ A list component for displaying a collection of items.
 | focusedKey | `string \| number` | Key of the focused item | - |
 | itemRender | `(item: ListItemProps) => React.ReactNode` | Function to render list items | - |
 | onClick | `(item: ListItemProps) => void` | Click event for list items | - |
+| onFocusChange | `(key: string \| number) => void` | Callback when focused item changes via keyboard navigation | - |
+| virtual | `boolean` | Enable virtual scrolling. Requires `height` to be set | `false` |
+| height | `number` | Scroll container height in pixels. Required when `virtual` is true | - |
+| itemHeight | `number` | Fixed height of each item in pixels | `32` |
+| columns | `number` | Number of columns. Enables grid layout when greater than 1 | `1` |
 
 ### ListItemProps
 

package/src/List/index.zh-CN.md

@@ -18,6 +18,7 @@ toc: 'content'
 <code src="./demo/bordered.tsx" title="带边框" description="带边框的列表"></code>
 <code src="./demo/renderItem.tsx" title="自定义渲染" description="自定义列表项渲染"></code>
 <code src="./demo/disabled.tsx" title="禁用项" description="包含禁用项的列表"></code>
+<code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（万条）下的虚拟滚动，只渲染可视区域内的列表项"></code>
 
 ## API
 
@@ -33,6 +34,11 @@ toc: 'content'
 | focusedKey | `string \| number` | 聚焦项的 key | - |
 | itemRender | `(item: ListItemProps) => React.ReactNode` | 函数形式返回列表项 | - |
 | onClick | `(item: ListItemProps) => void` | 列表项的点击事件 | - |
+| onFocusChange | `(key: string \| number) => void` | 键盘导航焦点变化时的回调 | - |
+| virtual | `boolean` | 是否开启虚拟滚动，需同时设置 `height` | `false` |
+| height | `number` | 滚动容器高度（px），开启 `virtual` 时必填 | - |
+| itemHeight | `number` | 每项固定高度（px） | `32` |
+| columns | `number` | 列数，大于 1 时启用网格布局 | `1` |
 
 ### ListItemProps
 

package/src/List/interface.ts

@@ -52,8 +52,8 @@ export interface ListProps extends Omit<
    */
   bordered?: boolean;
   /**
-   * Set the focused item
-   * */
+   * Set the focused item (controlled)
+   */
   focusedKey?: string | number;
   /**
    * Render list item as a function
@@ -63,6 +63,33 @@ export interface ListProps extends Omit<
    * Click event for list items
    */
   onClick?: (item: ListItemProps) => void;
+  /**
+   * Callback when focused item changes via keyboard navigation
+   */
+  onFocusChange?: (key: string | number) => void;
+  /**
+   * Enable virtual scrolling for large lists.
+   * Requires `height` to be set.
+   * @default false
+   */
+  virtual?: boolean;
+  /**
+   * Height of the scrollable container in pixels.
+   * Required when `virtual` is true.
+   */
+  height?: number;
+  /**
+   * Fixed height of each list item row in pixels.
+   * Used for virtual scroll calculation.
+   * @default 32
+   */
+  itemHeight?: number;
+  /**
+   * Number of columns in the list layout.
+   * When greater than 1, items are displayed in a grid.
+   * @default 1
+   */
+  columns?: number;
 }
 
 export type ListCtxType = {