Skip to content

Commit 603a62d

Browse files
iamfaraniamfaran
committed
revert to Grid
1 parent 1ae320d commit 603a62d

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-
interface ExtendedContainerStyleType extends ContainerStyleType {
48-
display?: string;
49-
gridTemplateColumns?: string;
50-
gridTemplateRows?: string;
51-
columnGap?: string;
52-
rowGap?: string;
53-
[key: string]: string | undefined;
54-
}
55-
5646
const ContainWrapper = 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-
const getColumnWidth = (column: any): string => {
85-
// Use explicit width if available
86-
if (column.width) {
87-
return column.width;
88-
}
89-
90-
// No explicit width - return auto to let flex handle it
91-
return 'auto';
92-
};
93-
94-
const ColWrapper = styled.div<{
70+
const ColWrapper = 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
type ViewProps = RecordConstructorToView<typeof childrenMap>;
@@ -155,6 +123,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
155123
);
156124
};
157125

126+
158127
const ColumnLayout = (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.Provider value={props.style.background}>
176144
<DisabledContext.Provider value={props.disabled}>
177145
<div style={{ height: "inherit", overflow: "auto"}}>
178146
<ScrollBar style={{ 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
const id = String(column.id);
192157
const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
193158
if(!containers[id]) return null
194159
const containerProps = containers[id].children;
195-
const columnWidth = getColumnWidth(column);
196-
const hasExplicitWidth = !!column.width;
197-
160+
const noOfColumns = columns.length;
198161
return (
199-
<BackgroundColorContext.Provider key={id} value={props.columnStyle.background}>
162+
<BackgroundColorContext.Provider value={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
<Section name={trans("responsiveLayout.columnsLayout")}>
269226
{children.matchColumnsHeight.propertyView({ label: trans("responsiveLayout.matchColumnsHeight")
270227
})}
271228
{controlItem({}, (
272229
<div style={{ 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-
import React from "react";
4443

4544
const OptionTypes = [
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
type OptionPropertyParam = {
7471
autoMap?: boolean;
75-
useFlexLayout?: boolean;
7672
};
7773

7874
interface OptionCompProperty {
@@ -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-
return hasPropertyView(comp) ? comp.propertyView({ useFlexLayout: param.useFlexLayout }) : comp.getPropertyView();
179+
return hasPropertyView(comp) ? comp.propertyView({}) : comp.getPropertyView();
184180
}}
185181
items={manualComp.getView()}
186182
onAdd={() => {
@@ -580,13 +576,12 @@ const StyledContent = styled.div`
580576
}
581577
`;
582578

583-
let ColumnOption = new MultiCompBuilder(
579+
const ColumnOption = new MultiCompBuilder(
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 = class extends ColumnOption implements OptionCompProperty {
602-
propertyView(param: OptionPropertyParam) {
603-
const useFlexLayout = param?.useFlexLayout !== undefined ? param.useFlexLayout : true;
604-
605-
return (
606-
<StyledContent>
607-
{useFlexLayout && this.children.width.propertyView({
608-
label: trans('responsiveLayout.width'),
609-
preInputNode: <StyledIcon as={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: <StyledIcon as={IconRadius} title="" />,
626-
placeholder: '3px',
627-
})}
628-
{this.children.margin.propertyView({
629-
label: trans('style.margin'),
630-
preInputNode: <StyledIcon as={ExpandIcon} title="" />,
631-
placeholder: '3px',
632-
})}
633-
{this.children.padding.propertyView({
634-
label: trans('style.padding'),
635-
preInputNode: <StyledIcon as={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: <StyledIcon as={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: <StyledIcon as={IconRadius} title="" />,
615+
placeholder: '3px',
616+
})}
617+
{children.margin.propertyView({
618+
label: trans('style.margin'),
619+
preInputNode: <StyledIcon as={ExpandIcon} title="" />,
620+
placeholder: '3px',
621+
})}
622+
{children.padding.propertyView({
623+
label: trans('style.padding'),
624+
preInputNode: <StyledIcon as={CompressIcon} title="" />,
625+
placeholder: '3px',
626+
})}
627+
</StyledContent>
628+
))
629+
.build();
642630

643631
export const ColumnOptionControl = 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)