Skip to content

Commit 95a6ba5

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #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"}>

0 commit comments

Comments
 (0)