Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit5258759

Browse files
cleanup table summary row
1 parent94023b4 commit5258759

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
importstyledfrom"styled-components";
2920
import{TextOverflowControl}from"comps/controls/textOverflowControl";
3021
import{defaultasDivider}from"antd/es/divider";
31-
import{ColumnValueTooltip}from"./simpleColumnTypeComps";
3222
exporttypeRender=ReturnType<ConstructorToComp<typeofRenderComp>["getOriginalComp"]>;
3323
exportconstRenderComp=withSelectedMultiContext(ColumnTypeComp);
3424

35-
constcolumnWidthOptions=[
36-
{
37-
label:trans("table.auto"),
38-
value:"auto",
39-
},
40-
{
41-
label:trans("table.fixed"),
42-
value:"fixed",
43-
},
44-
]asconst;
45-
46-
constcolumnFixOptions=[
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-
]asconst;
60-
61-
constcellColorLabel=trans("table.cellColor");
62-
constCellColorTempComp=withContext(
63-
newMultiCompBuilder({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"]asconst
72-
);
73-
74-
//@ts-ignore
75-
exportclassCellColorCompextendsCellColorTempComp{
76-
overridegetPropertyView(){
77-
returncontrolItem({filterText:cellColorLabel},super.getPropertyView());
78-
}
79-
}
80-
81-
// fixme, should be infer from RowColorComp, but withContext type incorrect
82-
exporttypeCellColorViewType=(param:{
83-
currentRow:any;
84-
currentCell:JSONValue|undefined;//number | string;
85-
})=>string;
86-
87-
constcellTooltipLabel=trans("table.columnTooltip");
88-
constCellTooltipTempComp=withContext(
89-
newMultiCompBuilder({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"]asconst
98-
);
99-
100-
//@ts-ignore
101-
exportclassCellTooltipCompextendsCellTooltipTempComp{
102-
overridegetPropertyView(){
103-
returncontrolItem({filterText:cellTooltipLabel},super.getPropertyView());
104-
}
105-
}
106-
107-
// fixme, should be infer from RowColorComp, but withContext type incorrect
108-
exporttypeCellTooltipViewType=(param:{
109-
currentRow:any;
110-
currentCell:JSONValue|undefined;//number | string;
111-
})=>string;
112-
113-
11425
exportconstcolumnChildrenMap={
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
constStyledBorderRadiusIcon=styled(IconRadius)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
142-
constStyledBorderIcon=styled(BorderWidthIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14350
constStyledTextSizeIcon=styled(TextSizeIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14451
constStyledFontFamilyIcon=styled(FontFamilyIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
14552
constStyledTextWeightIcon=styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
146-
constStyledBackgroundImageIcon=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
exportclassSummaryColumnCompextendsColumnInitComp{
16167
overridereduce(action:CompAction){
162-
letcomp=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+
constcomp=super.reduce(action);
18469
returncomp;
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
<Dividerstyle={{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:<StyledBorderIconas={BorderWidthIcon}title=""/>,
272-
placeholder:'1px',
273-
})}
274148
{this.children.radius.propertyView({
275149
label:trans('style.borderRadius'),
276150
preInputNode:<StyledBorderRadiusIconas={IconRadius}title=""/>,
@@ -296,8 +170,10 @@ export class SummaryColumnComp extends ColumnInitComp {
296170
preInputNode:<StyledFontFamilyIconas={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
<Sectionname={"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
<Sectionname={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
importstyledfrom"styled-components";
55
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
66
importTablefrom"antd/es/table";
7+
import{ReactNode}from"react";
8+
importTooltipfrom"antd/es/tooltip";
79

810
constTableSummaryRow=styled(Table.Summary.Row)`
911
td:last-child {
@@ -14,7 +16,7 @@ const TableSummaryRow = styled(Table.Summary.Row)`
1416
constTableSummarCell=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+
constCellWrapper=({
94+
children,
95+
tooltipTitle,
96+
}:{
97+
children:ReactNode,
98+
tooltipTitle?:string,
99+
})=>{
100+
if(tooltipTitle){
101+
return(
102+
<Tooltiptitle={tooltipTitle}placement="topLeft">
103+
{children}
104+
</Tooltip>
105+
)
106+
}
107+
return(
108+
<>{children}</>
109+
)
110+
};
111+
78112
functionTableSummaryCellView(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
conststyle={
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+
<CellWrappertooltipTitle={cellTooltip}>
159+
<div>{children}</div>
160+
</CellWrapper>
120161
</TableSummarCell>
121162
);
122163
}
@@ -143,12 +184,16 @@ export function TableSummary(props: {
143184
<TableSummaryRowkey={rowIndex}>
144185
{visibleColumns.map((column,index)=>{
145186
constsummaryColumn=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)
[8]ページ先頭
©2009-2025 Movatter.jp