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

Commit85c55d4

Browse files
fix table row selection doesn't work on transparent hover color
1 parent6a66978 commit85c55d4

File tree

7 files changed

+43
-40
lines changed

7 files changed

+43
-40
lines changed

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,26 @@ const isValidColor = (str?: string) => {
7575
returncolord(str).isValid();
7676
};
7777

78+
constisTransparentColor=(color?:string)=>{
79+
if(!color)returntrue;
80+
81+
// Check for common transparent values
82+
if(color==='transparent'||color==='')returntrue;
83+
84+
// Check if it's a valid color with alpha = 0
85+
try{
86+
constcolorObj=colord(color);
87+
if(colorObj.isValid()){
88+
returncolorObj.alpha()===0;
89+
}
90+
}catch(e){
91+
// If colord can't parse it, consider it transparent
92+
returntrue;
93+
}
94+
95+
returnfalse;
96+
};
97+
7898
exportconstisDarkColor=(colorStr:string)=>{
7999
returnbrightnessCompare(colorStr,0.75);
80100
};
@@ -122,4 +142,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
122142
returncolor.darken(intensity).toHex().toUpperCase();
123143
};
124144

125-
export{toRGBA,toHex,alphaOfRgba,isValidColor,isValidGradient};
145+
export{toRGBA,toHex,alphaOfRgba,isValidColor,isValidGradient,isTransparentColor};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export function isThemeColorKey(key: string) {
123123
case"padding":
124124
case"gridColumns":
125125
case"textSize":
126-
case"lineHeight":
126+
case"lineHeight":
127127
returntrue;
128128
}
129129
returnfalse;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useUserViewMode } from "util/hooks";
77
import{ReactRef,ResizeHandleAxis}from"layout/gridLayoutPropTypes";
88
import{COL_MIN_WIDTH,RecordType,CustomColumnType}from"./tableUtils";
99
import{RowColorViewType,RowHeightViewType}from"./tableTypes";
10-
import{TableColumnStyleType,TableColumnLinkStyleType}from"comps/controls/styleControlConstants";
10+
import{TableColumnStyleType,TableColumnLinkStyleType,TableRowStyleType}from"comps/controls/styleControlConstants";
1111
import{CellColorViewType}from"./column/tableColumnComp";
1212
import{TableCellView}from"./TableCell";
1313
import{TableRowView}from"./TableRow";
@@ -106,6 +106,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
106106
rowColorFn:RowColorViewType;
107107
rowHeightFn:RowHeightViewType;
108108
columnsStyle:TableColumnStyleType;
109+
rowStyle:TableRowStyleType;
109110
size?:string;
110111
rowAutoHeight?:boolean;
111112
customLoading?:boolean;
@@ -125,6 +126,7 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
125126
rowColorFn,
126127
rowHeightFn,
127128
columnsStyle,
129+
rowStyle,
128130
size,
129131
rowAutoHeight,
130132
customLoading,
@@ -156,6 +158,7 @@ function ResizeableTableComp<RecordType extends object>(props: CustomTableProps<
156158
rowIndex:index,
157159
columnsStyle,
158160
columnStyle:col.style,
161+
rowStyle:rowStyle,
159162
linkStyle:col.linkStyle,
160163
tableSize:size,
161164
autoHeight:rowAutoHeight,

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
importReact,{useContext,useMemo,useState}from"react";
22
importstyled,{css}from"styled-components";
33
import{TableCellContext,TableRowContext}from"./tableContext";
4-
import{TableColumnStyleType,TableColumnLinkStyleType,ThemeDetail}from"comps/controls/styleControlConstants";
4+
import{TableColumnStyleType,TableColumnLinkStyleType,ThemeDetail,TableRowStyleType}from"comps/controls/styleControlConstants";
55
import{RowColorViewType,RowHeightViewType}from"./tableTypes";
66
import{CellColorViewType}from"./column/tableColumnComp";
77
import{RecordType,OB_ROW_ORI_INDEX}from"./tableUtils";
88
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
99
importSkeletonfrom"antd/es/skeleton";
1010
import{SkeletonButtonProps}from"antd/es/skeleton/Button";
11+
import{isTransparentColor}from"lowcoder-design";
1112

1213
interfaceTableTdProps{
1314
$background:string;
@@ -138,6 +139,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
138139
children:any;
139140
columnsStyle:TableColumnStyleType;
140141
columnStyle:TableColumnStyleType;
142+
rowStyle:TableRowStyleType;
141143
linkStyle:TableColumnLinkStyleType;
142144
tableSize?:string;
143145
autoHeight?:boolean;
@@ -154,6 +156,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
154156
children,
155157
columnsStyle,
156158
columnStyle,
159+
rowStyle,
157160
linkStyle,
158161
tableSize,
159162
autoHeight,
@@ -209,7 +212,7 @@ export const TableCellView = React.forwardRef<HTMLTableCellElement, {
209212
}
210213

211214
let{ background}=style!;
212-
if(rowContext.hover){
215+
if(rowContext.hover&&!isTransparentColor(rowStyle.hoverRowBackground)){
213216
background='transparent';
214217
}
215218

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,23 +11,12 @@ import {
1111
RecordType,
1212
supportChildrenTree,
1313
}from"comps/comps/tableComp/tableUtils";
14-
import{
15-
handleToHoverRow,
16-
handleToSelectedRow,
17-
TableColumnLinkStyleType,
18-
TableColumnStyleType,
19-
TableHeaderStyleType,
20-
TableRowStyleType,
21-
TableStyleType,
22-
ThemeDetail,
23-
TableToolbarStyleType,
24-
}from"comps/controls/styleControlConstants";
2514
import{CompNameContext,EditorContext}from"comps/editorState";
2615
import{BackgroundColorContext}from"comps/utils/backgroundColorContext";
2716
import{trans}from"i18n";
2817
import_,{isEqual}from"lodash";
2918
import{ScrollBar}from"lowcoder-design";
30-
importReact,{Children,useCallback,useContext,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";
19+
importReact,{useCallback,useContext,useEffect,useMemo,useState}from"react";
3120
import{useMergeCompStyles,useUserViewMode}from"util/hooks";
3221
import{TableImplComp}from"./tableComp";
3322
import{useResizeDetector}from"react-resize-detector";
@@ -38,7 +27,7 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
3827
import{TableSummary}from"./tableSummaryComp";
3928
import{ThemeContext}from"@lowcoder-ee/comps/utils/themeContext";
4029
import{useUpdateEffect}from"react-use";
41-
import{ResizeableTable,CustomTableProps}from"./ResizeableTable";
30+
import{ResizeableTable}from"./ResizeableTable";
4231
import{BackgroundWrapper,TableWrapper}from"./tableStyles";
4332
import{
4433
useTableMode,
@@ -49,16 +38,6 @@ import {
4938

5039
exportconstEMPTY_ROW_KEY='empty_row';
5140

52-
53-
54-
55-
56-
57-
58-
59-
60-
61-
6241
constcreateNewEmptyRow=(
6342
rowIndex:number,
6443
columnsAggrData:ColumnsAggrData,
@@ -278,9 +257,6 @@ export const TableCompView = React.memo((props: {
278257
totalColumnsWidth
279258
);
280259

281-
282-
283-
284260
useMergeCompStyles(
285261
childrenPropsasRecord<string,any>,
286262
comp.dispatch
@@ -427,6 +403,7 @@ export const TableCompView = React.memo((props: {
427403
showHeader={!compChildren.hideHeader.getView()}
428404
columns={antdColumns}
429405
columnsStyle={columnsStyle}
406+
rowStyle={rowStyle}
430407
viewModeResizable={compChildren.viewModeResizable.getView()}
431408
visibleResizables={compChildren.visibleResizables.getView()}
432409
dataSource={pageDataInfo.data.concat(Object.values(emptyRowsMap))}

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
importstyled,{css}from"styled-components";
2-
import{isValidColor,darkenColor}from"lowcoder-design";
2+
import{isValidColor,darkenColor,isTransparentColor}from"lowcoder-design";
33
import{PrimaryColor}from"constants/style";
44
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
55
import{TableStyleType,TableRowStyleType,TableHeaderStyleType,TableToolbarStyleType}from"comps/controls/styleControlConstants";
@@ -17,7 +17,7 @@ export const getStyle = (
1717
)=>{
1818
constbackground=genLinerGradient(style.background);
1919
constselectedRowBackground=genLinerGradient(rowStyle.selectedRowBackground);
20-
consthoverRowBackground=genLinerGradient(rowStyle.hoverRowBackground);
20+
consthoverRowBackground=isTransparentColor(rowStyle.hoverRowBackground) ?null :genLinerGradient(rowStyle.hoverRowBackground);
2121
constalternateBackground=genLinerGradient(rowStyle.alternateBackground);
2222

2323
returncss`
@@ -35,38 +35,38 @@ export const getStyle = (
3535
3636
// selected row
3737
>tr:nth-of-type(2n+1).ant-table-row-selected {
38-
background:${selectedRowBackground},${rowStyle.background}!important;
38+
background:${selectedRowBackground||rowStyle.background}!important;
3939
>td.ant-table-cell {
4040
background: transparent!important;
4141
}
4242
4343
// > td.ant-table-cell-row-hover,
4444
&:hover {
45-
background:${hoverRowBackground},${selectedRowBackground},${rowStyle.background}!important;
45+
background:${hoverRowBackground||selectedRowBackground||rowStyle.background}!important;
4646
}
4747
}
4848
4949
>tr:nth-of-type(2n).ant-table-row-selected {
50-
background:${selectedRowBackground},${alternateBackground}!important;
50+
background:${selectedRowBackground||alternateBackground}!important;
5151
>td.ant-table-cell {
5252
background: transparent!important;
5353
}
5454
5555
// > td.ant-table-cell-row-hover,
5656
&:hover {
57-
background:${hoverRowBackground},${selectedRowBackground},${alternateBackground}!important;
57+
background:${hoverRowBackground||selectedRowBackground||alternateBackground}!important;
5858
}
5959
}
6060
6161
// hover row
6262
>tr:nth-of-type(2n+1):hover {
63-
background:${hoverRowBackground},${rowStyle.background}!important;
63+
background:${hoverRowBackground||rowStyle.background}!important;
6464
>td.ant-table-cell-row-hover {
6565
background: transparent;
6666
}
6767
}
6868
>tr:nth-of-type(2n):hover {
69-
background:${hoverRowBackground},${alternateBackground}!important;
69+
background:${hoverRowBackground||alternateBackground}!important;
7070
>td.ant-table-cell-row-hover {
7171
background: transparent;
7272
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1133,7 +1133,7 @@ export const en = {
11331133
"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.",
11341134
"tableCompKeywords":"table, data, sorting, filtering",
11351135

1136-
"tableLiteCompName":"Table Lite",
1136+
"tableLiteCompName":"Table(Lite)",
11371137
"tableLiteCompDesc":"A lightweight, high-performance table component optimized for displaying many rows fast, with essential sorting and filtering capabilities.",
11381138
"tableLiteCompKeywords":"table, data, sorting, filtering, performance, lite",
11391139

0 commit comments

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