Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit293733c

Browse files
author
FalkWolsky
committed
Adding hide and disabled properties for Responsive Layout
1 parente5c9544 commit293733c

File tree

1 file changed

+65
-52
lines changed

1 file changed

+65
-52
lines changed

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

Lines changed: 65 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,14 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
3333
import{trans}from"i18n";
3434
import{messageInstance}from"lowcoder-design";
3535
import{BoolControl}from"comps/controls/boolControl";
36-
import{NumberControl}from"comps/controls/codeControl";
36+
import{BoolCodeControl,NumberControl}from"comps/controls/codeControl";
3737

3838
import{useContext}from"react";
3939
import{EditorContext}from"comps/editorState";
4040

41+
import{disabledPropertyView,hiddenPropertyView}from"comps/utils/propertyUtils";
42+
import{DisabledContext}from"comps/generators/uiCompBuilder";
43+
4144
constRowWrapper=styled(Row)<{$style:ResponsiveLayoutRowStyleType}>`
4245
height: 100%;
4346
border: 1px solid${(props)=>props.$style.border};
@@ -62,7 +65,8 @@ const ColWrapper = styled(Col)<{
6265
}
6366
`;
6467

65-
constchildrenMap={
68+
constchildrenMap={
69+
disabled:BoolCodeControl,
6670
columns:ColumnOptionControl,
6771
containers:withDefault(sameTypeMap(SimpleContainerComp),{
6872
0:{view:{},layout:{}},
@@ -117,58 +121,60 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
117121

118122
return(
119123
<BackgroundColorContext.Providervalue={props.rowStyle.background}>
120-
<divstyle={{padding:rowStyle.margin,height:'100%'}}>
121-
<RowWrapper
122-
$style={rowStyle}
123-
wrap={rowBreak}
124-
gutter={[horizontalSpacing,verticalSpacing]}
125-
>
126-
{columns.map(column=>{
127-
constid=String(column.id);
128-
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
129-
if(!containers[id])returnnull
130-
constcontainerProps=containers[id].children;
124+
<DisabledContext.Providervalue={props.disabled}>
125+
<divstyle={{padding:rowStyle.margin,height:'100%'}}>
126+
<RowWrapper
127+
$style={rowStyle}
128+
wrap={rowBreak}
129+
gutter={[horizontalSpacing,verticalSpacing]}
130+
>
131+
{columns.map(column=>{
132+
constid=String(column.id);
133+
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
134+
if(!containers[id])returnnull
135+
constcontainerProps=containers[id].children;
131136

132-
constcolumnCustomStyle={
133-
margin:!_.isEmpty(column.margin) ?column.margin :columnStyle.margin,
134-
padding:!_.isEmpty(column.padding) ?column.padding :columnStyle.padding,
135-
radius:!_.isEmpty(column.radius) ?column.radius :columnStyle.radius,
136-
border:`1px solid${!_.isEmpty(column.border) ?column.border :columnStyle.border}`,
137-
background:!_.isEmpty(column.background) ?column.background :columnStyle.background,
138-
}
139-
constnoOfColumns=columns.length;
140-
letbackgroundStyle=columnCustomStyle.background;
141-
if(!_.isEmpty(column.backgroundImage)){
142-
backgroundStyle=`center / cover url('${column.backgroundImage}') no-repeat,${backgroundStyle}`;
137+
constcolumnCustomStyle={
138+
margin:!_.isEmpty(column.margin) ?column.margin :columnStyle.margin,
139+
padding:!_.isEmpty(column.padding) ?column.padding :columnStyle.padding,
140+
radius:!_.isEmpty(column.radius) ?column.radius :columnStyle.radius,
141+
border:`1px solid${!_.isEmpty(column.border) ?column.border :columnStyle.border}`,
142+
background:!_.isEmpty(column.background) ?column.background :columnStyle.background,
143+
}
144+
constnoOfColumns=columns.length;
145+
letbackgroundStyle=columnCustomStyle.background;
146+
if(!_.isEmpty(column.backgroundImage)){
147+
backgroundStyle=`center / cover url('${column.backgroundImage}') no-repeat,${backgroundStyle}`;
148+
}
149+
return(
150+
<ColWrapper
151+
key={id}
152+
lg={24/(noOfColumns<columnPerRowLG ?noOfColumns :columnPerRowLG)}
153+
md={24/(noOfColumns<columnPerRowMD ?noOfColumns :columnPerRowMD)}
154+
sm={24/(noOfColumns<columnPerRowSM ?noOfColumns :columnPerRowSM)}
155+
xs={24/(noOfColumns<columnPerRowSM ?noOfColumns :columnPerRowSM)}
156+
$style={columnCustomStyle}
157+
$minWidth={column.minWidth}
158+
$matchColumnsHeight={matchColumnsHeight}
159+
>
160+
<ColumnContainer
161+
layout={containerProps.layout.getView()}
162+
items={gridItemCompToGridItems(containerProps.items.getView())}
163+
positionParams={containerProps.positionParams.getView()}
164+
dispatch={childDispatch}
165+
autoHeight={props.autoHeight}
166+
style={{
167+
...columnCustomStyle,
168+
background:backgroundStyle,
169+
}}
170+
/>
171+
</ColWrapper>
172+
)
173+
})
143174
}
144-
return(
145-
<ColWrapper
146-
key={id}
147-
lg={24/(noOfColumns<columnPerRowLG ?noOfColumns :columnPerRowLG)}
148-
md={24/(noOfColumns<columnPerRowMD ?noOfColumns :columnPerRowMD)}
149-
sm={24/(noOfColumns<columnPerRowSM ?noOfColumns :columnPerRowSM)}
150-
xs={24/(noOfColumns<columnPerRowSM ?noOfColumns :columnPerRowSM)}
151-
$style={columnCustomStyle}
152-
$minWidth={column.minWidth}
153-
$matchColumnsHeight={matchColumnsHeight}
154-
>
155-
<ColumnContainer
156-
layout={containerProps.layout.getView()}
157-
items={gridItemCompToGridItems(containerProps.items.getView())}
158-
positionParams={containerProps.positionParams.getView()}
159-
dispatch={childDispatch}
160-
autoHeight={props.autoHeight}
161-
style={{
162-
...columnCustomStyle,
163-
background:backgroundStyle,
164-
}}
165-
/>
166-
</ColWrapper>
167-
)
168-
})
169-
}
170-
</RowWrapper>
171-
</div>
175+
</RowWrapper>
176+
</div>
177+
</DisabledContext.Provider>
172178
</BackgroundColorContext.Provider>
173179
);
174180
};
@@ -189,6 +195,13 @@ export const ResponsiveLayoutBaseComp = (function () {
189195
})}
190196
</Section>
191197

198+
{(useContext(EditorContext).editorModeStatus==="logic"||useContext(EditorContext).editorModeStatus==="both")&&(
199+
<Sectionname={sectionNames.interaction}>
200+
{disabledPropertyView(children)}
201+
{hiddenPropertyView(children)}
202+
</Section>
203+
)}
204+
192205
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
193206
<>
194207
<Sectionname={sectionNames.layout}>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp