Skip to content

Commit 0e2a9fd

Browse files
author
FalkWolsky
committed
Introducing Layout / Logic Mode step 2
1 parent b814ce2 commit 0e2a9fd

File tree

20 files changed

+600
-576
lines changed

20 files changed

+600
-576
lines changed

‎client/packages/lowcoder-comps/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lowcoder-comps",
3-
"version": "0.0.19",
3+
"version": "0.0.20",
44
"type": "module",
55
"license": "MIT",
66
"dependencies": {

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

Lines changed: 100 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ import ErrorBoundary from "./errorBoundary";
2424
import { Theme } from "@rjsf/antd";
2525
import { hiddenPropertyView } from "comps/utils/propertyUtils";
2626

27+
import { useContext } from "react";
28+
import { EditorContext } from "comps/editorState";
29+
2730
Theme.widgets.DateWidget = DateWidget(false);
2831
Theme.widgets.DateTimeWidget = DateWidget(true);
2932
const Form = withTheme(Theme);
@@ -106,7 +109,7 @@ function convertData(schema?: JSONSchema7, data?: any) {
106109
}
107110
}
108111

109-
// FIXME: translate more other errors
112+
// TODO: translate more other errors
110113
// refer to ajv-i18n, https://github.com/ajv-validator/ajv-i18n/blob/master/messages/index.js
111114
// https://github.com/ajv-validator/ajv/tree/6a671057ea6aae690b5967ee26a0ddf8452c6297#Validation-keywords
112115
// JSON schema refer to https://json-schema.org/understanding-json-schema/reference/
@@ -225,52 +228,105 @@ let FormBasicComp = (function () {
225228
.setPropertyViewFn((children) => {
226229
return (
227230
<>
228-
<Section name={sectionNames.basic}>
229-
{children.resetAfterSubmit.propertyView({
230-
label: trans("jsonSchemaForm.resetAfterSubmit"),
231-
})}
232-
{children.schema.propertyView({
233-
label: trans("jsonSchemaForm.jsonSchema"),
234-
tooltip: (
235-
<>
236-
{trans("jsonSchemaForm.schemaTooltip") + " "}
237-
<a
238-
href={"http://json-schema.org/learn/getting-started-step-by-step"}
239-
target={"_blank"}
240-
rel="noreferrer"
241-
>
242-
JSON schema
243-
</a>
244-
</>
245-
),
246-
})}
247-
{children.uiSchema.propertyView({
248-
label: trans("jsonSchemaForm.uiSchema"),
249-
tooltip: (
250-
<>
251-
{trans("jsonSchemaForm.schemaTooltip") + " "}
252-
<a
253-
href={
254-
"https://jsonforms.io/docs/uischema"
255-
}
256-
target={"_blank"}
257-
rel="noreferrer"
258-
>
259-
UI schema
260-
</a>
261-
</>
262-
),
263-
})}
264-
{children.data.propertyView({
265-
label: trans("jsonSchemaForm.defaultData"),
266-
})}
267-
</Section>
231+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
232+
<Section name={sectionNames.basic}>
233+
234+
{children.schema.propertyView({
235+
label: (
236+
<>
237+
{trans("jsonSchemaForm.jsonSchema") + " ("}
238+
<a
239+
href={"http://json-schema.org/learn/getting-started-step-by-step"}
240+
target={"_blank"}
241+
rel="noreferrer"
242+
>
243+
Docs 1
244+
</a>
245+
{", "}
246+
<a
247+
href={"https://jsonforms.io/examples/basic"}
248+
target={"_blank"}
249+
rel="noreferrer"
250+
>
251+
Docs 2
252+
</a>
253+
{")"}
254+
</>
255+
),
256+
tooltip: (
257+
<>
258+
{trans("jsonSchemaForm.schemaTooltip") + " "}
259+
<a
260+
href={"http://json-schema.org/learn/getting-started-step-by-step"}
261+
target={"_blank"}
262+
rel="noreferrer"
263+
>
264+
JSON schema
265+
</a>
266+
</>
267+
),
268+
})}
269+
{children.uiSchema.propertyView({
270+
label: (
271+
<>
272+
{trans("jsonSchemaForm.uiSchema") + " ("}
273+
<a
274+
href={"https://jsonforms.io/docs/uischema"}
275+
target={"_blank"}
276+
rel="noreferrer"
277+
>
278+
Docs 1
279+
</a>
280+
{", "}
281+
<a
282+
href={"https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema"}
283+
target={"_blank"}
284+
rel="noreferrer"
285+
>
286+
Docs 2
287+
</a>
288+
{")"}
289+
</>
290+
),
291+
tooltip: (
292+
<>
293+
{trans("jsonSchemaForm.schemaTooltip") + " "}
294+
<a
295+
href={
296+
"https://jsonforms.io/docs/uischema"
297+
}
298+
target={"_blank"}
299+
rel="noreferrer"
300+
>
301+
UI schema
302+
</a>
303+
</>
304+
),
305+
})}
306+
{children.data.propertyView({
307+
label: trans("jsonSchemaForm.defaultData"),
308+
})}
309+
</Section>
310+
)}
268311

269-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
312+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
313+
<Section name={sectionNames.interaction}>
314+
{children.onEvent.getPropertyView()}
315+
{hiddenPropertyView(children)}
316+
{children.resetAfterSubmit.propertyView({
317+
label: trans("jsonSchemaForm.resetAfterSubmit"),
318+
})}
319+
</Section>
320+
)}
270321

271-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
322+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
323+
<>
324+
<Section name={sectionNames.style}>
325+
{children.style.getPropertyView()}
326+
</Section>
327+
</>
328+
)}
272329

273-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
274330
</>
275331
);
276332
})

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

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { trans, transToNode } from "i18n";
22
import { Section, sectionNames } from "lowcoder-design";
33
import { ListViewImplComp } from "./listViewComp";
44
import { ListCompType } from "./listViewUtils";
5+
import { useContext } from "react";
6+
import { EditorContext } from "comps/editorState";
57

68
type Props = {
79
comp: InstanceType<typeof ListViewImplComp>;
@@ -43,12 +45,22 @@ export function listPropertyView(compType: ListCompType) {
4345
}),
4446
})}
4547
</Section>
46-
<Section name={trans("prop.pagination")}>
47-
{comp.children.pagination.getPropertyView()}
48-
</Section>
49-
<Section name={sectionNames.layout}>{children.autoHeight.getPropertyView()}</Section>
50-
{/* <Section name={sectionNames.style}>{children.showBorder.propertyView({ label: "" })}</Section> */}
51-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
48+
49+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
50+
<Section name={trans("prop.pagination")}>
51+
{comp.children.pagination.getPropertyView()}
52+
</Section>
53+
)}
54+
55+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
56+
<><Section name={sectionNames.layout}>
57+
{children.autoHeight.getPropertyView()}
58+
</Section>
59+
<Section name={sectionNames.style}>
60+
{children.style.getPropertyView()}
61+
</Section></>
62+
)}
63+
5264
</>
5365
);
5466
};

‎client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { withDefault } from "../../generators/simpleGenerators";
1313
import { trans } from "i18n";
1414
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1515
import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
16+
import { useContext } from "react";
17+
import { EditorContext } from "comps/editorState";
1618

1719
const Container = styled.div`
1820
height: 100%;
@@ -74,17 +76,21 @@ let AudioBasicComp = (function () {
7476
{children.src.propertyView({
7577
label: trans("audio.src"),
7678
})}
77-
{children.autoPlay.propertyView({
78-
label: trans("audio.autoPlay"),
79-
})}
80-
{children.loop.propertyView({
81-
label: trans("audio.loop"),
82-
})}
8379
</Section>
8480

85-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
81+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
82+
<Section name={sectionNames.interaction}>
83+
{children.onEvent.getPropertyView()}
84+
{hiddenPropertyView(children)}
85+
{children.autoPlay.propertyView({
86+
label: trans("audio.autoPlay"),
87+
})}
88+
{children.loop.propertyView({
89+
label: trans("audio.loop"),
90+
})}
91+
</Section>
92+
)}
8693

87-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
8894
</>
8995
);
9096
})

‎client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
66
import { RecordConstructorToView } from "lowcoder-core";
77
import { useRef, useState } from "react";
88
import { styleControl } from "comps/controls/styleControl";
9-
import { ImageStyle } from "comps/controls/styleControlConstants";
9+
import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
1010
import { BoolControl } from "comps/controls/boolControl";
1111
import { withDefault } from "../../generators/simpleGenerators";
1212
import { Container, playIcon } from "lowcoder-design";
@@ -17,19 +17,36 @@ import { Video } from "lowcoder-design";
1717
import ReactPlayer from "react-player";
1818
import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
1919

20+
import { useContext } from "react";
21+
import { EditorContext } from "comps/editorState";
22+
import styled, { css } from "styled-components";
23+
2024
const EventOptions = [
2125
{ label: trans("video.play"), value: "play", description: trans("video.playDesc") },
2226
{ label: trans("video.pause"), value: "pause", description: trans("video.pauseDesc") },
2327
{ label: trans("video.load"), value: "load", description: trans("video.loadDesc") },
2428
{ label: trans("video.ended"), value: "ended", description: trans("video.endedDesc") },
2529
] as const;
2630

31+
/* const StyledContainer = styled.div.attrs(props => ({
32+
style: props.style ? getStyle(props.style) : {}
33+
}))``;
34+
35+
const getStyle = (style: ImageStyleType) => {
36+
return {
37+
border: `1px solid ${style.border}`,
38+
radius: style.radius,
39+
margin: style.margin,
40+
padding: style.padding,
41+
};
42+
}; */
43+
2744
const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
2845
const videoRef = useRef<ReactPlayer | null>(null);
2946
let [posterClicked, setPosterClicked] = useState(false);
3047
return (
3148
<Container ref={props.containerRef}>
32-
<Video
49+
<Video
3350
config={{
3451
file: {
3552
forceVideo: true,
@@ -84,7 +101,7 @@ const childrenMap = {
84101
duration: numberExposingStateControl("duration"),
85102
...mediaCommonChildren,
86103
};
87-
104+
88105
let VideoBasicComp = (function () {
89106
return new UICompBuilder(childrenMap, (props) => {
90107
return <ContainerVideo {...props} />;
@@ -96,34 +113,41 @@ let VideoBasicComp = (function () {
96113
{children.src.propertyView({
97114
label: trans("video.src"),
98115
})}
99-
{children.poster.propertyView({
100-
label: trans("video.poster"),
101-
tooltip: trans("video.posterTooltip"),
102-
})}
103-
{children.autoPlay.propertyView({
104-
label: trans("video.autoPlay"),
105-
tooltip: trans("video.autoPlayTooltip"),
106-
})}
107-
{children.loop.propertyView({
108-
label: trans("video.loop"),
109-
})}
110-
{children.controls.propertyView({
111-
label: trans("video.controls"),
112-
tooltip: trans("video.controlsTooltip"),
113-
})}
114-
{children.volume.propertyView({
115-
label: trans("video.volume"),
116-
tooltip: trans("video.volumeTooltip"),
117-
})}
118-
{children.playbackRate.propertyView({
119-
label: trans("video.playbackRate"),
120-
tooltip: trans("video.playbackRateTooltip"),
121-
})}
122116
</Section>
123117

124-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
118+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
119+
120+
<><Section name={sectionNames.interaction}>
121+
{children.onEvent.getPropertyView()}
122+
{hiddenPropertyView(children)}
123+
</Section>
124+
<Section name={sectionNames.advanced}>
125+
{children.poster.propertyView({
126+
label: trans("video.poster"),
127+
tooltip: trans("video.posterTooltip"),
128+
})}
129+
{children.volume.propertyView({
130+
label: trans("video.volume"),
131+
tooltip: trans("video.volumeTooltip"),
132+
})}
133+
{children.playbackRate.propertyView({
134+
label: trans("video.playbackRate"),
135+
tooltip: trans("video.playbackRateTooltip"),
136+
})}
137+
{children.autoPlay.propertyView({
138+
label: trans("video.autoPlay"),
139+
tooltip: trans("video.autoPlayTooltip"),
140+
})}
141+
{children.loop.propertyView({
142+
label: trans("video.loop"),
143+
})}
144+
{children.controls.propertyView({
145+
label: trans("video.controls"),
146+
tooltip: trans("video.controlsTooltip"),
147+
})}
125148

126-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
149+
</Section></>
150+
)}
127151
</>
128152
);
129153
})

0 commit comments

Comments
 (0)