rotation and animation fixes

lowcoder-org · FalkWolsky · May 27, 2024 · May 23, 2024 · May 24, 2024 · May 27, 2024
commit 630b4e52dc70dbf5a3e1a1556e80b86b7d376359
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
@@ -16,6 +16,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
       border-width:${buttonStyle.borderWidth};
       margin: ${buttonStyle.margin};	
       padding: ${buttonStyle.padding};
+      rotate: ${buttonStyle.rotation};
       &:not(:disabled) {
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};

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/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/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -74,6 +74,7 @@ const Warpper = 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>
           </>
         )}  

diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
 import { IconControl } from "comps/controls/iconControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { hasIcon } from "comps/utils";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
@@ -101,6 +101,7 @@ const commonChildren = {
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(FileStyle),
+  animationStyle: styleControl(AnimationStyle),
   parseFiles: BoolPureControl,
   parsedValue: stateComp<Array<JSONValue | null>>([]),
   prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"),
@@ -137,6 +138,7 @@ const getStyle = (style: FileStyleType) => {
   return css`
     .ant-btn {
       border-radius: ${style.radius};
+      rotate: ${style.rotation};
       margin: ${style.margin};	
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
@@ -167,9 +169,13 @@ const getStyle = (style: FileStyleType) => {
   `;
 };
 
-const StyledUpload = styled(AntdUpload)<{ $style: FileStyleType }>`
+const StyledUpload = styled(AntdUpload)<{
+  $style: FileStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
   .ant-upload,
   .ant-btn {
+    ${(props) => props.$animationStyle}
     width: 100%;
     display: inline-flex;
     justify-content: center;
@@ -185,7 +191,6 @@ const StyledUpload = styled(AntdUpload)<{ $style: FileStyleType }>`
       min-height: 1px;
     }
   }
-
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
@@ -252,6 +257,7 @@ const Upload = (
   const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
   return (
     <StyledUpload
+    $animationStyle={props.animationStyle}
       {...commonProps(props)}
       $style={style}
       fileList={fileList}
@@ -419,7 +425,10 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
       )}
 
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-        <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+        <>
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
+        </>
       )}
     </>
   ))