Skip to content

Commit 9d68bb7

Browse files
raheeliftikhar5raheeliftikhar5
committed
fix: conditional row height
1 parent cbdc580 commit 9d68bb7

File tree

6 files changed

+85
-7
lines changed

6 files changed

+85
-7
lines changed

‎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: 16 additions & 4 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,
@@ -284,7 +284,7 @@ const TableTh = styled.th<{ width?: number }>`
284284

285285
const TableTd = styled.td<{
286286
background: string;
287-
$style: TableColumnStyleType;
287+
$style: TableColumnStyleType & {height?: string};
288288
$isEditing: boolean;
289289
}>`
290290
.ant-table-row-expand-icon,
@@ -295,8 +295,8 @@ const TableTd = styled.td<{
295295
background: ${(props) => props.background};
296296
border-color: ${(props) => props.$style.border};
297297
}
298-
299298
background: ${(props) => props.background} !important;
299+
height: ${(props) => props.$style.height};
300300
border-color: ${(props) => props.$style.border} !important;
301301
border-width: ${(props) => props.$style.borderWidth} !important;
302302
border-radius: ${(props) => props.$style.radius};
@@ -387,13 +387,15 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
387387
columns: CustomColumnType<RecordType>[];
388388
viewModeResizable: boolean;
389389
rowColorFn: RowColorViewType;
390+
rowHeightFn: RowHeightViewType;
390391
columnsStyle: TableColumnStyleType;
391392
};
392393

393394
function TableCellView(props: {
394395
record: RecordType;
395396
title: string;
396397
rowColorFn: RowColorViewType;
398+
rowHeightFn: RowHeightViewType;
397399
cellColorFn: CellColorViewType;
398400
rowIndex: number;
399401
children: any;
@@ -405,6 +407,7 @@ function TableCellView(props: {
405407
title,
406408
rowIndex,
407409
rowColorFn,
410+
rowHeightFn,
408411
cellColorFn,
409412
children,
410413
columnsStyle,
@@ -423,17 +426,24 @@ function TableCellView(props: {
423426
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
424427
columnTitle: title,
425428
});
429+
const rowHeight = rowHeightFn({
430+
currentRow: record,
431+
currentIndex: rowIndex,
432+
currentOriginalIndex: record[OB_ROW_ORI_INDEX],
433+
columnTitle: title,
434+
});
426435
const cellColor = cellColorFn({
427436
currentCell: record[title.toLowerCase()],
428437
});
429438

430-
const style: TableColumnStyleType = {
439+
const style = {
431440
background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
432441
text: columnStyle.text || columnsStyle.text,
433442
border: columnStyle.border || columnsStyle.border,
434443
radius: columnStyle.radius || columnsStyle.radius,
435444
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
436445
textSize: columnStyle.textSize || columnsStyle.textSize,
446+
height: rowHeight,
437447
}
438448
let { background } = style;
439449
if (rowContext.selected) {
@@ -515,6 +525,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
515525
record,
516526
title: col.titleText,
517527
rowColorFn: props.rowColorFn,
528+
rowHeightFn: props.rowHeightFn,
518529
cellColorFn: cellColorFn,
519530
rowIndex: rowIndex,
520531
columnsStyle: props.columnsStyle,
@@ -715,6 +726,7 @@ export function TableCompView(props: {
715726
}
716727
}}
717728
rowColorFn={compChildren.rowColor.getView() as any}
729+
rowHeightFn={compChildren.rowHeight.getView() as any}
718730
{...compChildren.selection.getView()(onEvent)}
719731
bordered={!compChildren.hideBordered.getView()}
720732
onChange={(pagination, filters, sorter, extra) => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -510,6 +510,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
510510
<Section name={"Row Style"}>
511511
{comp.children.rowStyle.getPropertyView()}
512512
{comp.children.rowColor.getPropertyView()}
513+
{comp.children.rowHeight.getPropertyView()}
513514
</Section>
514515
<Section name={"Column Style"}>
515516
{comp.children.columnsStyle.getPropertyView()}

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

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
ArrayStringControl,
66
BoolCodeControl,
77
ColorOrBoolCodeControl,
8+
HeightOrBoolCodeControl,
89
JSONObjectArrayControl,
910
RadiusControl,
1011
StringControl,
@@ -108,7 +109,9 @@ const TableEventControl = eventHandlerControl(TableEventOptions);
108109

109110
const rowColorLabel = trans("table.rowColor");
110111
const RowColorTempComp = withContext(
111-
new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
112+
new MultiCompBuilder({
113+
color: ColorOrBoolCodeControl,
114+
}, (props) => props.color)
112115
.setPropertyViewFn((children) =>
113116
children.color.propertyView({
114117
label: rowColorLabel,
@@ -134,6 +137,36 @@ export type RowColorViewType = (param: {
134137
columnTitle: string;
135138
}) => string;
136139

140+
const rowHeightLabel = "Conditional Row Height"; //trans("table.rowColor");
141+
const RowHeightTempComp = withContext(
142+
new MultiCompBuilder({
143+
height: HeightOrBoolCodeControl,
144+
}, (props) => props.height)
145+
.setPropertyViewFn((children) =>
146+
children.height.propertyView({
147+
label: rowHeightLabel,
148+
tooltip: trans("table.rowColorDesc"),
149+
})
150+
)
151+
.build(),
152+
["currentRow", "currentIndex", "currentOriginalIndex", "columnTitle"] as const
153+
);
154+
155+
// @ts-ignore
156+
export class RowHeightComp extends RowHeightTempComp {
157+
override getPropertyView() {
158+
return controlItem({ filterText: rowHeightLabel }, super.getPropertyView());
159+
}
160+
}
161+
162+
// fixme, should be infer from RowHeightComp, but withContext type incorrect
163+
export type RowHeightViewType = (param: {
164+
currentRow: any;
165+
currentIndex: number;
166+
currentOriginalIndex: number | string;
167+
columnTitle: string;
168+
}) => string;
169+
137170
const tableChildrenMap = {
138171
hideBordered: BoolControl,
139172
hideHeader: BoolControl,
@@ -157,6 +190,7 @@ const tableChildrenMap = {
157190
onEvent: TableEventControl,
158191
loading: BoolCodeControl,
159192
rowColor: RowColorComp,
193+
rowHeight: RowHeightComp,
160194
dynamicColumn: BoolPureControl,
161195
// todo: support object config
162196
dynamicColumnConfig: ArrayStringControl,

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -472,6 +472,26 @@ export const RadiusControl = codeControl<string>(
472472
}
473473
);
474474

475+
export const HeightOrBoolCodeControl = codeControl<string>(
476+
(value: unknown) => {
477+
const valueString = toString(value);
478+
if (valueString === "true") {
479+
// true default 40px
480+
return "40px";
481+
}
482+
if (valueString === "" || valueString === "false") {
483+
return "";
484+
}
485+
if (/^[0-9]+(px|%)?$/.test(valueString)) {
486+
return valueString;
487+
}
488+
throw new Error(`the argument must be a number(4), a number of pixels (4px), or a percent (50%).`);
489+
},
490+
{
491+
expectedType: "CSS",
492+
}
493+
);
494+
475495
export const FunctionControl = codeControl<CodeFunction>(
476496
(value) => {
477497
if (typeof value === "function") {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ const TEXT_SIZE = {
279279
name: "textSize",
280280
label: trans("style.textSize"),
281281
textSize: "textSize",
282-
} as const;
282+
} as const;
283283

284284
const CONTAINERHEADERPADDING = {
285285
name: "containerheaderpadding",

0 commit comments

Comments
 (0)