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

Commit11bd51c

Browse files
authored
Merge pull request#564 from raheeliftikhar5/table-fixes
Table fixes/updates
2 parentscb8fee7 +fc8185e commit11bd51c

File tree

13 files changed

+215
-47
lines changed

13 files changed

+215
-47
lines changed

‎client/packages/lowcoder/src/components/table/EditableCell.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export interface CellProps {
3434
size?:string;
3535
candidateTags?:string[];
3636
candidateStatus?:{text:string;status:StatusType}[];
37+
textOverflow?:boolean;
3738
}
3839

3940
exporttypeCellViewReturn=(props:CellProps)=>ReactNode;
@@ -43,17 +44,6 @@ export type EditViewFn<T> = (props: {
4344
onChangeEnd:()=>void;
4445
})=>ReactNode;
4546

46-
exportconstSizeWrapper=styled.div<{$size?:string}>`
47-
${(props)=>
48-
props.$size&&
49-
`padding:${
50-
props.$size==="small" ?"8.5px 8px" :props.$size==="large" ?"16.5px 16px" :"12.5px 8px"
51-
};
52-
line-height: 21px;
53-
min-height:${props.$size==="small" ?"39px" :props.$size==="large" ?"55px" :"47px"};
54-
`}
55-
`;
56-
5747
constBorderDiv=styled.div`
5848
position: absolute;
5949
border: 1.5px solid #315efb;
@@ -127,11 +117,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
127117
}
128118

129119
return(
130-
<ColumnTypeView>
120+
<ColumnTypeView
121+
textOverflow={props.textOverflow}
122+
>
131123
{status==="toSave"&&!isEditing&&<EditableChip/>}
132-
<SizeWrapper$size={props.size}onDoubleClick={enterEditFn}>
124+
<div
125+
onDoubleClick={enterEditFn}
126+
>
133127
{normalView}
134-
</SizeWrapper>
128+
</div>
135129
</ColumnTypeView>
136130
);
137131
}

‎client/packages/lowcoder/src/components/table/columnTypeView.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
importReact,{useEffect,useMemo,useRef,useState}from"react";
22
importstyledfrom"styled-components";
33

4-
constColumnTypeViewWrapper=styled.div`
5-
div {
6-
overflow: hidden;
7-
white-space: nowrap;
8-
text-overflow: ellipsis;
9-
word-break: keep-all;
10-
}
4+
constColumnTypeViewWrapper=styled.div<{
5+
textOverflow?:boolean
6+
}>`
7+
${props=>!props.textOverflow&&`
8+
div {
9+
overflow: hidden;
10+
white-space: nowrap;
11+
text-overflow: ellipsis;
12+
word-break: keep-all;
13+
}
14+
`}
1115
`;
1216

1317
constColumnTypeHoverView=styled.div<{
@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
6266
returnfalse;
6367
}
6468

65-
exportdefaultfunctionColumnTypeView(props:{children:React.ReactNode}){
69+
exportdefaultfunctionColumnTypeView(props:{
70+
children:React.ReactNode,
71+
textOverflow?:boolean,
72+
}){
6673
constwrapperRef=useRef<HTMLDivElement>(null);
6774
consthoverViewRef=useRef<HTMLDivElement>(null);
6875
const[isHover,setIsHover]=useState(false);
@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
161168
<>
162169
<ColumnTypeViewWrapper
163170
ref={wrapperRef}
171+
textOverflow={props.textOverflow}
164172
onMouseEnter={()=>{
165173
delayMouseEnter();
166174
}}
@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
171179
>
172180
{props.children}
173181
</ColumnTypeViewWrapper>
174-
{isHover&&hasOverflow&&wrapperRef.current&&(
182+
{isHover&&hasOverflow&&wrapperRef.current&&!props.textOverflow&&(
175183
<ColumnTypeHoverView
176184
ref={hoverViewRef}
177185
visible={adjustedPosition.done}

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
2626
import{ColorControl}from"comps/controls/colorControl";
2727
import{JSONValue}from"util/jsonTypes";
2828
importstyledfrom"styled-components";
29+
import{TextOverflowControl}from"comps/controls/textOverflowControl";
2930

3031
exporttypeRender=ReturnType<ConstructorToComp<typeofRenderComp>["getOriginalComp"]>;
3132
exportconstRenderComp=withSelectedMultiContext(ColumnTypeComp);
@@ -103,7 +104,8 @@ export const columnChildrenMap = {
103104
borderWidth:withDefault(RadiusControl,""),
104105
radius:withDefault(RadiusControl,""),
105106
textSize:withDefault(RadiusControl,""),
106-
cellColor:CellColorComp,
107+
cellColor:CellColorComp,
108+
textOverflow:withDefault(TextOverflowControl,"ellipsis"),
107109
};
108110

109111
constStyledIcon=styled.span`
@@ -228,6 +230,7 @@ export class ColumnComp extends ColumnInitComp {
228230
preInputNode:<StyledIconas={TextSizeIcon}title=""/>,
229231
placeholder:'14px',
230232
})}
233+
{this.children.textOverflow.getPropertyView()}
231234
{this.children.cellColor.getPropertyView()}
232235
</>
233236
);

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
5151
import{IContainer}from"../containerBase";
5252
import{getSelectedRowKeys}from"./selectionControl";
5353
import{compTablePropertyView}from"./tablePropertyView";
54-
import{RowColorComp,TableChildrenView,TableInitComp}from"./tableTypes";
54+
import{RowColorComp,RowHeightComp,TableChildrenView,TableInitComp}from"./tableTypes";
5555

5656
import{useContext}from"react";
5757
import{EditorContext}from"comps/editorState";
@@ -196,6 +196,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
196196
})
197197
)
198198
);
199+
comp=comp.setChild(
200+
"rowHeight",
201+
comp.children.rowHeight.reduce(
202+
RowHeightComp.changeContextDataAction({
203+
currentRow:nextRowExample,
204+
currentIndex:0,
205+
currentOriginalIndex:0,
206+
columnTitle:nextRowExample ?Object.keys(nextRowExample)[0] :undefined,
207+
})
208+
)
209+
);
199210
}
200211

201212
if(dataChanged){

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

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Table } from "antd";
22
import{TableProps}from"antd/es/table";
33
import{TableCellContext,TableRowContext}from"comps/comps/tableComp/tableContext";
44
import{TableToolbar}from"comps/comps/tableComp/tableToolbarComp";
5-
import{RowColorViewType}from"comps/comps/tableComp/tableTypes";
5+
import{RowColorViewType,RowHeightViewType}from"comps/comps/tableComp/tableTypes";
66
import{
77
COL_MIN_WIDTH,
88
COLUMN_CHILDREN_KEY,
@@ -169,6 +169,10 @@ const TableWrapper = styled.div<{
169169
border-top: none !important;
170170
border-inline-start: none !important;
171171
172+
&::after {
173+
box-shadow: none !important;
174+
}
175+
172176
.ant-table-content {
173177
overflow: unset !important;
174178
}
@@ -280,8 +284,10 @@ const TableTh = styled.th<{ width?: number }>`
280284

281285
constTableTd=styled.td<{
282286
background:string;
283-
$style:TableColumnStyleType;
287+
$style:TableColumnStyleType&{rowHeight?:string};
284288
$isEditing:boolean;
289+
$tableSize?:string;
290+
$autoHeight?:boolean;
285291
}>`
286292
.ant-table-row-expand-icon,
287293
.ant-table-row-indent {
@@ -291,16 +297,42 @@ const TableTd = styled.td<{
291297
background:${(props)=>props.background};
292298
border-color:${(props)=>props.$style.border};
293299
}
294-
295300
background:${(props)=>props.background} !important;
296301
border-color:${(props)=>props.$style.border} !important;
297302
border-width:${(props)=>props.$style.borderWidth} !important;
298303
border-radius:${(props)=>props.$style.radius};
299304
padding: 0 !important;
300305
301-
> div> div{
306+
> div {
302307
color:${(props)=>props.$style.text};
303308
font-size:${(props)=>props.$style.textSize};
309+
line-height: 21px;
310+
311+
${(props)=>props.$tableSize==='small'&&`
312+
padding: 8.5px 8px;
313+
min-height:${props.$style.rowHeight||'39px'};
314+
${!props.$autoHeight&&`
315+
overflow-y: auto;
316+
max-height:${props.$style.rowHeight||'39px'};
317+
`};
318+
`};
319+
${(props)=>props.$tableSize==='middle'&&`
320+
padding: 12.5px 8px;
321+
min-height:${props.$style.rowHeight||'47px'};
322+
${!props.$autoHeight&&`
323+
overflow-y: auto;
324+
max-height:${props.$style.rowHeight||'47px'};
325+
`};
326+
`};
327+
${(props)=>props.$tableSize==='large'&&`
328+
padding: 16.5px 16px;
329+
min-height:${props.$style.rowHeight||'55px'};
330+
${!props.$autoHeight&&`
331+
overflow-y: auto;
332+
max-height:${props.$style.rowHeight||'55px'};
333+
`};
334+
`};
335+
304336
&,
305337
> .ant-badge > .ant-badge-status-text,
306338
> div > .markdown-body {
@@ -383,30 +415,40 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
383415
columns:CustomColumnType<RecordType>[];
384416
viewModeResizable:boolean;
385417
rowColorFn:RowColorViewType;
418+
rowHeightFn:RowHeightViewType;
386419
columnsStyle:TableColumnStyleType;
420+
size?:string;
421+
rowAutoHeight?:boolean;
387422
};
388423

389424
functionTableCellView(props:{
390425
record:RecordType;
391426
title:string;
392427
rowColorFn:RowColorViewType;
428+
rowHeightFn:RowHeightViewType;
393429
cellColorFn:CellColorViewType;
394430
rowIndex:number;
395431
children:any;
396432
columnsStyle:TableColumnStyleType;
397433
columnStyle:TableColumnStyleType;
434+
tableSize?:string;
435+
autoHeight?:boolean;
398436
}){
399437
const{
400438
record,
401439
title,
402440
rowIndex,
403441
rowColorFn,
442+
rowHeightFn,
404443
cellColorFn,
405444
children,
406445
columnsStyle,
407446
columnStyle,
447+
tableSize,
448+
autoHeight,
408449
...restProps
409450
}=props;
451+
410452
const[editing,setEditing]=useState(false);
411453
constrowContext=useContext(TableRowContext);
412454
lettdView;
@@ -419,17 +461,24 @@ function TableCellView(props: {
419461
currentOriginalIndex:record[OB_ROW_ORI_INDEX],
420462
columnTitle:title,
421463
});
464+
constrowHeight=rowHeightFn({
465+
currentRow:record,
466+
currentIndex:rowIndex,
467+
currentOriginalIndex:record[OB_ROW_ORI_INDEX],
468+
columnTitle:title,
469+
});
422470
constcellColor=cellColorFn({
423471
currentCell:record[title.toLowerCase()],
424472
});
425473

426-
conststyle:TableColumnStyleType={
474+
conststyle={
427475
background:cellColor||rowColor||columnStyle.background||columnsStyle.background,
428476
text:columnStyle.text||columnsStyle.text,
429477
border:columnStyle.border||columnsStyle.border,
430478
radius:columnStyle.radius||columnsStyle.radius,
431479
borderWidth:columnStyle.borderWidth||columnsStyle.borderWidth,
432480
textSize:columnStyle.textSize||columnsStyle.textSize,
481+
rowHeight:rowHeight,
433482
}
434483
let{ background}=style;
435484
if(rowContext.selected){
@@ -444,6 +493,8 @@ function TableCellView(props: {
444493
background={background}
445494
$style={style}
446495
$isEditing={editing}
496+
$tableSize={tableSize}
497+
$autoHeight={autoHeight}
447498
>
448499
{children}
449500
</TableTd>
@@ -511,10 +562,13 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
511562
record,
512563
title:col.titleText,
513564
rowColorFn:props.rowColorFn,
565+
rowHeightFn:props.rowHeightFn,
514566
cellColorFn:cellColorFn,
515567
rowIndex:rowIndex,
516568
columnsStyle:props.columnsStyle,
517569
columnStyle:style,
570+
tableSize:props.size,
571+
autoHeight:props.rowAutoHeight,
518572
}),
519573
onHeaderCell:()=>({
520574
width:resizeWidth,
@@ -583,6 +637,7 @@ export function TableCompView(props: {
583637
constcompChildren=comp.children;
584638
conststyle=compChildren.style.getView();
585639
constrowStyle=compChildren.rowStyle.getView();
640+
constrowAutoHeight=compChildren.rowAutoHeight.getView();
586641
constcolumnsStyle=compChildren.columnsStyle.getView();
587642
constchangeSet=useMemo(()=>compChildren.columns.getChangeSet(),[compChildren.columns]);
588643
consthasChange=useMemo(()=>!_.isEmpty(changeSet),[changeSet]);
@@ -610,7 +665,7 @@ export function TableCompView(props: {
610665
size,
611666
dynamicColumn,
612667
dynamicColumnConfig,
613-
columnsAggrData
668+
columnsAggrData,
614669
),
615670
[
616671
columnViews,
@@ -711,6 +766,7 @@ export function TableCompView(props: {
711766
}
712767
}}
713768
rowColorFn={compChildren.rowColor.getView()asany}
769+
rowHeightFn={compChildren.rowHeight.getView()asany}
714770
{...compChildren.selection.getView()(onEvent)}
715771
bordered={!compChildren.hideBordered.getView()}
716772
onChange={(pagination,filters,sorter,extra)=>{
@@ -722,6 +778,7 @@ export function TableCompView(props: {
722778
viewModeResizable={compChildren.viewModeResizable.getView()}
723779
dataSource={pageDataInfo.data}
724780
size={compChildren.size.getView()}
781+
rowAutoHeight={rowAutoHeight}
725782
tableLayout="fixed"
726783
loading={
727784
loading||

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

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

505505
{["layout","both"].includes(editorModeStatus)&&(
506506
<><Sectionname={"Table Style"}>
507-
{comp.children.style.getPropertyView()}
508-
507+
{comp.children.style.getPropertyView()}
509508
</Section>
510509
<Sectionname={"Row Style"}>
511510
{comp.children.rowStyle.getPropertyView()}
511+
{comp.children.rowAutoHeight.getPropertyView()}
512+
{comp.children.rowHeight.getPropertyView()}
512513
{comp.children.rowColor.getPropertyView()}
513514
</Section>
514515
<Sectionname={"Column Style"}>

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,14 +54,12 @@ const getStyle = (
5454
returncss`
5555
background-color:${style.toolbarBackground};
5656
// Implement horizontal scrollbar and vertical page number selection is not blocked
57-
// padding:${position==="above" ?"13px 16px 313px 16px" :"313px 16px 13px 16px"};
58-
// margin:${position==="above" ?"0 0 -300px 0" :"-300px 0 0 0"};
5957
padding: 13px 12px;
60-
${fixedToolbar&&`
61-
position:sticky;
62-
postion: -webkit-sticky;
63-
z-index: 99;
64-
`};
58+
position: sticky;
59+
postion: -webkit-sticky;
60+
left: 0;
61+
62+
${fixedToolbar&&`z-index: 99;`};
6563
${fixedToolbar&&position==='below'&&`bottom: 0;`};
6664
${fixedToolbar&&position==='above'&&`top: 0;`};
6765

0 commit comments

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