Skip to content

Commit 5fed3c7

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #908 from MenamAfzal/fix/rotation-and-animation
Fix/rotation and animation
2 parents 6e690d5 + a9d66ec commit 5fed3c7

32 files changed

+369
-144
lines changed

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ white-space: nowrap;
7474
font-weight: ${props=>props.$style.textWeight};
7575
border-radius: ${props=>props.$style.radius};
7676
font-size: ${props=>props.$style.textSize};
77-
rotate: ${props=>props.$style.rotation};
7877
text-transform: ${props=>props.$style.textTransform};
7978
color: ${props=>props.$style.text};
8079
border: ${props => props.$style.border};
@@ -95,7 +94,6 @@ white-space: nowrap;
9594
font-weight: ${props=>props.$style.textWeight};
9695
border-radius: ${props=>props.$style.radius};
9796
font-size: ${props=>props.$style.textSize};
98-
rotate: ${props=>props.$style.rotation};
9997
text-transform: ${props=>props.$style.textTransform};
10098
color: ${props=>props.$style.text};
10199
border: ${props => props.$style.border};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
import { RefControl } from "comps/controls/refControl";
2626

2727
import React, { useContext } from "react";
28+
import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
2829

2930
const FormLabel = styled(CommonBlueLabel)`
3031
font-size: 13px;
@@ -129,6 +130,7 @@ const ButtonTmpComp = (function () {
129130
prefixIcon: IconControl,
130131
suffixIcon: IconControl,
131132
style: ButtonStyleControl,
133+
animationStyle:styleControl(AnimationStyle),
132134
viewRef: RefControl<HTMLElement>,
133135
};
134136
return new UICompBuilder(childrenMap, (props) => (

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@ import { genActiveColor, genHoverColor } from "lowcoder-design";
77
import { refMethods } from "comps/generators/withMethodExposing";
88
import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
99

10-
export function getButtonStyle(buttonStyle: ButtonStyleType) {
10+
export function getButtonStyle(buttonStyle: any) {
1111
const hoverColor = genHoverColor(buttonStyle.background);
1212
const activeColor = genActiveColor(buttonStyle.background);
1313
return css`
1414
&&& {
1515
border-radius: ${buttonStyle.radius};
1616
border-width:${buttonStyle.borderWidth};
17-
margin: ${buttonStyle.margin};
17+
margin: ${buttonStyle.margin};
1818
padding: ${buttonStyle.padding};
19+
rotate: ${buttonStyle.rotation&&buttonStyle.rotation};
1920
&:not(:disabled) {
2021
--antd-wave-shadow-color: ${buttonStyle.border};
2122
border-color: ${buttonStyle.border};
@@ -28,9 +29,9 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
2829
text-decoration:${buttonStyle.textDecoration};
2930
background-color: ${buttonStyle.background};
3031
border-radius: ${buttonStyle.radius};
31-
margin: ${buttonStyle.margin};
32+
margin: ${buttonStyle.margin};
3233
padding: ${buttonStyle.padding};
33-
34+
3435
&:hover,
3536
&:focus {
3637
color: ${buttonStyle.text};
@@ -51,7 +52,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
5152
`;
5253
}
5354

54-
export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
55+
export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
5556
${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
5657
width: 100%;
5758
height: auto;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { default as Dropdown } from "antd/es/dropdown";
33
import { default as DropdownButton } from "antd/es/dropdown/dropdown-button";
44
import { BoolControl } from "comps/controls/boolControl";
55
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
6-
import { ButtonStyleType } from "comps/controls/styleControlConstants";
6+
import { DropdownStyle } from "comps/controls/styleControlConstants";
77
import { withDefault } from "comps/generators";
88
import { UICompBuilder } from "comps/generators/uiCompBuilder";
99
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
@@ -21,6 +21,7 @@ import {
2121
ButtonStyleControl,
2222
getButtonStyle,
2323
} from "./buttonCompConstants";
24+
import { styleControl } from "@lowcoder-ee/index.sdk";
2425

2526

2627
const StyledDropdownButton = styled(DropdownButton)`
@@ -32,7 +33,7 @@ const StyledDropdownButton = styled(DropdownButton)`
3233
}
3334
`;
3435

35-
const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
36+
const LeftButtonWrapper = styled.div<{ $buttonStyle: any }>`
3637
width: calc(100%);
3738
${(props) => `margin: ${props.$buttonStyle.margin};`}
3839
margin-right: 0;
@@ -62,7 +63,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
6263
6364
`;
6465

65-
const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
66+
const RightButtonWrapper = styled.div<{ $buttonStyle: any }>`
6667
// width: 32px;
6768
${(props) => `margin: ${props.$buttonStyle.margin};`}
6869
margin-left: -1px;
@@ -85,7 +86,7 @@ const DropdownTmpComp = (function () {
8586
options: DropdownOptionControl,
8687
disabled: BoolCodeControl,
8788
onEvent: ButtonEventHandlerControl,
88-
style: ButtonStyleControl,
89+
style: styleControl(DropdownStyle),
8990
};
9091
return new UICompBuilder(childrenMap, (props) => {
9192
const hasIcon =

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

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
33
import { stringExposingStateControl } from "comps/controls/codeStateControl";
44
import { dropdownControl } from "comps/controls/dropdownControl";
55
import { styleControl } from "comps/controls/styleControl";
6-
import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
6+
import { AnimationStyle, AnimationStyleType, BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
77
import { UICompBuilder } from "comps/generators/uiCompBuilder";
88
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
99
import { Section, sectionNames } from "lowcoder-design";
@@ -17,6 +17,12 @@ import styled from "styled-components";
1717
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
1818
import { manualOptionsControl } from "comps/controls/optionsControl";
1919

20+
const StyledFloatButton = styled(FloatButton)<{
21+
$animationStyle: AnimationStyleType;
22+
}>`
23+
${(props) => props.$animationStyle}
24+
`;
25+
2026
const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
2127
width: 0px;
2228
height: 0px;
@@ -78,6 +84,7 @@ const childrenMap = {
7884
icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
7985
badgeStyle: styleControl(BadgeStyle),
8086
style: styleControl(FloatButtonStyle),
87+
animationStyle: styleControl(AnimationStyle),
8188
buttons: manualOptionsControl(buttonGroupOption, {
8289
initOptions: [
8390
{ id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -93,7 +100,8 @@ const childrenMap = {
93100
const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
94101
const renderButton = (button: any, onlyOne?: boolean) => {
95102
return !button?.hidden ? (
96-
<FloatButton
103+
<StyledFloatButton
104+
$animationStyle={props.animationStyle}
97105
key={button?.id}
98106
icon={button?.icon}
99107
onClick={() => button.onEvent("click")}
@@ -108,39 +116,46 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
108116
return (
109117
<Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
110118
{props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
111-
(<FloatButton.Group
119+
(<StyledFloatButton.Group
112120
trigger="hover"
113121
icon={props.icon}
114122
shape={props.shape}
115123
badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }}
116124
type={props.buttonTheme}
117125
>
118126
{props.buttons.map((button: any) => renderButton(button))}
119-
</FloatButton.Group>)
127+
</StyledFloatButton.Group>)
120128
}
121129
</Wrapper>
122130
);
123131
};
124132

125133
let FloatButtonBasicComp = (function () {
126-
return new UICompBuilder(childrenMap, (props) => <FloatButtonView {...props} />)
127-
.setPropertyViewFn((children) => (
128-
<>
129-
<Section name={sectionNames.basic}>
130-
{children.buttons.propertyView({})}
131-
{children.icon.propertyView({ label: trans("icon") })}
132-
{children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
133-
{children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
134-
{children.dot.propertyView({ label: trans("floatButton.dot") })}
135-
</Section>
136-
<Section name={sectionNames.layout}>
137-
{hiddenPropertyView(children)}
138-
</Section>
139-
<Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
140-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
141-
</>
142-
))
143-
.build();
134+
return new UICompBuilder(childrenMap, (props) => (
135+
<FloatButtonView {...props} />
136+
))
137+
.setPropertyViewFn((children) => (
138+
<>
139+
<Section name={sectionNames.basic}>
140+
{children.buttons.propertyView({})}
141+
{children.icon.propertyView({ label: trans("icon") })}
142+
{children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
143+
{children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
144+
{children.dot.propertyView({ label: trans("floatButton.dot") })}
145+
</Section>
146+
<Section name={sectionNames.layout}>
147+
{hiddenPropertyView(children)}
148+
</Section>
149+
<Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
150+
<Section name={sectionNames.style}>
151+
{children.style.getPropertyView()}
152+
</Section>
153+
<Section name={sectionNames.animationStyle}>
154+
{children.animationStyle.getPropertyView()}
155+
</Section>
156+
</>
157+
))
158+
.build();
144159
})();
145160

146161
FloatButtonBasicComp = class extends FloatButtonBasicComp {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const Link = styled(Button)<{
3030
${(props) => props.$animationStyle}
3131
${(props) => `
3232
color: ${props.$style.text};
33+
rotate: ${props.$style.rotation};
3334
margin: ${props.$style.margin};
3435
padding: ${props.$style.padding};
3536
font-size: ${props.$style.textSize};

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1111
import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
1212
import { styleControl } from "comps/controls/styleControl";
13-
import { ButtonStyle } from "comps/controls/styleControlConstants";
13+
import { DropdownStyle } from "comps/controls/styleControlConstants";
1414
import { withDefault } from "comps/generators";
1515
import { UICompBuilder } from "comps/generators/uiCompBuilder";
1616
import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -70,7 +70,7 @@ const ScannerTmpComp = (function () {
7070
maskClosable: withDefault(BoolControl, true),
7171
onEvent: ScannerEventHandlerControl,
7272
disabled: BoolCodeControl,
73-
style: styleControl(ButtonStyle),
73+
style: styleControl(DropdownStyle),
7474
viewRef: RefControl<HTMLElement>,
7575
};
7676
return new UICompBuilder(childrenMap, (props) => {

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useRef, useState } from "react";
1313
import ReactResizeDetector from "react-resize-detector";
1414
import { ArrayStringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
16-
import { CarouselStyle } from "comps/controls/styleControlConstants";
16+
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
1717

1818
import { useContext } from "react";
1919
import { EditorContext } from "comps/editorState";
@@ -25,11 +25,13 @@ const CarouselItem = styled.div<{ $src: string }>`
2525
background-size: contain;
2626
`;
2727

28-
const Container = styled.div<{ $bg: string }>`
28+
const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
2929
&,
3030
.ant-carousel {
3131
height: 100%;
3232
background-color: ${(props) => props.$bg};
33+
rotate: ${(props) => props.$rotation};
34+
${props=>props.$animationStyle}
3335
}
3436
`;
3537

@@ -44,6 +46,7 @@ let CarouselBasicComp = (function () {
4446
showDots: withDefault(BoolControl, true),
4547
dotPosition: withDefault(PositionControl, "bottom"),
4648
style: styleControl(CarouselStyle),
49+
animationStyle: styleControl(AnimationStyle),
4750

4851
...formDataChildren,
4952
};
@@ -56,7 +59,12 @@ let CarouselBasicComp = (function () {
5659
}
5760
};
5861
return (
59-
<Container ref={containerRef} $bg={props.style.background}>
62+
<Container
63+
ref={containerRef}
64+
$bg={props.style.background}
65+
$rotation={props.style.rotation}
66+
$animationStyle={props.animationStyle}
67+
>
6068
<ReactResizeDetector onResize={onResize}>
6169
<Carousel
6270
dots={props.showDots}
@@ -100,6 +108,9 @@ let CarouselBasicComp = (function () {
100108
<Section name={sectionNames.style}>
101109
{children.style.getPropertyView()}
102110
</Section>
111+
<Section name={sectionNames.animationStyle}>
112+
{children.animationStyle.getPropertyView()}
113+
</Section>
103114
</>
104115
)}
105116
</>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ const ContainWrapper = styled.div<{
4949
border-width: ${(props) => props.$style?.borderWidth};
5050
border-color: ${(props) => props.$style?.border};
5151
border-style: ${(props) => props.$style?.borderStyle};
52-
rotate: ${(props) => props.$style?.rotation};
5352
margin: ${(props) => props.$style?.margin};
5453
padding: ${(props) => props.$style?.padding};
5554
`;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ const Wrapper = styled.div<{
7474
justify-content: space-between;
7575
background-color: ${props => props.$style?.background};
7676
border: ${props => props.$style?.border};
77+
rotate: ${props => props.$style?.rotation};
7778
border-style: ${props => props.$style?.borderStyle};
7879
border-radius: ${props => props.$style?.radius};
7980
border-width: ${props => props.$style?.borderWidth};

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

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
1212
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1313
import { trans } from "i18n";
1414
import { EditorContext } from "comps/editorState";
15+
import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk";
1516

1617
// TODO: eventually to embedd in container so we have styling?
1718
// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -67,13 +68,21 @@ const defaultCode = `
6768
type IProps = {
6869
code: string;
6970
model: any;
71+
style: CustomStyleType;
72+
animationStyle:AnimationStyleType
7073
onModelChange: (v: any) => void;
7174
dispatch: (action: CompAction<any>) => void;
7275
};
7376

74-
const Wrapper = styled.div`
77+
const Wrapper = styled.div<{
78+
$style: CustomStyleType;
79+
$animationStyle: AnimationStyleType;
80+
}>`
7581
width: 100%;
7682
height: 100%;
83+
${(props) => props.$style};
84+
rotate: ${(props) => props.$style.rotation};
85+
${(props) => props.$animationStyle};
7786
iframe {
7887
border: 0;
7988
width: 100%;
@@ -196,21 +205,29 @@ function InnerCustomComponent(props: IProps) {
196205
}, [code]);
197206

198207
return (
199-
<Wrapper>
200-
<iframe ref={iframeRef} title="custom-comp" src={trans("customComponent.entryUrl")} />
208+
<Wrapper $style={props.style} $animationStyle={props.animationStyle}>
209+
<iframe
210+
ref={iframeRef}
211+
title="custom-comp"
212+
src={trans('customComponent.entryUrl')}
213+
/>
201214
</Wrapper>
202215
);
203216
}
204217

205218
const childrenMap = {
206219
model: jsonObjectStateControl(defaultModel),
207220
code: withDefault(StringControl, defaultCode),
221+
style:styleControl(CustomStyle),
222+
animationStyle:styleControl(AnimationStyle),
208223
};
209224

210225
const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
211226
const { code, model } = props;
212227
return (
213228
<InnerCustomComponent
229+
style={props.style}
230+
animationStyle={props.animationStyle}
214231
code={code}
215232
model={model.value}
216233
onModelChange={(v) => model.onChange(v)}
@@ -226,6 +243,12 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
226243
{children.model.propertyView({ label: trans("customComp.data") })}
227244
{children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
228245
{hiddenPropertyView(children)}
246+
</Section>
247+
<Section name={sectionNames.style}>
248+
{children.style.getPropertyView()}
249+
</Section>
250+
<Section name={sectionNames.animationStyle}>
251+
{children.animationStyle.getPropertyView()}
229252
</Section>
230253
</>
231254
)}

0 commit comments

Comments
 (0)