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

Commit959a886

Browse files
committed
Adds tooltips for button components
1 parentc174d6b commit959a886

File tree

4 files changed

+84
-73
lines changed

4 files changed

+84
-73
lines changed

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

Lines changed: 21 additions & 19 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}from"react";
2828
import{AnimationStyle}from"@lowcoder-ee/comps/controls/styleControlConstants";
2929
import{styleControl}from"@lowcoder-ee/comps/controls/styleControl";
@@ -139,24 +139,26 @@ const ButtonTmpComp = (function () {
139139
<ButtonCompWrapper$disabled={props.disabled}>
140140
<EditorContext.Consumer>
141141
{(editorState)=>(
142-
<Button100
143-
ref={props.viewRef}
144-
$buttonStyle={props.style}
145-
loading={props.loading}
146-
disabled={
147-
props.disabled||
148-
(!isDefault(props.type)&&getForm(editorState,props.form)?.disableSubmit())
149-
}
150-
onClick={()=>
151-
isDefault(props.type) ?props.onEvent("click") :submitForm(editorState,props.form)
152-
}
153-
>
154-
{props.prefixIcon&&<IconWrapper>{props.prefixIcon}</IconWrapper>}
155-
{
156-
props.text||(props.prefixIcon||props.suffixIcon ?undefined :" ")// Avoid button disappearing
157-
}
158-
{props.suffixIcon&&<IconWrapper>{props.suffixIcon}</IconWrapper>}
159-
</Button100>
142+
<Tooltiptitle={props.text}>
143+
<Button100
144+
ref={props.viewRef}
145+
$buttonStyle={props.style}
146+
loading={props.loading}
147+
disabled={
148+
props.disabled||
149+
(!isDefault(props.type)&&getForm(editorState,props.form)?.disableSubmit())
150+
}
151+
onClick={()=>
152+
isDefault(props.type) ?props.onEvent("click") :submitForm(editorState,props.form)
153+
}
154+
>
155+
{props.prefixIcon&&<IconWrapper>{props.prefixIcon}</IconWrapper>}
156+
{
157+
props.text||(props.prefixIcon||props.suffixIcon ?undefined :" ")// Avoid button disappearing
158+
}
159+
{props.suffixIcon&&<IconWrapper>{props.suffixIcon}</IconWrapper>}
160+
</Button100>
161+
</Tooltip>
160162
)}
161163
</EditorContext.Consumer>
162164
</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: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
3939
importReactResizeDetectorfrom"react-resize-detector";
4040

4141
import{useContext}from"react";
42+
import{Tooltip}from"antd";
4243

4344
constContainer=styled.div<{$style:any}>`
4445
height: 100%;
@@ -242,48 +243,48 @@ let ButtonTmpComp = (function () {
242243
:undefined
243244
}
244245
>
245-
<Button100
246-
ref={props.viewRef}
247-
$buttonStyle={props.style}
248-
loading={props.loading}
249-
style={
250-
props.autoHeight
251-
?{
252-
width:"100%",
253-
height:"100%",
254-
aspectRatio:props.aspectRatio,
255-
borderRadius:props.style.radius,
256-
}
257-
:{
258-
aspectRatio:props.aspectRatio,
259-
borderRadius:props.style.radius,
260-
}
261-
}
262-
disabled={
263-
props.disabled||
264-
(!isDefault(props.type)&&
265-
getForm(editorState,props.form)?.disableSubmit())
266-
}
267-
onClick={()=>
268-
isDefault(props.type)
269-
?props.onEvent("click")
270-
:submitForm(editorState,props.form)
271-
}
272-
>
273-
{props.prefixIcon&&(
274-
<IconWrapper
275-
$style={{ ...props.style,size:props.iconSize}}
276-
>
277-
{props.prefixIcon}
278-
</IconWrapper>
279-
)}
280-
281-
</Button100>
246+
<Tooltiptitle={trans("meeting.meetingControlCompName")}>
247+
<Button100
248+
ref={props.viewRef}
249+
$buttonStyle={props.style}
250+
loading={props.loading}
251+
style={
252+
props.autoHeight
253+
?{
254+
width:"100%",
255+
height:"100%",
256+
aspectRatio:props.aspectRatio,
257+
borderRadius:props.style.radius,
258+
}
259+
:{
260+
aspectRatio:props.aspectRatio,
261+
borderRadius:props.style.radius,
262+
}
263+
}
264+
disabled={
265+
props.disabled||
266+
(!isDefault(props.type)&&
267+
getForm(editorState,props.form)?.disableSubmit())
268+
}
269+
onClick={()=>
270+
isDefault(props.type)
271+
?props.onEvent("click")
272+
:submitForm(editorState,props.form)
273+
}
274+
>
275+
{props.prefixIcon&&(
276+
<IconWrapper
277+
$style={{ ...props.style,size:props.iconSize}}
278+
>
279+
{props.prefixIcon}
280+
</IconWrapper>
281+
)}
282+
</Button100>
283+
</Tooltip>
282284
</div>
283285
</Container>
284286
)}
285-
>
286-
</ReactResizeDetector>
287+
></ReactResizeDetector>
287288
)}
288289
</EditorContext.Consumer>
289290
);

‎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

1718
constgetStyle=(style:RadioStyleType,inputFieldStyle?:RadioStyleType)=>{
1819
returncss`
@@ -122,7 +123,11 @@ let RadioBasicComp = (function () {
122123
options={props.options
123124
.filter((option)=>option.value!==undefined&&!option.hidden)
124125
.map((option)=>({
125-
label:option.label,
126+
label:(
127+
<Tooltiptitle={option.label}>
128+
<span>{option.label}</span>
129+
</Tooltip>
130+
),
126131
value:option.value,
127132
disabled:option.disabled,
128133
}))}

0 commit comments

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