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

Commita4bf6a9

Browse files
added horizontalGridCells property in inner-grid based comps
1 parentfb90fe3 commita4bf6a9

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+
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
4445

4546
constContainWrapper=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
<Sectionname={sectionNames.layout}>
208212
{children.autoHeight.getPropertyView()}
213+
{children.horizontalGridCells.propertyView({
214+
label:trans('prop.horizontalGridCells'),
215+
})}
209216
</Section>
210217
<Sectionname={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+
consthorizontalGridCells=props.horizontalGridCells ?String(props.horizontalGridCells) :undefined;
343+
constcurrentTheme=useContext(ThemeContext)?.theme;
341344
const[currentRowCount,setRowCount]=useState(rowCount||Infinity);
342345
const[currentRowHeight,setRowHeight]=useState(DEFAULT_ROW_HEIGHT);
343346
consteditorState=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
constdefaultGrid=
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<typeofSimpleContainerComp>;
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+
consthorizontalGridCells=useMemo(()=>children.horizontalGridCells.getView(),[children.horizontalGridCells]);
188192
constautoHeight=useMemo(()=>children.autoHeight.getView(),[children.autoHeight]);
189193
constscrollbars=useMemo(()=>children.scrollbars.getView(),[children.scrollbars]);
190194
consthorizontal=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+
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
4243

4344
constchildrenMap={
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
<><Sectionname={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
consteditorState=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+
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
3233

3334
constchildrenMap={
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+
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
4647

4748
constRowWrapper=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
<Sectionname={sectionNames.layout}>
214218
{children.autoHeight.getPropertyView()}
219+
{children.horizontalGridCells.propertyView({
220+
label:trans('prop.horizontalGridCells'),
221+
})}
215222
</Section>
216223
<Sectionname={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+
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
3940

4041
constEVENT_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
constvisibleTabs=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)
[8]ページ先頭
©2009-2025 Movatter.jp