feat: table row fixed/auto height + column ellipsis/wrap switch

lowcoder-org · FalkWolsky · Dec 5, 2023 · Dec 4, 2023 · Dec 4, 2023 · Dec 5, 2023
commit de1bc70323af5bb64c3d690b929ca52eb01f9e6c
diff --git a/client/packages/lowcoder/src/components/table/EditableCell.tsx b/client/packages/lowcoder/src/components/table/EditableCell.tsx
@@ -34,6 +34,7 @@ export interface CellProps {
   size?: string;
   candidateTags?: string[];
   candidateStatus?: { text: string; status: StatusType }[];
+  textOverflow?: boolean;
 }
 
 export type CellViewReturn = (props: CellProps) => ReactNode;
@@ -43,17 +44,6 @@ export type EditViewFn<T> = (props: {
   onChangeEnd: () => void;
 }) => ReactNode;
 
-export const SizeWrapper = styled.div<{ $size?: string }>`
-  ${(props) =>
-    props.$size &&
-    `padding: ${
-      props.$size === "small" ? "8.5px 8px" : props.$size === "large" ? "16.5px 16px" : "12.5px 8px"
-    };
-    line-height: 21px;
-    min-height: ${props.$size === "small" ? "39px" : props.$size === "large" ? "55px" : "47px"};
-    `}
-`;
-
 const BorderDiv = styled.div`
   position: absolute;
   border: 1.5px solid #315efb;
@@ -127,11 +117,15 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
   }
 
   return (
-    <ColumnTypeView>
+    <ColumnTypeView
+      textOverflow={props.textOverflow}
+    >
       {status === "toSave" && !isEditing && <EditableChip />}
-      <SizeWrapper $size={props.size} onDoubleClick={enterEditFn}>
+      <div
+        onDoubleClick={enterEditFn}
+      >
         {normalView}
-      </SizeWrapper>
+      </div>
     </ColumnTypeView>
   );
 }
diff --git a/client/packages/lowcoder/src/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
@@ -1,13 +1,17 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 
-const ColumnTypeViewWrapper = styled.div`
-  div {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    word-break: keep-all;
-  }
+const ColumnTypeViewWrapper = styled.div<{
+  textOverflow?: boolean
+}>`
+  ${props => !props.textOverflow && `
+    div {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      word-break: keep-all;
+    }
+  `}
 `;
 
 const ColumnTypeHoverView = styled.div<{
@@ -62,7 +66,10 @@ function childIsOverflow(nodes: HTMLCollection): boolean {
   return false;
 }
 
-export default function ColumnTypeView(props: { children: React.ReactNode }) {
+export default function ColumnTypeView(props: {
+  children: React.ReactNode,
+  textOverflow?: boolean,
+}) {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const hoverViewRef = useRef<HTMLDivElement>(null);
   const [isHover, setIsHover] = useState(false);
@@ -161,6 +168,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
     <>
       <ColumnTypeViewWrapper
         ref={wrapperRef}
+        textOverflow={props.textOverflow}
         onMouseEnter={() => {
           delayMouseEnter();
         }}
@@ -171,7 +179,7 @@ export default function ColumnTypeView(props: { children: React.ReactNode }) {
       >
         {props.children}
       </ColumnTypeViewWrapper>
-      {isHover && hasOverflow && wrapperRef.current && (
+      {isHover && hasOverflow && wrapperRef.current && !props.textOverflow && (
         <ColumnTypeHoverView
           ref={hoverViewRef}
           visible={adjustedPosition.done}

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -26,6 +26,7 @@ import { ColumnTypeComp, ColumnTypeCompMap } from "./columnTypeComp";
 import { ColorControl } from "comps/controls/colorControl";
 import { JSONValue } from "util/jsonTypes";
 import styled from "styled-components";
+import { TextOverflowControl } from "comps/controls/textOverflowControl";
 
 export type Render = ReturnType<ConstructorToComp<typeof RenderComp>["getOriginalComp"]>;
 export const RenderComp = withSelectedMultiContext(ColumnTypeComp);
@@ -103,7 +104,8 @@ export const columnChildrenMap = {
   borderWidth: withDefault(RadiusControl, ""),
   radius: withDefault(RadiusControl, ""),
   textSize: withDefault(RadiusControl, ""),
-  cellColor: CellColorComp, 
+  cellColor: CellColorComp,
+  textOverflow: withDefault(TextOverflowControl, "ellipsis"),
 };
 
 const StyledIcon = styled.span`
@@ -228,6 +230,7 @@ export class ColumnComp extends ColumnInitComp {
           preInputNode: <StyledIcon as={TextSizeIcon} title="" />,	
           placeholder: '14px',
         })}
+        {this.children.textOverflow.getPropertyView()}
         {this.children.cellColor.getPropertyView()}
       </>
     );

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -284,8 +284,10 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   background: string;
-  $style: TableColumnStyleType & {height?: string};
+  $style: TableColumnStyleType & {rowHeight?: string};
   $isEditing: boolean;
+  $tableSize?: string;
+  $autoHeight?: boolean;
 }>`
   .ant-table-row-expand-icon,
   .ant-table-row-indent {
@@ -296,15 +298,41 @@ const TableTd = styled.td<{
     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};
   padding: 0 !important;
 
-  > div > div {
+  > div {
     color: ${(props) => props.$style.text};
     font-size: ${(props) => props.$style.textSize};
+    line-height: 21px;
+
+    ${(props) => props.$tableSize === 'small' && `
+      padding: 8.5px 8px;
+      min-height: ${props.$style.rowHeight || '39px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '39px'};
+      `};
+    `};
+    ${(props) => props.$tableSize === 'middle' && `
+      padding: 12.5px 8px;
+      min-height: ${props.$style.rowHeight || '47px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '47px'};
+      `};
+    `};
+    ${(props) => props.$tableSize === 'large' && `
+      padding: 16.5px 16px;
+      min-height: ${props.$style.rowHeight || '55px'};
+      ${!props.$autoHeight && `
+        overflow-y: auto;
+        max-height: ${props.$style.rowHeight || '55px'};
+      `};
+    `};
+
     &,
     > .ant-badge > .ant-badge-status-text,
     > div > .markdown-body {
@@ -389,6 +417,8 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   rowColorFn: RowColorViewType;
   rowHeightFn: RowHeightViewType;
   columnsStyle: TableColumnStyleType;
+  size?: string;
+  rowAutoHeight?: boolean;
 };
 
 function TableCellView(props: {
@@ -401,6 +431,8 @@ function TableCellView(props: {
   children: any;
   columnsStyle: TableColumnStyleType;
   columnStyle: TableColumnStyleType;
+  tableSize?: string;
+  autoHeight?: boolean;
 }) {
   const {
     record,
@@ -412,8 +444,11 @@ function TableCellView(props: {
     children,
     columnsStyle,
     columnStyle,
+    tableSize,
+    autoHeight,
     ...restProps
   } = props;
+
   const [editing, setEditing] = useState(false);
   const rowContext = useContext(TableRowContext);
   let tdView;
@@ -443,7 +478,7 @@ function TableCellView(props: {
       radius: columnStyle.radius || columnsStyle.radius,
       borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
       textSize: columnStyle.textSize || columnsStyle.textSize,
-      height: rowHeight,
+      rowHeight: rowHeight,
     }
     let { background } = style;
     if (rowContext.selected) {
@@ -458,6 +493,8 @@ function TableCellView(props: {
         background={background}
         $style={style}
         $isEditing={editing}
+        $tableSize={tableSize}
+        $autoHeight={autoHeight}
       >
         {children}
       </TableTd>
@@ -530,6 +567,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
         rowIndex: rowIndex,
         columnsStyle: props.columnsStyle,
         columnStyle: style,
+        tableSize: props.size,
+        autoHeight: props.rowAutoHeight,
       }),
       onHeaderCell: () => ({
         width: resizeWidth,
@@ -598,6 +637,7 @@ export function TableCompView(props: {
   const compChildren = comp.children;
   const style = compChildren.style.getView();
   const rowStyle = compChildren.rowStyle.getView();
+  const rowAutoHeight = compChildren.rowAutoHeight.getView();
   const columnsStyle = compChildren.columnsStyle.getView();
   const changeSet = useMemo(() => compChildren.columns.getChangeSet(), [compChildren.columns]);
   const hasChange = useMemo(() => !_.isEmpty(changeSet), [changeSet]);
@@ -625,7 +665,7 @@ export function TableCompView(props: {
         size,
         dynamicColumn,
         dynamicColumnConfig,
-        columnsAggrData
+        columnsAggrData,
       ),
     [
       columnViews,
@@ -738,6 +778,7 @@ export function TableCompView(props: {
           viewModeResizable={compChildren.viewModeResizable.getView()}
           dataSource={pageDataInfo.data}
           size={compChildren.size.getView()}
+          rowAutoHeight={rowAutoHeight}
           tableLayout="fixed"
           loading={
             loading ||

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -504,13 +504,13 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
 
       {["layout", "both"].includes(editorModeStatus) && (
         <><Section name={"Table Style"}>
-            {comp.children.style.getPropertyView()}
-
+            {comp.children.style.getPropertyView()}  
           </Section>
           <Section name={"Row Style"}>
             {comp.children.rowStyle.getPropertyView()}
-            {comp.children.rowColor.getPropertyView()}
+            {comp.children.rowAutoHeight.getPropertyView()}
             {comp.children.rowHeight.getPropertyView()}
+            {comp.children.rowColor.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
@@ -190,6 +190,7 @@ const tableChildrenMap = {
   onEvent: TableEventControl,
   loading: BoolCodeControl,
   rowColor: RowColorComp,
+  rowAutoHeight: withDefault(AutoHeightControl, "auto"),
   rowHeight: RowHeightComp,
   dynamicColumn: BoolPureControl,
   // todo: support object config

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -267,7 +267,7 @@ export function columnsToAntdFormat(
   size: string,
   dynamicColumn: boolean,
   dynamicColumnConfig: Array<string>,
-  columnsAggrData: ColumnsAggrData
+  columnsAggrData: ColumnsAggrData,
 ): Array<CustomColumnType<RecordType>> {
   const sortMap: Map<string | undefined, SortOrder> = new Map(
     sort.map((s) => [s.column, s.desc ? "descend" : "ascend"])
@@ -338,7 +338,12 @@ export function columnsToAntdFormat(
             String(record[OB_ROW_ORI_INDEX])
           )
           .getView()
-          .view({ editable: column.editable, size, candidateTags: tags, candidateStatus: status });
+          .view({
+            editable: column.editable,
+            size, candidateTags: tags,
+            candidateStatus: status,
+            textOverflow: column.textOverflow,
+          });
       },
       ...(column.sortable
         ? {

diff --git a/client/packages/lowcoder/src/comps/controls/textOverflowControl.tsx b/client/packages/lowcoder/src/comps/controls/textOverflowControl.tsx
@@ -0,0 +1,29 @@
+import { trans } from "i18n";
+import { ControlParams } from "./controlParams";
+import { dropdownAbstractControl } from "./dropdownControl";
+
+const overflowOptions = [
+  {
+    label: "Ellipsis", // trans("autoHeightProp.auto"),
+    value: "ellipsis",
+  },
+  {
+    label: "Wrap", // trans("autoHeightProp.fixed"),
+    value: "wrap",
+  },
+] as const;
+
+const TextOverflowTmpControl = dropdownAbstractControl(overflowOptions, "ellipsis");
+export class TextOverflowControl extends TextOverflowTmpControl {
+  override getView() {
+    return this.value !== "ellipsis";
+  }
+
+  override getPropertyView() {
+    return this.propertyView({ label: "Text Overflow"/*trans("prop.height")*/ });
+  }
+
+  override propertyView(params: ControlParams) {
+    return super.propertyView({ radioButton: true, ...params });
+  }
+}