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

Commitfc7ce61

Browse files
authored
Merge pull request#1699 from kamalqureshi/tooltip_for_buttons
Adds tooltips for button components
2 parentsea54110 +ad41dc1 commitfc7ce61

File tree

5 files changed

+95
-77
lines changed

5 files changed

+95
-77
lines changed

‎client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {
2323
ButtonStyleControl,
2424
}from"./buttonCompConstants";
2525
import{RefControl}from"comps/controls/refControl";
26-
26+
import{Tooltip}from"antd";
2727
importReact,{useContext,useEffect,useCallback}from"react";
2828
import{AnimationStyle}from"@lowcoder-ee/comps/controls/styleControlConstants";
2929
import{styleControl}from"@lowcoder-ee/comps/controls/styleControl";
@@ -187,22 +187,24 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
187187
<ButtonCompWrapper$disabled={props.disabled}>
188188
<EditorContext.Consumer>
189189
{(editorState)=>(
190-
<Button100
191-
ref={props.viewRef}
192-
$buttonStyle={props.style}
193-
loading={props.loading}
194-
disabled={
195-
props.disabled||
196-
(!isDefault(props.type)&&getForm(editorState,props.form)?.disableSubmit())
197-
}
198-
onClick={handleClick}
199-
>
200-
{props.prefixIcon&&<IconWrapper>{props.prefixIcon}</IconWrapper>}
201-
{
202-
props.text||(props.prefixIcon||props.suffixIcon ?undefined :" ")// Avoid button disappearing
203-
}
204-
{props.suffixIcon&&<IconWrapper>{props.suffixIcon}</IconWrapper>}
205-
</Button100>
190+
<Tooltiptitle={props.text}>
191+
<Button100
192+
ref={props.viewRef}
193+
$buttonStyle={props.style}
194+
loading={props.loading}
195+
disabled={
196+
props.disabled||
197+
(!isDefault(props.type)&&getForm(editorState,props.form)?.disableSubmit())
198+
}
199+
onClick={handleClick}
200+
>
201+
{props.prefixIcon&&<IconWrapper>{props.prefixIcon}</IconWrapper>}
202+
{
203+
props.text||(props.prefixIcon||props.suffixIcon ?undefined :" ")// Avoid button disappearing
204+
}
205+
{props.suffixIcon&&<IconWrapper>{props.suffixIcon}</IconWrapper>}
206+
</Button100>
207+
</Tooltip>
206208
)}
207209
</EditorContext.Consumer>
208210
</ButtonCompWrapper>

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { BoolControl } from "comps/controls/boolControl";
2626
import{RefControl}from"comps/controls/refControl";
2727
importReact,{useContext,useEffect}from"react";
2828
import{EditorContext}from"comps/editorState";
29+
import{Tooltip}from"antd";
2930

3031
constIconWrapper=styled.div`
3132
display: flex;
@@ -78,20 +79,22 @@ const ToggleTmpComp = (function () {
7879
$showBorder={props.showBorder}
7980
$animationStyle={props.animationStyle}
8081
>
81-
<Button100
82-
ref={props.viewRef}
83-
$buttonStyle={props.style}
84-
loading={props.loading}
85-
disabled={props.disabled}
86-
onClick={()=>{
87-
props.onEvent("change");
88-
props.value.onChange(!props.value.value);
89-
}}
90-
>
91-
{props.iconPosition==="right"&&text}
92-
{<IconWrapper>{props.value.value ?props.trueIcon :props.falseIcon}</IconWrapper>}
93-
{props.iconPosition==="left"&&text}
94-
</Button100>
82+
<Tooltiptitle={props.value.value ?props.trueText :props.falseText}>
83+
<Button100
84+
ref={props.viewRef}
85+
$buttonStyle={props.style}
86+
loading={props.loading}
87+
disabled={props.disabled}
88+
onClick={()=>{
89+
props.onEvent("change");
90+
props.value.onChange(!props.value.value);
91+
}}
92+
>
93+
{props.iconPosition==="right"&&text}
94+
{<IconWrapper>{props.value.value ?props.trueIcon :props.falseIcon}</IconWrapper>}
95+
{props.iconPosition==="left"&&text}
96+
</Button100>
97+
</Tooltip>
9598
</ButtonCompWrapperStyled>
9699
);
97100
})

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
3939
import{useResizeDetector}from"react-resize-detector";
4040

4141
import{useContext}from"react";
42+
import{Tooltip}from"antd";
4243
import{AssetType,IconscoutControl}from"@lowcoder-ee/comps/controls/iconscoutControl";
4344

4445
constContainer=styled.div<{$style:any}>`
@@ -258,49 +259,51 @@ let ButtonTmpComp = (function () {
258259
:undefined
259260
}
260261
>
261-
<Button100
262-
ref={props.viewRef}
263-
$buttonStyle={props.style}
264-
loading={props.loading}
265-
style={
266-
props.autoHeight
267-
?{
268-
width:"100%",
269-
height:"100%",
270-
aspectRatio:props.aspectRatio,
271-
borderRadius:props.style.radius,
272-
}
273-
:{
274-
aspectRatio:props.aspectRatio,
275-
borderRadius:props.style.radius,
276-
}
277-
}
278-
disabled={
279-
props.disabled||
280-
(!isDefault(props.type)&&
281-
getForm(editorState,props.form)?.disableSubmit())
282-
}
283-
onClick={()=>
284-
isDefault(props.type)
285-
?props.onEvent("click")
286-
:submitForm(editorState,props.form)
287-
}
288-
>
289-
{props.sourceMode==='standard'&&props.prefixIcon&&(
290-
<IconWrapper
291-
$style={{ ...props.style,size:props.iconSize}}
292-
>
293-
{props.prefixIcon}
294-
</IconWrapper>
295-
)}
296-
{props.sourceMode==='asset-library'&&props.iconScoutAsset&&(
297-
<IconScoutWrapper
298-
$style={{ ...props.style,size:props.iconSize}}
299-
>
300-
{Boolean(props.iconScoutAsset.value)&&<imgsrc={props.iconScoutAsset.value}/>}
301-
</IconScoutWrapper>
302-
)}
303-
</Button100>
262+
<Tooltiptitle={trans("meeting.meetingControlCompName")}>
263+
<Button100
264+
ref={props.viewRef}
265+
$buttonStyle={props.style}
266+
loading={props.loading}
267+
style={
268+
props.autoHeight
269+
?{
270+
width:"100%",
271+
height:"100%",
272+
aspectRatio:props.aspectRatio,
273+
borderRadius:props.style.radius,
274+
}
275+
:{
276+
aspectRatio:props.aspectRatio,
277+
borderRadius:props.style.radius,
278+
}
279+
}
280+
disabled={
281+
props.disabled||
282+
(!isDefault(props.type)&&
283+
getForm(editorState,props.form)?.disableSubmit())
284+
}
285+
onClick={()=>
286+
isDefault(props.type)
287+
?props.onEvent("click")
288+
:submitForm(editorState,props.form)
289+
}
290+
>
291+
{props.sourceMode==='standard'&&props.prefixIcon&&(
292+
<IconWrapper
293+
$style={{ ...props.style,size:props.iconSize}}
294+
>
295+
{props.prefixIcon}
296+
</IconWrapper>
297+
)}
298+
{props.sourceMode==='asset-library'&&props.iconScoutAsset&&(
299+
<IconScoutWrapper
300+
$style={{ ...props.style,size:props.iconSize}}
301+
>
302+
{Boolean(props.iconScoutAsset.value)&&<imgsrc={props.iconScoutAsset.value}/>}
303+
</IconScoutWrapper>
304+
)}
305+
</Button100>
306+
</Tooltip>
304307
</div>
305308
</Container>
306309
)}

‎client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { trans } from "i18n";
2424
import{RefControl}from"comps/controls/refControl";
2525
import{migrateOldData}from"comps/generators/simpleGenerators";
2626
import{fixOldInputCompData}from"../textInputComp/textInputConstants";
27+
importTooltipfrom"antd/es/tooltip";
2728
import{useCallback,useRef,useEffect,memo}from"react";
2829

2930
exportconstgetStyle=(style:CheckboxStyleType)=>{
@@ -155,7 +156,7 @@ const MemoizedCheckboxGroup = memo(({
155156
disabled:boolean;
156157
style:CheckboxStyleType;
157158
layout:ValueFromOption<typeofRadioLayoutOptions>;
158-
options:Array<{label:string;value:string;disabled?:boolean}>;
159+
options:Array<{label:any;value:string;disabled?:boolean}>;
159160
onChange:(values:string[])=>void;
160161
viewRef:React.Ref<HTMLDivElement>;
161162
tabIndex?:number
@@ -230,7 +231,11 @@ let CheckboxBasicComp = (function () {
230231
returnprops.options
231232
.filter((option)=>option.value!==undefined&&!option.hidden)
232233
.map((option)=>({
233-
label:option.label,
234+
label:(
235+
<Tooltiptitle={option.label}>
236+
<span>{option.label}</span>
237+
</Tooltip>
238+
),
234239
value:option.value,
235240
disabled:option.disabled,
236241
}));

‎client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
1313
import{trans}from"i18n";
1414
import{fixOldInputCompData}from"../textInputComp/textInputConstants";
1515
import{migrateOldData}from"comps/generators/simpleGenerators";
16+
importTooltipfrom"antd/es/tooltip";
1617
import{useCallback,useRef,useEffect,memo}from"react";
1718

1819
constgetStyle=(style:RadioStyleType,inputFieldStyle?:RadioStyleType)=>{
@@ -133,7 +134,11 @@ const MemoizedRadio = memo(({
133134
returnoptions
134135
.filter((option)=>option.value!==undefined&&!option.hidden)
135136
.map((option)=>({
136-
label:option.label,
137+
label:(
138+
<Tooltiptitle={option.label}>
139+
<span>{option.label}</span>
140+
</Tooltip>
141+
),
137142
value:option.value,
138143
disabled:option.disabled,
139144
}));

0 commit comments

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