From 3a565ea474af3f2129317250f053799ef6c9f193 Mon Sep 17 00:00:00 2001 From: zombiej Date: Thu, 9 Jan 2020 10:56:41 +0800 Subject: [PATCH 1/2] fix: Update key calucation logic --- examples/debug.tsx | 160 ++++----------------------------------- src/Body/BodyRow.tsx | 5 +- src/Header/HeaderRow.tsx | 5 +- src/utils/valueUtil.tsx | 21 +++-- 4 files changed, 38 insertions(+), 153 deletions(-) diff --git a/examples/debug.tsx b/examples/debug.tsx index 5a44f8461..75d81651d 100644 --- a/examples/debug.tsx +++ b/examples/debug.tsx @@ -1,162 +1,34 @@ /* eslint-disable no-console,func-names,react/no-multi-comp */ import React from 'react'; -import Table, { Column, ColumnGroup } from '../src'; +import Table from '../src'; import '../assets/index.less'; import { ColumnsType } from '../src/interface'; -interface RecordType { - key: React.Key; - id: number; - date: number; -} - -let UUID = 0; - -function renderDate(timestamp: number, record: RecordType) { - return ( - - {record.id - .toString(36) - .substr(4) - .toUpperCase()}{' '} - - {new Date(timestamp).toString()} - - ); -} +const columns: ColumnsType = [ + { dataIndex: 'a', title: 'a' }, + { dataIndex: 'b', title: 'b' }, + { dataIndex: 'c', title: 'c', fixed: 'right', width: 200 }, +]; const Demo = () => { - const [data, setData] = React.useState([]); - - function offsetIndex(record: RecordType, offset: number) { - const index = data.indexOf(record); - const targetIndex = index + offset; - const target = data[targetIndex]; - const newData = [...data]; - newData[index] = target; - newData[targetIndex] = record; - - setData(newData); - } - - const columns: ColumnsType = [ - { title: 'ID', key: 'id', dataIndex: 'id', width: 100 }, - { - title: 'Date', - dataIndex: 'date', - width: 200, - render: renderDate, - }, - { - title: 'Merged Title', - children: [ - { - title: '0 - ID', - dataIndex: 'id', - }, - { - title: '1 - Merge Date', - children: [ - { - title: '1 - 0 - ID', - dataIndex: 'id', - }, - { - title: '1 - 1 - Date', - dataIndex: 'date', - }, - ], - }, - ], - }, - { - title: 'Operations', - render(_: null, record: RecordType, index: number) { - return ( -
- - -
- ); - }, - }, - ]; - - const addData = () => { - setData(originData => { - UUID += 1000 + Math.floor(Math.random() * 100000); - - const id = Date.now() + UUID; - - return [ - ...originData, - { - key: id, - id, - date: id, - }, - ]; - }); - }; - - React.useEffect(() => { - for (let i = 0; i < 3; i += 1) { - addData(); - } - }, []); - - const [, forceUpdate] = React.useState(); + const [showB, setShowB] = React.useState(true); + const myColumns = showB ? columns : columns.filter(({ title }) => title !== 'b'); return (
-

Debug Usage, remove after stable released

- - columns={columns} data={data} /> - -
- - data={data}> - - - - - - - -
- - data={data}> - - - - - - /> - + + scroll={{ x: 2000 }} + tableLayout="auto" + columns={myColumns} + data={[{ a: 1, b: 2, c: 3, key: 1 }]} + />
); diff --git a/src/Body/BodyRow.tsx b/src/Body/BodyRow.tsx index 8b2a98725..946685c07 100644 --- a/src/Body/BodyRow.tsx +++ b/src/Body/BodyRow.tsx @@ -4,7 +4,7 @@ import ResizeObserver from 'rc-resize-observer'; import Cell from '../Cell'; import TableContext from '../context/TableContext'; import BodyContext from '../context/BodyContext'; -import { getColumnKey } from '../utils/valueUtil'; +import { getColumnsKey } from '../utils/valueUtil'; import { ColumnType, StickyOffsets, @@ -114,6 +114,7 @@ function BodyRow(props: BodyRowP computeRowClassName = rowClassName(record, index, indent); } + const columnsKey = getColumnsKey(flattenColumns); const baseRowNode = ( (props: BodyRowP {flattenColumns.map((column: ColumnType, colIndex) => { const { render, dataIndex, className: columnClassName } = column; - const key = getColumnKey(column, colIndex); + const key = columnsKey[colIndex]; const fixedInfo = fixedInfoList[colIndex]; // ============= Used for nest expandable ============= diff --git a/src/Header/HeaderRow.tsx b/src/Header/HeaderRow.tsx index 5605847b6..65f747baf 100644 --- a/src/Header/HeaderRow.tsx +++ b/src/Header/HeaderRow.tsx @@ -11,6 +11,7 @@ import { import TableContext from '../context/TableContext'; import { getCellFixedInfo } from '../utils/fixUtil'; import ResizeContext from '../context/ResizeContext'; +import { getColumnsKey } from '../utils/valueUtil'; export interface RowProps { cells: CellType[]; @@ -39,6 +40,8 @@ function HeaderRow({ rowProps = onHeaderRow(cells.map(cell => cell.column), index); } + const columnsKey = getColumnsKey(cells.map(cell => cell.column)); + return ( {cells.map((cell: CellType, cellIndex) => { @@ -62,7 +65,7 @@ function HeaderRow({ align={column.align} component={CellComponent} prefixCls={prefixCls} - key={cellIndex} + key={columnsKey[cellIndex]} {...fixedInfo} additionalProps={additionalProps} /> diff --git a/src/utils/valueUtil.tsx b/src/utils/valueUtil.tsx index 28557358e..0a68e3c67 100644 --- a/src/utils/valueUtil.tsx +++ b/src/utils/valueUtil.tsx @@ -40,14 +40,23 @@ interface GetColumnKeyColumn { dataIndex?: DataIndex; } -export function getColumnKey({ key, dataIndex }: GetColumnKeyColumn, index: number) { - if (key) { - return key; - } +export function getColumnsKey(columns: GetColumnKeyColumn[]) { + const columnKeys: React.Key[] = []; + const keys: Record = {}; + + columns.forEach(column => { + const { key, dataIndex } = column || {}; - const prefix = toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX; + let mergedKey = key || toArray(dataIndex).join('-') || INTERNAL_KEY_PREFIX; + while (keys[mergedKey]) { + mergedKey = `${mergedKey}_next`; + } + keys[mergedKey] = true; + + columnKeys.push(mergedKey); + }); - return `${prefix}_${index}`; + return columnKeys; } export function mergeObject( From 09d64c13d5a2c74f558982a6c5f10e0e1d2a353c Mon Sep 17 00:00:00 2001 From: zombiej Date: Thu, 9 Jan 2020 11:00:43 +0800 Subject: [PATCH 2/2] add column count as useMemo of sticky offset deps --- src/hooks/useStickyOffsets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useStickyOffsets.ts b/src/hooks/useStickyOffsets.ts index 5e723f56d..8b94f431e 100644 --- a/src/hooks/useStickyOffsets.ts +++ b/src/hooks/useStickyOffsets.ts @@ -26,7 +26,7 @@ function useStickyOffsets(colWidths: number[], columCount: number) { left: leftOffsets, right: rightOffsets, }; - }, [colWidths]); + }, [colWidths, columCount]); return stickyOffsets; }