Skip to content

Commit 95a6ba5

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request lowcoder-org#929 from MenamAfzal/feature/tooltip-on-animation
Feature/tooltip on animation
2 parents 00b88ef + d412455 commit 95a6ba5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+96
-67
lines changed

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from "styled-components";
44
import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
55
import { labelCss } from "./Label";
66
import { controlItem, ControlNode } from "./control";
7+
import { Tooltip } from "./toolTip";
78

89
const SectionItem = styled.div<{ $width?: number }>`
910
width: ${(props) => (props.$width ? props.$width : 312)}px;
@@ -73,6 +74,12 @@ const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
7374
padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
7475
`;
7576

77+
const TooltipWrapper = styled.span`
78+
word-wrap: break-word;
79+
word-break: break-word;
80+
white-space: pre-wrap;
81+
color:#fff;
82+
`;
7683
interface ISectionConfig<T> {
7784
name?: string;
7885
open?: boolean;
@@ -81,6 +88,7 @@ interface ISectionConfig<T> {
8188
style?: React.CSSProperties;
8289
children: T;
8390
additionalButton?: React.ReactNode;
91+
hasTooltip?: boolean;
8492
}
8593

8694
export interface PropertySectionState {
@@ -102,7 +110,7 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
102110
});
103111

104112
export const BaseSection = (props: ISectionConfig<ReactNode>) => {
105-
const { name } = props;
113+
const { name,hasTooltip } = props;
106114
const { compName, state, toggle } = useContext(PropertySectionContext);
107115
const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
108116

@@ -118,17 +126,35 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
118126
return (
119127
<SectionItem $width={props.width} style={props.style}>
120128
{props.name && (
121-
<SectionLabelDiv onClick={handleToggle} className={"section-header"}>
129+
<SectionLabelDiv onClick={handleToggle} className={'section-header'}>
122130
<SectionLabel>{props.name}</SectionLabel>
123-
<div style={{ display: "flex" }}>
131+
<div style={{display: 'flex'}}>
124132
{open && props.additionalButton}
125-
<PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
133+
<PackupIcon deg={open ? 'rotate(0deg)' : 'rotate(180deg)'} />
126134
</div>
127135
</SectionLabelDiv>
128136
)}
129-
<ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
130-
{props.children}
131-
</ShowChildren>
137+
<Tooltip
138+
title={
139+
hasTooltip && (
140+
<TooltipWrapper>
141+
Here you can enter the animation type codes. Like bounce, swing or
142+
tada. Read more about all possible codes at:{" "}
143+
<a href="https://animate.style">https://animate.style</a>
144+
</TooltipWrapper>
145+
)
146+
}
147+
arrow={{
148+
pointAtCenter: true,
149+
}}
150+
placement="top"
151+
color="#2c2c2c"
152+
getPopupContainer={(node: any) => node.closest('.react-grid-item')}
153+
>
154+
<ShowChildren $show={open ? 'flex' : 'none'} $noMargin={props.noMargin}>
155+
{props.children}
156+
</ShowChildren>
157+
</Tooltip>
132158
</SectionItem>
133159
);
134160
};

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -293,38 +293,38 @@ let AutoCompleteCompBase = (function () {
293293
return (
294294
<>
295295
<Section>
296-
{children.autoCompleteType.getView() === "normal" &&
296+
{children.autoCompleteType.getView() === 'normal' &&
297297
children.prefixIcon.propertyView({
298-
label: trans("button.prefixIcon"),
298+
label: trans('button.prefixIcon'),
299299
})}
300-
{children.autoCompleteType.getView() === "normal" &&
300+
{children.autoCompleteType.getView() === 'normal' &&
301301
children.suffixIcon.propertyView({
302-
label: trans("button.suffixIcon"),
302+
label: trans('button.suffixIcon'),
303303
})}
304-
{allowClearPropertyView(children)}
304+
{allowClearPropertyView(children)}
305305
</Section>
306-
<Section name={trans("autoComplete.SectionDataName")}>
306+
<Section name={trans('autoComplete.SectionDataName')}>
307307
{children.items.propertyView({
308-
label: trans("autoComplete.value"),
308+
label: trans('autoComplete.value'),
309309
tooltip: itemsDataTooltip,
310-
placeholder: "[]",
310+
placeholder: '[]',
311311
})}
312-
{getDayJSLocale() === "zh-cn" &&
312+
{getDayJSLocale() === 'zh-cn' &&
313313
children.searchFirstPY.propertyView({
314-
label: trans("autoComplete.searchFirstPY"),
314+
label: trans('autoComplete.searchFirstPY'),
315315
})}
316-
{getDayJSLocale() === "zh-cn" &&
316+
{getDayJSLocale() === 'zh-cn' &&
317317
children.searchCompletePY.propertyView({
318-
label: trans("autoComplete.searchCompletePY"),
318+
label: trans('autoComplete.searchCompletePY'),
319319
})}
320320
{children.searchLabelOnly.propertyView({
321-
label: trans("autoComplete.searchLabelOnly"),
321+
label: trans('autoComplete.searchLabelOnly'),
322322
})}
323323
{children.ignoreCase.propertyView({
324-
label: trans("autoComplete.ignoreCase"),
324+
label: trans('autoComplete.ignoreCase'),
325325
})}
326326
{children.valueOrLabel.propertyView({
327-
label: trans("autoComplete.checkedValueFrom"),
327+
label: trans('autoComplete.checkedValueFrom'),
328328
radioButton: true,
329329
})}
330330
</Section>
@@ -350,7 +350,10 @@ let AutoCompleteCompBase = (function () {
350350
<Section name={sectionNames.inputFieldStyle}>
351351
{children.inputFieldStyle.getPropertyView()}
352352
</Section>
353-
<Section name={sectionNames.animationStyle}>
353+
<Section
354+
name={sectionNames.animationStyle}
355+
hasTooltip={true}
356+
>
354357
{children.animationStyle.getPropertyView()}
355358
</Section>
356359
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ let FloatButtonBasicComp = (function () {
150150
<Section name={sectionNames.style}>
151151
{children.style.getPropertyView()}
152152
</Section>
153-
<Section name={sectionNames.animationStyle}>
153+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
154154
{children.animationStyle.getPropertyView()}
155155
</Section>
156156
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const LinkTmpComp = (function () {
139139
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
140140
<>
141141
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
142-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
142+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
143143
</>
144144
)}
145145
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ const ToggleTmpComp = (function () {
139139
})}
140140
{children.style.getPropertyView()}
141141
</Section>
142-
<Section name={sectionNames.animationStyle}>
142+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
143143
{children.animationStyle.getPropertyView()}
144144
</Section>
145145
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ let CarouselBasicComp = (function () {
105105
<Section name={sectionNames.style}>
106106
{children.style.getPropertyView()}
107107
</Section>
108-
<Section name={sectionNames.animationStyle}>
108+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
109109
{children.animationStyle.getPropertyView()}
110110
</Section>
111111
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ let CommentBasicComp = (function () {
424424
<Section name={sectionNames.style}>
425425
{children.style.getPropertyView()}
426426
</Section>
427-
<Section name={sectionNames.animationStyle}>
427+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
428428
{children.animationStyle.getPropertyView()}
429429
</Section></>
430430
)}

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ export const ContainerBaseComp = (function () {
333333
<Section name={sectionNames.bodyStyle}>
334334
{children.bodyStyle.getPropertyView()}
335335
</Section>
336-
<Section name={sectionNames.animationStyle}>
336+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
337337
{children.animationStyle.getPropertyView()}
338338
</Section>
339339
</>

‎client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const ContainerBaseComp = (function () {
5454
<Section name={sectionNames.style}>
5555
{ children.container.stylePropertyView() }
5656
</Section>
57-
<Section name={sectionNames.animationStyle}>
57+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
5858
{children.animationStyle.getPropertyView()}
5959
</Section>
6060
{children.container.children.showHeader.getView() && (

‎client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const ContainerBaseComp = (function () {
9696
<Section name={"Floating Text Style"}>
9797
{children.style.getPropertyView()}
9898
</Section>
99-
<Section name={sectionNames.animationStyle}>
99+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
100100
{children.animationStyle.getPropertyView()}
101101
</Section>
102102
<Section name={"Container Style"}>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
247247
<Section name={sectionNames.style}>
248248
{children.style.getPropertyView()}
249249
</Section>
250-
<Section name={sectionNames.animationStyle}>
250+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
251251
{children.animationStyle.getPropertyView()}
252252
</Section>
253253
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
266266
<Section name={sectionNames.inputFieldStyle}>
267267
{children.inputFieldStyle.getPropertyView()}
268268
</Section>
269-
<Section name={sectionNames.animationStyle}>
269+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
270270
{children.animationStyle.getPropertyView()}
271271
</Section>
272272
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const DividerComp = migrateOldData(
129129
{children.dashed.propertyView({ label: trans("divider.dashed") })}
130130
{children.style.getPropertyView()}
131131
</Section>
132-
<Section name={sectionNames.animationStyle}>
132+
<Section name={sectionNames.animationStyle}hasTooltip={true}>
133133
{children.animationStyle.getPropertyView()}
134134
</Section>
135135
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -427,7 +427,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
427427
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
428428
<>
429429
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
430-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
430+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
431431
</>
432432
)}
433433
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ let FileViewerBasicComp = (function () {
106106
<Section name={sectionNames.style}>
107107
{children.style.getPropertyView()}
108108
</Section>
109-
<Section name={sectionNames.animationStyle}>
109+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
110110
{children.animationStyle.getPropertyView()}
111111
</Section>
112112
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ const FormBaseComp = (function () {
237237
<Section name={sectionNames.style}>
238238
{children.container.stylePropertyView()}
239239
</Section>
240-
<Section name={sectionNames.animationStyle}>
240+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
241241
{children.animationStyle.getPropertyView()}
242242
</Section>
243243
{children.container.children.showHeader.getView() && (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ let IconBasicComp = (function () {
143143
<Section name={sectionNames.style}>
144144
{children.style.getPropertyView()}
145145
</Section>
146-
<Section name={sectionNames.animationStyle}>
146+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
147147
{children.animationStyle.getPropertyView()}
148148
</Section>
149149
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ let IFrameCompBase = new UICompBuilder(
8787
<Section name={sectionNames.style}>
8888
{children.style.getPropertyView()}
8989
</Section>
90-
<Section name={sectionNames.animationStyle}>
90+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
9191
{children.animationStyle.getPropertyView()}
9292
</Section>
9393
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
204204
<Section name={sectionNames.style}>
205205
{children.style.getPropertyView()}
206206
</Section>
207-
<Section name={sectionNames.animationStyle}>
207+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
208208
{children.animationStyle.getPropertyView()}
209209
</Section>
210210
</>

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ let JsonEditorTmpComp = (function () {
142142
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
143143
<>
144144
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
145-
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
145+
<Section name={sectionNames.animationStyle} hasTooltip={true}>{children.animationStyle.getPropertyView()}</Section>
146146
</>
147147
)}
148148

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ let JsonExplorerTmpComp = (function () {
9999
label: trans('jsonExplorer.theme'),
100100
})}
101101
</Section>
102-
<Section name={sectionNames.animationStyle}>
102+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
103103
{children.animationStyle.getPropertyView()}
104104
</Section>
105105
</>

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ let JsonLottieTmpComp = (function () {
166166
<Section name={sectionNames.style}>
167167
{children.container.getPropertyView()}
168168
</Section>
169-
<Section name={sectionNames.animationStyle}>
169+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
170170
{children.animationStyle.getPropertyView()}
171171
</Section>
172172
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ let FormBasicComp = (function () {
328328
<Section name={sectionNames.style}>
329329
{children.style.getPropertyView()}
330330
</Section>
331-
<Section name={sectionNames.animationStyle}>
331+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
332332
{children.animationStyle.getPropertyView()}
333333
</Section>
334334
</>

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function listPropertyView(compType: ListCompType) {
8080
<Section name={sectionNames.style}>
8181
{children.style.getPropertyView()}
8282
</Section>
83-
<Section name={sectionNames.animationStyle}>
83+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
8484
{children.animationStyle.getPropertyView()}
8585
</Section></>
8686
)}

‎client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ let AudioBasicComp = (function () {
102102
<Section name={sectionNames.style}>
103103
{children.style.getPropertyView()}
104104
</Section>
105-
<Section name={sectionNames.animationStyle}>
105+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
106106
{children.animationStyle.getPropertyView()}
107107
</Section>
108108
</>

‎client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ let VideoBasicComp = (function () {
176176
<Section name={sectionNames.style}>
177177
{children.style.getPropertyView()}
178178
</Section>
179-
<Section name={sectionNames.animationStyle}>
179+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
180180
{children.animationStyle.getPropertyView()}
181181
</Section>
182182
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
265265
<Section name={sectionNames.style}>
266266
{children.style.getPropertyView()}
267267
</Section>
268-
<Section name={sectionNames.animationStyle}>
268+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
269269
{children.animationStyle.getPropertyView()}
270270
</Section>
271271
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,7 +445,7 @@ let NumberInputTmpComp = (function () {
445445
<Section name={sectionNames.inputFieldStyle}>
446446
{children.inputFieldStyle.getPropertyView()}
447447
</Section>
448-
<Section name={sectionNames.animationStyle}>
448+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
449449
{children.animationStyle.getPropertyView()}
450450
</Section>
451451
</>

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ export const SliderPropertyView = (
110110
<Section name={sectionNames.inputFieldStyle}>
111111
{children.inputFieldStyle.getPropertyView()}
112112
</Section>
113-
<Section name={sectionNames.animationStyle}>
113+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
114114
{children.animationStyle.getPropertyView()}
115115
</Section>
116116
</>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ let ProgressCircleTmpComp = (function () {
103103
<Section name={sectionNames.style}>
104104
{children.style.getPropertyView()}
105105
</Section>
106-
<Section name={sectionNames.animationStyle}>
106+
<Section name={sectionNames.animationStyle} hasTooltip={true}>
107107
{children.animationStyle.getPropertyView()}
108108
</Section>
109109
</>

0 commit comments

Comments
 (0)