Skip to content

Commit 5258759

Browse files
raheeliftikhar5raheeliftikhar5
committed
cleanup table summary row
1 parent 94023b4 commit 5258759

File tree

5 files changed

+78
-149
lines changed

5 files changed

+78
-149
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/column/tableSummaryColumnComp.tsx

Lines changed: 15 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,149 +1,55 @@
1-
import { BoolControl } from "comps/controls/boolControl";
2-
import { ColorOrBoolCodeControl, NumberControl, RadiusControl, StringControl } from "comps/controls/codeControl";
3-
import { dropdownControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
4-
import { MultiCompBuilder, stateComp, valueComp, withContext, withDefault } from "comps/generators";
1+
import { RadiusControl, StringControl } from "comps/controls/codeControl";
2+
import { HorizontalAlignmentControl } from "comps/controls/dropdownControl";
3+
import { MultiCompBuilder, valueComp, withDefault } from "comps/generators";
54
import { withSelectedMultiContext } from "comps/generators/withSelectedMultiContext";
6-
import { genRandomKey } from "comps/utils/idGenerator";
75
import { trans } from "i18n";
86
import _ from "lodash";
97
import {
108
changeChildAction,
11-
changeValueAction,
129
CompAction,
13-
CompActionTypes,
1410
ConstructorToComp,
15-
ConstructorToDataType,
16-
ConstructorToNodeType,
17-
ConstructorToView,
1811
deferAction,
1912
fromRecord,
20-
multiChangeAction,
2113
withFunction,
2214
wrapChildAction,
2315
} from "lowcoder-core";
24-
import { AlignClose, AlignLeft, AlignRight, IconRadius, BorderWidthIcon, TextSizeIcon, FontFamilyIcon, TextWeightIcon, ImageCompIcon, controlItem, Dropdown, OptionType } from "lowcoder-design";
25-
import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
16+
import { IconRadius, TextSizeIcon, FontFamilyIcon, TextWeightIcon, controlItem } from "lowcoder-design";
17+
import { ColumnTypeComp } from "./columnTypeComp";
2618
import { ColorControl } from "comps/controls/colorControl";
27-
import { JSONValue } from "util/jsonTypes";
2819
import styled from "styled-components";
2920
import { TextOverflowControl } from "comps/controls/textOverflowControl";
3021
import { default as Divider } from "antd/es/divider";
31-
import { ColumnValueTooltip } from "./simpleColumnTypeComps";
3222
export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
3323
export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
3424

35-
const columnWidthOptions = [
36-
{
37-
label: trans("table.auto"),
38-
value: "auto",
39-
},
40-
{
41-
label: trans("table.fixed"),
42-
value: "fixed",
43-
},
44-
] as const;
45-
46-
const columnFixOptions = [
47-
{
48-
label: <AlignLeft />,
49-
value: "left",
50-
},
51-
{
52-
label: <AlignClose />,
53-
value: "close",
54-
},
55-
{
56-
label: <AlignRight />,
57-
value: "right",
58-
},
59-
] as const;
60-
61-
const cellColorLabel = trans("table.cellColor");
62-
const CellColorTempComp = withContext(
63-
new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
64-
.setPropertyViewFn((children) =>
65-
children.color.propertyView({
66-
label: cellColorLabel,
67-
tooltip: trans("table.cellColorDesc"),
68-
})
69-
)
70-
.build(),
71-
["currentCell", "currentRow"] as const
72-
);
73-
74-
// @ts-ignore
75-
export class CellColorComp extends CellColorTempComp {
76-
override getPropertyView() {
77-
return controlItem({ filterText: cellColorLabel }, super.getPropertyView());
78-
}
79-
}
80-
81-
// fixme, should be infer from RowColorComp, but withContext type incorrect
82-
export type CellColorViewType = (param: {
83-
currentRow: any;
84-
currentCell: JSONValue | undefined; //number | string;
85-
}) => string;
86-
87-
const cellTooltipLabel = trans("table.columnTooltip");
88-
const CellTooltipTempComp = withContext(
89-
new MultiCompBuilder({ tooltip: StringControl }, (props) => props.tooltip)
90-
.setPropertyViewFn((children) =>
91-
children.tooltip.propertyView({
92-
label: cellTooltipLabel,
93-
tooltip: ColumnValueTooltip,
94-
})
95-
)
96-
.build(),
97-
["currentCell", "currentRow", "currentIndex"] as const
98-
);
99-
100-
// @ts-ignore
101-
export class CellTooltipComp extends CellTooltipTempComp {
102-
override getPropertyView() {
103-
return controlItem({ filterText: cellTooltipLabel }, super.getPropertyView());
104-
}
105-
}
106-
107-
// fixme, should be infer from RowColorComp, but withContext type incorrect
108-
export type CellTooltipViewType = (param: {
109-
currentRow: any;
110-
currentCell: JSONValue | undefined; //number | string;
111-
}) => string;
112-
113-
11425
export const columnChildrenMap = {
115-
cellTooltip: CellTooltipComp,
26+
cellTooltip: StringControl,
11627
// a custom column or a data column
11728
isCustom: valueComp<boolean>(false),
11829
// If it is a data column, it must be the name of the column and cannot be duplicated as a react key
11930
dataIndex: valueComp<string>(""),
120-
hide: BoolControl,
12131
render: RenderComp,
12232
align: HorizontalAlignmentControl,
123-
fixed: dropdownControl(columnFixOptions, "close"),
12433
background: withDefault(ColorControl, ""),
12534
margin: withDefault(RadiusControl, ""),
12635
text: withDefault(ColorControl, ""),
12736
border: withDefault(ColorControl, ""),
128-
borderWidth: withDefault(RadiusControl, ""),
12937
radius: withDefault(RadiusControl, ""),
13038
textSize: withDefault(RadiusControl, ""),
13139
textWeight: withDefault(StringControl, "normal"),
13240
fontFamily: withDefault(StringControl, "sans-serif"),
13341
fontStyle: withDefault(StringControl, 'normal'),
134-
cellColor: CellColorComp,
42+
cellColor: StringControl,
13543
textOverflow: withDefault(TextOverflowControl, "ellipsis"),
13644
linkColor: withDefault(ColorControl, "#3377ff"),
13745
linkHoverColor: withDefault(ColorControl, ""),
13846
linkActiveColor: withDefault(ColorControl, ""),
13947
};
14048

14149
const StyledBorderRadiusIcon = styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
142-
const StyledBorderIcon = styled(BorderWidthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14350
const StyledTextSizeIcon = styled(TextSizeIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14451
const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14552
const StyledTextWeightIcon = styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
146-
const StyledBackgroundImageIcon = styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
14753

14854
/**
14955
* export for test.
@@ -159,28 +65,7 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
15965

16066
export class SummaryColumnComp extends ColumnInitComp {
16167
override reduce(action: CompAction) {
162-
let comp = super.reduce(action);
163-
if (action.type === CompActionTypes.UPDATE_NODES_V2) {
164-
comp = comp.setChild(
165-
"cellColor",
166-
comp.children.cellColor.reduce(
167-
CellColorComp.changeContextDataAction({
168-
currentCell: undefined,
169-
currentRow: {},
170-
})
171-
)
172-
);
173-
comp = comp.setChild(
174-
"cellTooltip",
175-
comp.children.cellTooltip.reduce(
176-
CellTooltipComp.changeContextDataAction({
177-
currentCell: undefined,
178-
currentRow: {},
179-
currentIndex: 0,
180-
})
181-
)
182-
);
183-
}
68+
const comp = super.reduce(action);
18469
return comp;
18570
}
18671

@@ -218,20 +103,14 @@ export class SummaryColumnComp extends ColumnInitComp {
218103

219104
return (
220105
<>
221-
{this.children.cellTooltip.getPropertyView()}
222-
{/* FIXME: cast type currently, return type of withContext should be corrected later */}
223-
{this.children.render.getPropertyView()}
224-
{this.children.hide.propertyView({
225-
label: trans("prop.hide"),
106+
{this.children.cellTooltip.propertyView({
107+
label: trans("table.columnTooltip"),
226108
})}
109+
{this.children.render.getPropertyView()}
227110
{this.children.align.propertyView({
228111
label: trans("table.align"),
229112
radioButton: true,
230113
})}
231-
{this.children.fixed.propertyView({
232-
label: trans("table.fixedColumn"),
233-
radioButton: true,
234-
})}
235114
{(columnType === 'link' || columnType === 'links') && (
236115
<>
237116
<Divider style={{ margin: '12px 0' }} />
@@ -266,11 +145,6 @@ export class SummaryColumnComp extends ColumnInitComp {
266145
{this.children.border.propertyView({
267146
label: trans('style.border')
268147
})}
269-
{this.children.borderWidth.propertyView({
270-
label: trans('style.borderWidth'),
271-
preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
272-
placeholder: '1px',
273-
})}
274148
{this.children.radius.propertyView({
275149
label: trans('style.borderRadius'),
276150
preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
@@ -296,8 +170,10 @@ export class SummaryColumnComp extends ColumnInitComp {
296170
preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
297171
placeholder: 'normal'
298172
})}
299-
{this.children.textOverflow.getPropertyView()}
300-
{this.children.cellColor.getPropertyView()}
173+
{/* {this.children.textOverflow.getPropertyView()} */}
174+
{this.children.cellColor.propertyView({
175+
label: trans("table.cellColor"),
176+
})}
301177
</>
302178
);
303179
}

‎client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -496,13 +496,12 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
496496

497497
<Section name={"Summary"}>
498498
{comp.children.showSummary.propertyView({
499-
label: "Show Summary Row"
499+
label: trans("table.showSummary")
500500
})}
501501
{comp.children.summaryRows.propertyView({
502-
label: "Summary Rows",
502+
label: trans("table.totalSummaryRows"),
503503
radioButton: true,
504504
})}
505-
{/* {comp.children.summary.getView().showSummary && summaryPropertyView(comp.children.summary)} */}
506505
</Section>
507506

508507
<Section name={trans("prop.toolbar")}>

‎client/packages/lowcoder/src/comps/comps/tableComp/tableSummaryComp.tsx

Lines changed: 55 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { ThemeDetail } from "api/commonSettingApi";
22
import { ColumnComp } from "comps/comps/tableComp/column/tableColumnComp";
3-
import { TableColumnStyleType, TableSummaryRowStyleType } from "comps/controls/styleControlConstants";
3+
import { TableColumnLinkStyleType, TableColumnStyleType, TableSummaryRowStyleType } from "comps/controls/styleControlConstants";
44
import styled from "styled-components";
55
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
66
import Table from "antd/es/table";
7+
import { ReactNode } from "react";
8+
import Tooltip from "antd/es/tooltip";
79

810
const TableSummaryRow = styled(Table.Summary.Row)`
911
td:last-child {
@@ -14,7 +16,7 @@ const TableSummaryRow = styled(Table.Summary.Row)`
1416
const TableSummarCell = styled(Table.Summary.Cell)<{
1517
$style: TableSummaryRowStyleType;
1618
$defaultThemeDetail: ThemeDetail;
17-
// $linkStyle?: TableColumnLinkStyleType;
19+
$linkStyle?: TableColumnLinkStyleType;
1820
$tableSize?: string;
1921
$autoHeight?: boolean;
2022
}>`
@@ -72,36 +74,73 @@ const TableSummarCell = styled(Table.Summary.Cell)<{
7274
> div > svg g {
7375
stroke: ${(props) => props.$style.text};
7476
}
77+
78+
> a,
79+
> div a {
80+
color: ${(props) => props.$linkStyle?.text};
81+
82+
&:hover {
83+
color: ${(props) => props.$linkStyle?.hoverText};
84+
}
85+
86+
&:active {
87+
color: ${(props) => props.$linkStyle?.activeText}};
88+
}
89+
}
7590
}
7691
`;
7792

93+
const CellWrapper = ({
94+
children,
95+
tooltipTitle,
96+
}: {
97+
children: ReactNode,
98+
tooltipTitle?: string,
99+
}) => {
100+
if (tooltipTitle) {
101+
return (
102+
<Tooltip title={tooltipTitle} placement="topLeft">
103+
{children}
104+
</Tooltip>
105+
)
106+
}
107+
return (
108+
<>{children}</>
109+
)
110+
};
111+
78112
function TableSummaryCellView(props: {
79113
index: number;
80114
key: string;
81115
children: any;
116+
align?: any;
82117
rowStyle: TableSummaryRowStyleType;
83118
columnStyle: TableColumnStyleType;
119+
linkStyle: TableColumnLinkStyleType;
84120
tableSize?: string;
85121
autoHeight?: boolean;
122+
cellColor: string;
123+
cellTooltip: string;
86124
}) {
87125
const {
88126
children,
89127
rowStyle,
90128
columnStyle,
91129
tableSize,
92130
autoHeight,
131+
cellColor,
132+
cellTooltip,
93133
...restProps
94134
} = props;
95135

96136
const style = {
97-
background: columnStyle.background || rowStyle.background,
137+
background: cellColor || columnStyle.background || rowStyle.background,
98138
margin: columnStyle.margin || rowStyle.margin,
99139
text: columnStyle.text || rowStyle.text,
100140
border: columnStyle.border || rowStyle.border,
101141
borderWidth: rowStyle.borderWidth,
102142
borderStyle: rowStyle.borderStyle,
103143
radius: columnStyle.radius || rowStyle.radius,
104-
// borderWidth: columnStyle.borderWidth || rowStyle.borderWidth,
105144
textSize: columnStyle.textSize || rowStyle.textSize,
106145
textWeight: rowStyle.textWeight || columnStyle.textWeight,
107146
fontFamily: rowStyle.fontFamily || columnStyle.fontFamily,
@@ -116,7 +155,9 @@ function TableSummaryCellView(props: {
116155
$tableSize={tableSize}
117156
$autoHeight={autoHeight}
118157
>
119-
{children}
158+
<CellWrapper tooltipTitle={cellTooltip}>
159+
<div>{children}</div>
160+
</CellWrapper>
120161
</TableSummarCell>
121162
);
122163
}
@@ -143,12 +184,16 @@ export function TableSummary(props: {
143184
<TableSummaryRow key={rowIndex}>
144185
{visibleColumns.map((column, index) => {
145186
const summaryColumn = column.children.summaryColumns.getView()[rowIndex].getView();
187+
console.log(summaryColumn.cellTooltip)
146188
return (
147189
<TableSummaryCellView
148190
index={index}
149191
key={`summary-${rowIndex}-${column.getView().dataIndex}-${index}`}
150192
tableSize={tableSize}
151193
rowStyle={summaryRowStyle}
194+
align={summaryColumn.align}
195+
cellColor={summaryColumn.cellColor}
196+
cellTooltip={summaryColumn.cellTooltip}
152197
columnStyle={{
153198
background: summaryColumn.background,
154199
margin: summaryColumn.margin,
@@ -159,7 +204,11 @@ export function TableSummary(props: {
159204
textWeight: summaryColumn.textWeight,
160205
fontStyle:summaryColumn.fontStyle,
161206
fontFamily: summaryColumn.fontFamily,
162-
// borderWidth: summaryColumn.borderWidth,
207+
}}
208+
linkStyle={{
209+
text: summaryColumn.linkColor,
210+
hoverText: summaryColumn.linkHoverColor,
211+
activeText: summaryColumn.linkActiveColor,
163212
}}
164213
>
165214
{summaryColumn.render({}, '').getView().view({})}

0 commit comments

Comments
 (0)