Skip to content

Commit 295ebdd

Browse files
MenamAfzalMenamAfzal
committed
formating removed-82
1 parent 5d3a8ad commit 295ebdd

File tree

1 file changed

+44
-68
lines changed

1 file changed

+44
-68
lines changed

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

Lines changed: 44 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,39 @@ import {
33
ContainerStyleType,
44
heightCalculator,
55
widthCalculator,
6-
ContainerHeaderStyleType,
7-
ContainerBodyStyleType,
86
AnimationStyleType,
9-
} from 'comps/controls/styleControlConstants';
10-
import {EditorContext} from 'comps/editorState';
11-
import {BackgroundColorContext} from 'comps/utils/backgroundColorContext';
12-
import {HintPlaceHolder, TacoMarkDown} from 'lowcoder-design';
13-
import {ReactNode, useContext} from 'react';
14-
import styled, {css} from 'styled-components';
15-
import {checkIsMobile} from 'util/commonUtils';
7+
} from "comps/controls/styleControlConstants";
8+
import { EditorContext } from "comps/editorState";
9+
import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
10+
import { HintPlaceHolder, TacoMarkDown } from "lowcoder-design";
11+
import { ReactNode, useContext } from "react";
12+
import styled, { css } from "styled-components";
13+
import { checkIsMobile } from "util/commonUtils";
1614
import {
1715
gridItemCompToGridItems,
1816
InnerGrid,
19-
} from '../containerComp/containerView';
20-
import {TriContainerViewProps} from '../triContainerComp/triContainerCompBuilder';
17+
} from "../containerComp/containerView";
18+
import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuilder";
2119

2220
const getStyle = (style: TextStyleType) => {
2321
return css`
24-
border-radius: ${style.radius ? style.radius : '4px'};
25-
border: ${style.borderWidth ? style.borderWidth : '0px'} solid
26-
${style.border};
22+
border-radius: ${(style.radius ? style.radius : "4px")};
23+
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
2724
color: ${style.text};
2825
font-size: ${style.textSize} !important;
2926
font-weight: ${style.textWeight} !important;
3027
font-family: ${style.fontFamily} !important;
31-
font-style: ${style.fontStyle} !important;
32-
text-transform: ${style.textTransform} !important;
33-
text-decoration: ${style.textDecoration} !important;
28+
font-style:${style.fontStyle} !important;
29+
text-transform:${style.textTransform} !important;
30+
text-decoration:${style.textDecoration} !important;
3431
background-color: ${style.background};
3532
.markdown-body a {
3633
color: ${style.links};
3734
}
3835
.markdown-body {
39-
margin: ${style.margin} !important;
40-
padding: ${style.padding};
41-
width: ${widthCalculator(style.margin)};
36+
margin: ${style.margin} !important;
37+
padding: ${style.padding};
38+
width: ${widthCalculator(style.margin)};
4239
// height: ${heightCalculator(style.margin)};
4340
h1 {
4441
line-height: 1.5;
@@ -69,23 +66,22 @@ const getStyle = (style: TextStyleType) => {
6966
}
7067
}
7168
`;
72-
};
69+
}
7370

7471
const Wrapper = styled.div<{
7572
$style: ContainerStyleType;
76-
$animationStyle: AnimationStyleType;
73+
$animationStyle?: AnimationStyleType;
7774
}>`
75+
${props=>props.$animationStyle&&props.$animationStyle}
7876
display: flex;
7977
flex-flow: column;
8078
height: 100%;
81-
${(props) => props.$animationStyle}
8279
border: ${(props) => props.$style.borderWidth} solid
8380
${(props) => props.$style.border};
8481
border-radius: ${(props) => props.$style.radius};
8582
background-color: ${(props) => props.$style.background};
8683
padding: ${(props) => props.$style.padding};
8784
margin: ${(props) => props.$style.margin};
88-
rotate: ${(props) => props.$style.rotation};
8985
${(props) =>
9086
props.$style.backgroundImage &&
9187
`background-image: url(${props.$style.backgroundImage});`}
@@ -114,15 +110,10 @@ const FloatTextWrapper = styled.div<{
114110
`;
115111

116112
const HeaderInnerGrid = styled(InnerGrid)<{
117-
$backgroundColor: string;
118-
$headerStyle: ContainerHeaderStyleType;
119-
}>`
113+
$backgroundColor: string
114+
}>`
120115
overflow: visible;
121-
rotate:${(props) => {
122-
return `${props.$headerStyle.rotation};`;
123-
}}
124-
${(props) =>
125-
props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
116+
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
126117
border-radius: 0;
127118
`;
128119

@@ -131,16 +122,10 @@ const BodyInnerGrid = styled(InnerGrid)<{
131122
$backgroundColor: string;
132123
$borderColor: string;
133124
$borderWidth: string;
134-
$bodyStyle: ContainerBodyStyleType;
135125
}>`
136-
rotate: ${(props) => {
137-
return `${props.$bodyStyle.rotation}`;
138-
}};
139-
border-top: ${(props) =>
140-
`${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
126+
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
141127
flex: 1;
142-
${(props) =>
143-
props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
128+
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
144129
border-radius: 0;
145130
`;
146131

@@ -155,27 +140,15 @@ const FooterInnerGrid = styled(InnerGrid)<{
155140
$footerBackgroundImagePosition: string;
156141
$footerBackgroundImageOrigin: string;
157142
}>`
158-
border-top: ${(props) =>
159-
`${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
143+
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
160144
overflow: visible;
161-
${(props) =>
162-
props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
145+
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
163146
border-radius: 0;
164-
${(props) =>
165-
props.$footerBackgroundImage &&
166-
`background-image: url(${props.$footerBackgroundImage});`}
167-
${(props) =>
168-
props.$footerBackgroundImageRepeat &&
169-
`background-repeat: ${props.$footerBackgroundImageRepeat};`}
170-
${(props) =>
171-
props.$footerBackgroundImageSize &&
172-
`background-size: ${props.$footerBackgroundImageSize};`}
173-
${(props) =>
174-
props.$footerBackgroundImagePosition &&
175-
`background-position: ${props.$footerBackgroundImagePosition};`}
176-
${(props) =>
177-
props.$footerBackgroundImageOrigin &&
178-
`background-origin: ${props.$footerBackgroundImageOrigin};`}
147+
${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`}
148+
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
149+
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
150+
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
151+
${(props) => props.$footerBackgroundImageOrigin && `background-origin: ${props.$footerBackgroundImageOrigin};`}
179152
`;
180153

181154
export type TriContainerProps = TriContainerViewProps & {
@@ -188,26 +161,31 @@ export type TriContainerProps = TriContainerViewProps & {
188161
width: string;
189162
style: TextStyleType;
190163
horizontalAlignment: string;
191-
animationStyle: AnimationStyleType;
164+
animationStyle?: AnimationStyleType;
192165
};
193166

194167
export function TriContainer(props: TriContainerProps) {
195168
const {container, text, animationStyle} = props;
196-
const {showHeader, showFooter} = container;
169+
const { showHeader, showFooter } = container;
197170
// When the header and footer are not displayed, the body must be displayed
198171
const showBody = container.showBody || (!showHeader && !showFooter);
199172

200-
const {items: headerItems, ...otherHeaderProps} = container.header;
201-
const {items: bodyItems, ...otherBodyProps} =
202-
container.body['0'].children.view.getView();
203-
const {items: footerItems, ...otherFooterProps} = container.footer;
173+
const { items: headerItems, ...otherHeaderProps } = container.header;
174+
const { items: bodyItems, ...otherBodyProps } =
175+
container.body["0"].children.view.getView();
176+
const { items: footerItems, ...otherFooterProps } = container.footer;
204177

205178
const editorState = useContext(EditorContext);
206179
const maxWidth = editorState.getAppSettings().maxWidth;
207180
const isMobile = checkIsMobile(maxWidth);
208181
const paddingWidth = isMobile ? 7 : 19;
209182

210-
const {style, headerStyle, bodyStyle, footerStyle} = container;
183+
const {
184+
style,
185+
headerStyle,
186+
bodyStyle,
187+
footerStyle,
188+
} = container;
211189

212190
return (
213191
<Wrapper $style={style} $animationStyle={animationStyle}>
@@ -221,7 +199,6 @@ export function TriContainer(props: TriContainerProps) {
221199
minHeight="46px"
222200
containerPadding={[0, 0]}
223201
showName={{bottom: showFooter ? 20 : 0}}
224-
$headerStyle={headerStyle}
225202
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
226203
style={{padding: headerStyle.containerHeaderPadding}}
227204
/>
@@ -236,7 +213,6 @@ export function TriContainer(props: TriContainerProps) {
236213
}}
237214
>
238215
<BodyInnerGrid
239-
$bodyStyle={bodyStyle}
240216
$showBorder={false}
241217
{...otherBodyProps}
242218
items={gridItemCompToGridItems(bodyItems)}

0 commit comments

Comments
 (0)