chore: fix sticky expand

react-component · Aug 20, 2023 · 3c2ac91 · 3c2ac91
1 parent 278a471
commit 3c2ac91
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/src/StaticTable/BodyGrid.tsx b/src/StaticTable/BodyGrid.tsx
@@ -50,7 +50,6 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
     () => columnsWidth.map(colWidth => colWidth[2]),
     [columnsWidth],
   );
-  console.log('~~~~>', flattenColumns, columnsWidth);
 
   React.useEffect(() => {
     columnsWidth.forEach(([key, width]) => {

diff --git a/src/StaticTable/useWidthColumns.ts b/src/StaticTable/useWidthColumns.ts
@@ -48,20 +48,17 @@ export default function useWidthColumns<RecordType>(
       let restCount = missWidthCount;
       const avgWidth = restWidth / missWidthCount;
 
-      const fillWidth = (cols: ColumnsType<RecordType>, parentKey: string) =>
-        cols.map((col: any, index) => {
-          const mergedKey = `${parentKey}-${index}`;
-
+      const fillWidth = (cols: ColumnsType<RecordType>) =>
+        cols.map((col: any) => {
           const clone = {
-            key: mergedKey,
             ...col,
           };
 
           const colWidth = parseColWidth(scrollX, clone.width);
           const hasChildren = col.children?.length;
 
           if (hasChildren) {
-            clone.children = fillWidth(col.children, mergedKey);
+            clone.children = fillWidth(col.children);
           }
 
           if (colWidth) {
@@ -78,7 +75,7 @@ export default function useWidthColumns<RecordType>(
           return clone;
         });
 
-      return fillWidth(columns, 'key');
+      return fillWidth(columns);
     }
 
     return columns;

diff --git a/src/hooks/useColumns.tsx b/src/hooks/useColumns.tsx
@@ -35,19 +35,23 @@ export function convertChildrenToColumns<RecordType>(
     });
 }
 
-function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<RecordType>[] {
+function flatColumns<RecordType>(
+  columns: ColumnsType<RecordType>,
+  parentKey = 'key',
+): ColumnType<RecordType>[] {
   return columns
     .filter(column => column && typeof column === 'object')
-    .reduce((list, column) => {
+    .reduce((list, column, index) => {
       const { fixed } = column;
       // Convert `fixed='true'` to `fixed='left'` instead
       const parsedFixed = fixed === true ? 'left' : fixed;
+      const mergedKey = `${parentKey}-${index}`;
 
       const subColumns = (column as ColumnGroupType<RecordType>).children;
       if (subColumns && subColumns.length > 0) {
         return [
           ...list,
-          ...flatColumns(subColumns).map(subColum => ({
+          ...flatColumns(subColumns, mergedKey).map(subColum => ({
             fixed: parsedFixed,
             ...subColum,
           })),
@@ -56,6 +60,7 @@ function flatColumns<RecordType>(columns: ColumnsType<RecordType>): ColumnType<R
       return [
         ...list,
         {
+          key: mergedKey,
           ...column,
           fixed: parsedFixed,
         },

diff --git a/src/hooks/useFixedInfo.ts b/src/hooks/useFixedInfo.ts
@@ -7,10 +7,17 @@ export default function useFixedInfo<RecordType>(
   flattenColumns: readonly ColumnType<RecordType>[],
   stickyOffsets: StickyOffsets,
   direction: Direction,
-  columns: ColumnsType<RecordType>
+  columns: ColumnsType<RecordType>,
 ) {
   const fixedInfoList = flattenColumns.map((_, colIndex) =>
-    getCellFixedInfo(colIndex, colIndex, flattenColumns, stickyOffsets, direction, columns?.[colIndex]),
+    getCellFixedInfo(
+      colIndex,
+      colIndex,
+      flattenColumns,
+      stickyOffsets,
+      direction,
+      columns?.[colIndex],
+    ),
   );
 
   return useMemo(