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

Commit55157a8

Browse files
committed
[Fix]:#1626 Hide Width in Grid Mode
1 parente035ee2 commit55157a8

File tree

2 files changed

+57
-45
lines changed

2 files changed

+57
-45
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ const childrenMap = {
121121
columnGap:withDefault(StringControl,"0"),
122122
style:styleControl(ContainerStyle,'style'),
123123
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle'),
124-
useFlexLayout:withDefault(BoolControl,true),
124+
useFlexLayout:withDefault(BoolControl,false),
125125
};
126126

127127
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
@@ -239,6 +239,7 @@ export const ResponsiveLayoutBaseComp = (function () {
239239
{children.columns.propertyView({
240240
title:trans("responsiveLayout.column"),
241241
newOptionLabel:trans("responsiveLayout.addColumn"),
242+
useFlexLayout:children.useFlexLayout.getView(),
242243
})}
243244
</Section>
244245

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

Lines changed: 55 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import { ControlItemCompBuilder } from "comps/generators/controlCompBuilder";
4040
import{ColorControl}from"./colorControl";
4141
import{StringStateControl}from"./codeStateControl";
4242
import{reduceInContext}from"../utils/reduceContext";
43+
importReactfrom"react";
4344

4445
constOptionTypes=[
4546
{
@@ -65,10 +66,13 @@ type OptionControlParam = {
6566
title?:string;
6667
// The new option's label name
6768
newOptionLabel?:string;
69+
// Whether to use flex layout (for column options)
70+
useFlexLayout?:boolean;
6871
};
6972

7073
typeOptionPropertyParam={
7174
autoMap?:boolean;
75+
useFlexLayout?:boolean;
7276
};
7377

7478
interfaceOptionCompProperty{
@@ -176,7 +180,7 @@ export function manualOptionsControl<T extends OptionsControlType>(
176180
itemTitle={(comp)=>comp.children.label.getView()}
177181
popoverTitle={()=>trans("edit")}
178182
content={(comp)=>{
179-
returnhasPropertyView(comp) ?comp.propertyView({}) :comp.getPropertyView();
183+
returnhasPropertyView(comp) ?comp.propertyView({useFlexLayout:param.useFlexLayout}) :comp.getPropertyView();
180184
}}
181185
items={manualComp.getView()}
182186
onAdd={()=>{
@@ -576,7 +580,7 @@ const StyledContent = styled.div`
576580
}
577581
`;
578582

579-
constColumnOption=newMultiCompBuilder(
583+
letColumnOption=newMultiCompBuilder(
580584
{
581585
id:valueComp<number>(-1),
582586
label:StringControl,
@@ -591,48 +595,55 @@ const ColumnOption = new MultiCompBuilder(
591595
padding:withDefault(StringControl,""),
592596
},
593597
(props)=>props
594-
)
595-
.setPropertyViewFn((children)=>(
596-
<StyledContent>
597-
{children.minWidth.propertyView({
598-
label:trans('responsiveLayout.minWidth'),
599-
preInputNode:<StyledIconas={WidthIcon}title=""/>,
600-
placeholder:'3px',
601-
})}
602-
{children.width.propertyView({
603-
label:trans('responsiveLayout.width'),
604-
preInputNode:<StyledIconas={WidthIcon}title=""/>,
605-
placeholder:'50%',
606-
})}
607-
{children.background.propertyView({
608-
label:trans('style.background'),
609-
})}
610-
{children.backgroundImage.propertyView({
611-
label:`Background Image`,
612-
// preInputNode: <StyledIcon as={ImageCompIcon} title="" />,
613-
placeholder:'https://temp.im/350x400',
614-
})}
615-
{children.border.propertyView({
616-
label:trans('style.border')
617-
})}
618-
{children.radius.propertyView({
619-
label:trans('style.borderRadius'),
620-
preInputNode:<StyledIconas={IconRadius}title=""/>,
621-
placeholder:'3px',
622-
})}
623-
{children.margin.propertyView({
624-
label:trans('style.margin'),
625-
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
626-
placeholder:'3px',
627-
})}
628-
{children.padding.propertyView({
629-
label:trans('style.padding'),
630-
preInputNode:<StyledIconas={CompressIcon}title=""/>,
631-
placeholder:'3px',
632-
})}
633-
</StyledContent>
634-
))
635-
.build();
598+
).build();
599+
600+
// Add propertyView method through class extension
601+
ColumnOption=classextendsColumnOptionimplementsOptionCompProperty{
602+
propertyView(param:OptionPropertyParam){
603+
constuseFlexLayout=param?.useFlexLayout!==undefined ?param.useFlexLayout :true;
604+
605+
return(
606+
<StyledContent>
607+
{useFlexLayout&&this.children.minWidth.propertyView({
608+
label:trans('responsiveLayout.minWidth'),
609+
preInputNode:<StyledIconas={WidthIcon}title=""/>,
610+
placeholder:'3px',
611+
})}
612+
{useFlexLayout&&this.children.width.propertyView({
613+
label:trans('responsiveLayout.width'),
614+
preInputNode:<StyledIconas={WidthIcon}title=""/>,
615+
placeholder:'50%',
616+
})}
617+
{this.children.background.propertyView({
618+
label:trans('style.background'),
619+
})}
620+
{this.children.backgroundImage.propertyView({
621+
label:`Background Image`,
622+
// preInputNode: <StyledIcon as={ImageCompIcon} title="" />,
623+
placeholder:'https://temp.im/350x400',
624+
})}
625+
{this.children.border.propertyView({
626+
label:trans('style.border')
627+
})}
628+
{this.children.radius.propertyView({
629+
label:trans('style.borderRadius'),
630+
preInputNode:<StyledIconas={IconRadius}title=""/>,
631+
placeholder:'3px',
632+
})}
633+
{this.children.margin.propertyView({
634+
label:trans('style.margin'),
635+
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
636+
placeholder:'3px',
637+
})}
638+
{this.children.padding.propertyView({
639+
label:trans('style.padding'),
640+
preInputNode:<StyledIconas={CompressIcon}title=""/>,
641+
placeholder:'3px',
642+
})}
643+
</StyledContent>
644+
);
645+
}
646+
};
636647

637648
exportconstColumnOptionControl=manualOptionsControl(ColumnOption,{
638649
initOptions:[

0 commit comments

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