@rainbow-oh/yee-c 0.7.0 → 0.8.0

package/package.json

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

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/Table/hooks/useColumns.ts

@@ -58,7 +58,7 @@ export default function useColumns({
     const tree = injectSelectionExpand(base, rowSelection, expandable);
     const leaves = flattenLeafColumns(tree);
     const wraped = handleColumns(leaves);
-    const rows = parseHeaderRows(tree);
+    const rows = parseHeaderRows(tree, wraped);
     return { wrapedColumns: wraped, headerRows: rows };
   }, [childColumns, columns, shouldRenderSelection, shouldRenderExpand]);
 

package/src/Table/style/index.less

@@ -49,6 +49,12 @@
           background-color: var(--yee-table-head-cell-split-line-color, #eee);
         }
       }
+
+      &-fixed-left,
+      &-fixed-right {
+        position: sticky;
+        z-index: 1;
+      }
     }
 
     &-cell {
@@ -84,6 +90,16 @@
     &-wrapper {
       overflow: auto;
       width: 100%;
+
+      &-scroll-left @{pls}-cell-fixed-left-last {
+        box-shadow: 6px 0 6px -4px
+          var(--yee-table-fixed-left-after-bs-color);
+      }
+
+      &-scroll-right @{pls}-cell-fixed-right-first {
+        box-shadow: -6px 0 6px -4px
+          var(--yee-table-fixed-right-after-bs-color);
+      }
     }
 
     > table {
@@ -101,10 +117,18 @@
     }
   }
 
+  &-row {
+    background-color: var(--yee-table-row-bg-color);
+  }
+
   &-even-row {
     background-color: var(--yee-table-even-row-bg-color);
   }
 
+  &-odd-row {
+    background-color: var(--yee-table-odd-row-bg-color);
+  }
+
   &-column-sorters {
     display: inline-flex;
     align-items: center;
@@ -137,7 +161,7 @@
     &-fixed-left,
     &-fixed-right {
       position: sticky;
-      background-color: inherit;
+      background-color: var(--yee-table-fixed-column-bg-color);
     }
   }
 
@@ -163,17 +187,17 @@
     }
   }
 
-  &-odd-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-odd-row-bg-color);
-    }
-  }
+  // &-odd-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-odd-row-bg-color);
+  //   }
+  // }
 
-  &-even-row {
-    > @{pls}-cell {
-      background-color: var(--yee-table-even-row-bg-color);
-    }
-  }
+  // &-even-row {
+  //   > @{pls}-cell {
+  //     background-color: var(--yee-table-even-row-bg-color);
+  //   }
+  // }
 
   &-footer {
     display: flex;

package/src/Table/table.tsx

@@ -126,6 +126,36 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
 
   // Track previous values to determine what action triggered onChange
   const prevSortersRef = useRef<typeof sorters>({});
+  const contentWrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [horizontalScroll, setHorizontalScroll] = React.useState({
+    left: false,
+    right: false,
+  });
+
+  const updateHorizontalScroll = React.useCallback(() => {
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return;
+
+    const scrollContainer =
+      content.scrollWidth - content.clientWidth > 1 ? content : wrapper;
+    const maxScrollLeft =
+      scrollContainer.scrollWidth - scrollContainer.clientWidth;
+    const hasHorizontalScroll = maxScrollLeft > 1;
+    const next = {
+      left: hasHorizontalScroll && scrollContainer.scrollLeft > 1,
+      right:
+        hasHorizontalScroll &&
+        scrollContainer.scrollLeft < maxScrollLeft - 1,
+    };
+
+    setHorizontalScroll((current) =>
+      current.left === next.left && current.right === next.right
+        ? current
+        : next,
+    );
+  }, []);
 
   // Wrap onFilter to trigger onChange
   const onFilter = React.useCallback(
@@ -173,6 +203,25 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     }
   }, [sorters, current, pageSize, pageData, sortedData, onChange]);
 
+  useEffect(() => {
+    updateHorizontalScroll();
+
+    const wrapper = contentWrapperRef.current;
+    const content = contentRef.current;
+    if (!wrapper || !content) return undefined;
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateHorizontalScroll);
+      return () => window.removeEventListener('resize', updateHorizontalScroll);
+    }
+
+    const resizeObserver = new ResizeObserver(updateHorizontalScroll);
+    resizeObserver.observe(wrapper);
+    resizeObserver.observe(content);
+
+    return () => resizeObserver.disconnect();
+  }, [updateHorizontalScroll, wrapedColumns, pageData, scroll?.x]);
+
   const renderHeader = () => {
     return (
       <Header
@@ -259,13 +308,23 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     );
 
     return (
-      <div className={`${prefixCls}-content-wrapper`}>
+      <div
+        ref={contentWrapperRef}
+        className={clsx(`${prefixCls}-content-wrapper`, {
+          [`${prefixCls}-content-wrapper-scroll-left`]: horizontalScroll.left,
+          [`${prefixCls}-content-wrapper-scroll-right`]:
+            horizontalScroll.right,
+        })}
+        onScroll={updateHorizontalScroll}
+      >
         <div
+          ref={contentRef}
           className={clsx(`${prefixCls}-content`, {
             [`${prefixCls}-${size}-size`]: size,
             [`${prefixCls}-fixed-header`]: scroll?.y,
           })}
           style={{ height: scroll?.y, width: scroll?.x }}
+          onScroll={updateHorizontalScroll}
         >
           {table}
         </div>

package/src/Table/tbody/cell.tsx

@@ -61,7 +61,7 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
       {
         [`${prefixCls}-cell-fixed-${fixed}`]: fixed,
         [`${prefixCls}-cell-fixed-${fixed}-first`]: isFixedRightFirst,
-        [`${prefixCls}-fixed-${fixed}-last`]: isFixedLeftLast,
+        [`${prefixCls}-cell-fixed-${fixed}-last`]: isFixedLeftLast,
       },
       className,
     );

package/src/Table/util/header.ts

@@ -32,13 +32,17 @@ export function flattenLeafColumns(
  *
  * - Pass 1 (DFS): place each column into the row matching its depth; a group's
  *   colSpan equals the sum of its children's colSpans.
+ * - Fixed metadata from the resolved leaf columns is reused by leaf cells and
+ *   aggregated for group cells whose descendants share the same fixed side.
  * - Pass 2: leaf cells (no sub-columns) get rowSpan = rowCount - rowIndex so
  *   they stretch down to the last header row; group cells keep rowSpan = 1.
  */
 export function parseHeaderRows(
   rootColumns: WrapedColumnProps[],
+  resolvedLeafColumns: WrapedColumnProps[] = flattenLeafColumns(rootColumns),
 ): HeaderCell[][] {
   const rows: HeaderCell[][] = [];
+  let leafIndex = 0;
 
   const fillRowCells = (
     columns: WrapedColumnProps[],
@@ -46,17 +50,59 @@ export function parseHeaderRows(
   ): number => {
     rows[rowIndex] = rows[rowIndex] || [];
     let colSpanTotal = 0;
-    columns.filter(Boolean).forEach((column) => {
+    columns.filter(Boolean).forEach((sourceColumn) => {
+      let column = sourceColumn;
+      const subColumns = sourceColumn.children as
+        | WrapedColumnProps[]
+        | undefined;
+      const leafStartIndex = leafIndex;
       const cell: HeaderCell = {
         column,
         colSpan: 1,
         rowSpan: 1,
       };
-      const subColumns = column.children as WrapedColumnProps[] | undefined;
+
       if (subColumns && subColumns.length > 0) {
         cell.colSpan = fillRowCells(subColumns, rowIndex + 1);
         cell.hasSubColumns = true;
+
+        const groupLeaves = resolvedLeafColumns.slice(
+          leafStartIndex,
+          leafIndex,
+        );
+        const fixed = groupLeaves[0]?.fixed;
+        const isFixedGroup =
+          (fixed === 'left' || fixed === 'right') &&
+          groupLeaves.every((leaf) => leaf.fixed === fixed);
+
+        if (isFixedGroup) {
+          const offsetLeaf =
+            fixed === 'left'
+              ? groupLeaves[0]
+              : groupLeaves[groupLeaves.length - 1];
+          const boundaryLeaf =
+            fixed === 'left'
+              ? groupLeaves[groupLeaves.length - 1]
+              : groupLeaves[0];
+          column = {
+            ...sourceColumn,
+            fixed,
+            style: {
+              ...sourceColumn.style,
+              [fixed]: offsetLeaf.style?.[fixed],
+            },
+            isFixedLeftLast: fixed === 'left' && boundaryLeaf.isFixedLeftLast,
+            isFixedRightFirst:
+              fixed === 'right' && boundaryLeaf.isFixedRightFirst,
+          };
+          cell.column = column;
+        }
+      } else {
+        column = resolvedLeafColumns[leafIndex] || sourceColumn;
+        cell.column = column;
+        leafIndex += 1;
       }
+
       rows[rowIndex].push(cell);
       colSpanTotal += cell.colSpan;
     });

package/src/style/color.css

@@ -848,6 +848,7 @@
   --yee-table-thead-stripe-borderbottom-color: var(
     --yee-table-thead-borderbottom-color
   );
+  --yee-table-row-bg-color: var(--yee-color-bg-container);
   --yee-table-odd-row-bg-color: var(--yee-color-bg-container);
   --yee-table-even-row-bg-color: var(--yee-color-bg-head);
   --yee-table-elevated-thead-stripe-borderbottom-color: var(
@@ -870,6 +871,7 @@
   --yee-table-head-filter-active-color: var(--yee-primary-color);
   --yee-table-fixed-left-after-bs-color: var(--yee-box-shadow-color);
   --yee-table-fixed-right-after-bs-color: var(--yee-box-shadow-color);
+  --yee-table-fixed-column-bg-color: inherit;
   --yee-table-filter-list-bg-color: var(--yee-color-bg-elevated);
   --yee-table-tbody-tr-expanded-bg-color: var(--yee-color-bg-container);
   --yee-table-elevated-tbody-tr-expanded-bg-color: var(

package/src/version.ts

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