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

Commit 2ef23dd

Browse files
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

Lines changed: 2 additions & 1 deletion
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

Lines changed: 10 additions & 2 deletions
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

Lines changed: 18 additions & 9 deletions
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

Lines changed: 12 additions & 1 deletion
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

Lines changed: 12 additions & 1 deletion
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

Lines changed: 3 additions & 1 deletion
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

Lines changed: 11 additions & 1 deletion
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

Lines changed: 11 additions & 3 deletions
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

Lines changed: 12 additions & 4 deletions
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

Lines changed: 11 additions & 3 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /