diff --git a/packages/ali-react-table/src/pipeline/features/rowDetail.tsx b/packages/ali-react-table/src/pipeline/features/rowDetail.tsx index b86ae1e89..d1aef5ea5 100644 --- 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,79 +132,79 @@ 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 {content} - } + 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 ( - - - {content} - - ) - } - - 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 {content} } - } - - 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 ( + + + {content} + + ) + } + + 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: (
@@ -212,7 +212,6 @@ export function rowDetail(opts: RowDetailFeatureOptions = {}) {
), 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 index 571e18214..749762548 100644 --- 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 ( - - {content} - - ) - } - - 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 ( - - - {content} - - ) - } - - 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 ( + + {content} + + ) + } + + const onClick = (e: React.MouseEvent) => { if (stopClickEventPropagation) { e.stopPropagation() } toggle(rowKey) - }, - style: { cursor: 'pointer' }, - }) - } - - return [ - { + } + + const expandCls = expanded ? 'expanded' : 'collapsed' + return ( + + + {content} + + ) + } + + 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: ( {internals.safeRenderHeader(firstCol)} ), 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 index 9170a80e2..41ea1a419 100644 --- 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 new file mode 100644 index 000000000..7d4906720 --- /dev/null +++ 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 + ] + } +} \ No newline at end of file