Skip to content

Commit d4afdb4

Browse files
iamfaraniamfaran
committed
split down tableComp.tsx
1 parent 714e6cc commit d4afdb4

File tree

3 files changed

+298
-131
lines changed

3 files changed

+298
-131
lines changed

‎client/packages/lowcoder/src/comps/comps/tableLiteComp/parts/TableCellView.tsx‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
import React, { useMemo } from "react";
2+
import styled from "styled-components";
3+
import Skeleton from "antd/es/skeleton";
4+
import { SkeletonButtonProps } from "antd/es/skeleton/Button";
5+
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
6+
import { OB_ROW_ORI_INDEX } from "../tableUtils";
7+
import { TableColumnLinkStyleType, TableColumnStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
8+
import { RowColorViewType, RowHeightViewType } from "../tableTypes";
9+
import { CellColorViewType } from "../column/tableColumnComp";
10+
11+
interface TableTdProps {
12+
$background: string;
13+
$style: TableColumnStyleType & { rowHeight?: string };
14+
$defaultThemeDetail: ThemeDetail;
15+
$linkStyle?: TableColumnLinkStyleType;
16+
$tableSize?: string;
17+
$autoHeight?: boolean;
18+
$customAlign?: 'left' | 'center' | 'right';
19+
}
20+
21+
const TableTd = styled.td<TableTdProps>`
22+
.ant-table-row-expand-icon,
23+
.ant-table-row-indent {
24+
display: initial;
25+
}
26+
&.ant-table-row-expand-icon-cell {
27+
background: ${(props) => props.$background};
28+
border-color: ${(props) => props.$style.border};
29+
}
30+
background: ${(props) => props.$background} !important;
31+
border-color: ${(props) => props.$style.border} !important;
32+
border-radius: ${(props) => props.$style.radius};
33+
padding: 0 !important;
34+
text-align: ${(props) => props.$customAlign || 'left'} !important;
35+
36+
> div {
37+
margin: ${(props) => props.$style.margin};
38+
color: ${(props) => props.$style.text};
39+
font-weight: ${(props) => props.$style.textWeight};
40+
font-family: ${(props) => props.$style.fontFamily};
41+
overflow: hidden;
42+
display: flex;
43+
justify-content: ${(props) => props.$customAlign === 'center' ? 'center' : props.$customAlign === 'right' ? 'flex-end' : 'flex-start'};
44+
align-items: center;
45+
text-align: ${(props) => props.$customAlign || 'left'};
46+
box-sizing: border-box;
47+
${(props) => props.$tableSize === 'small' && `
48+
padding: 1px 8px;
49+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
50+
font-style:${props.$style.fontStyle} !important;
51+
min-height: ${props.$style.rowHeight || '14px'};
52+
line-height: 20px;
53+
${!props.$autoHeight && `
54+
overflow-y: auto;
55+
max-height: ${props.$style.rowHeight || '28px'};
56+
`};
57+
`};
58+
${(props) => props.$tableSize === 'middle' && `
59+
padding: 8px 8px;
60+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
61+
font-style:${props.$style.fontStyle} !important;
62+
min-height: ${props.$style.rowHeight || '24px'};
63+
line-height: 24px;
64+
${!props.$autoHeight && `
65+
overflow-y: auto;
66+
max-height: ${props.$style.rowHeight || '48px'};
67+
`};
68+
`};
69+
${(props) => props.$tableSize === 'large' && `
70+
padding: 16px 16px;
71+
font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
72+
font-style:${props.$style.fontStyle} !important;
73+
min-height: ${props.$style.rowHeight || '48px'};
74+
${!props.$autoHeight && `
75+
overflow-y: auto;
76+
max-height: ${props.$style.rowHeight || '96px'};
77+
`};
78+
`};
79+
80+
> .ant-badge > .ant-badge-status-text,
81+
> div > .markdown-body {
82+
color: ${(props) => props.$style.text};
83+
}
84+
85+
> div > svg g {
86+
stroke: ${(props) => props.$style.text};
87+
}
88+
89+
> a,
90+
> div a {
91+
color: ${(props) => props.$linkStyle?.text};
92+
93+
&:hover {
94+
color: ${(props) => props.$linkStyle?.hoverText};
95+
}
96+
97+
&:active {
98+
color: ${(props) => props.$linkStyle?.activeText};
99+
}
100+
}
101+
}
102+
`;
103+
104+
const TableTdLoading = styled(Skeleton.Button)<SkeletonButtonProps & { $tableSize?: string }>`
105+
width: 90% !important;
106+
display: table !important;
107+
108+
.ant-skeleton-button {
109+
min-width: auto !important;
110+
display: block !important;
111+
${(props) => props.$tableSize === 'small' && `
112+
height: 20px !important;
113+
`}
114+
${(props) => props.$tableSize === 'middle' && `
115+
height: 24px !important;
116+
`}
117+
${(props) => props.$tableSize === 'large' && `
118+
height: 28px !important;
119+
`}
120+
}
121+
`;
122+
123+
const TableCellView = React.memo((props: {
124+
record: any;
125+
title: string;
126+
rowColorFn: RowColorViewType;
127+
rowHeightFn: RowHeightViewType;
128+
cellColorFn: CellColorViewType;
129+
rowIndex: number;
130+
children: any;
131+
columnsStyle: TableColumnStyleType;
132+
columnStyle: TableColumnStyleType;
133+
linkStyle: TableColumnLinkStyleType;
134+
tableSize?: string;
135+
autoHeight?: boolean;
136+
loading?: boolean;
137+
customAlign?: 'left' | 'center' | 'right';
138+
}) => {
139+
const {
140+
record,
141+
title,
142+
rowIndex,
143+
rowColorFn,
144+
rowHeightFn,
145+
cellColorFn,
146+
children,
147+
columnsStyle,
148+
columnStyle,
149+
linkStyle,
150+
tableSize,
151+
autoHeight,
152+
loading,
153+
customAlign,
154+
...restProps
155+
} = props;
156+
157+
const style = useMemo(() => {
158+
if (!record) return null;
159+
const rowColor = rowColorFn({
160+
currentRow: record,
161+
currentIndex: rowIndex,
162+
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
163+
columnTitle: title,
164+
});
165+
const rowHeight = rowHeightFn({
166+
currentRow: record,
167+
currentIndex: rowIndex,
168+
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
169+
columnTitle: title,
170+
});
171+
const cellColor = cellColorFn({
172+
currentCell: record[title],
173+
currentRow: record,
174+
});
175+
176+
return {
177+
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
178+
margin: columnStyle.margin || columnsStyle.margin,
179+
text: columnStyle.text || columnsStyle.text,
180+
border: columnStyle.border || columnsStyle.border,
181+
radius: columnStyle.radius || columnsStyle.radius,
182+
textSize: columnStyle.textSize || columnsStyle.textSize,
183+
textWeight: columnsStyle.textWeight || columnStyle.textWeight,
184+
fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,
185+
fontStyle: columnsStyle.fontStyle || columnStyle.fontStyle,
186+
rowHeight: rowHeight,
187+
} as TableColumnStyleType & { rowHeight?: string };
188+
}, [record, rowIndex, title, rowColorFn, rowHeightFn, cellColorFn, columnStyle, columnsStyle]);
189+
190+
if (!record) {
191+
return <td {...restProps}>{children}</td> as any;
192+
}
193+
194+
const { background } = style!;
195+
196+
return (
197+
<TableTd
198+
{...restProps}
199+
$background={background}
200+
$style={style!}
201+
$defaultThemeDetail={defaultTheme}
202+
$linkStyle={linkStyle}
203+
$tableSize={tableSize}
204+
$autoHeight={autoHeight}
205+
$customAlign={customAlign}
206+
>
207+
{loading ? <TableTdLoading block active $tableSize={tableSize} /> : children}
208+
</TableTd>
209+
);
210+
});
211+
212+
export default TableCellView;

0 commit comments

Comments
 (0)