Skip to content

Commit 6b9c5ed

Browse files
MenamAfzalMenamAfzal
committed
formating removed-114
1 parent 6e961e3 commit 6b9c5ed

File tree

1 file changed

+67
-104
lines changed

1 file changed

+67
-104
lines changed

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

Lines changed: 67 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -137,71 +137,38 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
137137
wrap={rowBreak}
138138
gutter={[horizontalSpacing, verticalSpacing]}
139139
>
140-
{columns.map((column) => {
140+
{columns.map(column => {
141141
const id = String(column.id);
142-
const childDispatch = wrapDispatch(
143-
wrapDispatch(dispatch, 'containers'),
144-
id
145-
);
146-
if (!containers[id]) return null;
142+
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
143+
if(!containers[id]) return null
147144
const containerProps = containers[id].children;
148145

149146
const columnCustomStyle = {
150-
margin: !_.isEmpty(column.margin)
151-
? column.margin
152-
: columnStyle.margin,
153-
padding: !_.isEmpty(column.padding)
154-
? column.padding
155-
: columnStyle.padding,
156-
radius: !_.isEmpty(column.radius)
157-
? column.radius
158-
: columnStyle.radius,
147+
margin: !_.isEmpty(column.margin) ? column.margin : columnStyle.margin,
148+
padding: !_.isEmpty(column.padding) ? column.padding : columnStyle.padding,
149+
radius: !_.isEmpty(column.radius) ? column.radius : columnStyle.radius,
159150
border: `1px solid ${!_.isEmpty(column.border) ? column.border : columnStyle.border}`,
160-
background: !_.isEmpty(column.background)
161-
? column.background
162-
: columnStyle.background,
163-
};
151+
background: !_.isEmpty(column.background) ? column.background : columnStyle.background,
152+
}
164153
const noOfColumns = columns.length;
165154
let backgroundStyle = columnCustomStyle.background;
166-
if (!_.isEmpty(column.backgroundImage)) {
155+
if(!_.isEmpty(column.backgroundImage)) {
167156
backgroundStyle = `center / cover url('${column.backgroundImage}') no-repeat, ${backgroundStyle}`;
168157
}
169158
return (
170159
<ColWrapper
171160
key={id}
172-
lg={
173-
24 /
174-
(noOfColumns < columnPerRowLG
175-
? noOfColumns
176-
: columnPerRowLG)
177-
}
178-
md={
179-
24 /
180-
(noOfColumns < columnPerRowMD
181-
? noOfColumns
182-
: columnPerRowMD)
183-
}
184-
sm={
185-
24 /
186-
(noOfColumns < columnPerRowSM
187-
? noOfColumns
188-
: columnPerRowSM)
189-
}
190-
xs={
191-
24 /
192-
(noOfColumns < columnPerRowSM
193-
? noOfColumns
194-
: columnPerRowSM)
195-
}
161+
lg={24/(noOfColumns < columnPerRowLG ? noOfColumns : columnPerRowLG)}
162+
md={24/(noOfColumns < columnPerRowMD ? noOfColumns : columnPerRowMD)}
163+
sm={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
164+
xs={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
196165
$style={columnCustomStyle}
197166
$minWidth={column.minWidth}
198167
$matchColumnsHeight={matchColumnsHeight}
199168
>
200169
<ColumnContainer
201170
layout={containerProps.layout.getView()}
202-
items={gridItemCompToGridItems(
203-
containerProps.items.getView()
204-
)}
171+
items={gridItemCompToGridItems(containerProps.items.getView())}
205172
positionParams={containerProps.positionParams.getView()}
206173
dispatch={childDispatch}
207174
autoHeight={props.autoHeight}
@@ -211,11 +178,12 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
211178
}}
212179
/>
213180
</ColWrapper>
214-
);
215-
})}
181+
)
182+
})
183+
}
216184
</RowWrapper>
217185
</div>
218-
</DisabledContext.Provider>
186+
</DisabledContext.Provider>
219187
</BackgroundColorContext.Provider>
220188
);
221189
};
@@ -231,72 +199,67 @@ export const ResponsiveLayoutBaseComp = (function () {
231199
<>
232200
<Section name={sectionNames.basic}>
233201
{children.columns.propertyView({
234-
title: trans('responsiveLayout.column'),
235-
newOptionLabel: 'Column',
202+
title: trans("responsiveLayout.column"),
203+
newOptionLabel: "Column",
236204
})}
237205
</Section>
238206

239-
{(useContext(EditorContext).editorModeStatus === 'logic' ||
240-
useContext(EditorContext).editorModeStatus === 'both') && (
207+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
241208
<Section name={sectionNames.interaction}>
242209
{disabledPropertyView(children)}
243210
{hiddenPropertyView(children)}
244211
</Section>
245212
)}
246213

247-
{['layout', 'both'].includes(
248-
useContext(EditorContext).editorModeStatus
249-
) && (
214+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
250215
<>
251216
<Section name={sectionNames.layout}>
252-
{children.autoHeight.getPropertyView()}
253-
</Section>
254-
<Section name={trans('responsiveLayout.rowLayout')}>
255-
{children.rowBreak.propertyView({
256-
label: trans('responsiveLayout.rowBreak'),
257-
})}
258-
{controlItem(
259-
{},
260-
<div style={{marginTop: '8px'}}>
261-
{trans('responsiveLayout.columnsPerRow')}
262-
</div>
263-
)}
264-
{children.columnPerRowLG.propertyView({
265-
label: trans('responsiveLayout.desktop'),
266-
})}
267-
{children.columnPerRowMD.propertyView({
268-
label: trans('responsiveLayout.tablet'),
269-
})}
270-
{children.columnPerRowSM.propertyView({
271-
label: trans('responsiveLayout.mobile'),
272-
})}
273-
</Section>
274-
<Section name={trans('responsiveLayout.columnsLayout')}>
275-
{children.matchColumnsHeight.propertyView({
276-
label: trans('responsiveLayout.matchColumnsHeight'),
277-
})}
278-
{controlItem(
279-
{},
280-
<div style={{marginTop: '8px'}}>
281-
{trans('responsiveLayout.columnsSpacing')}
282-
</div>
283-
)}
284-
{children.horizontalSpacing.propertyView({
285-
label: trans('responsiveLayout.horizontal'),
286-
})}
287-
{children.verticalSpacing.propertyView({
288-
label: trans('responsiveLayout.vertical'),
289-
})}
290-
</Section>
291-
<Section name={trans('responsiveLayout.rowStyle')}>
292-
{children.rowStyle.getPropertyView()}
293-
</Section>
294-
<Section name={trans('responsiveLayout.columnStyle')}>
295-
{children.columnStyle.getPropertyView()}
296-
</Section>
297-
<Section name={sectionNames.animationStyle}>
217+
{children.autoHeight.getPropertyView()}
218+
</Section>
219+
<Section name={trans("responsiveLayout.rowLayout")}>
220+
{children.rowBreak.propertyView({
221+
label: trans("responsiveLayout.rowBreak")
222+
})}
223+
{controlItem({}, (
224+
<div style={{ marginTop: '8px' }}>
225+
{trans("responsiveLayout.columnsPerRow")}
226+
</div>
227+
))}
228+
{children.columnPerRowLG.propertyView({
229+
label: trans("responsiveLayout.desktop")
230+
})}
231+
{children.columnPerRowMD.propertyView({
232+
label: trans("responsiveLayout.tablet")
233+
})}
234+
{children.columnPerRowSM.propertyView({
235+
label: trans("responsiveLayout.mobile")
236+
})}
237+
</Section>
238+
<Section name={trans("responsiveLayout.columnsLayout")}>
239+
{children.matchColumnsHeight.propertyView({
240+
label: trans("responsiveLayout.matchColumnsHeight")
241+
})}
242+
{controlItem({}, (
243+
<div style={{ marginTop: '8px' }}>
244+
{trans("responsiveLayout.columnsSpacing")}
245+
</div>
246+
))}
247+
{children.horizontalSpacing.propertyView({
248+
label: trans("responsiveLayout.horizontal")
249+
})}
250+
{children.verticalSpacing.propertyView({
251+
label: trans("responsiveLayout.vertical")
252+
})}
253+
</Section>
254+
<Section name={trans("responsiveLayout.rowStyle")}>
255+
{children.rowStyle.getPropertyView()}
256+
</Section>
257+
<Section name={trans("responsiveLayout.columnStyle")}>
258+
{children.columnStyle.getPropertyView()}
259+
</Section>
260+
<Section name={sectionNames.animationStyle}>
298261
{children.animationStyle.getPropertyView()}
299-
</Section>
262+
</Section>
300263
</>
301264
)}
302265
</>

0 commit comments

Comments
 (0)