Skip to content

Commit 4e21471

Browse files
raheeliftikhar5raheeliftikhar5
committed
removed tooltip from column types and placed in abstract level for all columns
1 parent 2ef23dd commit 4e21471

21 files changed

+144
-205
lines changed

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

+45-21
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import styled from "styled-components";
77
import { JSONValue } from "util/jsonTypes";
88
import ColumnTypeView from "./columnTypeView";
99
import { TableCellContext } from "comps/comps/tableComp/tableContext";
10+
import Tooltip from "antd/es/tooltip";
1011

1112
type StatusType = PresetStatusColorType | "none";
1213
export const TABLE_EDITABLE_SWITCH_ON = true;
@@ -35,6 +36,7 @@ export interface CellProps {
3536
candidateTags?: string[];
3637
candidateStatus?: { text: string; status: StatusType }[];
3738
textOverflow?: boolean;
39+
cellTooltip?: string;
3840
onTableEvent?: (eventName: any) => void;
3941
}
4042

@@ -54,6 +56,25 @@ const BorderDiv = styled.div`
5456
left: 0;
5557
`;
5658

59+
const CellWrapper = ({
60+
children,
61+
tooltipTitle,
62+
}: {
63+
children: ReactNode,
64+
tooltipTitle?: string,
65+
}) => {
66+
if (tooltipTitle) {
67+
return (
68+
<Tooltip title={tooltipTitle} placement="topLeft">
69+
{children}
70+
</Tooltip>
71+
)
72+
}
73+
return (
74+
<>{children}</>
75+
)
76+
};
77+
5778
interface EditableCellProps<T> extends CellProps {
5879
normalView: ReactNode;
5980
dispatch: DispatchType;
@@ -123,28 +144,31 @@ export function EditableCell<T extends JSONValue>(props: EditableCellProps<T>) {
123144
</>
124145
);
125146
}
126-
147+
127148
return (
128-
<ColumnTypeView
129-
textOverflow={props.textOverflow}
130-
>
131-
{status === "toSave" && !isEditing && <EditableChip />}
132-
{!editable && normalView}
133-
{/* overlay on normal view to handle double click for editing */}
134-
{editable && (
135-
<div
136-
style={{
137-
position: 'absolute',
138-
top: 0,
139-
left: 0,
140-
width: '100%',
141-
height: '100%',
142-
}}
143-
onDoubleClick={enterEditFn}
144-
>
149+
<ColumnTypeView
150+
textOverflow={props.textOverflow}
151+
>
152+
{status === "toSave" && !isEditing && <EditableChip />}
153+
<CellWrapper tooltipTitle={props.cellTooltip}>
145154
{normalView}
146-
</div>
147-
)}
148-
</ColumnTypeView>
155+
</CellWrapper>
156+
{/* overlay on normal view to handle double click for editing */}
157+
{editable && (
158+
<CellWrapper tooltipTitle={props.cellTooltip}>
159+
<div
160+
style={{
161+
position: 'absolute',
162+
top: 0,
163+
left: 0,
164+
width: '100%',
165+
height: '100%',
166+
}}
167+
onDoubleClick={enterEditFn}
168+
>
169+
</div>
170+
</CellWrapper>
171+
)}
172+
</ColumnTypeView>
149173
);
150174
}

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

+2-10
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ 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";
1211

1312
const InputNumberWrapper = styled.div`
1413
.ant-input-number {
@@ -27,7 +26,6 @@ const InputNumberWrapper = styled.div`
2726

2827
const childrenMap = {
2928
text: NumberControl,
30-
tooltip: StringControl,
3129
step: withDefault(NumberControl, 1),
3230
precision: RangeControl.closed(0, 20, 0),
3331
float: BoolControl,
@@ -60,15 +58,13 @@ export const ColumnNumberComp = (function () {
6058
formattedValue = formattedValue.toFixed(precision + 1);
6159
}
6260
return (
63-
<Tooltip title={props.tooltip}>
64-
{hasIcon(props.prefixIcon) && (
61+
<>{hasIcon(props.prefixIcon) && (
6562
<span>{props.prefixIcon}</span>
6663
)}
6764
<span>{props.prefix + formattedValue + props.suffix}</span>
6865
{hasIcon(props.suffixIcon) && (
6966
<span>{props.suffixIcon}</span>
70-
)}
71-
</Tooltip>
67+
)} </>
7268
);
7369
},
7470
(nodeValue) => nodeValue.text.value,
@@ -99,10 +95,6 @@ export const ColumnNumberComp = (function () {
9995
label: trans("table.columnValue"),
10096
tooltip: ColumnValueTooltip,
10197
})}
102-
{children.tooltip.propertyView({
103-
label: trans("table.columnTooltip"),
104-
tooltip: ColumnValueTooltip,
105-
})}
10698
{children.step.propertyView({
10799
label: trans("table.numberStep"),
108100
tooltip: trans("table.numberStepTooltip"),

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

+7-15
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1+
import { BoolCodeControl } 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,7 +11,6 @@ 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";
1514

1615
const CheckboxStyled = styled(Checkbox)<{ $style: CheckboxStyleType }>`
1716
${(props) => props.$style && getStyle(props.$style)}
@@ -52,7 +51,6 @@ const falseValuesOptions = [
5251

5352
const childrenMap = {
5453
text: BoolCodeControl,
55-
tooltip: StringControl,
5654
falseValues: dropdownControl(falseValuesOptions, ""),
5755
iconTrue: IconControl,
5856
iconFalse: IconControl,
@@ -96,14 +94,12 @@ export const BooleanComp = (function () {
9694
const CheckBoxComp = () => {
9795
const style = useStyle(CheckboxStyle);
9896
return (
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>
97+
<IconWrapper $style={style} $ifChecked={value}>
98+
{value === true ? ( hasIcon(props.iconTrue) ? props.iconTrue : <TableCheckedIcon /> )
99+
: value === false ? ( hasIcon(props.iconFalse) ? props.iconFalse : ( props.falseValues === "x" ? <TableUnCheckedIcon /> : props.falseValues )
100+
) : ( hasIcon(props.iconNull) ? props.iconNull : "No Value"
101+
)}
102+
</IconWrapper>
107103
);
108104
};
109105
return <CheckBoxComp />;
@@ -127,10 +123,6 @@ export const BooleanComp = (function () {
127123
label: trans("table.columnValue"),
128124
tooltip: ColumnValueTooltip,
129125
})}
130-
{children.tooltip.propertyView({
131-
label: trans("table.columnTooltip"),
132-
tooltip: ColumnValueTooltip,
133-
})}
134126
{children.falseValues.propertyView({
135127
label: trans("table.falseValues"),
136128
radioButton: true,

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

+1-12
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ 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";
1918

2019
dayjs.extend(utc)
2120

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

138137
const childrenMap = {
139138
text: StringControl,
140-
tooltip: StringControl,
141139
format: withDefault(StringControl, DATE_FORMAT),
142140
};
143141

@@ -197,12 +195,7 @@ export const DateComp = (function () {
197195
childrenMap,
198196
(props, dispatch) => {
199197
const value = props.changeValue ?? getBaseValue(props, dispatch);
200-
const view = formatDate(value, props.format);
201-
return (
202-
<Tooltip title={props.tooltip}>
203-
{view}
204-
</Tooltip>
205-
);
198+
return formatDate(value, props.format);
206199
},
207200
(nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value),
208201
getBaseValue
@@ -221,10 +214,6 @@ export const DateComp = (function () {
221214
label: trans("table.columnValue"),
222215
tooltip: ColumnValueTooltip,
223216
})}
224-
{children.tooltip.propertyView({
225-
label: trans("table.columnTooltip"),
226-
tooltip: ColumnValueTooltip,
227-
})}
228217
{formatPropertyView({ children, placeholder: DATE_FORMAT })}
229218
</>
230219
))

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

+1-12
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ 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";
1312

1413
const childrenMap = {
1514
text: StringControl,
16-
tooltip: StringControl,
1715
format: withDefault(StringControl, DATE_TIME_FORMAT),
1816
};
1917

@@ -24,12 +22,7 @@ export const DateTimeComp = (function () {
2422
childrenMap,
2523
(props, dispatch) => {
2624
const value = props.changeValue ?? getBaseValue(props, dispatch);
27-
const view = formatDate(value, props.format);
28-
return (
29-
<Tooltip title={props.tooltip}>
30-
{view}
31-
</Tooltip>
32-
)
25+
return formatDate(value, props.format);
3326
},
3427
(nodeValue) => formatDate(nodeValue.text.value, nodeValue.format.value),
3528
getBaseValue
@@ -48,10 +41,6 @@ export const DateTimeComp = (function () {
4841
label: trans("table.columnValue"),
4942
tooltip: ColumnValueTooltip,
5043
})}
51-
{children.tooltip.propertyView({
52-
label: trans("table.columnTooltip"),
53-
tooltip: ColumnValueTooltip,
54-
})}
5544
{formatPropertyView({ children, placeholder: DATE_TIME_FORMAT })}
5645
</>
5746
))

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

+1-11
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,12 @@ 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";
1110

1211
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1312

1413
const childrenMap = {
1514
src: withDefault(StringControl, "{{currentCell}}"),
1615
size: withDefault(NumberControl, "50"),
17-
tooltip: StringControl,
1816
};
1917

2018
const getBaseValue: ColumnTypeViewFn<typeof childrenMap, string, string> = (props) => props.src;
@@ -24,11 +22,7 @@ export const ImageComp = (function () {
2422
childrenMap,
2523
(props, dispatch) => {
2624
const value = props.changeValue ?? getBaseValue(props, dispatch);
27-
return (
28-
<Tooltip title={props.tooltip}>
29-
<TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
30-
</Tooltip>
31-
);
25+
return <TacoImage style={{ pointerEvents: "auto" }} src={value} width={props.size} />;
3226
},
3327
(nodeValue) => nodeValue.src.value,
3428
getBaseValue
@@ -53,10 +47,6 @@ export const ImageComp = (function () {
5347
label: trans("table.imageSrc"),
5448
tooltip: ColumnValueTooltip,
5549
})}
56-
{children.tooltip.propertyView({
57-
label: trans("table.columnTooltip"),
58-
tooltip: ColumnValueTooltip,
59-
})}
6050
{children.size.propertyView({
6151
label: trans("table.imageSize"),
6252
})}

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

+3-11
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,11 @@ 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";
1413

1514
export const ColumnValueTooltip = trans("table.columnValueTooltip");
1615

1716
const childrenMap = {
1817
text: StringControl,
19-
tooltip: StringControl,
2018
onClick: ActionSelectorControlInContext,
2119
disabled: BoolCodeControl,
2220
style: styleControl(TableColumnLinkStyle),
@@ -34,16 +32,14 @@ const StyledLink = styled.a<{ $disabled: boolean }>`
3432
${(props) => props.$disabled && disableCss};
3533
`;
3634

37-
export const ColumnLink = (props: { disabled: boolean; label: string; tooltip?: string, onClick?: () => void }) => (
35+
export const ColumnLink = (props: { disabled: boolean; label: string; onClick?: () => void }) => (
3836
<StyledLink
3937
$disabled={props.disabled}
4038
onClick={() => {
4139
!props.disabled && props.onClick && props.onClick();
4240
}}
4341
>
44-
<Tooltip title={props.tooltip}>
45-
{props.label}
46-
</Tooltip>
42+
{props.label}
4743
</StyledLink>
4844
);
4945

@@ -54,7 +50,7 @@ export const LinkComp = (function () {
5450
childrenMap,
5551
(props, dispatch) => {
5652
const value = props.changeValue ?? getBaseValue(props, dispatch);
57-
return <ColumnLink disabled={props.disabled} label={value} tooltip={props.tooltip} onClick={props.onClick} />;
53+
return <ColumnLink disabled={props.disabled} label={value} onClick={props.onClick} />;
5854
},
5955
(nodeValue) => nodeValue.text.value,
6056
getBaseValue
@@ -78,10 +74,6 @@ export const LinkComp = (function () {
7874
label: trans("table.columnValue"),
7975
tooltip: ColumnValueTooltip,
8076
})}
81-
{children.tooltip.propertyView({
82-
label: trans("table.columnTooltip"),
83-
tooltip: ColumnValueTooltip,
84-
})}
8577
{disabledPropertyView(children)}
8678
{children.onClick.propertyView({
8779
label: trans("table.action"),

0 commit comments

Comments
 (0)