Merge pull request #919 from MenamAfzal/fix/component-wrapper-on-rotation

raheeliftikhar5 · web-flow · commit 0a8842abcb4a · 2024-05-31T23:50:30.000-07:00
Fix/component wrapper on rotation
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -63,7 +63,6 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
     ${getStyle(props.$style)}
     input {
       padding: ${props.style?.padding};
-      rotate: ${props?.$style?.rotation};
     }
     .ant-select-single {
       width: 100% !important;
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
-import { ArrayStringControl } from "comps/controls/codeControl";
+import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-
+    restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -78,6 +78,7 @@ const Wrapper = styled.div<{
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
+    box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
     ${props=>props.$animationStyle}
   }
   .ant-card-body {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/textContainerComp.tsx
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { withDefault } from "comps/generators/simpleGenerators";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -62,7 +62,7 @@ export const ContainerBaseComp = (function () {
     float: dropdownControl(floatOptions, "left"),
     horizontalAlignment: alignWithJustifyControl(),
     width: withDefault(StringControl, "40"),
-    style: styleControl(TextStyle),
+    style: styleControl(TextContainerStyle),
     animationStyle: styleControl(AnimationStyle),
   };
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -69,7 +69,8 @@ let FileViewerBasicComp = (function () {
   const childrenMap = {
     src: StringControl,
     style: styleControl(FileViewerStyle),
-    animationStyle:styleControl(AnimationStyle)
+    animationStyle: styleControl(AnimationStyle),
+    restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -33,6 +33,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { StringControl } from "../controls/codeControl";
 
 const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
@@ -169,6 +170,7 @@ const childrenMap = {
   animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
+  restrictPaddingOnRotation:withDefault(StringControl, 'image')
 };
 
 let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -10,7 +10,7 @@ import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleT
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
-import { RangeControl } from "../../controls/codeControl";
+import { RangeControl, StringControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
@@ -120,6 +120,7 @@ const childrenMap = {
   playbackRate: RangeControl.closed(1, 2, 1),
   currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
   duration: numberExposingStateControl("duration"),
+  restrictPaddingOnRotation:withDefault(StringControl, 'video'),
   ...mediaCommonChildren,
 };
  
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 
 import { useContext } from "react";
+import { BoolControl } from "@lowcoder-ee/index.sdk";
 
 const Container = styled.div<{ $style: any }>`
   height: 100%;
@@ -186,6 +187,7 @@ const childrenMap = {
   prefixIcon: IconControl,
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
+  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
 };
 
 let ButtonTmpComp = (function () {
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -14,6 +14,7 @@ import { StringControl } from "comps/controls/codeControl";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { withDefault } from "../generators";
 
 // TODO: add styling for image (size)
 // TODO: add styling for bouding box (individual backround)
@@ -26,12 +27,13 @@ const levelOptions = [
 ] as const;
 
 const childrenMap = {
-  value: stringExposingStateControl("value"),
-  level: dropdownControl(levelOptions, "L"),
+  value: stringExposingStateControl('value'),
+  level: dropdownControl(levelOptions, 'L'),
   includeMargin: BoolControl.DEFAULT_TRUE,
   image: StringControl,
   style: styleControl(QRCodeStyle),
   animationStyle: styleControl(AnimationStyle),
+  restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
 };
 
 const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -91,7 +91,7 @@ const childrenMap = {
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, false),
   matchColumnsHeight: withDefault(BoolControl, true),
-  rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
+  style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
   columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
   animationStyle:styleControl(AnimationStyle),
   columnPerRowLG: withDefault(NumberControl, 4),
@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     dispatch,
     rowBreak,
     matchColumnsHeight,
-    rowStyle,
+    style,
     columnStyle,
     columnPerRowLG,
     columnPerRowMD,
@@ -138,11 +138,11 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
   } = props;
 
   return (
-    <BackgroundColorContext.Provider value={props.rowStyle.background}>
+    <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
-        <div style={{padding: rowStyle.margin, height: '100%'}}>
+        <div style={{padding: style.margin, height: '100%'}}>
           <RowWrapper
-            $style={rowStyle}
+            $style={style}
             $animationStyle={animationStyle}
             wrap={rowBreak}
             gutter={[horizontalSpacing, verticalSpacing]}
@@ -247,7 +247,7 @@ export const ResponsiveLayoutBaseComp = (function () {
               })}
             </Section>
             <Section name={trans("responsiveLayout.rowStyle")}>
-              {children.rowStyle.getPropertyView()}
+              {children.style.getPropertyView()}
             </Section>
             <Section name={trans("responsiveLayout.columnStyle")}>
               {children.columnStyle.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -1,5 +1,5 @@
 import {
-  TextStyleType,
+  TextContainerStyleType,
   ContainerStyleType,
   heightCalculator,
   widthCalculator,
@@ -17,12 +17,11 @@ import {
 } from "../containerComp/containerView";
 import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
 
-const getStyle = (style: TextStyleType) => {
+const getStyle = (style: TextContainerStyleType) => {
   return css`
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
-    rotate: ${style.rotation&&style.rotation};
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
@@ -89,7 +88,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
   ${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`}
 `;
 
-const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>`
+const FloatTextWrapper = styled.div<{ $style: TextContainerStyleType, $horizontalAlignment : any }>`
   ${(props) => props.$style && getStyle(props.$style)}
   text-align: ${(props) => props.$horizontalAlignment};
   padding: ${(props) => props.$style.padding};
@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
   type: string;
   float: string;
   width: string;
-  style: TextStyleType;
+  style: TextContainerStyleType;
   horizontalAlignment: string;
   animationStyle?: AnimationStyleType;
 };
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -812,6 +812,24 @@ export const TextStyle = [
   },
 ] as const;
 
+export const TextContainerStyle = [
+  {
+    name: "background",
+    label: trans("style.background"),
+    depTheme: "canvas",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
+  {
+    name: "links",
+    label: trans("style.links"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  },
+] as const;
+
 export const MarginStyle = [
   {
     name: "margin",
@@ -1946,6 +1964,7 @@ export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
 export type TextStyleType = StyleConfigType<typeof TextStyle>;
+export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
 export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
 export type ContainerHeaderStyleType = StyleConfigType<
   typeof ContainerHeaderStyle
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -221,14 +221,14 @@ function UIView(props: {
   const comp = props.comp;
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);
-  const disabled = childrenProps["disabled"];
-  if (disabled !== undefined && typeof disabled === "boolean") {
-    childrenProps["disabled"] = disabled || parentDisabled;
+  const disabled = childrenProps['disabled'];
+  if (disabled !== undefined && typeof disabled === 'boolean') {
+    childrenProps['disabled'] = disabled || parentDisabled;
   }
 
   //ADDED BY FRED
   if (childrenProps.events) {
-    const events = childrenProps.events as { value?: any[] };
+    const events = childrenProps.events as {value?: any[]};
     if (!events.value || events.value.length === 0) {
       events.value = [];
     }
@@ -246,22 +246,66 @@ function UIView(props: {
     );
   }
 
+  let defaultChildren = comp.children;
+  const isNotContainer = defaultChildren.hasOwnProperty('style');
+  const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
+  let rotationVal:any = null
+  let boxShadowVal:any = null;
+  let restrictPaddingOnRotationVal:any=null;
+  if (isNotContainer) {
+    rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
+    boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
+    restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
+  }
+  const getPadding = () =>(rotationVal === null ||
+            rotationVal === undefined ||
+            restrictPaddingOnRotation) &&
+          (boxShadowVal === null ||
+            boxShadowVal === undefined ||
+            boxShadowVal === '0px')
+            ? restrictPaddingOnRotationVal === 'qrCode'
+              ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
+              : restrictPaddingOnRotationVal === 'image'
+                ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
+                : restrictPaddingOnRotationVal === 'imageCarousel'
+                  ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
+                  : restrictPaddingOnRotationVal === 'fileViewer'
+                    ? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
+                    : restrictPaddingOnRotationVal === 'controlButton'
+                      ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
+                      : restrictPaddingOnRotationVal === 'video'
+                        ? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
+                        : '0px' // Both rotation and box-shadow are empty or restricted
+            : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
+              ? boxShadowVal === null ||
+                boxShadowVal === undefined ||
+                boxShadowVal === '0px'
+                ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
+              : boxShadowVal === null ||
+                  boxShadowVal === undefined ||
+                  boxShadowVal === '0px'
+                ? '0px'
+                : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
+                  ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
+                  : '0px' // Default value if neither rotation nor box-shadow is applied
   return (
     <div
       ref={props.innerRef}
       className={childrenProps.className as string}
       data-testid={childrenProps.dataTestId as string}
       style={{
-        width: "100%",
-        height: "100%",
-        margin: "0px",
-        padding: "0px",
-      }}>
+        width: '100%',
+        height: '100%',
+        margin: '0px',
+        padding:getPadding()
+          
+      }}
+    >
       <HidableView hidden={childrenProps.hidden as boolean}>
-        {props.viewFn(
-          childrenProps,
-          comp.dispatch
-        )}
+        {props.viewFn(childrenProps, comp.dispatch)}
       </HidableView>
     </div>
   );

Original file line number	Diff line number	Diff line change
@@ -63,7 +63,6 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
`63`	`63`	`${getStyle(props.$style)}`
`64`	`64`	`input {`
`65`	`65`	`padding: ${props.style?.padding};`
`66`		`- rotate: ${props?.$style?.rotation};`
`67`	`66`	`}`
`68`	`67`	`.ant-select-single {`
`69`	`68`	`width: 100% !important;`
Original file line number	Diff line number	Diff line change
`@@ -78,6 +78,7 @@ const Wrapper = styled.div<{`
`78`	`78`	`border-style: ${props => props.$style?.borderStyle};`
`79`	`79`	`border-radius: ${props => props.$style?.radius};`
`80`	`80`	`border-width: ${props => props.$style?.borderWidth};`
	`81`	+ box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
`81`	`82`	`${props=>props.$animationStyle}`
`82`	`83`	`}`
`83`	`84`	`.ant-card-body {`