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

Commite74e078

Browse files
committed
[Feat]:#1866 add class/id identifies for Table/TableLite
1 parent0e5aa97 commite74e078

File tree

13 files changed

+97
-23
lines changed

13 files changed

+97
-23
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,8 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
165165
onClick:()=>onCellClick(col.titleText,String(col.dataIndex)),
166166
loading:customLoading,
167167
customAlign:col.align,
168+
className:col.columnClassName,
169+
'data-testid':col.columnDataTestId,
168170
});
169171
},[rowColorFn,rowHeightFn,columnsStyle,size,rowAutoHeight,onCellClick,customLoading]);
170172

@@ -182,6 +184,8 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
182184
onResizeStop:(e:React.SyntheticEvent,{ size}:{size:{width:number}})=>{
183185
handleResizeStop(size.width,index,col.onWidthResize);
184186
},
187+
className:col.columnClassName,
188+
'data-testid':col.columnDataTestId,
185189
});
186190
},[viewModeResizable,handleResize,handleResizeStop]);
187191

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ export const columnChildrenMap = {
134134
align:HorizontalAlignmentControl,
135135
tempHide:stateComp<boolean>(false),
136136
fixed:dropdownControl(columnFixOptions,"close"),
137+
// identifiers
138+
className:StringControl,
139+
dataTestId:StringControl,
137140
editable:BoolControl,
138141
background:withDefault(ColorControl,""),
139142
margin:withDefault(RadiusControl,""),
@@ -162,6 +165,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px
162165
constStyledTextWeightIcon=styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
163166
constStyledBackgroundImageIcon=styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
164167

168+
constSectionHeading=styled.div`
169+
font-weight: bold;
170+
margin-bottom: 8px;
171+
`;
172+
165173
/**
166174
* export for test.
167175
* Put it here temporarily to avoid circular dependencies
@@ -283,11 +291,7 @@ const ColumnPropertyView = React.memo(({
283291
{(columnType==='link'||columnType==='links')&&(
284292
<>
285293
<Dividerstyle={{margin:'12px 0'}}/>
286-
{controlItem({},(
287-
<div>
288-
<b>{"Link Style"}</b>
289-
</div>
290-
))}
294+
<SectionHeading>Link Style</SectionHeading>
291295
{comp.children.linkColor.propertyView({
292296
label:trans('text')// trans('style.background'),
293297
})}
@@ -300,11 +304,7 @@ const ColumnPropertyView = React.memo(({
300304
</>
301305
)}
302306
<Dividerstyle={{margin:'12px 0'}}/>
303-
{controlItem({},(
304-
<div>
305-
<b>{"Column Style"}</b>
306-
</div>
307-
))}
307+
<SectionHeading>Column Style</SectionHeading>
308308
{comp.children.background.propertyView({
309309
label:trans('style.background'),
310310
})}
@@ -346,6 +346,14 @@ const ColumnPropertyView = React.memo(({
346346
})}
347347
{comp.children.textOverflow.getPropertyView()}
348348
{comp.children.cellColor.getPropertyView()}
349+
<Dividerstyle={{margin:'12px 0'}}/>
350+
<SectionHeading>Identifiers</SectionHeading>
351+
{comp.children.className.propertyView({
352+
label:trans("prop.className"),
353+
})}
354+
{comp.children.dataTestId.propertyView({
355+
label:trans("prop.dataTestId"),
356+
})}
349357
</>
350358
)}
351359
</>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ export const TableCompView = React.memo((props: {
100100
constonEvent=useMemo(()=>compChildren.onEvent.getView(),[compChildren.onEvent]);
101101
constcurrentExpandedRows=useMemo(()=>compChildren.currentExpandedRows.getView(),[compChildren.currentExpandedRows]);
102102
constdynamicColumn=compChildren.dynamicColumn.getView();
103+
constclassName=compChildren.className.getView();
104+
constdataTestId=compChildren.dataTestId.getView();
103105

104106
constdynamicColumnConfig=useMemo(
105107
()=>compChildren.dynamicColumnConfig.getView(),
@@ -360,6 +362,8 @@ export const TableCompView = React.memo((props: {
360362
suffixNode={toolbar.position==="below"&&!toolbar.fixedToolbar&&!(tableMode.isAutoMode&&showHorizontalScrollbar)&&toolbarView}
361363
>
362364
<TableWrapper
365+
className={className}
366+
data-testid={dataTestId}
363367
$style={style}
364368
$rowStyle={rowStyle}
365369
$headerStyle={headerStyle}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -612,6 +612,11 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
612612
tooltip:trans("table.dynamicColumnConfigDesc"),
613613
})}
614614
</Section>
615+
616+
<Sectionname={trans("prop.component")}>
617+
{comp.children.className.propertyView({label:trans("prop.className")})}
618+
{comp.children.dataTestId.propertyView({label:trans("prop.dataTestId")})}
619+
</Section>
615620
</>
616621
)}
617622

‎client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,13 @@ export const BackgroundWrapper = styled.div<{
122122
`;
123123

124124
// TODO: find a way to limit the calc function for max-height only to first Margin value
125-
exportconstTableWrapper=styled.div<{
125+
exportconstTableWrapper=styled.div.attrs<{
126+
className?:string;
127+
"data-testid"?:string;
128+
}>((props)=>({
129+
className:props.className,
130+
"data-testid":props["data-testid"],
131+
}))<{
126132
$style:TableStyleType;
127133
$headerStyle:TableHeaderStyleType;
128134
$toolbarStyle:TableToolbarStyleType;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,8 @@ export type CustomColumnType<RecordType> = ColumnType<RecordType> & {
333333
style:TableColumnStyleType;
334334
linkStyle:TableColumnLinkStyleType;
335335
cellColorFn:CellColorViewType;
336+
columnClassName?:string;
337+
columnDataTestId?:string;
336338
};
337339

338340
/**
@@ -400,6 +402,8 @@ export function columnsToAntdFormat(
400402
align:column.align,
401403
width:column.autoWidth==="auto" ?0 :column.width,
402404
fixed:column.fixed==="close" ?false :column.fixed,
405+
columnClassName:column.className,
406+
columnDataTestId:column.dataTestId,
403407
style:{
404408
background:column.background,
405409
margin:column.margin,

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,9 @@ export const columnChildrenMap = {
136136
align:HorizontalAlignmentControl,
137137
tempHide:stateComp<boolean>(false),
138138
fixed:dropdownControl(columnFixOptions,"close"),
139+
// identifiers
140+
className:StringControl,
141+
dataTestId:StringControl,
139142
background:withDefault(ColorControl,""),
140143
margin:withDefault(RadiusControl,""),
141144
text:withDefault(ColorControl,""),
@@ -163,6 +166,11 @@ const StyledFontFamilyIcon = styled(FontFamilyIcon)` width: 24px; margin: 0 8px
163166
constStyledTextWeightIcon=styled(TextWeightIcon)` width: 24px; margin: 0 8px 0 -3px; padding: 3px;`;
164167
constStyledBackgroundImageIcon=styled(ImageCompIcon)` width: 24px; margin: 0 0px 0 -12px;`;
165168

169+
constSectionHeading=styled.div`
170+
font-weight: bold;
171+
margin-bottom: 8px;
172+
`;
173+
166174
/**
167175
* export for test.
168176
* Put it here temporarily to avoid circular dependencies
@@ -285,11 +293,7 @@ const ColumnPropertyView = React.memo(({
285293
{(columnType==='link'||columnType==='links')&&(
286294
<>
287295
<Dividerstyle={{margin:'12px 0'}}/>
288-
{controlItem({},(
289-
<div>
290-
<b>{"Link Style"}</b>
291-
</div>
292-
))}
296+
<SectionHeading>Link Style</SectionHeading>
293297
{comp.children.linkColor.propertyView({
294298
label:trans('text')// trans('style.background'),
295299
})}
@@ -302,11 +306,7 @@ const ColumnPropertyView = React.memo(({
302306
</>
303307
)}
304308
<Dividerstyle={{margin:'12px 0'}}/>
305-
{controlItem({},(
306-
<div>
307-
<b>{"Column Style"}</b>
308-
</div>
309-
))}
309+
<SectionHeading>Column Style</SectionHeading>
310310
{comp.children.background.propertyView({
311311
label:trans('style.background'),
312312
})}
@@ -348,6 +348,14 @@ const ColumnPropertyView = React.memo(({
348348
})}
349349
{comp.children.textOverflow.getPropertyView()}
350350
{comp.children.cellColor.getPropertyView()}
351+
<Dividerstyle={{margin:'12px 0'}}/>
352+
<SectionHeading>Identifiers</SectionHeading>
353+
{comp.children.className.propertyView({
354+
label:trans("prop.className"),
355+
})}
356+
{comp.children.dataTestId.propertyView({
357+
label:trans("prop.dataTestId"),
358+
})}
351359
</>
352360
)}
353361
</>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@ import React, {
106106
onClick:()=>onCellClick(col.titleText,String(col.dataIndex)),
107107
loading:customLoading,
108108
customAlign:col.align,
109+
className:col.columnClassName,
110+
'data-testid':col.columnDataTestId,
109111
});
110112
},
111113
[
@@ -135,6 +137,8 @@ import React, {
135137
)=>{
136138
handleResizeStop(size.width,index,col.onWidthResize);
137139
},
140+
className:col.columnClassName,
141+
'data-testid':col.columnDataTestId,
138142
});
139143
},
140144
[viewModeResizable,handleResize,handleResizeStop]

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ function ResizeableTableComp<RecordType extends object>(
108108
onClick:()=>onCellClick(col.titleText,String(col.dataIndex)),
109109
loading:customLoading,
110110
customAlign:col.align,
111+
className:col.columnClassName,
112+
'data-testid':col.columnDataTestId,
111113
});
112114
},
113115
[
@@ -138,6 +140,8 @@ function ResizeableTableComp<RecordType extends object>(
138140
)=>{
139141
handleResizeStop(size.width,index,col.onWidthResize);
140142
},
143+
className:col.columnClassName,
144+
'data-testid':col.columnDataTestId,
141145
});
142146
},
143147
[viewModeResizable,handleResize,handleResizeStop]

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,13 @@ import styled from 'styled-components';
44
importSimpleBarfrom'simplebar-react';
55
// import 'simplebar-react/dist/simplebar.min.css';
66

7-
constMainContainer=styled.div<{
7+
constMainContainer=styled.div.attrs<{
8+
className?:string;
9+
"data-testid"?:string;
10+
}>((props)=>({
11+
className:props.className,
12+
"data-testid":props["data-testid"],
13+
}))<{
814
$mode:'AUTO'|'FIXED';
915
$showHorizontalScrollbar:boolean;
1016
$showVerticalScrollbar:boolean;
@@ -114,6 +120,8 @@ interface TableContainerProps {
114120
showVerticalScrollbar:boolean;
115121
showHorizontalScrollbar:boolean;
116122
virtual:boolean;
123+
className?:string;
124+
dataTestId?:string;
117125
}
118126

119127
exportconstTableContainer:React.FC<TableContainerProps>=({
@@ -126,7 +134,9 @@ export const TableContainer: React.FC<TableContainerProps> = ({
126134
containerRef,
127135
showVerticalScrollbar,
128136
showHorizontalScrollbar,
129-
virtual
137+
virtual,
138+
className,
139+
dataTestId
130140
})=>{
131141
return(
132142
<MainContainer
@@ -135,6 +145,8 @@ export const TableContainer: React.FC<TableContainerProps> = ({
135145
$showHorizontalScrollbar={showHorizontalScrollbar}
136146
$showVerticalScrollbar={showVerticalScrollbar}
137147
$virtual={virtual}
148+
className={className}
149+
data-testid={dataTestId}
138150
>
139151
{/* Sticky above toolbar - always visible */}
140152
{stickyToolbar&&toolbarPosition==='above'&&showToolbar&&(

0 commit comments

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