Skip to content

Commit 262667c

Browse files
FalkWolskyFalkWolsky
authored
Merge branch 'dev' into lowcoder-sdk-webpack-bundle
2 parents 2f72fac + 8283f52 commit 262667c

File tree

27 files changed

+1291
-130
lines changed

27 files changed

+1291
-130
lines changed

‎client/packages/lowcoder-design/src/components/ScrollBar.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled from "styled-components";
55
import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's DebouncedFunc type
66

77

8-
const ScrollBarWrapper = styled.div<{ hidePlaceholder?: boolean }>`
8+
const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
99
min-height: 0;
1010
height: 100%;
1111
width: 100%;
@@ -37,7 +37,7 @@ const ScrollBarWrapper = styled.div<{ hidePlaceholder?: boolean }>`
3737
bottom: 10px;
3838
}
3939
40-
${props => props.hidePlaceholder && `
40+
${props => Boolean(props.$hideplaceholder) && `
4141
.simplebar-placeholder {
4242
display: none !important;
4343
}
@@ -54,11 +54,20 @@ interface IProps {
5454
scrollableNodeProps?: {
5555
onScroll: DebouncedFunc<(e: any) => void>;
5656
};
57-
hidePlaceholder?: boolean;
57+
$hideplaceholder?: boolean;
5858
hideScrollbar?: boolean;
5959
}
6060

61-
export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar = false, ...otherProps }: IProps) => {
61+
export const ScrollBar = ({
62+
height = "100%",
63+
className,
64+
children,
65+
style,
66+
scrollableNodeProps,
67+
hideScrollbar = false,
68+
$hideplaceholder = false,
69+
...otherProps
70+
}: IProps) => {
6271
// You can now use the style prop directly or pass it to SimpleBar
6372
const combinedStyle = { ...style, height }; // Example of combining height with passed style
6473

‎client/packages/lowcoder-design/src/components/Section.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
7575

7676
interface ISectionConfig<T> {
7777
name?: string;
78+
open?: boolean;
7879
width?: number;
7980
noMargin?: boolean;
8081
style?: React.CSSProperties;
@@ -103,7 +104,9 @@ export const PropertySectionContext = React.createContext<PropertySectionContext
103104
export const BaseSection = (props: ISectionConfig<ReactNode>) => {
104105
const { name } = props;
105106
const { compName, state, toggle } = useContext(PropertySectionContext);
106-
const open = name ? state[compName]?.[name] !== false : true;
107+
const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
108+
109+
// console.log("open", open, props.open);
107110

108111
const handleToggle = () => {
109112
if (!name) {

‎client/packages/lowcoder/src/appView/AppView.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { default as App } from "antd/es/app";
2+
import GlobalInstances from "components/GlobalInstances";
13
import { RootComp } from "comps/comps/rootComp";
24
import { GetContainerParams, useCompInstance } from "comps/utils/useCompInstance";
35
import { createBrowserHistory } from "history";
@@ -88,19 +90,22 @@ export function AppView(props: AppViewProps) {
8890
}, [moduleInputs]);
8991

9092
return (
91-
<Provider store={reduxStore}>
92-
<ExternalEditorContext.Provider
93-
value={{
94-
applicationId: appId,
95-
appType: 1,
96-
readOnly: true,
97-
hideHeader: true,
98-
}}
99-
>
100-
<Router history={browserHistory}>
101-
<Route path="/" render={() => comp?.getView()} />
102-
</Router>
103-
</ExternalEditorContext.Provider>
104-
</Provider>
93+
<App>
94+
<GlobalInstances />
95+
<Provider store={reduxStore}>
96+
<ExternalEditorContext.Provider
97+
value={{
98+
applicationId: appId,
99+
appType: 1,
100+
readOnly: true,
101+
hideHeader: true,
102+
}}
103+
>
104+
<Router history={browserHistory}>
105+
<Route path="/" render={() => comp?.getView()} />
106+
</Router>
107+
</ExternalEditorContext.Provider>
108+
</Provider>
109+
</App>
105110
);
106111
}

‎client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const CodeEditorTooltipContainer = styled.div`
5252
// tooltip common
5353
.cm-tooltip {
5454
z-index: ${Layers.codeEditorTooltip};
55-
border: none;
55+
border: 1px solid #d7d9e0;
5656
}
5757
// make sure antd popover in the code editor available
5858
.ant-popover {
@@ -84,6 +84,7 @@ export const CodeEditorTooltipContainer = styled.div`
8484
border-radius: 8px;
8585
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
8686
transform: translate(-16px, 10px);
87+
z-index: ${Layers.codeEditorTooltip};
8788
}
8889
8990
// left minor tooltip
@@ -109,6 +110,7 @@ export const CodeEditorTooltipContainer = styled.div`
109110
color: #4965f2;
110111
${textStyle};
111112
font-weight: 600;
113+
z-index: ${Layers.codeEditorTooltip};
112114
}
113115
114116
.cm-tooltip > .cm-completionInfo .hintDiv:hover {

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

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
import { CompParams } from "lowcoder-core";
2+
import { ToDataType } from "comps/generators/multi";
3+
import { NameConfigDisabled, NameConfigHidden, withExposingConfigs, NameConfig, CompDepsConfig } from "comps/generators/withExposing";
4+
import { withMethodExposing } from "comps/generators/withMethodExposing";
5+
import { NameGenerator } from "comps/utils/nameGenerator";
6+
import { Section, sectionNames } from "lowcoder-design";
7+
import { oldContainerParamsToNew } from "../containerBase";
8+
import { toSimpleContainerData } from "../containerBase/simpleContainerComp";
9+
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
10+
import { trans } from "i18n";
11+
import { BoolCodeControl } from "comps/controls/codeControl";
12+
import { DisabledContext } from "comps/generators/uiCompBuilder";
13+
import React, { useContext, useEffect, useState } from "react";
14+
import { EditorContext } from "comps/editorState";
15+
16+
import {
17+
ContainerChildren,
18+
ContainerCompBuilder,
19+
} from "../pageLayoutComp/pageLayoutCompBuilder";
20+
import { PageLayout } from "../pageLayoutComp/pageLayout";
21+
22+
23+
export const ContainerBaseComp = (function () {
24+
const childrenMap = {
25+
disabled: BoolCodeControl
26+
};
27+
28+
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
29+
30+
const [siderCollapsed, setSiderCollapsed] = useState(false);
31+
32+
return (
33+
<DisabledContext.Provider value={props.disabled}>
34+
<PageLayout {...props} siderCollapsed={siderCollapsed} setSiderCollapsed={setSiderCollapsed} />
35+
</DisabledContext.Provider>
36+
);
37+
})
38+
.setPropertyViewFn((children) => {
39+
return (
40+
<>
41+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
42+
<Section name={sectionNames.interaction}>
43+
{disabledPropertyView(children)}
44+
{hiddenPropertyView(children)}
45+
{ children.container.appSelectorPropertyView()}
46+
</Section>
47+
)}
48+
49+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
50+
<><Section name={sectionNames.layout}>
51+
{children.container.getPropertyView()}
52+
</Section>
53+
<Section name={sectionNames.style}>
54+
{ children.container.stylePropertyView() }
55+
</Section>
56+
{children.container.children.showHeader.getView() && (
57+
<Section name={"Header Style"}>
58+
{ children.container.headerStylePropertyView() }
59+
</Section>
60+
)}
61+
{children.container.children.showSider.getView() && (
62+
<Section name={"Sider Style"}>
63+
{ children.container.siderStylePropertyView() }
64+
</Section>
65+
)}
66+
<Section name={"Body Style"}>
67+
{ children.container.bodyStylePropertyView() }
68+
</Section>
69+
{children.container.children.showFooter.getView() && (
70+
<Section name={"Footer Style"}>
71+
{ children.container.footerStylePropertyView() }
72+
</Section>
73+
)}
74+
</>
75+
)}
76+
</>
77+
);
78+
})
79+
.build();
80+
})();
81+
82+
// Compatible with old data
83+
function convertOldContainerParams(params: CompParams<any>) {
84+
// convert older params to old params
85+
let tempParams = oldContainerParamsToNew(params);
86+
87+
if (tempParams.value) {
88+
const container = tempParams.value.container;
89+
// old params
90+
if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
91+
const autoHeight = tempParams.value.autoHeight;
92+
const scrollbars = tempParams.value.scrollbars;
93+
return {
94+
...tempParams,
95+
value: {
96+
container: {
97+
showHeader: true,
98+
body: { 0: { view: container } },
99+
showFooter: false,
100+
showSider: true,
101+
autoHeight: autoHeight,
102+
contentScrollbars: scrollbars,
103+
},
104+
},
105+
};
106+
}
107+
}
108+
return tempParams;
109+
}
110+
111+
112+
class ContainerTmpComp extends ContainerBaseComp {
113+
constructor(params: CompParams<any>) {
114+
super(convertOldContainerParams(params));
115+
}
116+
}
117+
118+
const PageLayoutCompTmP = withExposingConfigs(ContainerTmpComp, [
119+
NameConfigHidden,
120+
NameConfigDisabled,
121+
122+
new NameConfig("container", trans("export.ratingValueDesc")),
123+
new CompDepsConfig(
124+
"siderCollapsed",
125+
(comp) => ({ data : comp.children.container.children.siderCollapsed.nodeWithoutCache()}),
126+
(input) => input.data.value, trans("listView.itemsDesc")
127+
),
128+
]);
129+
130+
export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [
131+
132+
{
133+
method: {
134+
name: "setSiderCollapsed",
135+
description: "Set the Sider of the PageLayout to be collapsed or not",
136+
params: [{ name: "collapsed", type: "boolean" }],
137+
},
138+
execute: (comp, values) => {
139+
const page = values[0] as number;
140+
if (page && page > 0) {
141+
// comp.children.pagination.children.pageNo.dispatchChangeValueAction(page);
142+
}
143+
},
144+
}
145+
]);
146+
147+
type ContainerDataType = ToDataType<ContainerChildren<{}>>;
148+
149+
export function defaultPageLayoutData(
150+
compName: string,
151+
nameGenerator: NameGenerator
152+
): ContainerDataType {
153+
return {
154+
container: {
155+
header: toSimpleContainerData([
156+
{
157+
item: {
158+
compType: "navigation",
159+
name: nameGenerator.genItemName("pageNavigation"),
160+
comp: {
161+
logoUrl: "",
162+
hidden: false,
163+
items: [
164+
{
165+
label: "Home",
166+
hidden: false,
167+
active: false,
168+
},
169+
{
170+
label: "Services",
171+
hidden: false,
172+
active: false,
173+
items: [
174+
{
175+
label: "Lowcode Platform",
176+
hidden: false,
177+
active: false,
178+
},
179+
{
180+
label: "App Development",
181+
hidden: false,
182+
active: false,
183+
},
184+
],
185+
},
186+
{
187+
label: "About",
188+
hidden: false,
189+
active: false,
190+
},
191+
],
192+
},
193+
},
194+
layoutItem: {
195+
i: "",
196+
h: 6,
197+
w: 24,
198+
x: 0,
199+
y: 0,
200+
},
201+
},
202+
]),
203+
},
204+
};
205+
}

‎client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,8 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
191191
/>
192192
);
193193

194+
//console.log("appView", appView);
195+
194196
if (readOnly) {
195197
return (
196198
<TabLayoutViewContainer>

‎client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
116116
const rowCount = this.children.containerRowCount.getView();
117117
return (
118118
<div>
119-
<ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} hidePlaceholder={false}>
119+
<ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} $hideplaceholder={false}>
120120
<ModuleLayoutView
121121
positionParams={this.children.positionParams.getView()}
122122
containerSize={this.children.containerSize.getView()}

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const SliderBasicComp = (function () {
3333
value={props.value.value}
3434
$style={props.style}
3535
style={{margin: 0}}
36+
// FALK TODO : vertical={true}
3637
onChange={(e) => {
3738
props.value.onChange(e);
3839
props.onEvent("change");

‎client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export const SliderStyled = styled(Slider)<{ $style: SliderStyleType }>`
4949
${(props) => props.$style && getStyle(props.$style)}
5050
`;
5151

52+
// Falk TODO: height: 300px;
5253
export const SliderWrapper = styled.div`
5354
width: 100%;
5455
display: inline-flex;

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { MultiCompBuilder } from "comps/generators";
2+
import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
3+
4+
const children = {
5+
view: SimpleContainerComp,
6+
// FIXME: keep extensible
7+
};
8+
9+
export const ContainerBodyChildComp = new MultiCompBuilder(children, (props, dispatch) => {
10+
return {
11+
...props,
12+
dispatch: dispatch,
13+
};
14+
})
15+
// TODO
16+
.setPropertyViewFn(() => <></>)
17+
.build();

0 commit comments

Comments
 (0)