Skip to content

Commit 959a886

Browse files
kamal-qureshikamal-qureshi
committed
Adds tooltips for button components
1 parent c174d6b commit 959a886

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
import React, { 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+
<Tooltip title={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
import React, { useContext, useEffect } from "react";
2828
import { EditorContext } from "comps/editorState";
29+
import { Tooltip } from "antd";
2930

3031
const IconWrapper = 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+
<Tooltip title={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
import ReactResizeDetector from "react-resize-detector";
4040

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

4344
const Container = 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+
<Tooltip title={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+
import Tooltip from "antd/es/tooltip";
1617

1718
const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
1819
return css`
@@ -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+
<Tooltip title={option.label}>
128+
<span>{option.label}</span>
129+
</Tooltip>
130+
),
126131
value: option.value,
127132
disabled: option.disabled,
128133
}))}

0 commit comments

Comments
 (0)