Skip to content

Commit 9ea2379

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #553 from lowcoder-org/feat/Layout-Mode
Feat/layout mode complete
2 parents 5b450d9 + f2825a9 commit 9ea2379

File tree

7 files changed

+143
-86
lines changed

7 files changed

+143
-86
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { trans } from "i18n";
1111
import { ModuleEventListItemComp } from "./moduleEventListItemComp";
1212
import { ConfigViewSection } from "./styled";
1313
import { messageInstance } from "lowcoder-design";
14+
import { DocLink } from "lowcoder-design";
15+
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
1416

1517
const ModuleEventListComp = list(ModuleEventListItemComp);
1618

@@ -73,6 +75,9 @@ export class ModuleEventComp extends simpleMultiComp({
7375
onDelete={(i) => this.handleDelete(i)}
7476
items={children}
7577
/>
78+
<><br/><TacoMarkDown>{trans("module.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={trans("docUrls.module")} title={trans("module.documentationText")}>
79+
{trans("module.docLink")}
80+
</DocLink></>
7681
</ConfigViewSection>
7782
);
7883
}

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

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,23 @@ import {
1616
advancedSection,
1717
expandSection,
1818
formSection,
19-
intersectSection,
19+
// intersectSection,
2020
treeCommonChildren,
2121
treeDataPropertyView,
2222
TreeNameConfigs,
2323
useTree,
2424
valuePropertyView,
2525
} from "./treeUtils";
26+
import {
27+
SelectInputInvalidConfig,
28+
SelectInputValidationChildren,
29+
SelectInputValidationSection,
30+
} from "../selectInputComp/selectInputConstants";
2631
import { selectInputValidate } from "../selectInputComp/selectInputConstants";
2732
import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
2833
import { trans } from "i18n";
34+
import { useContext } from "react";
35+
import { EditorContext } from "comps/editorState";
2936

3037
type TreeStyleType = StyleConfigType<typeof TreeStyle>;
3138

@@ -140,23 +147,40 @@ let TreeBasicComp = (function () {
140147
<>
141148
<Section name={sectionNames.basic}>
142149
{treeDataPropertyView(children)}
143-
{children.selectType.propertyView({ label: trans("tree.selectType") })}
144-
{children.selectType.getView() !== "none" && valuePropertyView(children)}
145-
{children.selectType.getView() === "check" &&
146-
children.checkStrictly.propertyView({
147-
label: trans("tree.checkStrictly"),
148-
tooltip: trans("tree.checkStrictlyTooltip"),
149-
})}
150150
</Section>
151-
{formSection(children)}
152-
{children.label.getPropertyView()}
153-
{expandSection(
154-
children,
155-
children.autoExpandParent.propertyView({ label: trans("tree.autoExpandParent") })
151+
152+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
153+
<><SelectInputValidationSection {...children} />
154+
{formSection(children)}
155+
<Section name={sectionNames.interaction}>
156+
{children.onEvent.getPropertyView()}
157+
{children.hidden.propertyView({ label: trans("prop.hide") })}
158+
{children.disabled.propertyView({ label: trans("prop.disabled") })}
159+
{children.selectType.propertyView({ label: trans("tree.selectType") })}
160+
{children.selectType.getView() !== "none" && valuePropertyView(children)}
161+
{children.selectType.getView() === "check" &&
162+
children.checkStrictly.propertyView({
163+
label: trans("tree.checkStrictly"),
164+
tooltip: trans("tree.checkStrictlyTooltip"),
165+
})}
166+
</Section>
167+
</>
168+
)}
169+
170+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
171+
<Section name={sectionNames.layout}>
172+
{children.expanded.propertyView({ label: trans("tree.expanded") })}
173+
{children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
174+
{children.showLine.propertyView({ label: trans("tree.showLine") })}
175+
{children.showLine.getView() && children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
176+
</Section>
177+
)}
178+
179+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )}
180+
181+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
182+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
156183
)}
157-
{intersectSection(children, children.onEvent.getPropertyView())}
158-
{advancedSection(children)}
159-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
160184
</>
161185
))
162186
.build();

‎client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx

Lines changed: 41 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ import {
1313
advancedSection,
1414
expandSection,
1515
formSection,
16-
intersectSection,
1716
treeCommonChildren,
1817
treeDataPropertyView,
1918
TreeNameConfigs,
2019
useTree,
2120
valuePropertyView,
2221
} from "./treeUtils";
2322
import { baseSelectRefMethods, getStyle } from "../selectInputComp/selectCompConstants";
24-
import { useSelectInputValidate } from "../selectInputComp/selectInputConstants";
23+
import { useSelectInputValidate, SelectInputValidationSection } from "../selectInputComp/selectInputConstants";
2524
import { StringControl } from "comps/controls/codeControl";
2625
import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
26+
import { selectInputValidate } from "../selectInputComp/selectInputConstants";
2727
import { BoolControl } from "comps/controls/boolControl";
28-
import { stateComp } from "comps/generators/simpleGenerators";
28+
import { stateComp, withDefault } from "comps/generators/simpleGenerators";
2929
import { trans } from "i18n";
3030
import {
3131
allowClearPropertyView,
@@ -34,6 +34,8 @@ import {
3434
} from "comps/utils/propertyUtils";
3535
import { BaseSelectRef } from "rc-select";
3636
import { RefControl } from "comps/controls/refControl";
37+
import { useContext } from "react";
38+
import { EditorContext } from "comps/editorState";
3739

3840
const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
3941
width: 100%;
@@ -57,7 +59,7 @@ const childrenMap = {
5759
selectType: dropdownControl(selectTypeOptions, "single"),
5860
checkedStrategy: dropdownControl(checkedStrategyOptions, "parent"),
5961
label: LabelControl,
60-
placeholder: StringControl,
62+
placeholder: withDefault(StringControl, trans("tree.placeholder")),
6163
// TODO: more event
6264
onEvent: SelectEventHandlerControl,
6365
allowClear: BoolControl,
@@ -144,21 +146,43 @@ let TreeBasicComp = (function () {
144146
<>
145147
<Section name={sectionNames.basic}>
146148
{treeDataPropertyView(children)}
147-
{children.selectType.propertyView({ label: trans("tree.selectType") })}
148-
{valuePropertyView(children)}
149-
{children.selectType.getView() === "check" &&
150-
children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })}
151149
{placeholderPropertyView(children)}
152150
</Section>
153-
{formSection(children)}
154-
{children.label.getPropertyView()}
155-
{expandSection(children)}
156-
{intersectSection(children, children.onEvent.getPropertyView())}
157-
{advancedSection(children, [
158-
allowClearPropertyView(children),
159-
showSearchPropertyView(children),
160-
])}
161-
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
151+
152+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
153+
<><SelectInputValidationSection {...children} />
154+
{formSection(children)}
155+
<Section name={sectionNames.interaction}>
156+
{children.onEvent.getPropertyView()}
157+
{children.hidden.propertyView({ label: trans("prop.hide") })}
158+
{children.disabled.propertyView({ label: trans("prop.disabled") })}
159+
{children.selectType.propertyView({ label: trans("tree.selectType") })}
160+
{valuePropertyView(children)}
161+
{children.selectType.getView() === "check" &&
162+
children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })}
163+
{allowClearPropertyView(children)}
164+
{showSearchPropertyView(children)}
165+
</Section>
166+
</>
167+
)}
168+
169+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
170+
<Section name={sectionNames.layout}>
171+
{children.expanded.propertyView({ label: trans("tree.expanded") })}
172+
{children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
173+
{children.showLine.propertyView({ label: trans("tree.showLine") })}
174+
{children.showLine.getView() && children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
175+
</Section>
176+
)}
177+
178+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )}
179+
180+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
181+
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
182+
)}
183+
184+
185+
162186
</>
163187
))
164188
.setExposeMethodConfigs(baseSelectRefMethods)

‎client/packages/lowcoder/src/comps/comps/treeComp/treeUtils.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -107,23 +107,23 @@ export const expandSection = (children: TreeCommonComp, other?: ControlNode) =>
107107
</Section>
108108
);
109109

110-
export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => (
110+
{/* export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => (
111111
<Section name={sectionNames.interaction}>
112112
{onEvent}
113-
{disabledPropertyView(children)}
113+
{disabledPropertyView(children)}
114114
</Section>
115-
);
115+
);*/}
116116

117117
export const advancedSection = (children: TreeCommonComp, other?: ControlNode) => (
118118
<>
119-
<Section name={sectionNames.advanced}>
119+
{/* <Section name={sectionNames.advanced}>
120120
{children.showLine.propertyView({ label: trans("tree.showLine") })}
121121
{children.showLine.getView() &&
122122
children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
123123
{other}
124124
</Section>
125125
<SelectInputValidationSection {...children} />
126-
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
126+
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section> */}
127127
</>
128128
);
129129

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1000,7 +1000,7 @@ const uiCompMap: Registry = {
10001000
name: trans("uiComp.treeCompName"),
10011001
enName: "Tree",
10021002
description: trans("uiComp.treeCompDesc"),
1003-
categories: ["layout", "itemHandling"],
1003+
categories: ["layout", "itemHandling", "documents"],
10041004
icon: TreeIcon,
10051005
keywords: trans("uiComp.treeCompKeywords"),
10061006
comp: TreeComp,
@@ -1013,7 +1013,7 @@ const uiCompMap: Registry = {
10131013
name: trans("uiComp.treeSelectCompName"),
10141014
enName: "Tree Select",
10151015
description: trans("uiComp.treeSelectCompDesc"),
1016-
categories: ["layout", "itemHandling"],
1016+
categories: ["layout", "itemHandling", "documents"],
10171017
icon: TreeSelectIcon,
10181018
keywords: trans("uiComp.treeSelectCompKeywords"),
10191019
comp: TreeSelectComp,

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

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -974,6 +974,7 @@ export const en = {
974974
"code": "Code of your Custom Component",
975975
},
976976
"tree": {
977+
"placeholder": "Please Select",
977978
"selectType": "Select Type",
978979
"noSelect": "No Select",
979980
"singleSelect": "Single Select",
@@ -1893,6 +1894,8 @@ export const en = {
18931894
},
18941895
"module": {
18951896
"emptyText": "No Data",
1897+
"docLink": "Read More About Modules...",
1898+
"documentationText" : "Lowcoder Modules are complete Applications, that can get included and repeated in other Lowcoder Applications and it functions just like a single component. As modules can get embedded, they need to be able to interact with your outside apps or websites. This four settings help to support communication with a Module.",
18961899
"circularReference": "Circular Reference, Current Module/Application Cannot Be Used!",
18971900
"emptyTestInput": "The Current Module Has No Input to Test",
18981901
"emptyTestMethod": "The Current Module Has No Method to Test",
@@ -2294,49 +2297,6 @@ export const en = {
22942297
"alignment": "Alignment",
22952298
"showBorder": "Show Border"
22962299
},
2297-
docUrls: {
2298-
docHome: "https://docs.lowcoder.cloud/",
2299-
components: "https://app.lowcoder.cloud/components/{compType}",
2300-
module: "https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules",
2301-
optionList: "",
2302-
terms: "https://lowcoder.cloud/terms",
2303-
privacy: "https://lowcoder.cloud/privacy",
2304-
aboutUs: "https://lowcoder.cloud/about",
2305-
changeLog: "https://github.com/lowcoder-org/lowcoder/releases",
2306-
introVideo: "",
2307-
devNpmPlugin: "https://docs.lowcoder.cloud/lowcoder-extension/develop-data-source-plugins",
2308-
devNpmPluginText: "How to develop npm plugin",
2309-
useHost: "https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api",
2310-
eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers",
2311-
thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps",
2312-
thirdLibUrlText: "Use third-party libraries",
2313-
},
2314-
datasourceTutorial: {
2315-
mysql: "",
2316-
mongodb: "",
2317-
postgres: "",
2318-
redis: "",
2319-
es: "",
2320-
smtp: "",
2321-
clickHouse: "",
2322-
},
2323-
queryTutorial: {
2324-
js: "",
2325-
transformer: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers",
2326-
tempState: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state",
2327-
dataResponder: "https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder",
2328-
},
2329-
customComponent: {
2330-
entryUrl: "https://sdk.lowcoder.cloud/custom_component.html",
2331-
},
2332-
template: {
2333-
cloneUrl: "/apps/template-import/",
2334-
},
2335-
lowcoderUrl: {
2336-
createIssue: "https://github.com/lowcoder-org/lowcoder/issues",
2337-
discord: "https://discord.com/invite/qMG9uTmAx2",
2338-
},
2339-
23402300

23412301
// twenty-first part
23422302

@@ -2560,7 +2520,7 @@ export const en = {
25602520
"playground": {
25612521
"url": "https://app.lowcoder.cloud/playground/{compType}/1",
25622522
"data": "Current Data State",
2563-
"preview": "Preview",
2523+
"preview": "Preview (please mind, that your Editor-Layout/Logic Mode is active here too. You can set it to 'Both' in the App Editor to see all properties here too)",
25642524
"property": "Properties",
25652525
"console": "Visual Script Console",
25662526
"executeMethods": "Execute Methods",
@@ -2740,7 +2700,51 @@ export const en = {
27402700
"widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
27412701
"navStyle": "Menu Style",
27422702
"navItemStyle": "Menu Item Style"
2743-
}
2703+
},
2704+
2705+
docUrls: {
2706+
docHome: "https://docs.lowcoder.cloud/",
2707+
components: "https://app.lowcoder.cloud/components/{compType}",
2708+
module: "https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules",
2709+
optionList: "",
2710+
terms: "https://lowcoder.cloud/terms",
2711+
privacy: "https://lowcoder.cloud/privacy",
2712+
aboutUs: "https://lowcoder.cloud/about",
2713+
changeLog: "https://github.com/lowcoder-org/lowcoder/releases",
2714+
introVideo: "",
2715+
devNpmPlugin: "https://docs.lowcoder.cloud/lowcoder-extension/develop-data-source-plugins",
2716+
devNpmPluginText: "How to develop npm plugin",
2717+
useHost: "https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api",
2718+
eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers",
2719+
thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps",
2720+
thirdLibUrlText: "Use third-party libraries",
2721+
},
2722+
datasourceTutorial: {
2723+
mysql: "",
2724+
mongodb: "",
2725+
postgres: "",
2726+
redis: "",
2727+
es: "",
2728+
smtp: "",
2729+
clickHouse: "",
2730+
},
2731+
queryTutorial: {
2732+
js: "",
2733+
transformer: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers",
2734+
tempState: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state",
2735+
dataResponder: "https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder",
2736+
},
2737+
customComponent: {
2738+
entryUrl: "https://sdk.lowcoder.cloud/custom_component.html",
2739+
},
2740+
template: {
2741+
cloneUrl: "/apps/template-import/",
2742+
},
2743+
lowcoderUrl: {
2744+
createIssue: "https://github.com/lowcoder-org/lowcoder/issues",
2745+
discord: "https://discord.com/invite/qMG9uTmAx2",
2746+
},
2747+
27442748
};
27452749

27462750
// const jsonString = JSON.stringify(en, null, 2);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// file examples: en, enGB, zh, zhHK
22
// fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
33
export * from "./en";
4-
export * from "./de";
4+
// export * from "./de"; Not ready yet
55
export * from "./it";
66
export * from "@lowcoder-ee/i18n/locales/zh";
77

0 commit comments

Comments
 (0)