Skip to content

Commit a4bf6a9

Browse files
raheeliftikhar5raheeliftikhar5
committed
added horizontalGridCells property in inner-grid based comps
1 parent fb90fe3 commit a4bf6a9

File tree

20 files changed

+146
-19
lines changed

20 files changed

+146
-19
lines changed

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -381,7 +381,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
381381
max={48} // Define the maximum value for the slider
382382
value={parseInt(gridColumns || "24")}
383383
onChange={(value) => setGridColumns(value.toString())}
384-
onAfterChange={(value) => gridColumnsInputBlur(value.toString())}
384+
onChangeComplete={(value) => gridColumnsInputBlur(value.toString())}
385385
/>
386386
</div>
387387
)}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { EditorContext } from "comps/editorState";
4141
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
4242
import { DisabledContext } from "comps/generators/uiCompBuilder";
4343
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
44+
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
4445

4546
const ContainWrapper = styled.div<{
4647
$style: ContainerStyleType & {
@@ -90,6 +91,7 @@ const childrenMap = {
9091
0: { view: {}, layout: {} },
9192
1: { view: {}, layout: {} },
9293
}),
94+
horizontalGridCells: SliderControl,
9395
autoHeight: AutoHeightControl,
9496
matchColumnsHeight: withDefault(BoolControl, true),
9597
templateRows: withDefault(StringControl, "1fr"),
@@ -131,6 +133,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
131133
templateColumns,
132134
columnGap,
133135
columnStyle,
136+
horizontalGridCells,
134137
} = props;
135138

136139
return (
@@ -161,6 +164,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
161164
<ColumnContainer
162165
layout={containerProps.layout.getView()}
163166
items={gridItemCompToGridItems(containerProps.items.getView())}
167+
horizontalGridCells={horizontalGridCells}
164168
positionParams={containerProps.positionParams.getView()}
165169
dispatch={childDispatch}
166170
autoHeight={props.autoHeight}
@@ -206,6 +210,9 @@ export const ResponsiveLayoutBaseComp = (function () {
206210
<>
207211
<Section name={sectionNames.layout}>
208212
{children.autoHeight.getPropertyView()}
213+
{children.horizontalGridCells.propertyView({
214+
label: trans('prop.horizontalGridCells'),
215+
})}
209216
</Section>
210217
<Section name={trans("responsiveLayout.columnsLayout")}>
211218
{children.matchColumnsHeight.propertyView({ label: trans("responsiveLayout.matchColumnsHeight")

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ type ExtraProps = {
121121
isSelectable?: boolean;
122122
overflow?: string;
123123
enableGridLines?: boolean;
124+
horizontalGridCells?: number;
124125
onRowCountChange?: (rowHeight: number) => void;
125126
};
126127

@@ -338,6 +339,8 @@ export function InnerGrid(props: ViewPropsWithSelect) {
338339
enableGridLines,
339340
isRowCountLocked,
340341
} = props;
342+
const horizontalGridCells = props.horizontalGridCells ? String(props.horizontalGridCells) : undefined;
343+
const currentTheme = useContext(ThemeContext)?.theme;
341344
const [currentRowCount, setRowCount] = useState(rowCount || Infinity);
342345
const [currentRowHeight, setRowHeight] = useState(DEFAULT_ROW_HEIGHT);
343346
const editorState = useContext(EditorContext);
@@ -346,7 +349,8 @@ export function InnerGrid(props: ViewPropsWithSelect) {
346349
// Falk: TODO: Here we can define the inner grid columns dynamically
347350
//Added By Aqib Mirza
348351
const defaultGrid =
349-
useContext(ThemeContext)?.theme?.gridColumns ||
352+
horizontalGridCells ||
353+
currentTheme?.gridColumns ||
350354
defaultTheme?.gridColumns ||
351355
"12";
352356
/////////////////////

‎client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ type ListItemProps = {
9898
itemIdx: number;
9999
offset: number;
100100
containerProps: ConstructorToView<typeof SimpleContainerComp>;
101+
horizontalGridCells?: number,
101102
autoHeight: boolean;
102103
scrollContainerRef?: RefObject<HTMLDivElement>;
103104
minHeight?: string;
@@ -117,7 +118,8 @@ function ListItem({
117118
containerProps,
118119
autoHeight,
119120
scrollContainerRef,
120-
minHeight
121+
minHeight,
122+
horizontalGridCells,
121123
} = props;
122124

123125
// disable the unmount function to save user's state with pagination
@@ -138,6 +140,7 @@ function ListItem({
138140
<ContainerInListView
139141
layout={containerProps.layout}
140142
items={gridItemCompToGridItems(containerProps.items)}
143+
horizontalGridCells={horizontalGridCells}
141144
positionParams={containerProps.positionParams}
142145
// all layout changes should only reflect on the commonContainer
143146
dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
@@ -185,6 +188,7 @@ export function ListView(props: Props) {
185188
() => getData(children.noOfRows.getView()),
186189
[children.noOfRows]
187190
);
191+
const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]);
188192
const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
189193
const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]);
190194
const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]);
@@ -258,6 +262,7 @@ export function ListView(props: Props) {
258262
itemIdx={itemIdx}
259263
offset={pageInfo.offset}
260264
containerProps={containerProps}
265+
horizontalGridCells={horizontalGridCells}
261266
autoHeight={isDragging || dynamicHeight}
262267
scrollContainerRef={ref}
263268
minHeight={minHeight}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { ListView } from "./listView";
3939
import { listPropertyView } from "./listViewPropertyView";
4040
import { getData } from "./listViewUtils";
4141
import { withMethodExposing } from "comps/generators/withMethodExposing";
42+
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
4243

4344
const childrenMap = {
4445
noOfRows: withIsLoadingMethod(NumberOrJSONObjectArrayControl), // FIXME: migrate "noOfRows" to "data"
@@ -49,6 +50,7 @@ const childrenMap = {
4950
heightUnitOfRow: withDefault(NumberControl, 1),
5051
container: ContextContainerComp,
5152
autoHeight: AutoHeightControl,
53+
horizontalGridCells: SliderControl,
5254
scrollbars: withDefault(BoolControl, false),
5355
showBorder: BoolControl,
5456
pagination: withDefault(PaginationControl, { pageSize: "6" }),

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ export function listPropertyView(compType: ListCompType) {
6161

6262
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
6363
<><Section name={sectionNames.layout}>
64+
{children.horizontalGridCells.propertyView({
65+
label: trans('prop.horizontalGridCells'),
66+
})}
6467
{children.autoHeight.getPropertyView()}
6568
{(!children.autoHeight.getView() || children.horizontal.getView()) &&
6669
children.scrollbars.propertyView({

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
128128
siderStyle,
129129
bodyStyle,
130130
footerStyle,
131+
horizontalGridCells,
131132
} = container;
132133

133134
const editorState = useContext(EditorContext);
@@ -171,6 +172,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
171172
<SiderInnerGrid
172173
{...otherSiderProps}
173174
items={gridItemCompToGridItems(siderItems)}
175+
horizontalGridCells={horizontalGridCells}
174176
autoHeight={true}
175177
emptyRows={30}
176178
minHeight={`calc(100vh - ${style.padding}px)`}
@@ -196,6 +198,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
196198
<HeaderInnerGrid
197199
{...otherHeaderProps}
198200
items={gridItemCompToGridItems(headerItems)}
201+
horizontalGridCells={horizontalGridCells}
199202
autoHeight={true}
200203
emptyRows={5}
201204
minHeight="46px"
@@ -223,6 +226,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
223226
<SiderInnerGrid
224227
{...otherSiderProps}
225228
items={gridItemCompToGridItems(siderItems)}
229+
horizontalGridCells={horizontalGridCells}
226230
autoHeight={true}
227231
emptyRows={30}
228232
minHeight={`calc(100vh - ${style.padding}px)`}
@@ -256,6 +260,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
256260
$showBorder={showHeader}
257261
{...otherBodyProps}
258262
items={gridItemCompToGridItems(bodyItems)}
263+
horizontalGridCells={horizontalGridCells}
259264
autoHeight={container.autoHeight}
260265
emptyRows={14}
261266
minHeight={showHeader ? "143px" : "142px"}
@@ -283,6 +288,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
283288
<SiderInnerGrid
284289
{...otherSiderProps}
285290
items={gridItemCompToGridItems(siderItems)}
291+
horizontalGridCells={horizontalGridCells}
286292
autoHeight={true}
287293
emptyRows={30}
288294
minHeight={`calc(100vh - ${style.padding}px)`}
@@ -318,6 +324,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
318324
$showBorder={showHeader}
319325
{...otherBodyProps}
320326
items={gridItemCompToGridItems(bodyItems)}
327+
horizontalGridCells={horizontalGridCells}
321328
autoHeight={container.autoHeight}
322329
emptyRows={14}
323330
minHeight={showHeader ? "143px" : "142px"}
@@ -337,6 +344,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
337344
$showBorder={showHeader}
338345
{...otherFooterProps}
339346
items={gridItemCompToGridItems(footerItems)}
347+
horizontalGridCells={horizontalGridCells}
340348
autoHeight={true}
341349
emptyRows={5}
342350
minHeight={"48px"}
@@ -370,6 +378,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
370378
<SiderInnerGrid
371379
{...otherSiderProps}
372380
items={gridItemCompToGridItems(siderItems)}
381+
horizontalGridCells={horizontalGridCells}
373382
autoHeight={true}
374383
emptyRows={30}
375384
minHeight={`calc(100vh - ${style.padding}px)`}

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { trans } from "i18n";
2929
import { ControlNode } from "lowcoder-design";
3030
import { StringControl } from "comps/controls/codeControl";
3131
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
32+
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
3233

3334
const childrenMap = {
3435
header: SimpleContainerComp,
@@ -49,6 +50,7 @@ const childrenMap = {
4950
siderWidth: withDefault(StringControl, "20%"),
5051
siderCollapsedWidth: withDefault(StringControl, "0"),
5152
showFooter: BoolControl,
53+
horizontalGridCells: SliderControl,
5254
autoHeight: AutoHeightControl,
5355
siderScrollbars: withDefault(BoolControl, false),
5456
contentScrollbars: withDefault(BoolControl, false),
@@ -134,7 +136,11 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
134136
}
135137

136138
getPropertyView(): ControlNode {
137-
return [this.areaPropertyView(), this.heightPropertyView()];
139+
return [
140+
this.areaPropertyView(),
141+
this.gridPropertyView(),
142+
this.heightPropertyView(),
143+
];
138144
}
139145

140146
areaPropertyView() {
@@ -159,6 +165,14 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
159165
];
160166
}
161167

168+
gridPropertyView() {
169+
return [
170+
this.children.horizontalGridCells.propertyView({
171+
label: trans('prop.horizontalGridCells'),
172+
}),
173+
]
174+
}
175+
162176
appSelectorPropertyView() {
163177
return [
164178
this.children.showApp.propertyView({ label: trans("prop.showApp"), tooltip: trans("prop.showAppTooltip") }),

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { EditorContext } from "comps/editorState";
4343
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
4444
import { DisabledContext } from "comps/generators/uiCompBuilder";
4545
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
46+
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
4647

4748
const RowWrapper = styled(Row)<{
4849
$style: ResponsiveLayoutRowStyleType;
@@ -89,6 +90,7 @@ const childrenMap = {
8990
0: { view: {}, layout: {} },
9091
1: { view: {}, layout: {} },
9192
}),
93+
horizontalGridCells: SliderControl,
9294
autoHeight: AutoHeightControl,
9395
rowBreak: withDefault(BoolControl, false),
9496
matchColumnsHeight: withDefault(BoolControl, true),
@@ -135,7 +137,8 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
135137
columnPerRowSM,
136138
verticalSpacing,
137139
horizontalSpacing,
138-
animationStyle
140+
animationStyle,
141+
horizontalGridCells,
139142
} = props;
140143

141144
return (
@@ -171,6 +174,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
171174
positionParams={containerProps.positionParams.getView()}
172175
dispatch={childDispatch}
173176
autoHeight={props.autoHeight}
177+
horizontalGridCells={horizontalGridCells}
174178
style={columnStyle}
175179
/>
176180
</ColWrapper>
@@ -212,6 +216,9 @@ export const ResponsiveLayoutBaseComp = (function () {
212216
<>
213217
<Section name={sectionNames.layout}>
214218
{children.autoHeight.getPropertyView()}
219+
{children.horizontalGridCells.propertyView({
220+
label: trans('prop.horizontalGridCells'),
221+
})}
215222
</Section>
216223
<Section name={trans("responsiveLayout.rowLayout")}>
217224
{children.rowBreak.propertyView({

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
3636
import { BoolControl } from "comps/controls/boolControl";
3737
import { PositionControl } from "comps/controls/dropdownControl";
3838
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
39+
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
3940

4041
const EVENT_OPTIONS = [
4142
{
@@ -53,6 +54,7 @@ const childrenMap = {
5354
1: { layout: {}, items: {} },
5455
}),
5556
autoHeight: AutoHeightControl,
57+
horizontalGridCells: SliderControl,
5658
scrollbars: withDefault(BoolControl, false),
5759
placement: withDefault(PositionControl, "top"),
5860
onEvent: eventHandlerControl(EVENT_OPTIONS),
@@ -190,6 +192,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
190192
style,
191193
headerStyle,
192194
bodyStyle,
195+
horizontalGridCells,
193196
} = props;
194197

195198
const visibleTabs = tabs.filter((tab) => !tab.hidden);
@@ -243,6 +246,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
243246
<ContainerInTab
244247
layout={containerProps.layout.getView()}
245248
items={gridItemCompToGridItems(containerProps.items.getView())}
249+
horizontalGridCells={horizontalGridCells}
246250
positionParams={containerProps.positionParams.getView()}
247251
dispatch={childDispatch}
248252
autoHeight={props.autoHeight}
@@ -323,6 +327,9 @@ export const TabbedContainerBaseComp = (function () {
323327
{children.placement.propertyView({ label: trans("tabbedContainer.placement"), radioButton: true })}
324328
{children.tabsCentered.propertyView({ label: trans("tabbedContainer.tabsCentered")})}
325329
{ children.tabsGutter.propertyView({ label: trans("tabbedContainer.gutter"), tooltip : trans("tabbedContainer.gutterTooltip") })}
330+
{children.horizontalGridCells.propertyView({
331+
label: trans('prop.horizontalGridCells'),
332+
})}
326333
{children.autoHeight.getPropertyView()}
327334
{!children.autoHeight.getView() && (
328335
children.scrollbars.propertyView({

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ export type TriContainerProps = TriContainerViewProps & {
104104

105105
export function TriContainer(props: TriContainerProps) {
106106
const {container, animationStyle} = props;
107-
const { showHeader, showFooter } = container;
107+
const { showHeader, showFooter, horizontalGridCells } = container;
108108
// When the header and footer are not displayed, the body must be displayed
109109
const showBody = container.showBody || (!showHeader && !showFooter);
110110
const scrollbars = container.scrollbars;
@@ -131,6 +131,7 @@ export function TriContainer(props: TriContainerProps) {
131131
<BackgroundColorContext.Provider value={headerStyle.headerBackground}>
132132
<HeaderInnerGrid
133133
{...otherHeaderProps}
134+
horizontalGridCells={horizontalGridCells}
134135
items={gridItemCompToGridItems(headerItems)}
135136
autoHeight={true}
136137
emptyRows={5}
@@ -154,6 +155,7 @@ export function TriContainer(props: TriContainerProps) {
154155
<BodyInnerGrid
155156
$showBorder={showHeader}
156157
{...otherBodyProps}
158+
horizontalGridCells={horizontalGridCells}
157159
items={gridItemCompToGridItems(bodyItems)}
158160
autoHeight={container.autoHeight}
159161
emptyRows={14}
@@ -180,6 +182,7 @@ export function TriContainer(props: TriContainerProps) {
180182
<FooterInnerGrid
181183
$showBorder={showHeader || showBody}
182184
{...otherFooterProps}
185+
horizontalGridCells={horizontalGridCells}
183186
items={gridItemCompToGridItems(footerItems)}
184187
autoHeight={true}
185188
emptyRows={5}

0 commit comments

Comments
 (0)