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

Commit603a62d

Browse files
committed
revert to Grid
1 parent1ae320d commit603a62d

File tree

3 files changed

+75
-140
lines changed

3 files changed

+75
-140
lines changed

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

Lines changed: 34 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -43,34 +43,20 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
4343
import{SliderControl}from"@lowcoder-ee/comps/controls/sliderControl";
4444
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
4545

46-
// Extended ContainerStyleType for our specific needs
47-
interfaceExtendedContainerStyleTypeextendsContainerStyleType{
48-
display?:string;
49-
gridTemplateColumns?:string;
50-
gridTemplateRows?:string;
51-
columnGap?:string;
52-
rowGap?:string;
53-
[key:string]:string|undefined;
54-
}
55-
5646
constContainWrapper=styled.div<{
57-
$style:ExtendedContainerStyleType|undefined;
58-
$useFlexLayout:boolean;
47+
$style:ContainerStyleType&{
48+
display:string,
49+
gridTemplateColumns:string,
50+
columnGap:string,
51+
gridTemplateRows:string,
52+
rowGap:string,
53+
}|undefined;
5954
}>`
60-
display:${(props)=>props.$useFlexLayout ?'flex' :props.$style?.display};
61-
flex-wrap:${(props)=>props.$useFlexLayout ?'wrap' :'nowrap'};
62-
63-
${(props)=>!props.$useFlexLayout&&`
64-
grid-template-columns:${props.$style?.gridTemplateColumns};
65-
grid-template-rows:${props.$style?.gridTemplateRows};
66-
column-gap:${props.$style?.columnGap};
67-
row-gap:${props.$style?.rowGap};
68-
`}
69-
70-
${(props)=>props.$useFlexLayout&&`
71-
column-gap:${props.$style?.columnGap||'0'};
72-
row-gap:${props.$style?.rowGap||'0'};
73-
`}
55+
display:${(props)=>props.$style?.display};
56+
grid-template-columns:${(props)=>props.$style?.gridTemplateColumns};
57+
grid-template-rows:${(props)=>props.$style?.gridTemplateRows};
58+
column-gap:${(props)=>props.$style?.columnGap};
59+
row-gap:${(props)=>props.$style?.rowGap};
7460
7561
border-radius:${(props)=>props.$style?.radius};
7662
border-width:${(props)=>props.$style?.borderWidth};
@@ -81,29 +67,12 @@ const ContainWrapper = styled.div<{
8167
${props=>props.$style&&getBackgroundStyle(props.$style)}
8268
`;
8369

84-
constgetColumnWidth=(column:any):string=>{
85-
// Use explicit width if available
86-
if(column.width){
87-
returncolumn.width;
88-
}
89-
90-
// No explicit width - return auto to let flex handle it
91-
return'auto';
92-
};
93-
94-
constColWrapper=styled.div<{
70+
constColWrapper=styled(Col)<{
9571
$style:ResponsiveLayoutColStyleType|undefined,
96-
$width:string,
72+
$minWidth?:string,
9773
$matchColumnsHeight:boolean,
98-
$useFlexLayout:boolean,
99-
$hasExplicitWidth:boolean,
10074
}>`
101-
${props=>props.$useFlexLayout ?`
102-
${props.$hasExplicitWidth
103-
?`flex: 0 0${props.$width}; max-width:${props.$width};`
104-
:'flex: 1 1 0%; min-width: 0;'}
105-
` :''}
106-
75+
min-width:${(props)=>props.$minWidth||'auto'};
10776
> div {
10877
height:${(props)=>props.$matchColumnsHeight ?`calc(100% -${props.$style?.padding||0} -${props.$style?.padding||0})` :'auto'};
10978
border-radius:${(props)=>props.$style?.radius};
@@ -127,13 +96,12 @@ const childrenMap = {
12796
autoHeight:AutoHeightControl,
12897
matchColumnsHeight:withDefault(BoolControl,true),
12998
templateRows:withDefault(StringControl,"1fr"),
130-
rowGap:withDefault(StringControl,"0"),
99+
rowGap:withDefault(StringControl,"20px"),
131100
templateColumns:withDefault(StringControl,"1fr 1fr"),
132101
mainScrollbar:withDefault(BoolControl,false),
133-
columnGap:withDefault(StringControl,"0"),
102+
columnGap:withDefault(StringControl,"20px"),
134103
style:styleControl(ContainerStyle,'style'),
135-
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle'),
136-
useFlexLayout:withDefault(BoolControl,false),
104+
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle')
137105
};
138106

139107
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
@@ -155,6 +123,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
155123
);
156124
};
157125

126+
158127
constColumnLayout=(props:ColumnLayoutProps)=>{
159128
let{
160129
columns,
@@ -167,42 +136,35 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
167136
columnGap,
168137
columnStyle,
169138
horizontalGridCells,
170-
mainScrollbar,
171-
useFlexLayout,
139+
mainScrollbar
172140
}=props;
173141

174142
return(
175143
<BackgroundColorContext.Providervalue={props.style.background}>
176144
<DisabledContext.Providervalue={props.disabled}>
177145
<divstyle={{height:"inherit",overflow:"auto"}}>
178146
<ScrollBarstyle={{margin:"0px",padding:"0px"}}overflow="scroll"hideScrollbar={!mainScrollbar}>
179-
<ContainWrapper
180-
$style={{
181-
...props.style,
182-
display:"grid",
183-
gridTemplateColumns:templateColumns,
184-
columnGap,
185-
gridTemplateRows:templateRows,
186-
rowGap,
187-
}}
188-
$useFlexLayout={useFlexLayout}
189-
>
147+
<ContainWrapper$style={{
148+
...props.style,
149+
display:"grid",
150+
gridTemplateColumns:templateColumns,
151+
columnGap,
152+
gridTemplateRows:templateRows,
153+
rowGap,
154+
}}>
190155
{columns.map(column=>{
191156
constid=String(column.id);
192157
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
193158
if(!containers[id])returnnull
194159
constcontainerProps=containers[id].children;
195-
constcolumnWidth=getColumnWidth(column);
196-
consthasExplicitWidth=!!column.width;
197-
160+
constnoOfColumns=columns.length;
198161
return(
199-
<BackgroundColorContext.Providerkey={id}value={props.columnStyle.background}>
162+
<BackgroundColorContext.Providervalue={props.columnStyle.background}>
200163
<ColWrapper
164+
key={id}
201165
$style={props.columnStyle}
202-
$width={columnWidth}
166+
$minWidth={column.minWidth}
203167
$matchColumnsHeight={matchColumnsHeight}
204-
$useFlexLayout={useFlexLayout}
205-
$hasExplicitWidth={hasExplicitWidth}
206168
>
207169
<ColumnContainer
208170
layout={containerProps.layout.getView()}
@@ -239,7 +201,6 @@ export const ResponsiveLayoutBaseComp = (function () {
239201
{children.columns.propertyView({
240202
title:trans("responsiveLayout.column"),
241203
newOptionLabel:trans("responsiveLayout.addColumn"),
242-
useFlexLayout:children.useFlexLayout.getView(),
243204
})}
244205
</Section>
245206

@@ -260,25 +221,15 @@ export const ResponsiveLayoutBaseComp = (function () {
260221
{children.horizontalGridCells.propertyView({
261222
label:trans('prop.horizontalGridCells'),
262223
})}
263-
{children.useFlexLayout.propertyView({
264-
label:trans("responsiveLayout.useFlexLayout"),
265-
tooltip:trans("responsiveLayout.useFlexLayoutTooltip")
266-
})}
267224
</Section>
268225
<Sectionname={trans("responsiveLayout.columnsLayout")}>
269226
{children.matchColumnsHeight.propertyView({label:trans("responsiveLayout.matchColumnsHeight")
270227
})}
271228
{controlItem({},(
272229
<divstyle={{marginTop:'8px'}}>{trans("responsiveLayout.columnsSpacing")}</div>
273230
))}
274-
{!children.useFlexLayout.getView()&&children.templateColumns.propertyView({
275-
label:trans("responsiveLayout.columnDefinition"),
276-
tooltip:trans("responsiveLayout.columnsDefinitionTooltip")
277-
})}
278-
{!children.useFlexLayout.getView()&&children.templateRows.propertyView({
279-
label:trans("responsiveLayout.rowDefinition"),
280-
tooltip:trans("responsiveLayout.rowsDefinitionTooltip")
281-
})}
231+
{children.templateColumns.propertyView({label:trans("responsiveLayout.columnDefinition"),tooltip:trans("responsiveLayout.columnsDefinitionTooltip")})}
232+
{children.templateRows.propertyView({label:trans("responsiveLayout.rowDefinition"),tooltip:trans("responsiveLayout.rowsDefinitionTooltip")})}
282233
{children.columnGap.propertyView({label:trans("responsiveLayout.columnGap")})}
283234
{children.rowGap.propertyView({label:trans("responsiveLayout.rowGap")})}
284235
</Section>

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

Lines changed: 41 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ 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";
4443

4544
constOptionTypes=[
4645
{
@@ -66,13 +65,10 @@ type OptionControlParam = {
6665
title?:string;
6766
// The new option's label name
6867
newOptionLabel?:string;
69-
// Whether to use flex layout (for column options)
70-
useFlexLayout?:boolean;
7168
};
7269

7370
typeOptionPropertyParam={
7471
autoMap?:boolean;
75-
useFlexLayout?:boolean;
7672
};
7773

7874
interfaceOptionCompProperty{
@@ -180,7 +176,7 @@ export function manualOptionsControl<T extends OptionsControlType>(
180176
itemTitle={(comp)=>comp.children.label.getView()}
181177
popoverTitle={()=>trans("edit")}
182178
content={(comp)=>{
183-
returnhasPropertyView(comp) ?comp.propertyView({useFlexLayout:param.useFlexLayout}) :comp.getPropertyView();
179+
returnhasPropertyView(comp) ?comp.propertyView({}) :comp.getPropertyView();
184180
}}
185181
items={manualComp.getView()}
186182
onAdd={()=>{
@@ -580,13 +576,12 @@ const StyledContent = styled.div`
580576
}
581577
`;
582578

583-
letColumnOption=newMultiCompBuilder(
579+
constColumnOption=newMultiCompBuilder(
584580
{
585581
id:valueComp<number>(-1),
586582
label:StringControl,
587583
key:StringControl,
588584
minWidth:withDefault(RadiusControl,""),
589-
width:withDefault(RadiusControl,""),
590585
background:withDefault(ColorControl,""),
591586
backgroundImage:withDefault(StringControl,""),
592587
border:withDefault(ColorControl,""),
@@ -595,55 +590,48 @@ let ColumnOption = new MultiCompBuilder(
595590
padding:withDefault(StringControl,""),
596591
},
597592
(props)=>props
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.width.propertyView({
608-
label:trans('responsiveLayout.width'),
609-
preInputNode:<StyledIconas={WidthIcon}title=""/>,
610-
placeholder:'50%',
611-
})}
612-
{this.children.background.propertyView({
613-
label:trans('style.background'),
614-
})}
615-
{this.children.backgroundImage.propertyView({
616-
label:`Background Image`,
617-
// preInputNode: <StyledIcon as={ImageCompIcon} title="" />,
618-
placeholder:'https://temp.im/350x400',
619-
})}
620-
{this.children.border.propertyView({
621-
label:trans('style.border')
622-
})}
623-
{this.children.radius.propertyView({
624-
label:trans('style.borderRadius'),
625-
preInputNode:<StyledIconas={IconRadius}title=""/>,
626-
placeholder:'3px',
627-
})}
628-
{this.children.margin.propertyView({
629-
label:trans('style.margin'),
630-
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
631-
placeholder:'3px',
632-
})}
633-
{this.children.padding.propertyView({
634-
label:trans('style.padding'),
635-
preInputNode:<StyledIconas={CompressIcon}title=""/>,
636-
placeholder:'3px',
637-
})}
638-
</StyledContent>
639-
);
640-
}
641-
};
593+
)
594+
.setPropertyViewFn((children)=>(
595+
<StyledContent>
596+
{children.minWidth.propertyView({
597+
label:trans('responsiveLayout.minWidth'),
598+
preInputNode:<StyledIconas={WidthIcon}title=""/>,
599+
placeholder:'3px',
600+
})}
601+
{children.background.propertyView({
602+
label:trans('style.background'),
603+
})}
604+
{children.backgroundImage.propertyView({
605+
label:`Background Image`,
606+
// preInputNode: <StyledIcon as={ImageCompIcon} title="" />,
607+
placeholder:'https://temp.im/350x400',
608+
})}
609+
{children.border.propertyView({
610+
label:trans('style.border')
611+
})}
612+
{children.radius.propertyView({
613+
label:trans('style.borderRadius'),
614+
preInputNode:<StyledIconas={IconRadius}title=""/>,
615+
placeholder:'3px',
616+
})}
617+
{children.margin.propertyView({
618+
label:trans('style.margin'),
619+
preInputNode:<StyledIconas={ExpandIcon}title=""/>,
620+
placeholder:'3px',
621+
})}
622+
{children.padding.propertyView({
623+
label:trans('style.padding'),
624+
preInputNode:<StyledIconas={CompressIcon}title=""/>,
625+
placeholder:'3px',
626+
})}
627+
</StyledContent>
628+
))
629+
.build();
642630

643631
exportconstColumnOptionControl=manualOptionsControl(ColumnOption,{
644632
initOptions:[
645-
{id:0,key:"Column1",label:"Column1",width:""},
646-
{id:1,key:"Column2",label:"Column2",width:""},
633+
{id:0,key:"Column1",label:"Column1"},
634+
{id:1,key:"Column2",label:"Column2"},
647635
],
648636
uniqField:"key",
649637
autoIncField:"id",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3910,8 +3910,6 @@ export const en = {
39103910
"rowStyle":"Row Style",
39113911
"columnStyle":"Column Style",
39123912
"minWidth":"Min. Width",
3913-
"width":"Width",
3914-
"widthTooltip":"Set the column width (e.g., '300px', '50%', '100%'). When set to 100%, columns will stack vertically.",
39153913
"rowBreak":"Row Break",
39163914
"useComponentWidth" :"Use Self Size",
39173915
"useComponentWidthDesc" :"Use the container width instead the App width",
@@ -3920,8 +3918,6 @@ export const en = {
39203918
"columnsLayout":"Columns Layout",
39213919
"columnsDefinitionTooltip":"Columns can be defined freely based on the CSS columns properties. For example, 'auto auto' will create two columns with equal width. Read more here: https://css-tricks.com/almanac/properties/g/grid-template-columns",
39223920
"rowsDefinitionTooltip":"Rows can be defined freely based on the CSS rows properties. For example, 'auto auto' will create two rows with equal height. Read more here: https://css-tricks.com/almanac/properties/g/grid-template-rows",
3923-
"useFlexLayout":"Use Flexible Layout",
3924-
"useFlexLayoutTooltip":"Enable responsive behavior where columns can wrap when there's not enough space"
39253921
},
39263922
"splitLayout" :{
39273923
"column":"View Areas",

0 commit comments

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