Skip to content

Commit 9d9a137

Browse files
author
FalkWolsky
committed
Adding Tree and Treeselect to Layout Mode
1 parent 82b5bc5 commit 9d9a137

File tree

4 files changed

+86
-38
lines changed

4 files changed

+86
-38
lines changed

‎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: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ 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";
2828
import { stateComp } from "comps/generators/simpleGenerators";
2929
import { trans } from "i18n";
@@ -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%;
@@ -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,

0 commit comments

Comments
 (0)