Skip to content

Commit b814ce2

Browse files
author
FalkWolsky
committed
Introducing Layout / Logic Mode
1 parent 1d8fe40 commit b814ce2

File tree

4 files changed

+68
-42
lines changed

4 files changed

+68
-42
lines changed

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
1212
import { JsonEditorStyle } from "comps/controls/styleControlConstants";
1313
import { styleControl } from "comps/controls/styleControl";
1414
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
15-
import { useRef, useEffect } from "react";
15+
import { useRef, useEffect, useContext } from "react";
1616
import {
1717
EditorState,
1818
EditorView,
1919
type EditorView as EditorViewType,
2020
} from "base/codeEditor/codeMirror";
2121
import { useExtensions } from "base/codeEditor/extensions";
2222
import { getJsonFormatter } from "base/codeEditor/autoFormat";
23+
import { EditorContext } from "comps/editorState";
2324

2425
/**
2526
* JsonEditor Comp
@@ -124,13 +125,23 @@ let JsonEditorTmpComp = (function () {
124125
return (
125126
<>
126127
<Section name={sectionNames.basic}>
127-
{children.value.propertyView({ label: trans("prop.defaultValue") })}
128+
{children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
128129
</Section>
130+
129131
<FormDataPropertyView {...children} />
130-
{children.label.getPropertyView()}
131-
<Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
132-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
133-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
132+
133+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
134+
<Section name={sectionNames.interaction}>
135+
{children.onEvent.getPropertyView()}
136+
{hiddenPropertyView(children)}
137+
</Section>
138+
)}
139+
140+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )}
141+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
142+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
143+
)}
144+
134145
</>
135146
);
136147
})

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { dropdownControl } from "comps/controls/dropdownControl";
99
import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl";
1010
import { hiddenPropertyView } from "comps/utils/propertyUtils";
1111
import { trans } from "i18n";
12+
import { EditorContext } from "comps/editorState";
13+
import { useContext } from "react";
1214

1315
/**
1416
* JsonExplorer Comp
@@ -64,20 +66,29 @@ let JsonExplorerTmpComp = (function () {
6466
return (
6567
<>
6668
<Section name={sectionNames.basic}>
67-
{children.value.propertyView({
68-
label: trans("data"),
69-
})}
70-
{children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
71-
{children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
69+
{children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
7270
</Section>
7371

74-
<Section name={sectionNames.style}>
75-
{children.theme.propertyView({
76-
label: trans("jsonExplorer.theme"),
77-
})}
78-
</Section>
72+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
73+
<Section name={sectionNames.interaction}>
74+
{hiddenPropertyView(children)}
75+
{children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
76+
</Section>
77+
)}
78+
79+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
80+
<Section name={sectionNames.advanced}>
81+
{children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
82+
</Section>
83+
)}
7984

80-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
85+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
86+
<Section name={sectionNames.style}>
87+
{children.theme.propertyView({
88+
label: trans("jsonExplorer.theme"),
89+
})}
90+
</Section>
91+
)}
8192
</>
8293
);
8394
})

‎client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ import { styleControl } from "comps/controls/styleControl";
1010
import { LottieStyle } from "comps/controls/styleControlConstants";
1111
import { trans } from "i18n";
1212
import { Section, sectionNames } from "lowcoder-design";
13-
import { useEffect, useState } from "react";
13+
import { useEffect, useState, useContext } from "react";
1414
import { UICompBuilder, withDefault } from "../../generators";
1515
import {
1616
NameConfig,
1717
NameConfigHidden,
1818
withExposingConfigs,
1919
} from "../../generators/withExposing";
2020
import { defaultLottie } from "./jsonConstants";
21+
import { EditorContext } from "comps/editorState";
22+
2123
/**
2224
* JsonLottie Comp
2325
*/
@@ -87,23 +89,23 @@ let JsonLottieTmpComp = (function () {
8789
speed: dropdownControl(speedOptions, "1"),
8890
width: withDefault(NumberControl, 100),
8991
height: withDefault(NumberControl, 100),
90-
backgroundColor: styleControl(LottieStyle),
92+
container: styleControl(LottieStyle),
9193
animationStart: dropdownControl(animationStartOptions, "auto"),
9294
loop: dropdownControl(loopOptions, "single"),
9395
keepLastFrame: BoolControl.DEFAULT_TRUE,
9496
};
9597
return new UICompBuilder(childrenMap, (props) => {
9698
return (
9799
<div style={{
98-
padding: `${props.backgroundColor.margin}`,
100+
padding: `${props.container.margin}`,
99101
}}>
100102
<div
101103
style={{
102104
height: "100%",
103105
display: "flex",
104106
justifyContent: "center",
105-
backgroundColor: `${props.backgroundColor.background}`,
106-
padding: `${props.backgroundColor.padding}`
107+
backgroundColor: `${props.container.background}`,
108+
padding: `${props.container.padding}`
107109
}}
108110
>
109111
<Player
@@ -134,25 +136,27 @@ let JsonLottieTmpComp = (function () {
134136
{children.value.propertyView({
135137
label: trans("jsonLottie.lottieJson"),
136138
})}
137-
{children.speed.propertyView({
138-
label: trans("jsonLottie.speed"),
139-
})}
140-
{children.loop.propertyView({
141-
label: trans("jsonLottie.loop"),
142-
})}
143-
{children.animationStart.propertyView({
144-
label: trans("jsonLottie.animationStart"),
145-
})}
146-
{children.keepLastFrame.propertyView({
147-
label: trans("jsonLottie.keepLastFrame"),
148-
})}
149-
</Section>
150-
<Section name={sectionNames.style}>
151-
{children.backgroundColor.getPropertyView()}
152-
</Section>
153-
<Section name={sectionNames.layout}>
154-
{hiddenPropertyView(children)}
155139
</Section>
140+
141+
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
142+
<><Section name={sectionNames.interaction}>
143+
{children.speed.propertyView({ label: trans("jsonLottie.speed")})}
144+
{children.loop.propertyView({ label: trans("jsonLottie.loop")})}
145+
{children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})}
146+
{children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
147+
{hiddenPropertyView(children)}
148+
</Section>
149+
</>
150+
)}
151+
152+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
153+
<>
154+
<Section name={sectionNames.style}>
155+
{children.container.getPropertyView()}
156+
</Section>
157+
</>
158+
)}
159+
156160
</>
157161
);
158162
})

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1346,9 +1346,9 @@ export const en = {
13461346
},
13471347
jsonExplorer: {
13481348
indent: "Indent",
1349-
expandToggle: "Expand toggle",
1349+
expandToggle: "Expand JSON Tree",
13501350
theme: "Theme",
1351-
valueDesc: "Current json Data",
1351+
valueDesc: "Current JSON Data",
13521352
default: "Default",
13531353
defaultDark: "Default dark",
13541354
neutralLight: "Neutral light",

0 commit comments

Comments
 (0)