lowcoder-org · FalkWolsky · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023 · Dec 3, 2023
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleEventListComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleEventListComp.tsx
@@ -11,6 +11,8 @@ import { trans } from "i18n";
 import { ModuleEventListItemComp } from "./moduleEventListItemComp";
 import { ConfigViewSection } from "./styled";
 import { messageInstance } from "lowcoder-design";
+import { DocLink } from "lowcoder-design";
+import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 
 const ModuleEventListComp = list(ModuleEventListItemComp);
 
@@ -73,6 +75,9 @@ export class ModuleEventComp extends simpleMultiComp({
           onDelete={(i) => this.handleDelete(i)}
           items={children}
         />
+         <><br/><TacoMarkDown>{trans("module.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={trans("docUrls.module")} title={trans("module.documentationText")}>
+            {trans("module.docLink")}
+          </DocLink></>
       </ConfigViewSection>
     );
   }

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,19 +13,19 @@ 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 { stateComp, withDefault } from "comps/generators/simpleGenerators";
 import { trans } from "i18n";
 import {
   allowClearPropertyView,
@@ -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%;
@@ -57,7 +59,7 @@ const childrenMap = {
   selectType: dropdownControl(selectTypeOptions, "single"),
   checkedStrategy: dropdownControl(checkedStrategyOptions, "parent"),
   label: LabelControl,
-  placeholder: StringControl,
+  placeholder: withDefault(StringControl, trans("tree.placeholder")),
   // TODO: more event
   onEvent: SelectEventHandlerControl,
   allowClear: BoolControl,
@@ -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,

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -974,6 +974,7 @@ export const en = {
     "code": "Code of your Custom Component",
   },
   "tree": {
+    "placeholder": "Please Select",
     "selectType": "Select Type",
     "noSelect": "No Select",
     "singleSelect": "Single Select",
@@ -1893,6 +1894,8 @@ export const en = {
   },
   "module": {
     "emptyText": "No Data",
+    "docLink": "Read More About Modules...",
+    "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.",
     "circularReference": "Circular Reference, Current Module/Application Cannot Be Used!",
     "emptyTestInput": "The Current Module Has No Input to Test",
     "emptyTestMethod": "The Current Module Has No Method to Test",
@@ -2294,49 +2297,6 @@ export const en = {
     "alignment": "Alignment",
     "showBorder": "Show Border"
   },
-  docUrls: {
-    docHome: "https://docs.lowcoder.cloud/",
-    components: "https://app.lowcoder.cloud/components/{compType}",
-    module: "https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules",
-    optionList: "",
-    terms: "https://lowcoder.cloud/terms",
-    privacy: "https://lowcoder.cloud/privacy",
-    aboutUs: "https://lowcoder.cloud/about",
-    changeLog: "https://github.com/lowcoder-org/lowcoder/releases",
-    introVideo: "",
-    devNpmPlugin: "https://docs.lowcoder.cloud/lowcoder-extension/develop-data-source-plugins",
-    devNpmPluginText: "How to develop npm plugin",
-    useHost: "https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api",
-    eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers",
-    thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps",
-    thirdLibUrlText: "Use third-party libraries",
-  },
-  datasourceTutorial: {
-    mysql: "",
-    mongodb: "",
-    postgres: "",
-    redis: "",
-    es: "",
-    smtp: "",
-    clickHouse: "",
-  },
-  queryTutorial: {
-    js: "",
-    transformer: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers",
-    tempState: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state",
-    dataResponder: "https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder",
-  },
-  customComponent: {
-    entryUrl: "https://sdk.lowcoder.cloud/custom_component.html",
-  },
-  template: {
-    cloneUrl: "/apps/template-import/",
-  },
-  lowcoderUrl: {
-    createIssue: "https://github.com/lowcoder-org/lowcoder/issues",
-    discord: "https://discord.com/invite/qMG9uTmAx2",
-  },
-
 
   // twenty-first part
 
@@ -2560,7 +2520,7 @@ export const en = {
   "playground": {
     "url": "https://app.lowcoder.cloud/playground/{compType}/1",
     "data": "Current Data State",
-    "preview": "Preview",
+    "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)",
     "property": "Properties",
     "console": "Visual Script Console",
     "executeMethods": "Execute Methods",
@@ -2740,7 +2700,51 @@ export const en = {
     "widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
     "navStyle": "Menu Style",
     "navItemStyle": "Menu Item Style"
-  }
+  },
+
+  docUrls: {
+    docHome: "https://docs.lowcoder.cloud/",
+    components: "https://app.lowcoder.cloud/components/{compType}",
+    module: "https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/create-a-new-app/modules",
+    optionList: "",
+    terms: "https://lowcoder.cloud/terms",
+    privacy: "https://lowcoder.cloud/privacy",
+    aboutUs: "https://lowcoder.cloud/about",
+    changeLog: "https://github.com/lowcoder-org/lowcoder/releases",
+    introVideo: "",
+    devNpmPlugin: "https://docs.lowcoder.cloud/lowcoder-extension/develop-data-source-plugins",
+    devNpmPluginText: "How to develop npm plugin",
+    useHost: "https://docs.lowcoder.cloud/setup-and-run/self-hosting/access-local-database-or-api",
+    eventHandlerSlowdown: "https://docs.lowcoder.cloud/build-applications/app-interaction/event-handlers",
+    thirdLib: "https://docs.lowcoder.cloud/lowcoder-extension/use-third-party-libraries-in-apps",
+    thirdLibUrlText: "Use third-party libraries",
+  },
+  datasourceTutorial: {
+    mysql: "",
+    mongodb: "",
+    postgres: "",
+    redis: "",
+    es: "",
+    smtp: "",
+    clickHouse: "",
+  },
+  queryTutorial: {
+    js: "",
+    transformer: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/transformers",
+    tempState: "https://docs.lowcoder.cloud/business-logic-in-apps/write-javascript/temporary-state",
+    dataResponder: "https://docs.lowcoder.cloud/lowcoder-documentation/business-logic-in-apps/write-javascript/data-responder",
+  },
+  customComponent: {
+    entryUrl: "https://sdk.lowcoder.cloud/custom_component.html",
+  },
+  template: {
+    cloneUrl: "/apps/template-import/",
+  },
+  lowcoderUrl: {
+    createIssue: "https://github.com/lowcoder-org/lowcoder/issues",
+    discord: "https://discord.com/invite/qMG9uTmAx2",
+  },
+
 };
 
 // const jsonString = JSON.stringify(en, null, 2);

diff --git a/client/packages/lowcoder/src/i18n/locales/index.ts b/client/packages/lowcoder/src/i18n/locales/index.ts
@@ -1,7 +1,7 @@
 // file examples: en, enGB, zh, zhHK
 // fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
 export * from "./en";
-export * from "./de";
+// export * from "./de"; Not ready yet
 export * from "./it";
 export * from "@lowcoder-ee/i18n/locales/zh";