@rainbow-oh/yee-c 0.5.0 → 0.6.0

package/src/Table/table.tsx

@@ -75,7 +75,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
       : [];
   }, [dataSource, rowKey, getRowKey]);
 
-  const { wrapedColumns, columns } = useColumns({
+  const { wrapedColumns, headerRows } = useColumns({
     children,
     columns: propColumns,
     expandable,
@@ -92,7 +92,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     data: sortedData,
     sorters,
     onSort,
-  } = useSorter({ data: filteredData, columns });
+  } = useSorter({ data: filteredData, columns: wrapedColumns });
   // Pagination
   const { pageData, current, pageSize, pagination } = usePagination({
     data: sortedData,
@@ -120,7 +120,6 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
   const {
     selectedRowKeys,
     checkedAll,
-    pageDataRowKeys,
     onCheckAll,
     onChange: onSelectionChange,
   } = useSelection({ pageData, dataSource, getRowKey, rowSelection, allKeys });
@@ -180,7 +179,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
         prefixCls={prefixCls}
         header={header}
         download={download}
-        columns={columns}
+        columns={wrapedColumns}
         pageData={pageData}
         dataSource={dataSource}
       />
@@ -195,8 +194,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
     return (
       <THeader
         {...ths}
-        columns={wrapedColumns}
-        pageDataRowKeys={pageDataRowKeys}
+        headerRows={headerRows}
         checkedAll={checkedAll}
         sorters={sorters}
         onSort={onSort}
@@ -243,7 +241,7 @@ const Table = React.forwardRef<HTMLDivElement, TableProps>((baseprops, ref) => {
       <TableCtx.Provider
         value={{
           prefixCls,
-          columns,
+          columns: wrapedColumns,
           classNames,
           styles,
           components,

package/src/Table/tbody/cell.tsx

@@ -11,7 +11,6 @@ export interface BodyCellProps {
   fixedToLeft?: number;
   current: number;
   pageSize: number;
-  children?: (record: Record<string, any>, index: number) => React.ReactNode;
 }
 
 const TableCell: React.FC<BodyCellProps> = (props) => {
@@ -27,7 +26,6 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
     className,
     styles,
     classNames,
-    children,
     onCell,
     render,
   } = column;
@@ -38,10 +36,6 @@ const TableCell: React.FC<BodyCellProps> = (props) => {
     if (render) {
       return typeof render === 'function' ? render(record, rowIndex) : render;
     }
-    if (typeof children === 'function') {
-      // @ts-ignore
-      return children(record, rowIndex);
-    }
     return (
       <div
         className={clsx(`${prefixCls}-cell-inner`, classNames?.inner)}

package/src/Table/tbody/index.tsx

@@ -8,7 +8,7 @@ import TableRow from './row';
 const TableBody: React.FC<TableBodyProps> = (props) => {
   const { columns, pageData, lazyLoad, ...rest } = props;
 
-  const { prefixCls } = React.useContext(TableCtx);
+  const { prefixCls, components, rowKey } = React.useContext(TableCtx);
   const { locale } = useLocale();
   const { table: tableLocale } = locale;
 
@@ -23,11 +23,30 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   const dataLength = pageData.length;
   if (dataLength === 0) return empty;
 
+  const BodyWrapper = components?.body?.tbody ?? 'tbody';
+  const RowRenderer = components?.body?.row;
+
+  const resolveRowKey = (record: Record<string, any>) =>
+    typeof rowKey === 'function' ? rowKey(record) : record[rowKey];
+
   const getRenderRows = () => {
     if (lazyLoad) {
       return <LazyRow {...rest} pageData={pageData} columns={columns} />;
     }
     return pageData.map((record: Record<string, any>, index: number) => {
+      // 整行接管：由外部组件渲染 <tr> + 单元格（可放拖拽手柄等）
+      if (RowRenderer) {
+        const rk = resolveRowKey(record);
+        return (
+          <RowRenderer
+            key={rk ?? index}
+            record={record}
+            index={index}
+            columns={columns}
+            rowKey={rk}
+          />
+        );
+      }
       return (
         <TableRow
           {...rest}
@@ -41,7 +60,7 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   };
 
   const tbody = (
-    <tbody className={`${prefixCls}-tbody`}>{getRenderRows()}</tbody>
+    <BodyWrapper className={`${prefixCls}-tbody`}>{getRenderRows()}</BodyWrapper>
   );
 
   return tbody;

package/src/Table/tbody/row.tsx

@@ -56,27 +56,38 @@ const TableRow: React.FC<TableRowProps> = (props) => {
   };
 
   const getSelection = (column: WrapedColumnProps) => {
-    const { type, onCell, ...restCol } = column;
-    const key = record[rowKey];
-    const props = onCell ? onCell(record, index) : {};
-    const checked = selectedRowKeys?.includes(key);
-
+    const { type, disabled: colDisabled, onCell } = column;
+    const rowKeyValue = record[rowKey];
+    const props = (onCell?.(record, index) || {}) as Record<string, unknown>;
+    const checked = selectedRowKeys?.includes(rowKeyValue);
+
+    // rowSelection.disabled may be a boolean, a per-row array, or a function
+    const disabled =
+      typeof colDisabled === 'function'
+        ? colDisabled(record, index)
+        : Array.isArray(colDisabled)
+          ? colDisabled[index]
+          : !!colDisabled;
+
+    // Only forward input-relevant props. Spreading the whole column would leak
+    // rowSelection fields (selectedRowKeys/selectAll/...) and the synthetic
+    // `key` onto the DOM <input>.
     const commonProps = {
-      // ...rest,
-      ...restCol,
-      ...props,
       checked,
-      value: key,
+      value: rowKeyValue,
       onChange: onSelectionChange,
+      disabled,
+      ...props,
     };
 
     if (type === 'checkbox') {
-      // @ts-ignore
-      return <Checkbox {...commonProps} />;
-    } else {
-      // @ts-ignore
-      return <Radio {...commonProps} />;
+      return (
+        <Checkbox
+          {...(commonProps as React.ComponentProps<typeof Checkbox>)}
+        />
+      );
     }
+    return <Radio {...(commonProps as React.ComponentProps<typeof Radio>)} />;
   };
 
   let colSpanStart = Infinity;

package/src/Table/theader/cell.tsx

@@ -26,6 +26,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     internalFilters,
     style,
     width,
+    colSpan,
+    rowSpan,
     onHeaderCell,
     onSort,
     onInternalFilter,
@@ -141,6 +143,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
       className: cls,
       scope: 'col',
       style: styles,
+      colSpan,
+      rowSpan,
     };
   };
 

package/src/Table/theader/index.tsx

@@ -1,65 +1,84 @@
 import clsx from 'clsx';
 import React, { memo, useContext } from 'react';
 import Checkbox from '../../Checkbox';
-import { HeadCellProps, WrapedColumnProps } from '../interface';
+import type { HeaderCell } from '../interface';
 import { TableCtx } from '../table';
 import HeadCell from './cell';
 
 export interface TableHeadProps {
-  children?: React.ReactNode;
-  columns?: Array<HeadCellProps>;
-  isExpandable?: boolean;
-  expandedColumn?: number;
+  /**
+   * Resolved 2D header rows (one array per header row), produced by parseHeaderRows
+   */
+  headerRows?: HeaderCell[][];
 }
 
 const TableHead: React.FC<any> = (props) => {
-  const { columns, onCheckAll, checkedAll, onHeaderRow, ...rest } = props;
+  const { headerRows = [], onCheckAll, checkedAll, onHeaderRow, ...rest } =
+    props;
 
   const { prefixCls } = useContext(TableCtx);
 
-  const renderHeadCell = () => {
-    return columns.map((column: WrapedColumnProps, index: number) => {
-      const { key, type, visible } = column;
-      if (key === 'YEE_SELECTION_COL') {
-        const common = {
-          className: `${prefixCls}-cell ${prefixCls}-selection-col`,
-          scope: 'col',
-          key: 'title-column-selection',
-        };
-        return (
-          <th {...common} key={column.key || column.dataIndex}>
-            {type === 'checkbox' ? (
-              <Checkbox checked={checkedAll} onChange={onCheckAll} />
-            ) : null}
-          </th>
-        );
-      }
-      if (key === 'YEE_EXPAND_COL' && visible !== false) {
-        return (
-          <th
-            className={clsx(`${prefixCls}-cell`, `${prefixCls}-expand-col`)}
-            scope="col"
-            key="title-column-expandable"
-          ></th>
-        );
-      }
+  const renderCell = (
+    cell: HeaderCell,
+    rowIndex: number,
+    colIndex: number,
+  ) => {
+    const { column, colSpan, rowSpan } = cell;
+    const { key, type, visible } = column;
+    const cellKey =
+      'title-column-' +
+      (column.key || column.dataIndex || `${rowIndex}-${colIndex}`);
+
+    if (key === 'YEE_SELECTION_COL') {
       return (
-        <HeadCell
-          {...rest}
-          {...column}
-          key={'title-column-' + (column.key || column.dataIndex || index)}
+        <th
+          className={`${prefixCls}-cell ${prefixCls}-selection-col`}
+          scope="col"
+          key={cellKey}
+          colSpan={colSpan}
+          rowSpan={rowSpan}
+        >
+          {type === 'checkbox' ? (
+            <Checkbox checked={checkedAll} onChange={onCheckAll} />
+          ) : null}
+        </th>
+      );
+    }
+    if (key === 'YEE_EXPAND_COL' && visible !== false) {
+      return (
+        <th
+          className={clsx(`${prefixCls}-cell`, `${prefixCls}-expand-col`)}
+          scope="col"
+          key={cellKey}
+          colSpan={colSpan}
+          rowSpan={rowSpan}
         />
       );
-    });
+    }
+    return (
+      <HeadCell
+        {...rest}
+        {...column}
+        colSpan={colSpan}
+        rowSpan={rowSpan}
+        key={cellKey}
+      />
+    );
   };
 
-  const rowProps = onHeaderRow ? onHeaderRow(columns) : {};
-
   return (
     <thead className={clsx(`${prefixCls}-thead`)}>
-      <tr {...rowProps} key="thead">
-        {renderHeadCell()}
-      </tr>
+      {headerRows.map((row: HeaderCell[], rowIndex: number) => {
+        const rowColumns = row.map((cell) => cell.column);
+        const rowProps = onHeaderRow ? onHeaderRow(rowColumns) : {};
+        return (
+          <tr {...rowProps} key={`thead-row-${rowIndex}`}>
+            {row.map((cell, colIndex) =>
+              renderCell(cell, rowIndex, colIndex),
+            )}
+          </tr>
+        );
+      })}
     </thead>
   );
 };

package/src/Table/util/header.ts

@@ -0,0 +1,111 @@
+import type {
+  ColumnProps,
+  ExpandableType,
+  HeaderCell,
+  RowSelectionType,
+  WrapedColumnProps,
+} from '../interface';
+
+type FixedType = ColumnProps['fixed'];
+
+/**
+ * Recursively flatten a (possibly grouped) column tree into its leaf columns.
+ * A parent's `fixed` is inherited by its children when the child does not set its own.
+ */
+export function flattenLeafColumns(
+  columns: WrapedColumnProps[],
+  parentFixed?: FixedType,
+): WrapedColumnProps[] {
+  return columns.reduce<WrapedColumnProps[]>((list, column) => {
+    const fixed = column.fixed ?? parentFixed;
+    const subColumns = column.children as WrapedColumnProps[] | undefined;
+    if (subColumns && subColumns.length > 0) {
+      return [...list, ...flattenLeafColumns(subColumns, fixed)];
+    }
+    return [...list, { ...column, fixed }];
+  }, []);
+}
+
+/**
+ * Convert a column tree into a 2D array of header cells (one array per header row),
+ * computing each cell's colSpan/rowSpan. Mirrors rc-table's parseHeaderRows.
+ *
+ * - Pass 1 (DFS): place each column into the row matching its depth; a group's
+ *   colSpan equals the sum of its children's colSpans.
+ * - 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[],
+): HeaderCell[][] {
+  const rows: HeaderCell[][] = [];
+
+  const fillRowCells = (
+    columns: WrapedColumnProps[],
+    rowIndex: number,
+  ): number => {
+    rows[rowIndex] = rows[rowIndex] || [];
+    let colSpanTotal = 0;
+    columns.filter(Boolean).forEach((column) => {
+      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;
+      }
+      rows[rowIndex].push(cell);
+      colSpanTotal += cell.colSpan;
+    });
+    return colSpanTotal;
+  };
+
+  fillRowCells(rootColumns, 0);
+
+  const rowCount = rows.length;
+  for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+    rows[rowIndex].forEach((cell) => {
+      // Leaf cells stretch to the bottom row; group cells stay at rowSpan = 1.
+      if (!cell.hasSubColumns) {
+        cell.rowSpan = rowCount - rowIndex;
+      }
+    });
+  }
+
+  return rows;
+}
+
+/**
+ * Inject selection / expand columns into the top level of the column tree.
+ * `index` is a 1-based position among the top-level columns.
+ */
+export function injectSelectionExpand(
+  columns: WrapedColumnProps[],
+  rowSelection?: RowSelectionType,
+  expandable?: ExpandableType,
+): WrapedColumnProps[] {
+  const result = [...columns];
+  if (rowSelection) {
+    const { index = 1 } = rowSelection;
+    result.splice(index - 1, 0, {
+      width: 50,
+      ...rowSelection,
+      key: 'YEE_SELECTION_COL',
+    } as WrapedColumnProps);
+  }
+  if (expandable) {
+    const { index = 1, visible = true } = expandable;
+    const loc = index ? index - 1 : rowSelection ? 1 : 0;
+    if (visible !== false) {
+      result.splice(loc, 0, {
+        width: 50,
+        ...expandable,
+        key: 'YEE_EXPAND_COL',
+      } as WrapedColumnProps);
+    }
+  }
+  return result;
+}

package/src/style/size.css

@@ -482,6 +482,10 @@
   --yee-selector-arrow-right: 8px;
   --yee-selector-clear-right: 8px;
   --yee-selector-clear-padding: 1px;
+  --yee-selector-small-padding: 0 6px;
+  --yee-selector-small-height: 24px;
+  --yee-selector-large-padding: 4px 12px;
+  --yee-selector-large-height: 40px;
   --yee-tags-height: 32px;
   --yee-tags-input-font-size: 14px;
   --yee-tags-input-line-height: 22px;

package/src/version.ts

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