Skip to content

Commit 2ef23dd

Browse files
raheeliftikhar5raheeliftikhar5
committed
added column tooltip in table
1 parent e76fd45 commit 2ef23dd

23 files changed

+205
-58
lines changed

‎client/packages/lowcoder/src/components/table/EditableCell.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
129129
textOverflow={props.textOverflow}
130130
>
131131
{status === "toSave" && !isEditing && <EditableChip />}
132-
{normalView}
132+
{!editable && normalView}
133133
{/* overlay on normal view to handle double click for editing */}
134134
{editable && (
135135
<div
@@ -142,6 +142,7 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
142142
}}
143143
onDoubleClick={enterEditFn}
144144
>
145+
{normalView}
145146
</div>
146147
)}
147148
</ColumnTypeView>

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/ColumnNumberComp.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { withDefault } from "comps/generators";
88
import styled from "styled-components";
99
import { IconControl } from "comps/controls/iconControl";
1010
import { hasIcon } from "comps/utils";
11+
import Tooltip from "antd/es/tooltip";
1112

1213
const InputNumberWrapper = styled.div`
1314
.ant-input-number {
@@ -26,6 +27,7 @@ const InputNumberWrapper = styled.div`
2627

2728
const childrenMap = {
2829
text: NumberControl,
30+
tooltip: StringControl,
2931
step: withDefault(NumberControl, 1),
3032
precision: RangeControl.closed(0, 20, 0),
3133
float: BoolControl,
@@ -58,13 +60,15 @@ export const ColumnNumberComp = (function () {
5860
formattedValue = formattedValue.toFixed(precision + 1);
5961
}
6062
return (
61-
<>{hasIcon(props.prefixIcon) && (
63+
<Tooltip title={props.tooltip}>
64+
{hasIcon(props.prefixIcon) && (
6265
<span>{props.prefixIcon}</span>
6366
)}
6467
<span>{props.prefix + formattedValue + props.suffix}</span>
6568
{hasIcon(props.suffixIcon) && (
6669
<span>{props.suffixIcon}</span>
67-
)} </>
70+
)}
71+
</Tooltip>
6872
);
6973
},
7074
(nodeValue) => nodeValue.text.value,
@@ -95,6 +99,10 @@ export const ColumnNumberComp = (function () {
9599
label: trans("table.columnValue"),
96100
tooltip: ColumnValueTooltip,
97101
})}
102+
{children.tooltip.propertyView({
103+
label: trans("table.columnTooltip"),
104+
tooltip: ColumnValueTooltip,
105+
})}
98106
{children.step.propertyView({
99107
label: trans("table.numberStep"),
100108
tooltip: trans("table.numberStepTooltip"),

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnBooleanComp.tsx

+18-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
22
import { trans } from "i18n";
33
import { default as Checkbox } from "antd/es/checkbox";
44
import { ColumnTypeCompBuilder, ColumnTypeViewFn } from "../columnTypeCompBuilder";
@@ -11,6 +11,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
1111
import { TableCheckedIcon, TableUnCheckedIcon } from "lowcoder-design";
1212
import { IconControl } from "comps/controls/iconControl";
1313
import { hasIcon } from "comps/utils";
14+
import Tooltip from "antd/es/tooltip";
1415

1516
const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>`
1617
${(props) => props.$style && getStyle(props.$style)}
@@ -21,9 +22,10 @@ const Wrapper = styled.div`
2122
padding: 0 8px;
2223
`;
2324

24-
const IconWrapper = styled.div<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
25-
pointer-events: none;
25+
const IconWrapper = styled.span<{ $style: CheckboxStyleType; $ifChecked: boolean }>`
26+
// pointer-events: none;
2627
height: 22px;
28+
display: inline-block;
2729
svg {
2830
width: 14px;
2931
height: 22px;
@@ -50,6 +52,7 @@ const falseValuesOptions = [
5052

5153
const childrenMap = {
5254
text: BoolCodeControl,
55+
tooltip: StringControl,
5356
falseValues: dropdownControl(falseValuesOptions, ""),
5457
iconTrue: IconControl,
5558
iconFalse: IconControl,
@@ -93,12 +96,14 @@ export const BooleanComp = (function () {
9396
const CheckBoxComp = () => {
9497
const style = useStyle(CheckboxStyle);
9598
return (
96-
<IconWrapper $style={style} $ifChecked={value}>
97-
{value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> )
98-
: value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
99-
) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
100-
)}
101-
</IconWrapper>
99+
<Tooltip title={props.tooltip}>
100+
<IconWrapper $style={style} $ifChecked={value}>
101+
{value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> )
102+
: value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
103+
) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
104+
)}
105+
</IconWrapper>
106+
</Tooltip>
102107
);
103108
};
104109
return <CheckBoxComp />;
@@ -122,6 +127,10 @@ export const BooleanComp = (function () {
122127
label: trans("table.columnValue"),
123128
tooltip: ColumnValueTooltip,
124129
})}
130+
{children.tooltip.propertyView({
131+
label: trans("table.columnTooltip"),
132+
tooltip: ColumnValueTooltip,
133+
})}
125134
{children.falseValues.propertyView({
126135
label: trans("table.falseValues"),
127136
radioButton: true,

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateComp.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { CalendarCompIconSmall, PrevIcon, SuperPrevIcon } from "lowcoder-design"
1515
import { useState } from "react";
1616
import styled from "styled-components";
1717
import { DateParser, DATE_FORMAT } from "util/dateTimeUtils";
18+
import Tooltip from "antd/es/tooltip";
1819

1920
dayjs.extend(utc)
2021

@@ -136,6 +137,7 @@ export function formatDate(date: string, format: string) {
136137

137138
const childrenMap = {
138139
text: StringControl,
140+
tooltip: StringControl,
139141
format: withDefault(StringControl, DATE_FORMAT),
140142
};
141143

@@ -195,7 +197,12 @@ export const DateComp = (function () {
195197
childrenMap,
196198
(props, dispatch) => {
197199
const value = props.changeValue ?? getBaseValue(props, dispatch);
198-
return formatDate(value, props.format);
200+
const view = formatDate(value, props.format);
201+
return (
202+
<Tooltip title={props.tooltip}>
203+
{view}
204+
</Tooltip>
205+
);
199206
},
200207
(nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value),
201208
getBaseValue
@@ -214,6 +221,10 @@ export const DateComp = (function () {
214221
label: trans("table.columnValue"),
215222
tooltip: ColumnValueTooltip,
216223
})}
224+
{children.tooltip.propertyView({
225+
label: trans("table.columnTooltip"),
226+
tooltip: ColumnValueTooltip,
227+
})}
217228
{formatPropertyView({ children, placeholder: DATE_FORMAT })}
218229
</>
219230
))

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDateTimeComp.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ import { formatPropertyView } from "comps/utils/propertyUtils";
99
import { trans } from "i18n";
1010
import { DATE_TIME_FORMAT } from "util/dateTimeUtils";
1111
import { DateEdit, formatDate } from "./columnDateComp";
12+
import Tooltip from "antd/es/tooltip";
1213

1314
const childrenMap = {
1415
text: StringControl,
16+
tooltip: StringControl,
1517
format: withDefault(StringControl, DATE_TIME_FORMAT),
1618
};
1719

@@ -22,7 +24,12 @@ export const DateTimeComp = (function () {
2224
childrenMap,
2325
(props, dispatch) => {
2426
const value = props.changeValue ?? getBaseValue(props, dispatch);
25-
return formatDate(value, props.format);
27+
const view = formatDate(value, props.format);
28+
return (
29+
<Tooltip title={props.tooltip}>
30+
{view}
31+
</Tooltip>
32+
)
2633
},
2734
(nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value),
2835
getBaseValue
@@ -41,6 +48,10 @@ export const DateTimeComp = (function () {
4148
label: trans("table.columnValue"),
4249
tooltip: ColumnValueTooltip,
4350
})}
51+
{children.tooltip.propertyView({
52+
label: trans("table.columnTooltip"),
53+
tooltip: ColumnValueTooltip,
54+
})}
4455
{formatPropertyView({ children, placeholder: DATE_TIME_FORMAT })}
4556
</>
4657
))

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ export const ColumnDropdownComp = (function () {
4747
const menu = (
4848
<Menu
4949
items={items}
50-
onClick={({ key }) => items.find((o) => o.key === key)?.onEvent?.("click")}
50+
onClick={({ key }) => {
51+
items.find((o) => o.key === key)?.onEvent?.("click")
52+
}}
5153
/>
5254
);
5355

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnImgComp.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,14 @@ import { StringControl, NumberControl } from "comps/controls/codeControl";
77
import { trans } from "i18n";
88
import { withDefault } from "comps/generators";
99
import { TacoImage } from "lowcoder-design";
10+
import Tooltip from "antd/es/tooltip";
1011

1112
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1213

1314
const childrenMap = {
1415
src: withDefault(StringControl, "{{currentCell}}"),
1516
size: withDefault(NumberControl, "50"),
17+
tooltip: StringControl,
1618
};
1719

1820
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.src;
@@ -22,7 +24,11 @@ export const ImageComp = (function () {
2224
childrenMap,
2325
(props, dispatch) => {
2426
const value = props.changeValue ?? getBaseValue(props, dispatch);
25-
return <TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
27+
return (
28+
<Tooltip title={props.tooltip}>
29+
<TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
30+
</Tooltip>
31+
);
2632
},
2733
(nodeValue) => nodeValue.src.value,
2834
getBaseValue
@@ -47,6 +53,10 @@ export const ImageComp = (function () {
4753
label: trans("table.imageSrc"),
4854
tooltip: ColumnValueTooltip,
4955
})}
56+
{children.tooltip.propertyView({
57+
label: trans("table.columnTooltip"),
58+
tooltip: ColumnValueTooltip,
59+
})}
5060
{children.size.propertyView({
5161
label: trans("table.imageSize"),
5262
})}

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinkComp.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@ import { disabledPropertyView } from "comps/utils/propertyUtils";
1010
import styled, { css } from "styled-components";
1111
import { styleControl } from "comps/controls/styleControl";
1212
import { TableColumnLinkStyle } from "comps/controls/styleControlConstants";
13+
import Tooltip from "antd/es/tooltip";
1314

1415
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1516

1617
const childrenMap = {
1718
text: StringControl,
19+
tooltip: StringControl,
1820
onClick: ActionSelectorControlInContext,
1921
disabled: BoolCodeControl,
2022
style: styleControl(TableColumnLinkStyle),
@@ -32,14 +34,16 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
3234
${(props) => props.$disabled && disableCss};
3335
`;
3436

35-
export const ColumnLink = (props: { disabled: boolean; label: string; onClick?: () => void }) => (
37+
export const ColumnLink = (props: { disabled: boolean; label: string; tooltip?: string, onClick?: () => void }) => (
3638
<StyledLink
3739
$disabled={props.disabled}
3840
onClick={() => {
3941
!props.disabled && props.onClick && props.onClick();
4042
}}
4143
>
42-
{props.label}
44+
<Tooltip title={props.tooltip}>
45+
{props.label}
46+
</Tooltip>
4347
</StyledLink>
4448
);
4549

@@ -50,7 +54,7 @@ export const LinkComp = (function () {
5054
childrenMap,
5155
(props, dispatch) => {
5256
const value = props.changeValue ?? getBaseValue(props, dispatch);
53-
return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} />;
57+
return <ColumnLink disabled={props.disabled} label={value} tooltip={props.tooltip} onClick={props.onClick} />;
5458
},
5559
(nodeValue) => nodeValue.text.value,
5660
getBaseValue
@@ -74,6 +78,10 @@ export const LinkComp = (function () {
7478
label: trans("table.columnValue"),
7579
tooltip: ColumnValueTooltip,
7680
})}
81+
{children.tooltip.propertyView({
82+
label: trans("table.columnTooltip"),
83+
tooltip: ColumnValueTooltip,
84+
})}
7785
{disabledPropertyView(children)}
7886
{children.onClick.propertyView({
7987
label: trans("table.action"),

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnLinksComp.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ import { MultiCompBuilder } from "comps/generators";
77
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
88
import { trans } from "i18n";
99
import styled from "styled-components";
10-
import { ColumnLink } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
10+
import { ColumnLink, ColumnValueTooltip } from "comps/comps/tableComp/column/columnTypeComps/columnLinkComp";
1111
import { LightActiveTextColor, PrimaryColor } from "constants/style";
12+
import Tooltip from "antd/es/tooltip";
1213

1314
const MenuLinkWrapper = styled.div`
1415
> a {
@@ -67,6 +68,7 @@ export const ColumnLinksComp = (function () {
6768
options: manualOptionsControl(OptionItem, {
6869
initOptions: [{ label: trans("table.option1") }],
6970
}),
71+
tooltip: StringControl,
7072
};
7173
return new ColumnTypeCompBuilder(
7274
childrenMap,
@@ -89,15 +91,21 @@ export const ColumnLinksComp = (function () {
8991
));
9092

9193
return (
92-
<MenuWrapper>
93-
<Menu mode="horizontal" items={menuItems} />
94-
</MenuWrapper>
94+
<Tooltip title={props.tooltip}>
95+
<MenuWrapper>
96+
<Menu mode="horizontal" items={menuItems} />
97+
</MenuWrapper>
98+
</Tooltip>
9599
)
96100
},
97101
() => ""
98102
)
99103
.setPropertyViewFn((children) => (
100104
<>
105+
{children.tooltip.propertyView({
106+
label: trans("table.columnTooltip"),
107+
tooltip: ColumnValueTooltip,
108+
})}
101109
{children.options.propertyView({
102110
newOptionLabel: trans("table.option"),
103111
title: trans("table.optionList"),

‎client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { default as Input } from "antd/es/input";
2+
import Tooltip from "antd/es/tooltip";
23
import {
34
ColumnTypeCompBuilder,
45
ColumnTypeViewFn,
@@ -23,6 +24,7 @@ const Wrapper = styled.div`
2324

2425
const childrenMap = {
2526
text: StringControl,
27+
tooltip: StringControl,
2628
};
2729

2830
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.text;
@@ -33,9 +35,11 @@ export const ColumnMarkdownComp = (function () {
3335
(props, dispatch) => {
3436
const value = props.changeValue ?? getBaseValue(props, dispatch);
3537
return (
36-
<Wrapper>
37-
<TacoMarkDown>{value}</TacoMarkDown>
38-
</Wrapper>
38+
<Tooltip title={props.tooltip}>
39+
<Wrapper>
40+
<TacoMarkDown>{value}</TacoMarkDown>
41+
</Wrapper>
42+
</Tooltip>
3943
);
4044
},
4145
(nodeValue) => nodeValue.text.value,
@@ -60,6 +64,10 @@ export const ColumnMarkdownComp = (function () {
6064
label: trans("table.columnValue"),
6165
tooltip: ColumnValueTooltip,
6266
})}
67+
{children.tooltip.propertyView({
68+
label: trans("table.columnTooltip"),
69+
tooltip: ColumnValueTooltip,
70+
})}
6371
</>
6472
))
6573
.build();

0 commit comments

Comments
 (0)