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

Commit2ef23dd

Browse files
added column tooltip in table
1 parente76fd45 commit2ef23dd

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
importstyledfrom"styled-components";
99
import{IconControl}from"comps/controls/iconControl";
1010
import{hasIcon}from"comps/utils";
11+
importTooltipfrom"antd/es/tooltip";
1112

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

2728
constchildrenMap={
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+
<Tooltiptitle={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{defaultasCheckbox}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+
importTooltipfrom"antd/es/tooltip";
1415

1516
constCheckboxStyled=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-
constIconWrapper=styled.div<{$style:CheckboxStyleType;$ifChecked:boolean}>`
25-
pointer-events: none;
25+
constIconWrapper=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
constchildrenMap={
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
constCheckBoxComp=()=>{
9497
conststyle=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+
<Tooltiptitle={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
importstyledfrom"styled-components";
1717
import{DateParser,DATE_FORMAT}from"util/dateTimeUtils";
18+
importTooltipfrom"antd/es/tooltip";
1819

1920
dayjs.extend(utc)
2021

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

137138
constchildrenMap={
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
constvalue=props.changeValue??getBaseValue(props,dispatch);
198-
returnformatDate(value,props.format);
200+
constview=formatDate(value,props.format);
201+
return(
202+
<Tooltiptitle={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+
importTooltipfrom"antd/es/tooltip";
1213

1314
constchildrenMap={
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
constvalue=props.changeValue??getBaseValue(props,dispatch);
25-
returnformatDate(value,props.format);
27+
constview=formatDate(value,props.format);
28+
return(
29+
<Tooltiptitle={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
constmenu=(
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+
importTooltipfrom"antd/es/tooltip";
1011

1112
exportconstColumnValueTooltip=trans("table.columnValueTooltip");
1213

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

1820
constgetBaseValue:ColumnTypeViewFn<typeofchildrenMap,string,string>=(props)=>props.src;
@@ -22,7 +24,11 @@ export const ImageComp = (function () {
2224
childrenMap,
2325
(props,dispatch)=>{
2426
constvalue=props.changeValue??getBaseValue(props,dispatch);
25-
return<TacoImagestyle={{pointerEvents:"auto"}}src={value}width={props.size}/>;
27+
return(
28+
<Tooltiptitle={props.tooltip}>
29+
<TacoImagestyle={{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
importstyled,{css}from"styled-components";
1111
import{styleControl}from"comps/controls/styleControl";
1212
import{TableColumnLinkStyle}from"comps/controls/styleControlConstants";
13+
importTooltipfrom"antd/es/tooltip";
1314

1415
exportconstColumnValueTooltip=trans("table.columnValueTooltip");
1516

1617
constchildrenMap={
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-
exportconstColumnLink=(props:{disabled:boolean;label:string;onClick?:()=>void})=>(
37+
exportconstColumnLink=(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+
<Tooltiptitle={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
constvalue=props.changeValue??getBaseValue(props,dispatch);
53-
return<ColumnLinkdisabled={props.disabled}label={value}onClick={props.onClick}/>;
57+
return<ColumnLinkdisabled={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
importstyledfrom"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+
importTooltipfrom"antd/es/tooltip";
1213

1314
constMenuLinkWrapper=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
returnnewColumnTypeCompBuilder(
7274
childrenMap,
@@ -89,15 +91,21 @@ export const ColumnLinksComp = (function () {
8991
));
9092

9193
return(
92-
<MenuWrapper>
93-
<Menumode="horizontal"items={menuItems}/>
94-
</MenuWrapper>
94+
<Tooltiptitle={props.tooltip}>
95+
<MenuWrapper>
96+
<Menumode="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{defaultasInput}from"antd/es/input";
2+
importTooltipfrom"antd/es/tooltip";
23
import{
34
ColumnTypeCompBuilder,
45
ColumnTypeViewFn,
@@ -23,6 +24,7 @@ const Wrapper = styled.div`
2324

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

2830
constgetBaseValue:ColumnTypeViewFn<typeofchildrenMap,string,string>=(props)=>props.text;
@@ -33,9 +35,11 @@ export const ColumnMarkdownComp = (function () {
3335
(props,dispatch)=>{
3436
constvalue=props.changeValue??getBaseValue(props,dispatch);
3537
return(
36-
<Wrapper>
37-
<TacoMarkDown>{value}</TacoMarkDown>
38-
</Wrapper>
38+
<Tooltiptitle={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)
[8]ページ先頭
©2009-2025 Movatter.jp