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

Commit acb1cb1

Browse files
Merge branch 'dev' into fix/table
2 parents fab46dd + a4bf6a9 commit acb1cb1

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({

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /