Adding Tree and Treeselect to Layout Mode

lowcoder-org · FalkWolsky · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023
commit 9d9a137938fd593bed7f354f62e7eefa9bdfbc09
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -16,16 +16,23 @@ import {
   advancedSection,
   expandSection,
   formSection,
-  intersectSection,
+  // intersectSection,
   treeCommonChildren,
   treeDataPropertyView,
   TreeNameConfigs,
   useTree,
   valuePropertyView,
 } from "./treeUtils";
+import {
+  SelectInputInvalidConfig,
+  SelectInputValidationChildren,
+  SelectInputValidationSection,
+} from "../selectInputComp/selectInputConstants";
 import { selectInputValidate } from "../selectInputComp/selectInputConstants";
 import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { trans } from "i18n";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
@@ -140,23 +147,40 @@ let TreeBasicComp = (function () {
       <>
         <Section name={sectionNames.basic}>
           {treeDataPropertyView(children)}
-          {children.selectType.propertyView({ label: trans("tree.selectType") })}
-          {children.selectType.getView() !== "none" && valuePropertyView(children)}
-          {children.selectType.getView() === "check" &&
-            children.checkStrictly.propertyView({
-              label: trans("tree.checkStrictly"),
-              tooltip: trans("tree.checkStrictlyTooltip"),
-            })}
         </Section>
-        {formSection(children)}
-        {children.label.getPropertyView()}
-        {expandSection(
-          children,
-          children.autoExpandParent.propertyView({ label: trans("tree.autoExpandParent") })
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><SelectInputValidationSection {...children} />
+            {formSection(children)}
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {children.hidden.propertyView({ label: trans("prop.hide") })}
+              {children.disabled.propertyView({ label: trans("prop.disabled") })}
+              {children.selectType.propertyView({ label: trans("tree.selectType") })}
+              {children.selectType.getView() !== "none" && valuePropertyView(children)}
+              {children.selectType.getView() === "check" &&
+                children.checkStrictly.propertyView({
+                  label: trans("tree.checkStrictly"),
+                  tooltip: trans("tree.checkStrictlyTooltip"),
+                })}
+            </Section>
+          </>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.layout}>
+            {children.expanded.propertyView({ label: trans("tree.expanded") })}
+            {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
+            {children.showLine.propertyView({ label: trans("tree.showLine") })}
+            {children.showLine.getView() && children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
         )}
-        {intersectSection(children, children.onEvent.getPropertyView())}
-        {advancedSection(children)}
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       </>
     ))
     .build();

diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -13,17 +13,17 @@ import {
   advancedSection,
   expandSection,
   formSection,
-  intersectSection,
   treeCommonChildren,
   treeDataPropertyView,
   TreeNameConfigs,
   useTree,
   valuePropertyView,
 } from "./treeUtils";
 import { baseSelectRefMethods, getStyle } from "../selectInputComp/selectCompConstants";
-import { useSelectInputValidate } from "../selectInputComp/selectInputConstants";
+import { useSelectInputValidate, SelectInputValidationSection } from "../selectInputComp/selectInputConstants";
 import { StringControl } from "comps/controls/codeControl";
 import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
+import { selectInputValidate } from "../selectInputComp/selectInputConstants";
 import { BoolControl } from "comps/controls/boolControl";
 import { stateComp } from "comps/generators/simpleGenerators";
 import { trans } from "i18n";
@@ -34,6 +34,8 @@ import {
 } from "comps/utils/propertyUtils";
 import { BaseSelectRef } from "rc-select";
 import { RefControl } from "comps/controls/refControl";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
   width: 100%;
@@ -144,21 +146,43 @@ let TreeBasicComp = (function () {
       <>
         <Section name={sectionNames.basic}>
           {treeDataPropertyView(children)}
-          {children.selectType.propertyView({ label: trans("tree.selectType") })}
-          {valuePropertyView(children)}
-          {children.selectType.getView() === "check" &&
-            children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })}
           {placeholderPropertyView(children)}
         </Section>
-        {formSection(children)}
-        {children.label.getPropertyView()}
-        {expandSection(children)}
-        {intersectSection(children, children.onEvent.getPropertyView())}
-        {advancedSection(children, [
-          allowClearPropertyView(children),
-          showSearchPropertyView(children),
-        ])}
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><SelectInputValidationSection {...children} />
+            {formSection(children)}
+            <Section name={sectionNames.interaction}>
+              {children.onEvent.getPropertyView()}
+              {children.hidden.propertyView({ label: trans("prop.hide") })}
+              {children.disabled.propertyView({ label: trans("prop.disabled") })}
+              {children.selectType.propertyView({ label: trans("tree.selectType") })}
+              {valuePropertyView(children)}
+              {children.selectType.getView() === "check" &&
+                children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })}
+              {allowClearPropertyView(children)}
+              {showSearchPropertyView(children)}
+            </Section>
+          </>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.layout}>
+            {children.expanded.propertyView({ label: trans("tree.expanded") })}
+            {children.defaultExpandAll.propertyView({ label: trans("tree.defaultExpandAll") })}
+            {children.showLine.propertyView({ label: trans("tree.showLine") })}
+            {children.showLine.getView() && children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        )}
+
+
+
       </>
     ))
     .setExposeMethodConfigs(baseSelectRefMethods)

diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeUtils.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeUtils.tsx
@@ -107,23 +107,23 @@ export const expandSection = (children: TreeCommonComp, other?: ControlNode) =>
   </Section>
 );
 
-export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => (
+{/* export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => (
   <Section name={sectionNames.interaction}>
     {onEvent}
-    {disabledPropertyView(children)}
+    {disabledPropertyView(children)} 
   </Section>
-);
+);*/} 
 
 export const advancedSection = (children: TreeCommonComp, other?: ControlNode) => (
   <>
-    <Section name={sectionNames.advanced}>
+    {/* <Section name={sectionNames.advanced}>
       {children.showLine.propertyView({ label: trans("tree.showLine") })}
       {children.showLine.getView() &&
         children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })}
       {other}
     </Section>
     <SelectInputValidationSection {...children} />
-    <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+    <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section> */}
   </>
 );
 

diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
@@ -1000,7 +1000,7 @@ const uiCompMap: Registry = {
     name: trans("uiComp.treeCompName"),
     enName: "Tree",
     description: trans("uiComp.treeCompDesc"),
-    categories: ["layout", "itemHandling"],
+    categories: ["layout", "itemHandling", "documents"],
     icon: TreeIcon,
     keywords: trans("uiComp.treeCompKeywords"),
     comp: TreeComp,
@@ -1013,7 +1013,7 @@ const uiCompMap: Registry = {
     name: trans("uiComp.treeSelectCompName"),
     enName: "Tree Select",
     description: trans("uiComp.treeSelectCompDesc"),
-    categories: ["layout", "itemHandling"],
+    categories: ["layout", "itemHandling", "documents"],
     icon: TreeSelectIcon,
     keywords: trans("uiComp.treeSelectCompKeywords"),
     comp: TreeSelectComp,