Skip to content

Commit fc7ce61

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1699 from kamalqureshi/tooltip_for_buttons
Adds tooltips for button components
2 parents ea54110 + ad41dc1 commit fc7ce61

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
import React, { 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+
<Tooltip title={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
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: 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
const Container = 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) && <img src={props.iconScoutAsset.value} />}
301-
</IconScoutWrapper>
302-
)}
303-
</Button100>
262+
<Tooltip title={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) && <img src={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+
import Tooltip from "antd/es/tooltip";
2728
import { useCallback, useRef, useEffect, memo } from "react";
2829

2930
export const getStyle = (style: CheckboxStyleType) => {
@@ -155,7 +156,7 @@ const MemoizedCheckboxGroup = memo(({
155156
disabled: boolean;
156157
style: CheckboxStyleType;
157158
layout: ValueFromOption<typeof RadioLayoutOptions>;
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
return props.options
231232
.filter((option) => option.value !== undefined && !option.hidden)
232233
.map((option) => ({
233-
label: option.label,
234+
label: (
235+
<Tooltip title={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+
import Tooltip from "antd/es/tooltip";
1617
import { useCallback, useRef, useEffect, memo } from "react";
1718

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

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy