From 630b4e52dc70dbf5a3e1a1556e80b86b7d376359 Mon Sep 17 00:00:00 2001 From: MeenamAfzal Date: Fri, 24 May 2024 00:56:12 +0500 Subject: [PATCH 1/3] rotation and animation fixes --- .../src/comps/comps/buttonComp/buttonComp.tsx | 2 + .../comps/buttonComp/buttonCompConstants.tsx | 1 + .../comps/buttonComp/floatButtonComp.tsx | 59 ++++++++++++------- .../src/comps/comps/buttonComp/linkComp.tsx | 1 + .../lowcoder/src/comps/comps/carouselComp.tsx | 17 +++++- .../comps/comps/containerComp/cardComp.tsx | 1 + .../src/comps/comps/customComp/customComp.tsx | 29 ++++++++- .../src/comps/comps/fileComp/fileComp.tsx | 17 ++++-- .../src/comps/comps/fileViewerComp.tsx | 31 +++++++--- .../lowcoder/src/comps/comps/iconComp.tsx | 56 +++++++++++------- .../lowcoder/src/comps/comps/iframeComp.tsx | 19 ++++-- .../lowcoder/src/comps/comps/imageComp.tsx | 12 +++- .../comps/comps/jsonComp/jsonLottieComp.tsx | 24 +++++--- .../src/comps/comps/listViewComp/listView.tsx | 10 ++-- .../comps/comps/listViewComp/listViewComp.tsx | 3 +- .../listViewComp/listViewPropertyView.tsx | 3 + .../src/comps/comps/mediaComp/audioComp.tsx | 23 ++++++-- .../src/comps/comps/mediaComp/videoComp.tsx | 38 ++++++++++-- .../comps/comps/meetingComp/controlButton.tsx | 1 + .../lowcoder/src/comps/comps/qrCodeComp.tsx | 19 ++++-- .../responsiveLayout/responsiveLayout.tsx | 1 + .../comps/selectInputComp/stepControl.tsx | 15 +++-- .../lowcoder/src/comps/comps/textComp.tsx | 1 + .../triFloatTextContainer.tsx | 6 +- .../src/comps/controls/labelControl.tsx | 2 + .../comps/controls/styleControlConstants.tsx | 28 ++++++++- 26 files changed, 318 insertions(+), 101 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx index 6e02a5ea3..1511ec66d 100644 --- 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, }; 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 index 8ebcd250c..7eb9e6072 100644 --- 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 index 01ec6226d..f2ce2bcc2 100644 --- 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) => { const renderButton = (button: any, onlyOne?: boolean) => { return !button?.hidden ? ( - button.onEvent("click")} @@ -108,7 +116,7 @@ const FloatButtonView = (props: RecordConstructorToView) => return ( {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) : - () => type={props.buttonTheme} > {props.buttons.map((button: any) => renderButton(button))} - ) + ) } ); }; let FloatButtonBasicComp = (function () { - return new UICompBuilder(childrenMap, (props) => ) - .setPropertyViewFn((children) => ( - <> -
- {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") })} -
-
- {hiddenPropertyView(children)} -
-
{children.badgeStyle.getPropertyView()}
-
{children.style.getPropertyView()}
- - )) - .build(); + return new UICompBuilder(childrenMap, (props) => ( + + )) + .setPropertyViewFn((children) => ( + <> +
+ {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") })} +
+
+ {hiddenPropertyView(children)} +
+
{children.badgeStyle.getPropertyView()}
+
+ {children.style.getPropertyView()} +
+
+ {children.animationStyle.getPropertyView()} +
+ + )) + .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 index f4e1d2933..6a870a79e 100644 --- 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 index 8e9c776d4..4a0d014fc 100644 --- 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 ( - + {children.style.getPropertyView()} +
+ {children.animationStyle.getPropertyView()} +
)} diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index 66991fb83..2d2c4bdb1 100644 --- 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 index 07d72b701..0b7a3b5e3 100644 --- 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) => 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,8 +205,12 @@ function InnerCustomComponent(props: IProps) { }, [code]); return ( - -