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

Commitf515b44

Browse files
feat: added column styles
1 parent090d29d commitf515b44

File tree

4 files changed

+49
-11
lines changed

4 files changed

+49
-11
lines changed

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

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
defaultTheme,
1818
handleToHoverRow,
1919
handleToSelectedRow,
20+
TableColumnStyleType,
2021
TableStyleType,
2122
}from"comps/controls/styleControlConstants";
2223
import{CompNameContext,EditorContext}from"comps/editorState";
@@ -292,19 +293,29 @@ const TableTh = styled.th<{ width?: number }>`
292293
${(props)=>props.width&&`width:${props.width}px`};
293294
`;
294295

295-
constTableTd=styled.td<{background:string;$isEditing:boolean}>`
296+
constTableTd=styled.td<{
297+
background:string;
298+
columnStyle:TableColumnStyleType;
299+
$isEditing:boolean;
300+
}>`
296301
.ant-table-row-expand-icon,
297302
.ant-table-row-indent {
298303
display:${(props)=>(props.$isEditing ?"none" :"initial")};
299304
}
300-
301-
${(props)=>
302-
props.background&&
303-
`
304-
background:${props.background} !important;
305-
`};
305+
> div > div {
306+
background:${(props)=>props.background};
307+
color:${(props)=>props.columnStyle.cellText} !important;
308+
border-radius:${(props)=>props.columnStyle.radius};
309+
border-color:${(props)=>props.columnStyle.border};
310+
}
306311
`;
307312

313+
// ${(props) =>
314+
// props.background &&
315+
// `
316+
// background: ${props.background} !important;
317+
// `};
318+
308319
constResizeableTitle=(props:any)=>{
309320
const{ onResize, onResizeStop, width, viewModeResizable, ...restProps}=props;
310321
const[widthChild,setWidthChild]=useState(0);
@@ -365,6 +376,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
365376
columns:CustomColumnType<RecordType>[];
366377
viewModeResizable:boolean;
367378
rowColor:RowColorViewType;
379+
columnStyle:TableColumnStyleType;
368380
};
369381

370382
functionTableCellView(props:{
@@ -373,8 +385,10 @@ function TableCellView(props: {
373385
rowColor:RowColorViewType;
374386
rowIndex:number;
375387
children:any;
388+
columnStyle:TableColumnStyleType;
376389
}){
377-
const{ record, title, rowIndex, rowColor, children, ...restProps}=props;
390+
const{ record, title, rowIndex, rowColor, children, columnStyle, ...restProps}=props;
391+
console.log(columnStyle)
378392
const[editing,setEditing]=useState(false);
379393
constrowContext=useContext(TableRowContext);
380394
lettdView;
@@ -387,7 +401,7 @@ function TableCellView(props: {
387401
currentOriginalIndex:record[OB_ROW_ORI_INDEX],
388402
columnTitle:title,
389403
});
390-
letbackground="";
404+
let{background}=columnStyle;
391405
if(color){
392406
background=genLinerGradient(color);
393407
}
@@ -398,7 +412,12 @@ function TableCellView(props: {
398412
background=genLinerGradient(handleToHoverRow(color))+","+background;
399413
}
400414
tdView=(
401-
<TableTd{...restProps}background={background}$isEditing={editing}>
415+
<TableTd
416+
{...restProps}
417+
background={background}
418+
columnStyle={columnStyle}
419+
$isEditing={editing}
420+
>
402421
{children}
403422
</TableTd>
404423
);
@@ -466,6 +485,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
466485
title:col.titleText,
467486
rowColor:props.rowColor,
468487
rowIndex:rowIndex,
488+
columnStyle:props.columnStyle,
469489
}),
470490
onHeaderCell:()=>({
471491
width:resizeWidth,
@@ -533,6 +553,7 @@ export function TableCompView(props: {
533553
constchangeSet=useMemo(()=>compChildren.columns.getChangeSet(),[compChildren.columns]);
534554
consthasChange=useMemo(()=>!_.isEmpty(changeSet),[changeSet]);
535555
constcolumns=useMemo(()=>compChildren.columns.getView(),[compChildren.columns]);
556+
constcolumnStyle=useMemo(()=>compChildren.columnStyle.getView(),[compChildren.columnStyle]);
536557
constcolumnViews=useMemo(()=>columns.map((c)=>c.getView()),[columns]);
537558
constdata=comp.filterData;
538559
constsort=useMemo(()=>compChildren.sort.getView(),[compChildren.sort]);
@@ -657,6 +678,7 @@ export function TableCompView(props: {
657678
}}
658679
showHeader={!compChildren.hideHeader.getView()}
659680
columns={antdColumns}
681+
columnStyle={columnStyle}
660682
viewModeResizable={compChildren.viewModeResizable.getView()}
661683
dataSource={pageDataInfo.data}
662684
size={compChildren.size.getView()}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -463,6 +463,9 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
463463
label:trans("table.hideBordered"),
464464
})}
465465
</Section>
466+
<Sectionname={'Column Styles'}>
467+
{comp.children.columnStyle.getPropertyView()}
468+
</Section>
466469
</>
467470
);
468471
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import{dropdownControl}from"comps/controls/dropdownControl";
1111
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
1212
import{styleControl}from"comps/controls/styleControl";
13-
import{TableStyle}from"comps/controls/styleControlConstants";
13+
import{TableColumnStyle,TableStyle}from"comps/controls/styleControlConstants";
1414
import{
1515
MultiCompBuilder,
1616
stateComp,
@@ -143,6 +143,7 @@ const tableChildrenMap = {
143143
sort:valueComp<Array<SortValue>>([]),
144144
toolbar:TableToolbarComp,
145145
style:styleControl(TableStyle),
146+
columnStyle:styleControl(TableColumnStyle),
146147
viewModeResizable:BoolControl,
147148
// sample data for regenerating columns
148149
dataRowExample:stateComp<JSONObject|null>(null),

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -694,6 +694,17 @@ export const TableStyle = [
694694
},
695695
]asconst;
696696

697+
exportconstTableColumnStyle=[
698+
...BG_STATIC_BORDER_RADIUS,
699+
{
700+
name:"cellText",
701+
label:trans("style.tableCellText"),
702+
depName:"background",
703+
depType:DEP_TYPE.CONTRAST_TEXT,
704+
transformer:contrastText,
705+
}
706+
]asconst;
707+
697708
exportconstFileStyle=[...getStaticBgBorderRadiusByBg(SURFACE_COLOR),TEXT,ACCENT,MARGIN,PADDING]asconst;
698709

699710
exportconstFileViewerStyle=[
@@ -1001,6 +1012,7 @@ export type CheckboxStyleType = StyleConfigType<typeof CheckboxStyle>;
10011012
exporttypeRadioStyleType=StyleConfigType<typeofRadioStyle>;
10021013
exporttypeSegmentStyleType=StyleConfigType<typeofSegmentStyle>;
10031014
exporttypeTableStyleType=StyleConfigType<typeofTableStyle>;
1015+
exporttypeTableColumnStyleType=StyleConfigType<typeofTableColumnStyle>;
10041016
exporttypeFileStyleType=StyleConfigType<typeofFileStyle>;
10051017
exporttypeFileViewerStyleType=StyleConfigType<typeofFileViewerStyle>;
10061018
exporttypeIframeStyleType=StyleConfigType<typeofIframeStyle>;

0 commit comments

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