chore: support fixed

react-component · Aug 17, 2023 · 5348044 · 5348044
1 parent e6a3306
commit 5348044
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 27 deletions.
diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx
@@ -137,7 +137,7 @@ export function getCellProps<RecordType>(
     );
   }
 
-  let additionalCellProps: React.HTMLAttributes<HTMLElement>;
+  let additionalCellProps: React.HTMLAttributes<HTMLElement> = {};
   if (column.onCell) {
     additionalCellProps = column.onCell(record, index);
   }

diff --git a/src/StaticTable/BodyGrid.tsx b/src/StaticTable/BodyGrid.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import VirtualList from 'rc-virtual-list';
 import * as React from 'react';
 import TableContext from '../context/TableContext';
+import useFlattenRecords, { FlattenData } from '../hooks/useFlattenRecords';
 import BodyLine from './BodyLine';
 import StaticContext from './StaticContext';
 
@@ -13,17 +14,23 @@ export interface GridProps<RecordType = any> {
 const Grid = React.forwardRef((props: GridProps, ref: any) => {
   const { data } = props;
 
-  const { flattenColumns, onColumnResize, getRowKey, prefixCls } = useContext(TableContext, [
-    'flattenColumns',
-    'onColumnResize',
-    'getRowKey',
-    'prefixCls',
-  ]);
+  const { flattenColumns, onColumnResize, getRowKey, expandedKeys, prefixCls, childrenColumnName } =
+    useContext(TableContext, [
+      'flattenColumns',
+      'onColumnResize',
+      'getRowKey',
+      'prefixCls',
+      'expandedKeys',
+      'childrenColumnName',
+    ]);
   const { scrollY, scrollX } = useContext(StaticContext);
 
   // const context = useContext(TableContext);
   // console.log('=>', context, scrollX, scrollY);
 
+  // =========================== Data ===========================
+  const flattenData = useFlattenRecords(data, childrenColumnName, expandedKeys, getRowKey);
+
   // ========================== Column ==========================
   const columnsWidth = React.useMemo<[key: React.Key, width: number][]>(
     () => flattenColumns.map(({ width, key }) => [key, width as number]),
@@ -41,16 +48,17 @@ const Grid = React.forwardRef((props: GridProps, ref: any) => {
 
   return (
     <div ref={ref}>
-      <VirtualList
+      <VirtualList<FlattenData<any>>
         className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
         height={scrollY}
         itemHeight={24}
-        data={data}
+        data={flattenData}
         itemKey={getRowKey}
         scrollWidth={scrollX}
       >
         {(item, index, itemProps) => {
-          return <BodyLine record={item} index={index} {...itemProps} />;
+          const rowKey = getRowKey(item, index);
+          return <BodyLine data={item} rowKey={rowKey} index={index} {...itemProps} />;
         }}
       </VirtualList>
     </div>

diff --git a/src/StaticTable/BodyLine.tsx b/src/StaticTable/BodyLine.tsx
@@ -1,24 +1,28 @@
 import { useContext } from '@rc-component/context';
 import classNames from 'classnames';
 import * as React from 'react';
+import { getCellProps, useRowInfo } from '../Body/BodyRow';
 import Cell from '../Cell';
 import TableContext from '../context/TableContext';
-import { getColumnsKey } from '../utils/valueUtil';
+import type { FlattenData } from '../hooks/useFlattenRecords';
 import StaticContext from './StaticContext';
 
 export interface BodyLineProps<RecordType = any> {
-  record: RecordType;
+  data: FlattenData<RecordType>;
   index: number;
   className?: string;
+  style?: React.CSSProperties;
+  rowKey: React.Key;
 }
 
 const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) => {
-  const { record, index, className, style, ...restProps } = props;
+  const { data, index, className, rowKey, style, ...restProps } = props;
+  const { record, indent } = data;
 
-  const { flattenColumns, prefixCls, fixedInfoList } = useContext(TableContext);
+  const { flattenColumns, prefixCls } = useContext(TableContext);
   const { scrollX } = useContext(StaticContext, ['scrollX']);
 
-  const columnsKey = getColumnsKey(flattenColumns);
+  const rowInfo = useRowInfo(record, rowKey);
 
   // ========================== Render ==========================
   return (
@@ -32,23 +36,29 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
       }}
     >
       {flattenColumns.map((column, colIndex) => {
-        const { render, dataIndex, className: columnClassName } = column;
+        const { render, dataIndex, className: columnClassName, width: colWidth } = column;
 
-        const key = columnsKey[colIndex];
-        const fixedInfo = fixedInfoList[colIndex];
+        const { key, fixedInfo, appendCellNode, additionalCellProps } = getCellProps(
+          rowInfo,
+          column,
+          colIndex,
+          indent,
+          index,
+        );
 
-        // return (
-        //   <div key={index} className={`${prefixCls}-cell`} style={{ width: column.width }}>
-        //     {value}
-        //   </div>
-        // );
+        const { style: cellStyle } = additionalCellProps;
+        const mergedStyle = {
+          ...cellStyle,
+          width: colWidth,
+        };
 
         return (
           <Cell
             className={columnClassName}
             ellipsis={column.ellipsis}
             align={column.align}
             scope={column.rowScope}
+            // component={column.rowScope ? scopeCellComponent : cellComponent}
             component="div"
             prefixCls={prefixCls}
             key={key}
@@ -60,8 +70,11 @@ const BodyLine = React.forwardRef<HTMLDivElement, BodyLineProps>((props, ref) =>
             render={render}
             shouldCellUpdate={column.shouldCellUpdate}
             {...fixedInfo}
-            // appendNode={appendCellNode}
-            // additionalProps={additionalCellProps}
+            appendNode={appendCellNode}
+            additionalProps={{
+              ...additionalCellProps,
+              style: mergedStyle,
+            }}
           />
         );
       })}

diff --git a/src/StaticTable/index.tsx b/src/StaticTable/index.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { INTERNAL_HOOKS } from '..';
 import type { CustomizeScrollBody } from '../interface';
 import Table, { type TableProps } from '../Table';
 import Grid from './BodyGrid';
@@ -35,6 +36,8 @@ export default function StaticTable<RecordType>(props: StaticTableProps<RecordTy
           body: renderBody,
         }}
         columns={filledWidthColumns}
+        internalHooks={INTERNAL_HOOKS}
+        hideScrollColumn
       />
     </StaticContext.Provider>
   );

diff --git a/src/hooks/useFlattenRecords.ts b/src/hooks/useFlattenRecords.ts
@@ -41,6 +41,12 @@ function flatRecord<T>(
   return arr;
 }
 
+export interface FlattenData<RecordType> {
+  record: RecordType;
+  indent: number;
+  index: number;
+}
+
 /**
  * flat tree data on expanded state
  *
@@ -53,11 +59,11 @@ function flatRecord<T>(
  * @returns flattened data
  */
 export default function useFlattenRecords<T>(
-  data,
+  data: T[],
   childrenColumnName: string,
   expandedKeys: Set<Key>,
   getRowKey: GetRowKey<T>,
-) {
+): FlattenData<T>[] {
   const arr: { record: T; indent: number; index: number }[] = React.useMemo(() => {
     if (expandedKeys?.size) {
       let temp: { record: T; indent: number; index: number }[] = [];