fix table row selection doesn't work on transparent hover color

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -75,6 +75,26 @@ const isValidColor = (str?: string) => {
   return colord(str).isValid();
 };
 
+const isTransparentColor = (color?: string) => {
+  if (!color) return true;
+  
+  // Check for common transparent values
+  if (color === 'transparent' || color === '') return true;
+  
+  // Check if it's a valid color with alpha = 0
+  try {
+    const colorObj = colord(color);
+    if (colorObj.isValid()) {
+      return colorObj.alpha() === 0;
+    }
+  } catch (e) {
+    // If colord can't parse it, consider it transparent
+    return true;
+  }
+  
+  return false;
+};
+
 export const isDarkColor = (colorStr: string) => {
   return brightnessCompare(colorStr, 0.75);
 };
@@ -122,4 +142,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
   return color.darken(intensity).toHex().toUpperCase();
 };
 
-export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };
+export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient, isTransparentColor };

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -123,7 +123,7 @@ export function isThemeColorKey(key: string) {
     case "padding":
     case "gridColumns":
     case "textSize":
-      case "lineHeight":
+    case "lineHeight":
       return true;
   }
   return false;

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

@@ -7,7 +7,7 @@ import { useUserViewMode } from "util/hooks";
 import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
 import { COL_MIN_WIDTH, RecordType, CustomColumnType } from "./tableUtils";
 import { RowColorViewType, RowHeightViewType } from "./tableTypes";
-import { TableColumnStyleType, TableColumnLinkStyleType } from "comps/controls/styleControlConstants";
+import { TableColumnStyleType, TableColumnLinkStyleType, TableRowStyleType } from "comps/controls/styleControlConstants";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { TableCellView } from "./TableCell";
 import { TableRowView } from "./TableRow";
@@ -106,6 +106,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
   rowColorFn: RowColorViewType;
   rowHeightFn: RowHeightViewType;
   columnsStyle: TableColumnStyleType;
+  rowStyle: TableRowStyleType;
   size?: string;
   rowAutoHeight?: boolean;
   customLoading?: boolean;
@@ -125,6 +126,7 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
     rowColorFn,
     rowHeightFn,
     columnsStyle,
+    rowStyle,
     size,
     rowAutoHeight,
     customLoading,
@@ -156,6 +158,7 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
       rowIndex: index,
       columnsStyle,
       columnStyle: col.style,
+      rowStyle: rowStyle,
       linkStyle: col.linkStyle,
       tableSize: size,
       autoHeight: rowAutoHeight,

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

@@ -1,13 +1,14 @@
 import React, { useContext, useMemo, useState } from "react";
 import styled, { css } from "styled-components";
 import { TableCellContext, TableRowContext } from "./tableContext";
-import { TableColumnStyleType, TableColumnLinkStyleType, ThemeDetail } from "comps/controls/styleControlConstants";
+import { TableColumnStyleType, TableColumnLinkStyleType, ThemeDetail, TableRowStyleType } from "comps/controls/styleControlConstants";
 import { RowColorViewType, RowHeightViewType } from "./tableTypes";
 import { CellColorViewType } from "./column/tableColumnComp";
 import { RecordType, OB_ROW_ORI_INDEX } from "./tableUtils";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import Skeleton from "antd/es/skeleton";
 import { SkeletonButtonProps } from "antd/es/skeleton/Button";
+import { isTransparentColor } from "lowcoder-design";
 
 interface TableTdProps {
   $background: string;
@@ -138,6 +139,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
   children: any;
   columnsStyle: TableColumnStyleType;
   columnStyle: TableColumnStyleType;
+  rowStyle: TableRowStyleType;
   linkStyle: TableColumnLinkStyleType;
   tableSize?: string;
   autoHeight?: boolean;
@@ -154,6 +156,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
     children,
     columnsStyle,
     columnStyle,
+    rowStyle,
     linkStyle,
     tableSize,
     autoHeight,
@@ -209,7 +212,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
   }
 
   let { background } = style!;
-  if (rowContext.hover) {
+  if (rowContext.hover && !isTransparentColor(rowStyle.hoverRowBackground)) {
     background = 'transparent';
   }
 

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

@@ -11,23 +11,12 @@ import {
   RecordType,
   supportChildrenTree,
 } from "comps/comps/tableComp/tableUtils";
-import {
-  handleToHoverRow,
-  handleToSelectedRow,
-  TableColumnLinkStyleType,
-  TableColumnStyleType,
-  TableHeaderStyleType,
-  TableRowStyleType,
-  TableStyleType,
-  ThemeDetail,
-  TableToolbarStyleType,
-} from "comps/controls/styleControlConstants";
 import { CompNameContext, EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import { trans } from "i18n";
 import _, { isEqual } from "lodash";
 import { ScrollBar } from "lowcoder-design";
-import React, { Children, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { useMergeCompStyles, useUserViewMode } from "util/hooks";
 import { TableImplComp } from "./tableComp";
 import { useResizeDetector } from "react-resize-detector";
@@ -38,7 +27,7 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { TableSummary } from "./tableSummaryComp";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
 import { useUpdateEffect } from "react-use";
-import { ResizeableTable, CustomTableProps } from "./ResizeableTable";
+import { ResizeableTable } from "./ResizeableTable";
 import { BackgroundWrapper, TableWrapper } from "./tableStyles";
 import {
   useTableMode,
@@ -49,16 +38,6 @@ import {
 
 export const EMPTY_ROW_KEY = 'empty_row';
 
-
-
-
-
-
-
-
-
-
-
 const createNewEmptyRow = (
   rowIndex: number,
   columnsAggrData: ColumnsAggrData,
@@ -278,9 +257,6 @@ export const TableCompView = React.memo((props: {
     totalColumnsWidth
   );
 
-
-
-
   useMergeCompStyles(
     childrenProps as Record<string, any>,
     comp.dispatch
@@ -427,6 +403,7 @@ export const TableCompView = React.memo((props: {
               showHeader={!compChildren.hideHeader.getView()}
               columns={antdColumns}
               columnsStyle={columnsStyle}
+              rowStyle={rowStyle}
               viewModeResizable={compChildren.viewModeResizable.getView()}
               visibleResizables={compChildren.visibleResizables.getView()}
               dataSource={pageDataInfo.data.concat(Object.values(emptyRowsMap))}

client/packages/lowcoder/src/comps/comps/tableComp/tableStyles.ts

@@ -1,5 +1,5 @@
 import styled, { css } from "styled-components";
-import { isValidColor, darkenColor } from "lowcoder-design";
+import { isValidColor, darkenColor, isTransparentColor } from "lowcoder-design";
 import { PrimaryColor } from "constants/style";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { TableStyleType, TableRowStyleType, TableHeaderStyleType, TableToolbarStyleType } from "comps/controls/styleControlConstants";
@@ -17,7 +17,7 @@ export const getStyle = (
 ) => {
   const background = genLinerGradient(style.background);
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
-  const hoverRowBackground = genLinerGradient(rowStyle.hoverRowBackground);
+  const hoverRowBackground = isTransparentColor(rowStyle.hoverRowBackground) ? null : genLinerGradient(rowStyle.hoverRowBackground);
   const alternateBackground = genLinerGradient(rowStyle.alternateBackground);
 
   return css`
@@ -35,38 +35,38 @@ export const getStyle = (
 
       // selected row
       > tr:nth-of-type(2n + 1).ant-table-row-selected {
-        background: ${selectedRowBackground}, ${rowStyle.background} !important;
+        background: ${selectedRowBackground || rowStyle.background} !important;
         > td.ant-table-cell {
           background: transparent !important;
         }
 
         // > td.ant-table-cell-row-hover,
         &:hover {
-          background: ${hoverRowBackground}, ${selectedRowBackground}, ${rowStyle.background} !important;
+          background: ${hoverRowBackground || selectedRowBackground || rowStyle.background} !important;
         }
       }
 
       > tr:nth-of-type(2n).ant-table-row-selected {
-        background: ${selectedRowBackground}, ${alternateBackground} !important;
+        background: ${selectedRowBackground || alternateBackground} !important;
         > td.ant-table-cell {
           background: transparent !important;
         }
 
         // > td.ant-table-cell-row-hover,
         &:hover {
-          background: ${hoverRowBackground}, ${selectedRowBackground}, ${alternateBackground} !important;
+          background: ${hoverRowBackground || selectedRowBackground || alternateBackground} !important;
         }
       }
 
       // hover row
       > tr:nth-of-type(2n + 1):hover {
-        background: ${hoverRowBackground}, ${rowStyle.background} !important;
+        background: ${hoverRowBackground || rowStyle.background} !important;
         > td.ant-table-cell-row-hover {
           background: transparent;
         }
       }
       > tr:nth-of-type(2n):hover {
-        background: ${hoverRowBackground}, ${alternateBackground} !important;
+        background: ${hoverRowBackground || alternateBackground} !important;
         > td.ant-table-cell-row-hover {
           background: transparent;
         }

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -1133,7 +1133,7 @@ export const en = {
     "tableCompDesc": "A rich table component for displaying data in a structured table format, with options for sorting and filtering, tree Data display and extensible Rows.",
     "tableCompKeywords": "table, data, sorting, filtering",
 
-    "tableLiteCompName": "Table Lite",
+    "tableLiteCompName": "Table (Lite)",
     "tableLiteCompDesc": "A lightweight, high-performance table component optimized for displaying many rows fast, with essential sorting and filtering capabilities.",
     "tableLiteCompKeywords": "table, data, sorting, filtering, performance, lite",