Skip to content

Commit 6e3c639

Browse files
MenamAfzalMenamAfzal
committed
conflicts resolved
2 parents 2459677 + aee0d43 commit 6e3c639

Some content is hidden

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

54 files changed

+1407
-418
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ export const sectionNames = {
146146
layout: trans("prop.layout"),
147147
style: trans("prop.style"),
148148
labelStyle:trans("prop.labelStyle"),
149+
animationStyle:trans("prop.animationStyle"),
149150
data: trans("prop.data"),
150151
meetings: trans("prop.meetings"), // added by Falk Wolsky
151152
field: trans("prop.field"),

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const en = {
2323
advanced: "Advanced",
2424
validation: "Validation",
2525
layout: "Layout",
26+
animationStyle:"Animation Style",
2627
labelStyle: "Label Style",
2728
style: "Style",
2829
meetings: "Meeting Settings",

‎client/packages/lowcoder-design/src/icons/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,10 @@ export { ReactComponent as ResetIcon } from "./icon-style-reset.svg";
161161
export { ReactComponent as EditIcon } from "./icon-edit.svg";
162162
export { ReactComponent as EditableIcon } from "./icon-editable.svg";
163163
export { ReactComponent as LeftStateIcon } from "./remix/node-tree.svg";
164+
export {ReactComponent as StarSmileIcon} from "./remix/star-smile-line.svg";
165+
export {ReactComponent as Timer2Icon} from "./remix/timer-2-line.svg";
166+
export {ReactComponent as TimerFlashIcon} from "./remix/timer-flash-line.svg";
167+
export {ReactComponent as RefreshLineIcon} from "./remix/refresh-line.svg";
164168
export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
165169
export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
166170
export { ReactComponent as LeftHelpIcon } from "./icon-left-help.svg";

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@types/react-signature-canvas": "^1.0.2",
3737
"@types/react-test-renderer": "^18.0.0",
3838
"@types/react-virtualized": "^9.21.21",
39+
"animate.css": "^4.1.1",
3940
"antd": "5.13.2",
4041
"axios": "^1.6.2",
4142
"buffer": "^6.0.3",

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,17 @@ export interface ThemeDetail {
4444
primarySurface: string; // comp bg-color
4545
borderRadius: string;
4646
chart?: string;
47-
margin?: string;
47+
margin?: string;
4848
padding?: string;
4949
gridColumns?: string; //Added By Aqib Mirza
5050
textSize?: string;
51+
animation?: string;
52+
animationDelay?: string;
53+
animationDuration?: string;
54+
opacity?: string;
55+
boxShadow?: string;
56+
boxShadowColor?: string;
57+
animationIterationCount?: string;
5158
}
5259

5360
export function getThemeDetailName(key: keyof ThemeDetail) {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Input, Section, sectionNames } from "lowcoder-design";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
55
import {
6+
AnimationStyle,
67
InputFieldStyle,
78
InputLikeStyle,
89
InputLikeStyleType,
@@ -62,6 +63,7 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
6263
${getStyle(props.$style)}
6364
input {
6465
padding: ${props.style?.padding};
66+
rotate: ${props?.$style?.rotation};
6567
}
6668
.ant-select-single {
6769
width: 100% !important;
@@ -89,6 +91,7 @@ const childrenMap = {
8991
componentSize: dropdownControl(componentSize, "small"),
9092
valueInItems: booleanExposingStateControl("valueInItems"),
9193
inputFieldStyle: styleControl(InputLikeStyle),
94+
animationStyle: styleControl(AnimationStyle),
9295
};
9396

9497
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -283,6 +286,7 @@ let AutoCompleteCompBase = (function () {
283286
style: props.style,
284287
labelStyle: props.labelStyle,
285288
inputFieldStyle:props.inputFieldStyle,
289+
animationStyle: props.animationStyle,
286290
...validateState,
287291
});
288292
})
@@ -347,6 +351,9 @@ let AutoCompleteCompBase = (function () {
347351
<Section name={sectionNames.inputFieldStyle}>
348352
{children.inputFieldStyle.getPropertyView()}
349353
</Section>
354+
<Section name={sectionNames.animationStyle}>
355+
{children.animationStyle.getPropertyView()}
356+
</Section>
350357
</>
351358
);
352359
})

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

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ButtonCompWrapper, buttonRefMethods } from "comps/comps/buttonComp/butt
33
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
44
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
55
import { styleControl } from "comps/controls/styleControl";
6-
import { LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
6+
import { AnimationStyle, AnimationStyleType, LinkStyle, LinkStyleType } from "comps/controls/styleControlConstants";
77
import { withDefault } from "comps/generators";
88
import { migrateOldData } from "comps/generators/simpleGenerators";
99
import { UICompBuilder } from "comps/generators/uiCompBuilder";
@@ -23,7 +23,11 @@ import { RefControl } from "comps/controls/refControl";
2323
import { EditorContext } from "comps/editorState";
2424
import React, { useContext } from "react";
2525

26-
const Link = styled(Button) <{ $style: LinkStyleType }>`
26+
const Link = styled(Button)<{
27+
$style: LinkStyleType;
28+
$animationStyle: AnimationStyleType;
29+
}>`
30+
${(props) => props.$animationStyle}
2731
${(props) => `
2832
color: ${props.$style.text};
2933
margin: ${props.$style.margin};
@@ -81,6 +85,7 @@ const LinkTmpComp = (function () {
8185
disabled: BoolCodeControl,
8286
loading: BoolCodeControl,
8387
style: migrateOldData(styleControl(LinkStyle), fixOldData),
88+
animationStyle:styleControl(AnimationStyle),
8489
prefixIcon: IconControl,
8590
suffixIcon: IconControl,
8691
viewRef: RefControl<HTMLElement>,
@@ -91,6 +96,7 @@ const LinkTmpComp = (function () {
9196
return (
9297
<ButtonCompWrapper disabled={props.disabled}>
9398
<Link
99+
$animationStyle={props.animationStyle}
94100
ref={props.viewRef}
95101
$style={props.style}
96102
loading={props.loading}
@@ -130,7 +136,10 @@ const LinkTmpComp = (function () {
130136
)}
131137

132138
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
133-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
139+
<>
140+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
141+
<Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
142+
</>
134143
)}
135144
</>
136145
);

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

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,11 @@ import { Button100, ButtonCompWrapper, buttonRefMethods } from "./buttonCompCons
1515
import { IconControl } from "comps/controls/iconControl";
1616
import { AlignWithStretchControl, LeftRightControl } from "comps/controls/dropdownControl";
1717
import { booleanExposingStateControl } from "comps/controls/codeStateControl";
18-
import { ToggleButtonStyle } from "comps/controls/styleControlConstants";
18+
import {
19+
AnimationStyle,
20+
AnimationStyleType,
21+
ToggleButtonStyle,
22+
} from "comps/controls/styleControlConstants";
1923
import { styleControl } from "comps/controls/styleControl";
2024
import { BoolControl } from "comps/controls/boolControl";
2125
import { RefControl } from "comps/controls/refControl";
@@ -29,7 +33,9 @@ const IconWrapper = styled.div`
2933
const ButtonCompWrapperStyled = styled(ButtonCompWrapper)<{
3034
$align: "left" | "center" | "right" | "stretch";
3135
$showBorder: boolean;
36+
$animationStyle: AnimationStyleType;
3237
}>`
38+
${(props) => props.$animationStyle}
3339
width: 100%;
3440
display: flex;
3541
justify-content: ${(props) => props.$align};
@@ -55,7 +61,8 @@ const ToggleTmpComp = (function () {
5561
iconPosition: LeftRightControl,
5662
alignment: AlignWithStretchControl,
5763
style: styleControl(ToggleButtonStyle),
58-
showBorder: withDefault(BoolControl, true),
64+
animationStyle: styleControl(AnimationStyle),
65+
showBorder: withDefault(BoolControl, true),
5966
viewRef: RefControl<HTMLElement>,
6067
};
6168
return new UICompBuilder(childrenMap, (props) => {
@@ -67,6 +74,7 @@ const ToggleTmpComp = (function () {
6774
disabled={props.disabled}
6875
$align={props.alignment}
6976
$showBorder={props.showBorder}
77+
$animationStyle={props.animationStyle}
7078
>
7179
<Button100
7280
ref={props.viewRef}
@@ -122,13 +130,21 @@ const ToggleTmpComp = (function () {
122130
</>
123131
)}
124132

125-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
126-
<><Section name={sectionNames.style}>
127-
{children.showBorder.propertyView({ label: trans("toggleButton.showBorder") })}
128-
{children.style.getPropertyView()}
129-
</Section></>
130-
)}
131-
133+
{(useContext(EditorContext).editorModeStatus === "layout" ||
134+
useContext(EditorContext).editorModeStatus === "both") && (
135+
<>
136+
<Section name={sectionNames.style}>
137+
{children.showBorder.propertyView({
138+
label: trans("toggleButton.showBorder"),
139+
})}
140+
{children.style.getPropertyView()}
141+
</Section>
142+
<Section name={sectionNames.animationStyle}>
143+
{children.animationStyle.getPropertyView()}
144+
</Section>
145+
</>
146+
)}
147+
132148
</>
133149
))
134150
.setExposeMethodConfigs(buttonRefMethods)

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { EditorContext } from "comps/editorState";
3131

3232
// Introducing styles
3333
import {
34+
AnimationStyle,
3435
CommentStyle,
3536
heightCalculator,
3637
widthCalculator,
@@ -100,6 +101,7 @@ const childrenMap = {
100101
}),
101102
onEvent: eventHandlerControl(EventOptions),
102103
style: styleControl(CommentStyle),
104+
animationStyle: styleControl(AnimationStyle),
103105
commentList: jsonValueExposingStateControl("commentList", []),
104106
deletedItem: jsonValueExposingStateControl("deletedItem", []),
105107
submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -125,6 +127,7 @@ const CommentCompBase = (
125127
userInfo,
126128
placeholder,
127129
deleteAble,
130+
animationStyle,
128131
} = props;
129132
type PrefixType = "@" | keyof typeof mentionList;
130133
// Used to save the consolidated list of mentions
@@ -233,7 +236,11 @@ const CommentCompBase = (
233236
width: widthCalculator(style.margin ?? "3px"),
234237
height: heightCalculator(style.margin ?? "3px"),
235238
background: style.background,
236-
borderRadius: style.radius,
239+
borderRadius: style.radius,
240+
animation: animationStyle.animation,
241+
animationDelay: animationStyle.animationDelay,
242+
animationDuration: animationStyle.animationDuration,
243+
animationIterationCount:animationStyle.animationIterationCount
237244
}}>
238245
<div
239246
style={{
@@ -413,8 +420,12 @@ let CommentBasicComp = (function () {
413420
{children.placeholder.propertyView({
414421
label: trans("comment.placeholderDec"),
415422
})}
416-
</Section><Section name={sectionNames.style}>
423+
</Section>
424+
<Section name={sectionNames.style}>
417425
{children.style.getPropertyView()}
426+
</Section>
427+
<Section name={sectionNames.animationStyle}>
428+
{children.animationStyle.getPropertyView()}
418429
</Section></>
419430
)}
420431

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
1313
import { EditorContext } from "comps/editorState";
1414
import { Card } from "antd";
1515
import styled from "styled-components";
16-
import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
16+
import { AnimationStyle, AnimationStyleType, CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
1717
import { MultiCompBuilder, withDefault } from "comps/generators";
1818
import { IconControl } from "comps/controls/iconControl";
1919
import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,7 +22,14 @@ import { dropdownControl } from "comps/controls/dropdownControl";
2222
import { styleControl } from "comps/controls/styleControl";
2323
const { Meta } = Card;
2424

25-
const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
25+
const Warpper = styled.div<{
26+
$style: CardStyleType | undefined;
27+
$showMate: boolean;
28+
$cardType: string;
29+
$headerStyle: CardHeaderStyleType;
30+
$bodyStyle: CardHeaderStyleType;
31+
$animationStyle:AnimationStyleType;
32+
}>`
2633
height: 100%;
2734
width: 100%;
2835
.ant-card-small >.ant-card-head {
@@ -70,6 +77,7 @@ const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boole
7077
border-style: ${props => props.$style?.borderStyle};
7178
border-radius: ${props => props.$style?.radius};
7279
border-width: ${props => props.$style?.borderWidth};
80+
${props=>props.$animationStyle}
7381
}
7482
.ant-card-body {
7583
display: ${props => props.$showMate ? '' : 'none'};
@@ -173,6 +181,7 @@ export const ContainerBaseComp = (function () {
173181
style: styleControl(CardStyle),
174182
headerStyle: styleControl(CardHeaderStyle),
175183
bodyStyle: styleControl(CardHeaderStyle),
184+
animationStyle: styleControl(AnimationStyle),
176185
};
177186

178187
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -202,6 +211,7 @@ export const ContainerBaseComp = (function () {
202211
<Warpper
203212
ref={conRef}
204213
$style={props.style}
214+
$animationStyle={props.animationStyle}
205215
$headerStyle={props.headerStyle}
206216
$bodyStyle={props.bodyStyle}
207217
$showMate={props.showMeta || props.cardType == 'custom'}
@@ -321,6 +331,9 @@ export const ContainerBaseComp = (function () {
321331
<Section name={sectionNames.bodyStyle}>
322332
{children.bodyStyle.getPropertyView()}
323333
</Section>
334+
<Section name={sectionNames.animationStyle}>
335+
{children.animationStyle.getPropertyView()}
336+
</Section>
324337
</>
325338
)}
326339
</>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import { BoolCodeControl } from "comps/controls/codeControl";
1616
import { DisabledContext } from "comps/generators/uiCompBuilder";
1717
import React, { useContext } from "react";
1818
import { EditorContext } from "comps/editorState";
19+
import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
1920

2021
export const ContainerBaseComp = (function () {
2122
const childrenMap = {
2223
disabled: BoolCodeControl,
24+
animationStyle: styleControl(AnimationStyle),
2325
};
2426
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
2527
return (

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ import {
1818
ContainerCompBuilder,
1919
} from "../pageLayoutComp/pageLayoutCompBuilder";
2020
import { PageLayout } from "../pageLayoutComp/pageLayout";
21-
21+
import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
2222

2323
export const ContainerBaseComp = (function () {
24-
const childrenMap = {
25-
disabled: BoolCodeControl
24+
const childrenMap = {
25+
disabled: BoolCodeControl,
26+
animationStyle: styleControl(AnimationStyle),
2627
};
2728

2829
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -52,7 +53,10 @@ export const ContainerBaseComp = (function () {
5253
</Section>
5354
<Section name={sectionNames.style}>
5455
{ children.container.stylePropertyView() }
55-
</Section>
56+
</Section>
57+
<Section name={sectionNames.animationStyle}>
58+
{children.animationStyle.getPropertyView()}
59+
</Section>
5660
{children.container.children.showHeader.getView() && (
5761
<Section name={"Header Style"}>
5862
{ children.container.headerStylePropertyView() }

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
2020
import { dropdownControl } from "comps/controls/dropdownControl";
2121
import { withDefault } from "comps/generators/simpleGenerators";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { TextStyle } from "comps/controls/styleControlConstants";
23+
import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
2424
import { useContext } from "react";
2525
import { EditorContext } from "comps/editorState";
2626
import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -63,6 +63,7 @@ export const ContainerBaseComp = (function () {
6363
horizontalAlignment: alignWithJustifyControl(),
6464
width: withDefault(StringControl, "40"),
6565
style: styleControl(TextStyle),
66+
animationStyle: styleControl(AnimationStyle),
6667
};
6768
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
6869
return <TriContainer {...props} />;
@@ -95,6 +96,9 @@ export const ContainerBaseComp = (function () {
9596
<Section name={"Floating Text Style"}>
9697
{children.style.getPropertyView()}
9798
</Section>
99+
<Section name={sectionNames.animationStyle}>
100+
{children.animationStyle.getPropertyView()}
101+
</Section>
98102
<Section name={"Container Style"}>
99103
{children.container.stylePropertyView()}
100104
</Section>

0 commit comments

Comments
 (0)