Skip to content

Commit 0a8842a

Browse files
raheeliftikhar5raheeliftikhar5
authored
Merge pull request #919 from MenamAfzal/fix/component-wrapper-on-rotation
Fix/component wrapper on rotation
2 parents 19defb6 + f1ef6f5 commit 0a8842a

File tree

13 files changed

+104
-34
lines changed

13 files changed

+104
-34
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
6363
${getStyle(props.$style)}
6464
input {
6565
padding: ${props.style?.padding};
66-
rotate: ${props?.$style?.rotation};
6766
}
6867
.ant-select-single {
6968
width: 100% !important;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
1111
import { PositionControl } from "comps/controls/dropdownControl";
1212
import { useRef, useState } from "react";
1313
import ReactResizeDetector from "react-resize-detector";
14-
import { ArrayStringControl } from "comps/controls/codeControl";
14+
import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
1616
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
1717

@@ -47,7 +47,7 @@ let CarouselBasicComp = (function () {
4747
dotPosition: withDefault(PositionControl, "bottom"),
4848
style: styleControl(CarouselStyle),
4949
animationStyle: styleControl(AnimationStyle),
50-
50+
restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
5151
...formDataChildren,
5252
};
5353
return new UICompBuilder(childrenMap, (props) => {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const Wrapper = styled.div<{
7878
border-style: ${props => props.$style?.borderStyle};
7979
border-radius: ${props => props.$style?.radius};
8080
border-width: ${props => props.$style?.borderWidth};
81+
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
8182
${props=>props.$animationStyle}
8283
}
8384
.ant-card-body {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { TriContainer } from "../triContainerComp/triFloatTextContainer";
2020
import { dropdownControl } from "comps/controls/dropdownControl";
2121
import { withDefault } from "comps/generators/simpleGenerators";
2222
import { styleControl } from "comps/controls/styleControl";
23-
import { AnimationStyle, TextStyle } from "comps/controls/styleControlConstants";
23+
import { AnimationStyle, TextContainerStyle } from "comps/controls/styleControlConstants";
2424
import { useContext } from "react";
2525
import { EditorContext } from "comps/editorState";
2626
import { alignWithJustifyControl } from "comps/controls/alignControl";
@@ -62,7 +62,7 @@ export const ContainerBaseComp = (function () {
6262
float: dropdownControl(floatOptions, "left"),
6363
horizontalAlignment: alignWithJustifyControl(),
6464
width: withDefault(StringControl, "40"),
65-
style: styleControl(TextStyle),
65+
style: styleControl(TextContainerStyle),
6666
animationStyle: styleControl(AnimationStyle),
6767
};
6868
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
66
import styled, { css } from "styled-components";
77
import { Section, sectionNames } from "lowcoder-design";
88
import { StringControl } from "../controls/codeControl";
9-
import { UICompBuilder } from "../generators";
9+
import { UICompBuilder, withDefault } from "../generators";
1010
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
1111
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1212
import { trans } from "i18n";
@@ -69,7 +69,8 @@ let FileViewerBasicComp = (function () {
6969
const childrenMap = {
7070
src: StringControl,
7171
style: styleControl(FileViewerStyle),
72-
animationStyle:styleControl(AnimationStyle)
72+
animationStyle: styleControl(AnimationStyle),
73+
restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
7374
};
7475
return new UICompBuilder(childrenMap, (props) => {
7576
if (isEmpty(props.src)) {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
3333

3434
import { useContext } from "react";
3535
import { EditorContext } from "comps/editorState";
36+
import { StringControl } from "../controls/codeControl";
3637

3738
const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
3839
height: 100%;
@@ -169,6 +170,7 @@ const childrenMap = {
169170
animationStyle: styleControl(AnimationStyle),
170171
autoHeight: withDefault(AutoHeightControl, "fixed"),
171172
supportPreview: BoolControl,
173+
restrictPaddingOnRotation:withDefault(StringControl, 'image')
172174
};
173175

174176
let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {

‎client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleT
1010
import { BoolControl } from "comps/controls/boolControl";
1111
import { withDefault } from "../../generators/simpleGenerators";
1212
import { playIcon } from "lowcoder-design";
13-
import { RangeControl } from "../../controls/codeControl";
13+
import { RangeControl, StringControl } from "../../controls/codeControl";
1414
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1515
import { trans } from "i18n";
1616
import { Video } from "lowcoder-design";
@@ -120,6 +120,7 @@ const childrenMap = {
120120
playbackRate: RangeControl.closed(1, 2, 1),
121121
currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
122122
duration: numberExposingStateControl("duration"),
123+
restrictPaddingOnRotation:withDefault(StringControl, 'video'),
123124
...mediaCommonChildren,
124125
};
125126

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useEffect, useRef, useState } from "react";
3939
import ReactResizeDetector from "react-resize-detector";
4040

4141
import { useContext } from "react";
42+
import { BoolControl } from "@lowcoder-ee/index.sdk";
4243

4344
const Container = styled.div<{ $style: any }>`
4445
height: 100%;
@@ -186,6 +187,7 @@ const childrenMap = {
186187
prefixIcon: IconControl,
187188
style: ButtonStyleControl,
188189
viewRef: RefControl<HTMLElement>,
190+
restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
189191
};
190192

191193
let ButtonTmpComp = (function () {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { StringControl } from "comps/controls/codeControl";
1414

1515
import { useContext } from "react";
1616
import { EditorContext } from "comps/editorState";
17+
import { withDefault } from "../generators";
1718

1819
// TODO: add styling for image (size)
1920
// TODO: add styling for bouding box (individual backround)
@@ -26,12 +27,13 @@ const levelOptions = [
2627
] as const;
2728

2829
const childrenMap = {
29-
value: stringExposingStateControl("value"),
30-
level: dropdownControl(levelOptions, "L"),
30+
value: stringExposingStateControl('value'),
31+
level: dropdownControl(levelOptions, 'L'),
3132
includeMargin: BoolControl.DEFAULT_TRUE,
3233
image: StringControl,
3334
style: styleControl(QRCodeStyle),
3435
animationStyle: styleControl(AnimationStyle),
36+
restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
3537
};
3638

3739
const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const childrenMap = {
9191
autoHeight: AutoHeightControl,
9292
rowBreak: withDefault(BoolControl, false),
9393
matchColumnsHeight: withDefault(BoolControl, true),
94-
rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
94+
style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
9595
columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
9696
animationStyle:styleControl(AnimationStyle),
9797
columnPerRowLG: withDefault(NumberControl, 4),
@@ -127,7 +127,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
127127
dispatch,
128128
rowBreak,
129129
matchColumnsHeight,
130-
rowStyle,
130+
style,
131131
columnStyle,
132132
columnPerRowLG,
133133
columnPerRowMD,
@@ -138,11 +138,11 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
138138
} = props;
139139

140140
return (
141-
<BackgroundColorContext.Provider value={props.rowStyle.background}>
141+
<BackgroundColorContext.Provider value={props.style.background}>
142142
<DisabledContext.Provider value={props.disabled}>
143-
<div style={{padding: rowStyle.margin, height: '100%'}}>
143+
<div style={{padding: style.margin, height: '100%'}}>
144144
<RowWrapper
145-
$style={rowStyle}
145+
$style={style}
146146
$animationStyle={animationStyle}
147147
wrap={rowBreak}
148148
gutter={[horizontalSpacing, verticalSpacing]}
@@ -247,7 +247,7 @@ export const ResponsiveLayoutBaseComp = (function () {
247247
})}
248248
</Section>
249249
<Section name={trans("responsiveLayout.rowStyle")}>
250-
{children.rowStyle.getPropertyView()}
250+
{children.style.getPropertyView()}
251251
</Section>
252252
<Section name={trans("responsiveLayout.columnStyle")}>
253253
{children.columnStyle.getPropertyView()}

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {
2-
TextStyleType,
2+
TextContainerStyleType,
33
ContainerStyleType,
44
heightCalculator,
55
widthCalculator,
@@ -17,12 +17,11 @@ import {
1717
} from "../containerComp/containerView";
1818
import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
1919

20-
const getStyle = (style: TextStyleType) => {
20+
const getStyle = (style: TextContainerStyleType) => {
2121
return css`
2222
border-radius: ${(style.radius ? style.radius : "4px")};
2323
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
2424
color: ${style.text};
25-
rotate: ${style.rotation&&style.rotation};
2625
font-size: ${style.textSize} !important;
2726
font-weight: ${style.textWeight} !important;
2827
font-family: ${style.fontFamily} !important;
@@ -89,7 +88,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
8988
${(props) => props.$style.backgroundImageOrigin && `background-origin: ${props.$style.backgroundImageOrigin};`}
9089
`;
9190

92-
const FloatTextWrapper = styled.div<{ $style: TextStyleType, $horizontalAlignment : any }>`
91+
const FloatTextWrapper = styled.div<{ $style: TextContainerStyleType, $horizontalAlignment : any }>`
9392
${(props) => props.$style && getStyle(props.$style)}
9493
text-align: ${(props) => props.$horizontalAlignment};
9594
padding: ${(props) => props.$style.padding};
@@ -146,7 +145,7 @@ export type TriContainerProps = TriContainerViewProps & {
146145
type: string;
147146
float: string;
148147
width: string;
149-
style: TextStyleType;
148+
style: TextContainerStyleType;
150149
horizontalAlignment: string;
151150
animationStyle?: AnimationStyleType;
152151
};

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -812,6 +812,24 @@ export const TextStyle = [
812812
},
813813
] as const;
814814

815+
export const TextContainerStyle = [
816+
{
817+
name: "background",
818+
label: trans("style.background"),
819+
depTheme: "canvas",
820+
depType: DEP_TYPE.SELF,
821+
transformer: toSelf,
822+
},
823+
...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
824+
{
825+
name: "links",
826+
label: trans("style.links"),
827+
depTheme: "primary",
828+
depType: DEP_TYPE.SELF,
829+
transformer: toSelf,
830+
},
831+
] as const;
832+
815833
export const MarginStyle = [
816834
{
817835
name: "margin",
@@ -1946,6 +1964,7 @@ export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
19461964
export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
19471965
export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
19481966
export type TextStyleType = StyleConfigType<typeof TextStyle>;
1967+
export type TextContainerStyleType = StyleConfigType<typeof TextContainerStyle>;
19491968
export type ContainerStyleType = StyleConfigType<typeof ContainerStyle>;
19501969
export type ContainerHeaderStyleType = StyleConfigType<
19511970
typeof ContainerHeaderStyle

‎client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -221,14 +221,14 @@ function UIView(props: {
221221
const comp = props.comp;
222222
const childrenProps = childrenToProps(comp.children);
223223
const parentDisabled = useContext(DisabledContext);
224-
const disabled = childrenProps["disabled"];
225-
if (disabled !== undefined && typeof disabled === "boolean") {
226-
childrenProps["disabled"] = disabled || parentDisabled;
224+
const disabled = childrenProps['disabled'];
225+
if (disabled !== undefined && typeof disabled === 'boolean') {
226+
childrenProps['disabled'] = disabled || parentDisabled;
227227
}
228228

229229
//ADDED BY FRED
230230
if (childrenProps.events) {
231-
const events = childrenProps.events as { value?: any[] };
231+
const events = childrenProps.events as {value?: any[]};
232232
if (!events.value || events.value.length === 0) {
233233
events.value = [];
234234
}
@@ -246,22 +246,66 @@ function UIView(props: {
246246
);
247247
}
248248

249+
let defaultChildren = comp.children;
250+
const isNotContainer = defaultChildren.hasOwnProperty('style');
251+
const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
252+
let rotationVal:any = null
253+
let boxShadowVal:any = null;
254+
let restrictPaddingOnRotationVal:any=null;
255+
if (isNotContainer) {
256+
rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
257+
boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
258+
restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
259+
}
260+
const getPadding = () =>(rotationVal === null ||
261+
rotationVal === undefined ||
262+
restrictPaddingOnRotation) &&
263+
(boxShadowVal === null ||
264+
boxShadowVal === undefined ||
265+
boxShadowVal === '0px')
266+
? restrictPaddingOnRotationVal === 'qrCode'
267+
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
268+
: restrictPaddingOnRotationVal === 'image'
269+
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
270+
: restrictPaddingOnRotationVal === 'imageCarousel'
271+
? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
272+
: restrictPaddingOnRotationVal === 'fileViewer'
273+
? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
274+
: restrictPaddingOnRotationVal === 'controlButton'
275+
? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
276+
: restrictPaddingOnRotationVal === 'video'
277+
? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
278+
: '0px' // Both rotation and box-shadow are empty or restricted
279+
: rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
280+
? boxShadowVal === null ||
281+
boxShadowVal === undefined ||
282+
boxShadowVal === '0px'
283+
? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
284+
: boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
285+
? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
286+
: `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
287+
: boxShadowVal === null ||
288+
boxShadowVal === undefined ||
289+
boxShadowVal === '0px'
290+
? '0px'
291+
: boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
292+
? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
293+
: '0px' // Default value if neither rotation nor box-shadow is applied
249294
return (
250295
<div
251296
ref={props.innerRef}
252297
className={childrenProps.className as string}
253298
data-testid={childrenProps.dataTestId as string}
254299
style={{
255-
width: "100%",
256-
height: "100%",
257-
margin: "0px",
258-
padding: "0px",
259-
}}>
300+
width: '100%',
301+
height: '100%',
302+
margin: '0px',
303+
padding:getPadding()
304+
305+
}}
306+
>
260307
<HidableView hidden={childrenProps.hidden as boolean}>
261-
{props.viewFn(
262-
childrenProps,
263-
comp.dispatch
264-
)}
308+
{props.viewFn(childrenProps, comp.dispatch)}
265309
</HidableView>
266310
</div>
267311
);

0 commit comments

Comments
 (0)