diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleEventListComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleEventListComp.tsx index 721f05a67..8b47ad5c4 100644 --- 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} /> + <>
{trans("module.documentationText")}
+ {trans("module.docLink")} + ); } diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index b24c8f8a3..04db8fcc6 100644 --- 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; @@ -140,23 +147,40 @@ let TreeBasicComp = (function () { <>
{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"), - })}
- {formSection(children)} - {children.label.getPropertyView()} - {expandSection( - children, - children.autoExpandParent.propertyView({ label: trans("tree.autoExpandParent") }) + + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> + {formSection(children)} +
+ {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"), + })} +
+ + )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( +
+ {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") })} +
+ )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( +
{children.style.getPropertyView()}
)} - {intersectSection(children, children.onEvent.getPropertyView())} - {advancedSection(children)} -
{children.style.getPropertyView()}
)) .build(); diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index cde5f04dc..69cba0946 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -13,7 +13,6 @@ import { advancedSection, expandSection, formSection, - intersectSection, treeCommonChildren, treeDataPropertyView, TreeNameConfigs, @@ -21,11 +20,12 @@ import { 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 () { <>
{treeDataPropertyView(children)} - {children.selectType.propertyView({ label: trans("tree.selectType") })} - {valuePropertyView(children)} - {children.selectType.getView() === "check" && - children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })} {placeholderPropertyView(children)}
- {formSection(children)} - {children.label.getPropertyView()} - {expandSection(children)} - {intersectSection(children, children.onEvent.getPropertyView())} - {advancedSection(children, [ - allowClearPropertyView(children), - showSearchPropertyView(children), - ])} -
{children.style.getPropertyView()}
+ + {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && ( + <> + {formSection(children)} +
+ {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)} +
+ + )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( +
+ {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") })} +
+ )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( children.label.getPropertyView() )} + + {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && ( +
{children.style.getPropertyView()}
+ )} + + + )) .setExposeMethodConfigs(baseSelectRefMethods) diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeUtils.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeUtils.tsx index e539c042c..1ad7ce909 100644 --- 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) => ); -export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => ( +{/* export const intersectSection = (children: TreeCommonComp, onEvent?: ControlNode) => (
{onEvent} - {disabledPropertyView(children)} + {disabledPropertyView(children)}
-); +);*/} export const advancedSection = (children: TreeCommonComp, other?: ControlNode) => ( <> -
+ {/*
{children.showLine.propertyView({ label: trans("tree.showLine") })} {children.showLine.getView() && children.showLeafIcon.propertyView({ label: trans("tree.showLeafIcon") })} {other}
-
{hiddenPropertyView(children)}
+
{hiddenPropertyView(children)}
*/} ); diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index d24f381f3..71de8f6fd 100644 --- 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 index 3a32df08c..f77fe975c 100644 --- 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 index f19614538..74365e04b 100644 --- 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";