fix: 当表头分组第一列就在组内时，树表格和带详情的功能失效

alibaba · May 10, 2022 · f5e0c84 · f5e0c84
1 parent 76fadfc
commit f5e0c84
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 147 deletions.
diff --git a/packages/ali-react-table/src/pipeline/features/rowDetail.tsx b/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'
 
@@ -100,7 +100,7 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
         onChangeOpenKeys([...openKeys, rowKey], rowKey, 'expand')
       }
     }
-
+    
     // 还原primaryKey
     const resetRow = (row:any)=>{
       let key = row[originKeySymbol];
@@ -132,87 +132,86 @@ 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(resetRow(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',
+                ...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);
@@ -225,10 +224,9 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
               // detail 总是成一行
               return { top: rowIndex, bottom: rowIndex + 1, left: 0, right: columnFlatCount }
             }
-          },
-        },
-        ...others,
-      ]
+          }
+        } as ArtColumn
+      })
     }
   }
 }
diff --git a/packages/ali-react-table/src/pipeline/features/treeMode.tsx b/packages/ali-react-table/src/pipeline/features/treeMode.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { ExpansionCell, icons, InlineFlexCell } from '../../common-views'
 import { ArtColumn } from '../../interfaces'
 import { internals } from '../../internals'
-import { isLeafNode as standardIsLeafNode, mergeCellProps } from '../../utils'
+import { isLeafNode as standardIsLeafNode, mergeCellProps, upDataFirstCol } from '../../utils'
 import { TablePipeline } from '../pipeline'
 
 export const treeMetaSymbol = Symbol('treeMetaSymbol')
@@ -110,91 +110,88 @@ export function treeMode(opts: TreeModeFeatureOptions = {}) {
       if (columns.length === 0) {
         return columns
       }
-      const [firstCol, ...others] = columns
-
-      const render = (value: any, record: any, recordIndex: number) => {
-        const content = internals.safeRender(firstCol, record, recordIndex)
-        if (record[treeMetaKey] == null) {
-          // 没有 treeMeta 信息的话，就返回原先的渲染结果
-          return content
-        }
-
-        const { rowKey, depth, isLeaf, expanded } = record[treeMetaKey]
-
-        const indent = iconIndent + depth * indentSize
-
-        if (isLeaf) {
-          return (
-            <InlineFlexCell className="expansion-cell leaf">
-              <span style={{ marginLeft: indent + iconWidth + iconGap }}>{content}</span>
-            </InlineFlexCell>
-          )
-        }
-
-        const onClick = (e: React.MouseEvent) => {
-          if (stopClickEventPropagation) {
-            e.stopPropagation()
+      // const [firstCol, ...others] = columns
+      return upDataFirstCol(columns, firstCol => {
+        const render = (value: any, record: any, recordIndex: number) => {
+          const content = internals.safeRender(firstCol, record, recordIndex)
+          if (record[treeMetaKey] == null) {
+            // 没有 treeMeta 信息的话，就返回原先的渲染结果
+            return content
           }
-          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
-              className={cx('expansion-icon', expandCls)}
-              style={{
-                cursor: clickArea === 'icon' ? 'pointer' : undefined,
-                marginLeft: indent,
-                marginRight: iconGap,
-              }}
-              onClick={clickArea === 'icon' ? onClick : undefined}
-            />
-            {content}
-          </ExpansionCell>
-        )
-      }
-
-      const getCellProps = (value: any, record: any, rowIndex: number) => {
-        const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex)
-        if (record[treeMetaKey] == null) {
-          // 没有 treeMeta 信息的话，就返回原先的 cellProps
-          return prevProps
-        }
-
-        const { isLeaf, rowKey } = record[treeMetaKey]
-        if (isLeaf) {
-          return prevProps
-        }
-
-        return mergeCellProps(prevProps, {
-          onClick(e) {
+
+          const { rowKey, depth, isLeaf, expanded } = record[treeMetaKey]
+
+          const indent = iconIndent + depth * indentSize
+
+          if (isLeaf) {
+            return (
+              <InlineFlexCell className="expansion-cell leaf">
+                <span style={{ marginLeft: indent + iconWidth + iconGap }}>{content}</span>
+              </InlineFlexCell>
+            )
+          }
+
+          const onClick = (e: React.MouseEvent) => {
             if (stopClickEventPropagation) {
               e.stopPropagation()
             }
             toggle(rowKey)
-          },
-          style: { cursor: 'pointer' },
-        })
-      }
-
-      return [
-        {
+          }
+
+          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
+                className={cx('expansion-icon', expandCls)}
+                style={{
+                  cursor: clickArea === 'icon' ? 'pointer' : undefined,
+                  marginLeft: indent,
+                  marginRight: iconGap,
+                }}
+                onClick={clickArea === 'icon' ? onClick : undefined}
+              />
+              {content}
+            </ExpansionCell>
+          )
+        }
+
+        const getCellProps = (value: any, record: any, rowIndex: number) => {
+          const prevProps = internals.safeGetCellProps(firstCol, record, rowIndex)
+          if (record[treeMetaKey] == null) {
+            // 没有 treeMeta 信息的话，就返回原先的 cellProps
+            return prevProps
+          }
+
+          const { isLeaf, rowKey } = record[treeMetaKey]
+          if (isLeaf) {
+            return prevProps
+          }
+
+          return mergeCellProps(prevProps, {
+            onClick(e) {
+              if (stopClickEventPropagation) {
+                e.stopPropagation()
+              }
+              toggle(rowKey)
+            },
+            style: { cursor: 'pointer' },
+          })
+        }
+        return {
           ...firstCol,
           title: (
             <span style={{ marginLeft: iconIndent + iconWidth + iconGap }}>{internals.safeRenderHeader(firstCol)}</span>
           ),
           render,
           getCellProps: clickArea === 'cell' ? getCellProps : firstCol.getCellProps,
-        },
-        ...others,
-      ]
+        }
+      })
     }
   }
 }
diff --git a/packages/ali-react-table/src/utils/index.tsx b/packages/ali-react-table/src/utils/index.tsx
@@ -12,3 +12,4 @@ export { default as proto } from './proto'
 export { default as makeRecursiveMapper } from './makeRecursiveMapper'
 export { default as smartCompare } from './smartCompare'
 export { default as traverseColumn } from './traverseColumn'
+export { default as upDataFirstCol } from './upDataFirstCol'
diff --git a/packages/ali-react-table/src/utils/upDataFirstCol.ts b/packages/ali-react-table/src/utils/upDataFirstCol.ts
@@ -0,0 +1,16 @@
+import { ArtColumn } from '../interfaces'
+/**
+ * 更新第一个叶子节点列配置
+ */
+export default function upDataFirstCol(columns: ArtColumn[], upFn:(firstCol:ArtColumn)=>ArtColumn):ArtColumn[]{
+  const [firstCol, ...others] = columns;
+  if(firstCol.children && firstCol.children.length){
+    firstCol.children = upDataFirstCol(firstCol.children, upFn)
+    return [...columns];
+  }else{
+    return [
+      upFn(firstCol),
+      ...others
+    ]
+  }
+}