lowcoder-org · FalkWolsky · May 27, 2024 · May 23, 2024 · May 24, 2024 · May 27, 2024
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -74,7 +74,6 @@ white-space: nowrap;
 font-weight: ${props=>props.$style.textWeight};
 border-radius: ${props=>props.$style.radius};
 font-size: ${props=>props.$style.textSize};
-rotate: ${props=>props.$style.rotation};
 text-transform: ${props=>props.$style.textTransform};
 color: ${props=>props.$style.text};
 border: ${props => props.$style.border};
@@ -95,7 +94,6 @@ white-space: nowrap;
 font-weight: ${props=>props.$style.textWeight};
 border-radius: ${props=>props.$style.radius};
 font-size: ${props=>props.$style.textSize};
-rotate: ${props=>props.$style.rotation};
 text-transform: ${props=>props.$style.textTransform};
 color: ${props=>props.$style.text};
 border: ${props => props.$style.border};

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -25,6 +25,7 @@ import {
 import { RefControl } from "comps/controls/refControl";
 
 import React, { useContext } from "react";
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -129,6 +130,7 @@ const ButtonTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     style: ButtonStyleControl,
+    animationStyle:styleControl(AnimationStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => (

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -7,15 +7,16 @@ import { genActiveColor, genHoverColor } from "lowcoder-design";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-export function getButtonStyle(buttonStyle: ButtonStyleType) {
+export function getButtonStyle(buttonStyle: any) {
   const hoverColor = genHoverColor(buttonStyle.background);
   const activeColor = genActiveColor(buttonStyle.background);
   return css`
     &&& {
       border-radius: ${buttonStyle.radius};
       border-width:${buttonStyle.borderWidth};
-      margin: ${buttonStyle.margin};	
+      margin: ${buttonStyle.margin};
       padding: ${buttonStyle.padding};
+      rotate: ${buttonStyle.rotation&&buttonStyle.rotation};
       &:not(:disabled) {
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
@@ -28,9 +29,9 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         text-decoration:${buttonStyle.textDecoration};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
-        margin: ${buttonStyle.margin};	
+        margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
-  
+
         &:hover,
         &:focus {
           color: ${buttonStyle.text};
@@ -51,7 +52,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
+export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
   ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
   width: 100%;
   height: auto;

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -3,7 +3,7 @@ import { default as Dropdown } from "antd/es/dropdown";
 import { default as DropdownButton } from "antd/es/dropdown/dropdown-button";
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import { ButtonStyleType } from "comps/controls/styleControlConstants";
+import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
@@ -21,6 +21,7 @@ import {
   ButtonStyleControl,
   getButtonStyle,
 } from "./buttonCompConstants";
+import { styleControl } from "@lowcoder-ee/index.sdk";
 
 
 const StyledDropdownButton = styled(DropdownButton)`
@@ -32,7 +33,7 @@ const StyledDropdownButton = styled(DropdownButton)`
   }
 `;
 
-const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
+const LeftButtonWrapper = styled.div<{ $buttonStyle: any }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
@@ -62,7 +63,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
 
 `;
 
-const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
+const RightButtonWrapper = styled.div<{ $buttonStyle: any }>`
   // width: 32px;
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-left: -1px;
@@ -85,7 +86,7 @@ const DropdownTmpComp = (function () {
     options: DropdownOptionControl,
     disabled: BoolCodeControl,
     onEvent: ButtonEventHandlerControl,
-    style: ButtonStyleControl,
+    style: styleControl(DropdownStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     const hasIcon =

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -17,6 +17,12 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 
+const StyledFloatButton = styled(FloatButton)<{
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
+`;
+
 const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
     width: 0px;
     height: 0px;
@@ -78,6 +84,7 @@ const childrenMap = {
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
     badgeStyle: styleControl(BadgeStyle),
     style: styleControl(FloatButtonStyle),
+    animationStyle: styleControl(AnimationStyle),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
             { id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -93,7 +100,8 @@ const childrenMap = {
 const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
     const renderButton = (button: any, onlyOne?: boolean) => {
         return !button?.hidden ? (
-            <FloatButton
+            <StyledFloatButton
+                $animationStyle={props.animationStyle}
                 key={button?.id}
                 icon={button?.icon}
                 onClick={() => button.onEvent("click")}
@@ -108,39 +116,46 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
     return (
         <Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
             {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
-                (<FloatButton.Group
+                (<StyledFloatButton.Group
                     trigger="hover"
                     icon={props.icon}
                     shape={props.shape}
                     badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }}
                     type={props.buttonTheme}
                 >
                     {props.buttons.map((button: any) => renderButton(button))}
-                </FloatButton.Group>)
+                </StyledFloatButton.Group>)
             }
         </Wrapper>
     );
 };
 
 let FloatButtonBasicComp = (function () {
-    return new UICompBuilder(childrenMap, (props) => <FloatButtonView {...props} />)
-        .setPropertyViewFn((children) => (
-            <>
-                <Section name={sectionNames.basic}>
-                    {children.buttons.propertyView({})}
-                    {children.icon.propertyView({ label: trans("icon") })}
-                    {children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
-                    {children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
-                    {children.dot.propertyView({ label: trans("floatButton.dot") })}
-                </Section>
-                <Section name={sectionNames.layout}>
-                    {hiddenPropertyView(children)}
-                </Section>
-                <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
-                <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
-            </>
-        ))
-        .build();
+    return new UICompBuilder(childrenMap, (props) => (
+      <FloatButtonView {...props} />
+    ))
+      .setPropertyViewFn((children) => (
+        <>
+          <Section name={sectionNames.basic}>
+            {children.buttons.propertyView({})}
+            {children.icon.propertyView({ label: trans("icon") })}
+            {children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
+            {children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
+            {children.dot.propertyView({ label: trans("floatButton.dot") })}
+          </Section>
+          <Section name={sectionNames.layout}>
+            {hiddenPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
+        </>
+      ))
+      .build();
 })();
 
 FloatButtonBasicComp = class extends FloatButtonBasicComp {

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -30,6 +30,7 @@ const Link = styled(Button)<{
   ${(props) => props.$animationStyle}
   ${(props) => `
     color: ${props.$style.text};
+    rotate: ${props.$style.rotation};
     margin: ${props.$style.margin};
     padding: ${props.$style.padding};
     font-size: ${props.$style.textSize};

diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -10,7 +10,7 @@ import {
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ButtonStyle } from "comps/controls/styleControlConstants";
+import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -70,7 +70,7 @@ const ScannerTmpComp = (function () {
     maskClosable: withDefault(BoolControl, true),
     onEvent: ScannerEventHandlerControl,
     disabled: BoolCodeControl,
-    style: styleControl(ButtonStyle),
+    style: styleControl(DropdownStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {

diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -13,7 +13,7 @@ import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CarouselStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -25,11 +25,13 @@ const CarouselItem = styled.div<{ $src: string }>`
   background-size: contain;
 `;
 
-const Container = styled.div<{ $bg: string }>`
+const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
   &,
   .ant-carousel {
     height: 100%;
     background-color: ${(props) => props.$bg};
+    rotate: ${(props) => props.$rotation};
+    ${props=>props.$animationStyle}
   }
 `;
 
@@ -44,6 +46,7 @@ let CarouselBasicComp = (function () {
     showDots: withDefault(BoolControl, true),
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
+    animationStyle: styleControl(AnimationStyle),
 
     ...formDataChildren,
   };
@@ -56,7 +59,12 @@ let CarouselBasicComp = (function () {
       }
     };
     return (
-      <Container ref={containerRef} $bg={props.style.background}>
+      <Container
+        ref={containerRef}
+        $bg={props.style.background}
+        $rotation={props.style.rotation}
+        $animationStyle={props.animationStyle}
+      >
         <ReactResizeDetector onResize={onResize}>
           <Carousel
             dots={props.showDots}
@@ -100,6 +108,9 @@ let CarouselBasicComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>

diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -49,7 +49,6 @@ const ContainWrapper = styled.div<{
   border-width: ${(props) => props.$style?.borderWidth};
   border-color: ${(props) => props.$style?.border};
   border-style: ${(props) => props.$style?.borderStyle};
-  rotate: ${(props) => props.$style?.rotation};
   margin: ${(props) => props.$style?.margin};
   padding: ${(props) => props.$style?.padding};
 `;

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -74,6 +74,7 @@ const Wrapper = styled.div<{
     justify-content: space-between;
     background-color: ${props => props.$style?.background};
     border: ${props => props.$style?.border};
+    rotate: ${props => props.$style?.rotation};
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};

diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
+import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -67,13 +68,21 @@ const defaultCode = `
 type IProps = {
   code: string;
   model: any;
+  style: CustomStyleType;
+  animationStyle:AnimationStyleType
   onModelChange: (v: any) => void;
   dispatch: (action: CompAction<any>) => void;
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{
+  $style: CustomStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
   width: 100%;
   height: 100%;
+  ${(props) => props.$style};
+  rotate: ${(props) => props.$style.rotation};
+  ${(props) => props.$animationStyle};
   iframe {
     border: 0;
     width: 100%;
@@ -196,21 +205,29 @@ function InnerCustomComponent(props: IProps) {
   }, [code]);
 
   return (
-    <Wrapper>
-      <iframe ref={iframeRef} title="custom-comp" src={trans("customComponent.entryUrl")} />
+    <Wrapper $style={props.style} $animationStyle={props.animationStyle}>
+      <iframe
+        ref={iframeRef}
+        title="custom-comp"
+        src={trans('customComponent.entryUrl')}
+      />
     </Wrapper>
   );
 }
 
 const childrenMap = {
   model: jsonObjectStateControl(defaultModel),
   code: withDefault(StringControl, defaultCode),
+  style:styleControl(CustomStyle),
+  animationStyle:styleControl(AnimationStyle),
 };
 
 const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
   const { code, model } = props;
   return (
     <InnerCustomComponent
+      style={props.style}
+      animationStyle={props.animationStyle}
       code={code}
       model={model.value}
       onModelChange={(v) => model.onChange(v)}
@@ -226,6 +243,12 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
               {children.model.propertyView({ label: trans("customComp.data") })}
               {children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
               {hiddenPropertyView(children)}
+          </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
             </Section>
           </>
         )}