fix: conditional row height

lowcoder-org · FalkWolsky · Dec 5, 2023 · Dec 4, 2023 · Dec 4, 2023 · Dec 5, 2023
commit 9d68bb72d8a31af614b82e68b5495608db603c1a
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableComp.tsx
@@ -51,7 +51,7 @@ import { lastValueIfEqual, shallowEqual } from "util/objectUtils";
 import { IContainer } from "../containerBase";
 import { getSelectedRowKeys } from "./selectionControl";
 import { compTablePropertyView } from "./tablePropertyView";
-import { RowColorComp, TableChildrenView, TableInitComp } from "./tableTypes";
+import { RowColorComp, RowHeightComp, TableChildrenView, TableInitComp } from "./tableTypes";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -196,6 +196,17 @@ export class TableImplComp extends TableInitComp implements IContainer {
             })
           )
         );
+        comp = comp.setChild(
+          "rowHeight",
+          comp.children.rowHeight.reduce(
+            RowHeightComp.changeContextDataAction({
+              currentRow: nextRowExample,
+              currentIndex: 0,
+              currentOriginalIndex: 0,
+              columnTitle: nextRowExample ? Object.keys(nextRowExample)[0] : undefined,
+            })
+          )
+        );
       }
 
       if (dataChanged) {

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -2,7 +2,7 @@ import { Table } from "antd";
 import { TableProps } from "antd/es/table";
 import { TableCellContext, TableRowContext } from "comps/comps/tableComp/tableContext";
 import { TableToolbar } from "comps/comps/tableComp/tableToolbarComp";
-import { RowColorViewType } from "comps/comps/tableComp/tableTypes";
+import { RowColorViewType, RowHeightViewType } from "comps/comps/tableComp/tableTypes";
 import {
   COL_MIN_WIDTH,
   COLUMN_CHILDREN_KEY,
@@ -284,7 +284,7 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   background: string;
-  $style: TableColumnStyleType;
+  $style: TableColumnStyleType & {height?: string};
   $isEditing: boolean;
 }>`
   .ant-table-row-expand-icon,
@@ -295,8 +295,8 @@ const TableTd = styled.td<{
     background: ${(props) => props.background};
     border-color: ${(props) => props.$style.border};
   }
-
   background: ${(props) => props.background} !important;
+  height: ${(props) => props.$style.height}; 
   border-color: ${(props) => props.$style.border} !important;
   border-width: ${(props) => props.$style.borderWidth} !important;
   border-radius: ${(props) => props.$style.radius};
@@ -387,13 +387,15 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   columns: CustomColumnType<RecordType>[];
   viewModeResizable: boolean;
   rowColorFn: RowColorViewType;
+  rowHeightFn: RowHeightViewType;
   columnsStyle: TableColumnStyleType;
 };
 
 function TableCellView(props: {
   record: RecordType;
   title: string;
   rowColorFn: RowColorViewType;
+  rowHeightFn: RowHeightViewType;
   cellColorFn: CellColorViewType;
   rowIndex: number;
   children: any;
@@ -405,6 +407,7 @@ function TableCellView(props: {
     title,
     rowIndex,
     rowColorFn,
+    rowHeightFn,
     cellColorFn,
     children,
     columnsStyle,
@@ -423,17 +426,24 @@ function TableCellView(props: {
       currentOriginalIndex: record[OB_ROW_ORI_INDEX],
       columnTitle: title,
     });
+    const rowHeight = rowHeightFn({
+      currentRow: record,
+      currentIndex: rowIndex,
+      currentOriginalIndex: record[OB_ROW_ORI_INDEX],
+      columnTitle: title,
+    });
     const cellColor = cellColorFn({
       currentCell: record[title.toLowerCase()],
     });
 
-    const style: TableColumnStyleType = {
+    const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
       text: columnStyle.text || columnsStyle.text,
       border: columnStyle.border || columnsStyle.border,
       radius: columnStyle.radius || columnsStyle.radius,
       borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
+      height: rowHeight,
     }
     let { background } = style;
     if (rowContext.selected) {
@@ -515,6 +525,7 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         record,
         title: col.titleText,
         rowColorFn: props.rowColorFn,
+        rowHeightFn: props.rowHeightFn,
         cellColorFn: cellColorFn,
         rowIndex: rowIndex,
         columnsStyle: props.columnsStyle,
@@ -715,6 +726,7 @@ export function TableCompView(props: {
             }
           }}
           rowColorFn={compChildren.rowColor.getView() as any}
+          rowHeightFn={compChildren.rowHeight.getView() as any}
           {...compChildren.selection.getView()(onEvent)}
           bordered={!compChildren.hideBordered.getView()}
           onChange={(pagination, filters, sorter, extra) => {

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -510,6 +510,7 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
           <Section name={"Row Style"}>
             {comp.children.rowStyle.getPropertyView()}
             {comp.children.rowColor.getPropertyView()}
+            {comp.children.rowHeight.getPropertyView()}
           </Section>
           <Section name={"Column Style"}>
             {comp.children.columnsStyle.getPropertyView()}

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -5,6 +5,7 @@ import {
   ArrayStringControl,
   BoolCodeControl,
   ColorOrBoolCodeControl,
+  HeightOrBoolCodeControl,
   JSONObjectArrayControl,
   RadiusControl,
   StringControl,
@@ -108,7 +109,9 @@ const TableEventControl = eventHandlerControl(TableEventOptions);
 
 const rowColorLabel = trans("table.rowColor");
 const RowColorTempComp = withContext(
-  new MultiCompBuilder({ color: ColorOrBoolCodeControl }, (props) => props.color)
+  new MultiCompBuilder({
+    color: ColorOrBoolCodeControl,
+  }, (props) => props.color)
     .setPropertyViewFn((children) =>
       children.color.propertyView({
         label: rowColorLabel,
@@ -134,6 +137,36 @@ export type RowColorViewType = (param: {
   columnTitle: string;
 }) => string;
 
+const rowHeightLabel = "Conditional Row Height"; //trans("table.rowColor");
+const RowHeightTempComp = withContext(
+  new MultiCompBuilder({
+    height: HeightOrBoolCodeControl,
+  }, (props) => props.height)
+    .setPropertyViewFn((children) =>
+      children.height.propertyView({
+        label: rowHeightLabel,
+        tooltip: trans("table.rowColorDesc"),
+      })
+    )
+    .build(),
+  ["currentRow", "currentIndex", "currentOriginalIndex", "columnTitle"] as const
+);
+
+// @ts-ignore
+export class RowHeightComp extends RowHeightTempComp {
+  override getPropertyView() {
+    return controlItem({ filterText: rowHeightLabel }, super.getPropertyView());
+  }
+}
+
+// fixme, should be infer from RowHeightComp, but withContext type incorrect
+export type RowHeightViewType = (param: {
+  currentRow: any;
+  currentIndex: number;
+  currentOriginalIndex: number | string;
+  columnTitle: string;
+}) => string;
+
 const tableChildrenMap = {
   hideBordered: BoolControl,
   hideHeader: BoolControl,
@@ -157,6 +190,7 @@ const tableChildrenMap = {
   onEvent: TableEventControl,
   loading: BoolCodeControl,
   rowColor: RowColorComp,
+  rowHeight: RowHeightComp,
   dynamicColumn: BoolPureControl,
   // todo: support object config
   dynamicColumnConfig: ArrayStringControl,

diff --git a/client/packages/lowcoder/src/comps/controls/codeControl.tsx b/client/packages/lowcoder/src/comps/controls/codeControl.tsx
@@ -472,6 +472,26 @@ export const RadiusControl = codeControl<string>(
   }
 );
 
+export const HeightOrBoolCodeControl = codeControl<string>(
+  (value: unknown) => {
+    const valueString = toString(value);
+    if (valueString === "true") {
+      // true default 40px
+      return "40px";
+    }
+    if (valueString === "" || valueString === "false") {
+      return "";
+    }
+    if (/^[0-9]+(px|%)?$/.test(valueString)) {
+      return valueString;
+    }
+    throw new Error(`the argument must be a number(4), a number of pixels (4px), or a percent (50%).`);
+  },
+  {
+    expectedType: "CSS",
+  }
+);
+
 export const FunctionControl = codeControl<CodeFunction>(
   (value) => {
     if (typeof value === "function") {

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -279,7 +279,7 @@ const TEXT_SIZE = {
   name: "textSize",
   label: trans("style.textSize"),	
   textSize: "textSize",	
-} as const;	
+} as const;
 
 const CONTAINERHEADERPADDING = {	
   name: "containerheaderpadding",