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

Commitaeef6c5

Browse files
feat: allow table column styling
1 parenta198f6e commitaeef6c5

File tree

8 files changed

+235
-139
lines changed

8 files changed

+235
-139
lines changed

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

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import{BoolControl}from"comps/controls/boolControl";
2-
import{NumberControl,StringControl}from"comps/controls/codeControl";
2+
import{ColorOrBoolCodeControl,NumberControl,RadiusControl,StringControl}from"comps/controls/codeControl";
33
import{dropdownControl,HorizontalAlignmentControl}from"comps/controls/dropdownControl";
4-
import{MultiCompBuilder,stateComp,valueComp}from"comps/generators";
4+
import{MultiCompBuilder,stateComp,valueComp,withContext,withDefault}from"comps/generators";
55
import{withSelectedMultiContext}from"comps/generators/withSelectedMultiContext";
66
import{genRandomKey}from"comps/utils/idGenerator";
77
import{trans}from"i18n";
88
import_from"lodash";
99
import{
1010
changeChildAction,
1111
changeValueAction,
12+
CompAction,
13+
CompActionTypes,
1214
ConstructorToComp,
1315
ConstructorToDataType,
1416
ConstructorToNodeType,
@@ -19,8 +21,10 @@ import {
1921
withFunction,
2022
wrapChildAction,
2123
}from"lowcoder-core";
22-
import{AlignClose,AlignLeft,AlignRight}from"lowcoder-design";
24+
import{AlignClose,AlignLeft,AlignRight,controlItem}from"lowcoder-design";
2325
import{ColumnTypeComp,ColumnTypeCompMap}from"./columnTypeComp";
26+
import{ColorControl}from"comps/controls/colorControl";
27+
import{JSONValue}from"util/jsonTypes";
2428

2529
exporttypeRender=ReturnType<ConstructorToComp<typeofRenderComp>["getOriginalComp"]>;
2630
exportconstRenderComp=withSelectedMultiContext(ColumnTypeComp);
@@ -51,6 +55,31 @@ const columnFixOptions = [
5155
},
5256
]asconst;
5357

58+
constcellColorLabel=trans("table.cellColor");
59+
constCellColorTempComp=withContext(
60+
newMultiCompBuilder({color:ColorOrBoolCodeControl},(props)=>props.color)
61+
.setPropertyViewFn((children)=>
62+
children.color.propertyView({
63+
label:cellColorLabel,
64+
tooltip:trans("table.cellColorDesc"),
65+
})
66+
)
67+
.build(),
68+
["currentCell"]asconst
69+
);
70+
71+
//@ts-ignore
72+
exportclassCellColorCompextendsCellColorTempComp{
73+
overridegetPropertyView(){
74+
returncontrolItem({filterText:cellColorLabel},super.getPropertyView());
75+
}
76+
}
77+
78+
// fixme, should be infer from RowColorComp, but withContext type incorrect
79+
exporttypeCellColorViewType=(param:{
80+
currentCell:JSONValue|undefined;//number | string;
81+
})=>string;
82+
5483
exportconstcolumnChildrenMap={
5584
// column title
5685
title:StringControl,
@@ -67,6 +96,11 @@ export const columnChildrenMap = {
6796
tempHide:stateComp<boolean>(false),
6897
fixed:dropdownControl(columnFixOptions,"close"),
6998
editable:BoolControl,
99+
background:withDefault(ColorControl,""),
100+
text:withDefault(ColorControl,""),
101+
border:withDefault(ColorControl,""),
102+
radius:withDefault(RadiusControl,""),
103+
cellColor:CellColorComp,
70104
};
71105

72106
/**
@@ -90,6 +124,21 @@ const ColumnInitComp = new MultiCompBuilder(columnChildrenMap, (props, dispatch)
90124
.build();
91125

92126
exportclassColumnCompextendsColumnInitComp{
127+
overridereduce(action:CompAction){
128+
letcomp=super.reduce(action);
129+
if(action.type===CompActionTypes.UPDATE_NODES_V2){
130+
comp=comp.setChild(
131+
"cellColor",
132+
comp.children.cellColor.reduce(
133+
CellColorComp.changeContextDataAction({
134+
currentCell:undefined,
135+
})
136+
)
137+
);
138+
}
139+
returncomp;
140+
}
141+
93142
overridegetView(){
94143
constsuperView=super.getView();
95144
constcolumnType=this.children.render.getSelectedComp().getComp().children.compType.getView();
@@ -143,6 +192,26 @@ export class ColumnComp extends ColumnInitComp {
143192
})}
144193
{this.children.autoWidth.getView()==="fixed"&&
145194
this.children.width.propertyView({label:trans("prop.width")})}
195+
{controlItem({},(
196+
<divstyle={{marginTop:'8px'}}>
197+
<b>{"Style"}</b>
198+
</div>
199+
))}
200+
{this.children.background.propertyView({
201+
label:trans('style.background'),
202+
})}
203+
{this.children.text.propertyView({
204+
label:trans('text'),
205+
})}
206+
{this.children.border.propertyView({
207+
label:trans('style.border')
208+
})}
209+
{this.children.radius.propertyView({
210+
label:trans('style.borderRadius'),
211+
// preInputNode: <StyledIcon as={IconRadius} title="" />,
212+
placeholder:'3px',
213+
})}
214+
{this.children.cellColor.getPropertyView()}
146215
</>
147216
);
148217
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp