详情扩展的一些问题处理

.yarnrc

@@ -1 +1 @@
-registry "https://registry.npm.taobao.org"
+registry "https://registry.npmmirror.com"

packages/ali-react-table/rollup.config.js

@@ -12,9 +12,11 @@ const config = (arg) => ({
   plugins: [
     typescript({
       tsconfig: 'tsconfig.json',
+      include: ['src/**/*.ts', 'src/**/*.tsx'],
     }),
     resolve({
       extensions: ['.mjs', '.js', '.jsx', '.json', '.node'],
+      extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.node'],
     }),
   ],
   external,

packages/ali-react-table/src/base-table/table.tsx

@@ -599,7 +599,7 @@ export class BaseTable extends React.Component<BaseTableProps, BaseTableState> {
     let maxRowIndex = -1
     let maxRowBottom = -1
 
-    for (const tr of this.domHelper.getTableRows()) {
+    for (const tr of Array.from(this.domHelper.getTableRows())) {
       const rowIndex = Number(tr.dataset.rowindex)
       if (isNaN(rowIndex)) {
         continue

packages/ali-react-table/src/pipeline/features/rowDetail.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react'
 import { ExpansionCell, icons, InlineFlexCell } from '../../common-views'
 import { ArtColumn } from '../../interfaces'
 import { internals } from '../../internals'
-import { collectNodes, mergeCellProps } from '../../utils'
+import { collectNodes, mergeCellProps, upDataFirstCol } from '../../utils'
 import { always, flatMap } from '../../utils/others'
 import { TablePipeline } from '../pipeline'
 
@@ -43,6 +43,7 @@ export interface RowDetailFeatureOptions {
 }
 
 const rowDetailSymbol = Symbol('row-detail')
+const originKeySymbol = Symbol('origin-key')
 
 const fallbackRenderDetail = () => (
   <div style={{ margin: '8px 24px' }}>
@@ -99,12 +100,21 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
         onChangeOpenKeys([...openKeys, rowKey], rowKey, 'expand')
       }
     }
+
+    // 还原primaryKey
+    const resetRow = (row:any)=>{
+      let key = row[originKeySymbol];
+      if(key){
+        return {...row, [primaryKey]: row[originKeySymbol]}
+      }
+      return row
+    }
 
     return pipeline
       .dataSource(
         flatMap(pipeline.getDataSource(), (row, rowIndex) => {
           if (openKeySet.has(row[primaryKey])) {
-            return [row, { [rowDetailMetaKey]: true, ...row, [primaryKey]: getDetailKey(row, rowIndex) }]
+            return [row, { [rowDetailMetaKey]: true, [originKeySymbol]: row[primaryKey], ...row, [primaryKey]: getDetailKey(row, rowIndex) }]
           } else {
             return [row]
           }
@@ -113,7 +123,7 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
       .columns(processColumns(pipeline.getColumns()))
       .appendRowPropsGetter((row) => {
         if (row[rowDetailMetaKey]) {
-          return { className: 'no-hover' }
+          return { className: 'no-hover' } as React.HTMLAttributes<HTMLTableRowElement>
         }
       })
 
@@ -122,96 +132,103 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
         return columns
       }
       const columnFlatCount = collectNodes(columns, 'leaf-only').length
-      const [firstCol, ...others] = columns
-
-      const render = (value: any, row: any, rowIndex: number) => {
-        if (row[rowDetailMetaKey]) {
-          return renderDetail(row, rowIndex)
-        }
-
-        const content = internals.safeRender(firstCol, row, rowIndex)
 
-        if (!hasDetail(row, rowIndex)) {
-          return <InlineFlexCell style={{ marginLeft: textOffset }}>{content}</InlineFlexCell>
-        }
+      return upDataFirstCol(columns, (firstCol) => {
 
-        const rowKey = row[primaryKey]
-        const expanded = openKeySet.has(rowKey)
-        const onClick = (e: React.MouseEvent) => {
-          if (opts.stopClickEventPropagation) {
-            e.stopPropagation()
+        const render = (value: any, row: any, rowIndex: number) => {
+          if (row[rowDetailMetaKey]) {
+            return renderDetail(resetRow(row), rowIndex)
           }
-          toggle(rowKey)
-        }
-
-        const expandCls = expanded ? 'expanded' : 'collapsed'
-        return (
-          <ExpansionCell
-            className={cx('expansion-cell', expandCls)}
-            style={{ cursor: clickArea === 'content' ? 'pointer' : undefined }}
-            onClick={clickArea === 'content' ? onClick : undefined}
-          >
-            <icons.CaretRight
-              style={{
-                cursor: clickArea === 'icon' ? 'pointer' : undefined,
-                marginLeft: indents.iconIndent,
-                marginRight: indents.iconGap,
-              }}
-              className={cx('expansion-icon', expandCls)}
-              onClick={clickArea === 'icon' ? onClick : undefined}
-            />
-            {content}
-          </ExpansionCell>
-        )
-      }
-
-      const getCellProps = (value: any, row: any, rowIndex: number) => {
-        if (row[rowDetailMetaKey]) {
-          return {
-            style: {
-              '--cell-padding': '0',
-              overflow: 'hidden',
-              ...opts.detailCellStyle,
-            } as any,
+
+          const content = internals.safeRender(firstCol, row, rowIndex)
+
+          if (!hasDetail(row, rowIndex)) {
+            return <InlineFlexCell style={{ marginLeft: textOffset }}>{content}</InlineFlexCell>
           }
-        }
-
-        const prevProps = firstCol.getCellProps?.(value, row, rowIndex)
-
-        if (!hasDetail(row, rowIndex)) {
-          return prevProps
-        }
-
-        return mergeCellProps(prevProps, {
-          onClick(e) {
+
+          const rowKey = row[primaryKey]
+          const expanded = openKeySet.has(rowKey)
+          const onClick = (e: React.MouseEvent) => {
             if (opts.stopClickEventPropagation) {
               e.stopPropagation()
             }
-            toggle(row[primaryKey])
-          },
-          style: { cursor: 'pointer' },
-        })
-      }
+            toggle(rowKey)
+          }
+
+          const expandCls = expanded ? 'expanded' : 'collapsed'
+          return (
+            <ExpansionCell
+              className={cx('expansion-cell', expandCls)}
+              style={{ cursor: clickArea === 'content' ? 'pointer' : undefined }}
+              onClick={clickArea === 'content' ? onClick : undefined}
+            >
+              <icons.CaretRight
+                style={{
+                  cursor: clickArea === 'icon' ? 'pointer' : undefined,
+                  marginLeft: indents.iconIndent,
+                  marginRight: indents.iconGap,
+                }}
+                className={cx('expansion-icon', expandCls)}
+                onClick={clickArea === 'icon' ? onClick : undefined}
+              />
+              {content}
+            </ExpansionCell>
+          )
+        }
+
+        const getCellProps = (value: any, row: any, rowIndex: number) => {
+          if (row[rowDetailMetaKey]) {
+            return {
+              style: {
+                '--cell-padding': '0',
+                overflow: 'hidden',
+                position: 'relative',
+                zIndex: 21,
+                ...opts.detailCellStyle,
+              } as any,
+            }
+          }
+
+          const prevProps = firstCol.getCellProps?.(value, row, rowIndex)
+
+          if (!hasDetail(row, rowIndex)) {
+            return prevProps
+          }
+
+          return mergeCellProps(prevProps, {
+            onClick(e) {
+              if (opts.stopClickEventPropagation) {
+                e.stopPropagation()
+              }
+              toggle(row[primaryKey])
+            },
+            style: { cursor: 'pointer' },
+          })
+        }
 
-      return [
-        {
+        return {
           ...firstCol,
           title: (
             <div style={{ display: 'inline-block', marginLeft: textOffset }}>
               {internals.safeRenderHeader(firstCol)}
             </div>
           ),
           render,
-          getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps,
+          getCellProps: (value: any, row: any, rowIndex: number)=>{
+            if (row[rowDetailMetaKey] || clickArea === 'cell') {
+              return getCellProps(value, row, rowIndex);
+            }else{
+              return firstCol.getCellProps?.(value, row, rowIndex);
+            }
+          },
           getSpanRect(value: any, row: any, rowIndex: number) {
             if (row[rowDetailMetaKey]) {
               // detail 总是成一行
               return { top: rowIndex, bottom: rowIndex + 1, left: 0, right: columnFlatCount }
             }
-          },
-        },
-        ...others,
-      ]
+          }
+        } as ArtColumn
+      })
     }
   }
 }