Skip to content

Commit

Permalink
fix(Table): 修复 table fixed 不能对表头分组使用 (#714)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cuilanxin
cuilanxin committed Mar 25, 2022
1 parent d6757ee commit 09be2f3
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 29 deletions.
20 changes: 17 additions & 3 deletions packages/react-table/src/TableTr.tsx
View file
@@ -1,12 +1,13 @@
import React, { useMemo, useState, useEffect } from 'react';
import Icon from '@uiw/react-icon';
import { LocationWidth, TableProps } from './';
import { LocationWidth, TableColumns, TableProps } from './';
import './style/index.less';
import { noop } from '@uiw/utils';
import { locationFixed } from './util';

interface TableTrProps<T> {
rowKey?: keyof T;
header: TableColumns<T>[][];
data: T[];
keys: TableProps['columns'];
render: { [key: string]: any };
Expand All @@ -19,7 +20,7 @@ interface TableTrProps<T> {
// 层级
hierarchy: number;
childrenColumnName: string;
locationWidth: { [key: number]: LocationWidth };
locationWidth: { [key: string]: LocationWidth };
}

export default function TableTr<T extends { [key: string]: any }>(props: TableTrProps<T>) {
Expand All @@ -36,6 +37,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
indentSize,
childrenColumnName,
locationWidth,
header,
} = props;
const [isOpacity, setIsOpacity] = useState(false);
const [childrenIndex, setChildrenIndex] = useState(0);
Expand Down Expand Up @@ -65,6 +67,14 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
);
};
}, [expandIndex]);
const getIndex = (key: string) => {
let j = 0;
const i = header.findIndex((it) => {
j = it.findIndex((item) => item.key === key);
return j > -1;
});
return `${i}${j}`;
};
if (!Array.isArray(data) || !data.length) {
return null;
}
Expand Down Expand Up @@ -113,7 +123,11 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
return (
<td
{...objs}
style={{ ...locationFixed(keyName.fixed!, locationWidth, colNum) }}
style={
keyName.fixed
? { ...locationFixed(keyName.fixed!, locationWidth, `${getIndex(keyName.key || 'undefined')}`) }
: {}
}
children={
<span className={ellipsis && ellipsis[keyName.key!] ? `${prefixCls}-ellipsis` : undefined}>
{objs.children}
Expand Down
15 changes: 10 additions & 5 deletions packages/react-table/src/ThComponent.tsx
View file
Expand Up @@ -10,13 +10,18 @@ interface ThComponentProps<T> {
titleNode: JSX.Element;
onCellHead: TableProps<T>['onCellHead'];
rowNum: number;
locationWidth: { [key: number]: LocationWidth };
updateLocation: (params: LocationWidth, index: number) => void;
locationWidth: { [key: string]: LocationWidth };
updateLocation: (params: LocationWidth, index: string, key: string, colSpan?: number) => void;
}
export default class ThComponent<T> extends Component<ThComponentProps<T>> {
componentDidMount() {
const rect = ReactDOM.findDOMNode(this);
this.props.updateLocation({ width: (rect as Element).getBoundingClientRect().width }, this.props.colNum);
const rect = ReactDOM.findDOMNode(this) as Element;
this.props.updateLocation(
{ width: rect.getBoundingClientRect().width },
`${this.props.rowNum}${this.props.colNum}`,
this.props.item.key!,
this.props.item.colSpan,
);
}

render() {
Expand All @@ -34,7 +39,7 @@ export default class ThComponent<T> extends Component<ThComponentProps<T>> {
<th
key={colNum}
{...thProps}
style={{ ...thProps.style, ...locationFixed(fixed, locationWidth, colNum) }}
style={{ ...thProps.style, ...locationFixed(fixed, locationWidth, `${rowNum}${colNum}`) }}
className={`${prefixCls}-tr-children-${item?.align || 'left'} ${item.className || ''} ${cls}`}
onClick={(evn) => onCellHead?.(item, colNum, rowNum!, evn)}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/Thead.tsx
View file
Expand Up @@ -9,8 +9,8 @@ export interface TheadProps<T extends { [key: string]: V }, V = any> extends IPr
onCellHead?: TableProps<T, V>['onCellHead'];
align?: TableColumns['align'];
className?: TableColumns['className'];
locationWidth?: { [key: number]: LocationWidth };
updateLocation?: (params: LocationWidth, index: number) => void;
locationWidth?: { [key: string]: LocationWidth };
updateLocation?: (params: LocationWidth, index: string, key: string, colSpan?: number) => void;
}

export default function TheadComponent<T extends { [key: string]: V }, V>(
Expand Down
73 changes: 56 additions & 17 deletions packages/react-table/src/index.tsx
View file
Expand Up @@ -74,12 +74,15 @@ export interface LocationWidth {
left?: number;
right?: number;
width: number;
key?: string;
colSpan?: number;
}
export interface ICellOptions {
rowNum: number;
colNum: number;
keyName: string;
}

export default function Table<T extends { [key: string]: V }, V>(props: TableProps<T, V> = {}) {
const {
prefixCls = 'w-table',
Expand All @@ -99,35 +102,70 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
...other
} = props;
const [expandIndex, setExpandIndex] = useState<Array<T[keyof T] | number>>([]);
const [locationWidth, setLocationWidth] = useState<{ [key: number]: LocationWidth }>({});
const finalLocationWidth = useRef<{ [key: number]: LocationWidth }>({});
const updateLocation = (params: LocationWidth, index: number) => {
const [locationWidth, setLocationWidth] = useState<{ [key: string]: LocationWidth }>({});
const finalLocationWidth = useRef<{ [key: string]: LocationWidth }>({});
const updateLocation = (params: LocationWidth, index: string, key: string, colSpan: number = 0) => {
finalLocationWidth.current = {
...finalLocationWidth.current,
[index]: {
...finalLocationWidth.current[index],
...params,
key: key,
colSpan,
},
};
if (index === columns.length - 1) {
if (index === `${header.length - 1}${header[header.length - 1].length - 1}`) {
setLocationWidth(computed());
}
};
const computed = () => {
let left = 0,
right = 0;
for (let index = 0; index < columns.length; index++) {
if (finalLocationWidth.current[index]) {
finalLocationWidth.current[index].left = left;
left = finalLocationWidth.current[index].width + left;
const deepClumnsLocation = (
params: Array<TableColumns<T> | number>,
fistIndex: number,
leftOrRight: 'left' | 'right',
isReverse: boolean,
) => {
let initialValue = 0,
lastIndex = isReverse ? 0 : params.length - 1,
deepParams: Array<TableColumns<T> | number> = [];
params.forEach(() => {
let abs = Math.abs(lastIndex);
const i = `${fistIndex}${abs}`;
if (isReverse) {
lastIndex += 1;
} else {
lastIndex -= 1;
}
}
for (let index = columns.length - 1; index > -1; index--) {
if (finalLocationWidth.current[index]) {
finalLocationWidth.current[index].right = right;
right = finalLocationWidth.current[index].width + right;
if (typeof params[abs] === 'number') {
initialValue = (params[abs] as number) + initialValue;
deepParams.push(params[abs]);
return;
}
}
if (finalLocationWidth.current[i]) {
finalLocationWidth.current[i][leftOrRight] = initialValue;
initialValue = finalLocationWidth.current[i].width + initialValue;
}
if (Array.isArray((params[abs] as TableColumns<T>).children)) {
deepParams.push(...(params[abs] as TableColumns<T>).children!);
return;
}
if (finalLocationWidth.current[i]) {
deepParams.push(finalLocationWidth.current[i].width);
} else {
const parent = header.find((it) => it.find((it) => it.key === (params[abs] as TableColumns<T>).key)) || [];
const sub = parent.findIndex((it) => it.key === (params[abs] as TableColumns<T>).key);
if (finalLocationWidth.current[`${i[0]}${sub}`]) {
// 合并单元格
deepParams.push(finalLocationWidth.current[`${i[0]}${sub}`].width);
}
}
});
if (deepParams.filter((it) => typeof it !== 'number').length)
deepClumnsLocation(deepParams, fistIndex + 1, leftOrRight, isReverse);
};

const computed = () => {
deepClumnsLocation(columns, 0, 'left', true);
deepClumnsLocation(columns, 0, 'right', false);
return finalLocationWidth.current;
};
useEffect(() => {
Expand Down Expand Up @@ -277,6 +315,7 @@ export default function Table<T extends { [key: string]: V }, V>(props: TablePro
rowKey={rowKey}
locationWidth={locationWidth}
data={data}
header={header}
keys={self.keys}
render={render}
ellipsis={ellipsis}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/util.ts
View file
Expand Up @@ -131,8 +131,8 @@ export function getAllColumnsKeys<T>(data: TableColumns<T>[], keys: TableColumns

export function locationFixed(
fixed: boolean | 'left' | 'right',
location: { [key: number]: LocationWidth },
index: number,
location: { [key: string]: LocationWidth },
index: string,
): React.CSSProperties {
if (!fixed) return {};
if (fixed === 'right') return { right: location[index]?.right };
Expand Down

0 comments on commit 09be2f3

Please sign in to comment.