From e8008ccd705ae1a5944879c19f86d9cae85dd653 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 03:15:10 +0500 Subject: [PATCH 01/15] autoheight in json comps --- .../comps/comps/jsonComp/jsonEditorComp.tsx | 18 +++++++++++------- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 12 +++++++++--- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index b6f3c4a26..ffd0199ad 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -21,17 +21,18 @@ import { import { useExtensions } from "base/codeEditor/extensions"; import { EditorContext } from "comps/editorState"; import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; /** * JsonEditor Comp */ -const Wrapper = styled.div` +const Wrapper = styled.div<{$height:boolean}>` background-color: #fff; border: 1px solid #d7d9e0; border-radius: 4px; overflow: auto; - height: 100%; + height: ${props=>props.$height?'100%':'300px'}; `; /** @@ -63,11 +64,12 @@ function fixOldDataSecond(oldData: any) { } const childrenMap = { - value: jsonValueExposingStateControl("value", defaultData), + value: jsonValueExposingStateControl('value', defaultData), onEvent: ChangeEventHandlerControl, - label: withDefault(LabelControl, { position: "column" }), + autoHeight: AutoHeightControl, + label: withDefault(LabelControl, {position: 'column'}), style: styleControl(JsonEditorStyle, 'style'), - animationStyle: styleControl(AnimationStyle , 'animationStyle'), + animationStyle: styleControl(AnimationStyle, 'animationStyle'), ...formDataChildren, }; @@ -121,7 +123,7 @@ let JsonEditorTmpComp = (function () { return props.label({ style: props.style, animationStyle: props.animationStyle, - children: (editContent.current = "focus")} />, + children: (editContent.current = "focus")} $height={props.autoHeight}/>, }); }) .setPropertyViewFn((children) => { @@ -139,7 +141,9 @@ let JsonEditorTmpComp = (function () { {hiddenPropertyView(children)} )} - +
+ {children.autoHeight.propertyView({ label: trans('prop.height') })} +
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index ceb6adff2..87f84e387 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -14,6 +14,7 @@ import { useContext, useEffect } from "react"; import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; import { styleControl } from "@lowcoder-ee/comps/controls/styleControl"; import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; +import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; /** * JsonExplorer Comp @@ -40,9 +41,10 @@ const bgColorMap = { const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap; $animationStyle: AnimationStyleType; + $height: boolean }>` ${(props) => props.$animationStyle} - height: 100%; + height: ${props => props.$height ?'100%':'300px'}; overflow-y: scroll; background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"}; border: 1px solid #d7d9e0; @@ -53,6 +55,7 @@ const JsonExplorerContainer = styled.div<{ let JsonExplorerTmpComp = (function () { const childrenMap = { value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)), + autoHeight: AutoHeightControl, indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), @@ -63,6 +66,7 @@ let JsonExplorerTmpComp = (function () { return ( @@ -81,7 +85,7 @@ let JsonExplorerTmpComp = (function () { return ( <>
- {children.value.propertyView({ label: trans("export.jsonEditorDesc") })} + {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
{(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && ( @@ -96,7 +100,9 @@ let JsonExplorerTmpComp = (function () { {children.indent.propertyView({ label: trans("jsonExplorer.indent") })} )} - +
+ {children.autoHeight.propertyView({label: trans('prop.height')})} +
{(useContext(EditorContext).editorModeStatus === 'layout' || useContext(EditorContext).editorModeStatus === 'both') && ( <> From 6f6668411923f1b00bd73bcc7931bd1e9ff121e8 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 13:40:42 +0500 Subject: [PATCH 02/15] scrollbar added --- .../src/comps/comps/jsonComp/jsonEditorComp.tsx | 10 +++++++--- .../src/comps/comps/jsonComp/jsonExplorerComp.tsx | 10 +++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index ffd0199ad..950e110d2 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -27,12 +27,16 @@ import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; * JsonEditor Comp */ -const Wrapper = styled.div<{$height:boolean}>` +const Wrapper = styled.div<{$height: boolean}>` background-color: #fff; border: 1px solid #d7d9e0; border-radius: 4px; - overflow: auto; - height: ${props=>props.$height?'100%':'300px'}; + overflow: scroll; + height: ${(props) => (props.$height ? '100%' : '300px')}; + &::-webkit-scrollbar { + width: 16px; + display:block !important; + } `; /** diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 87f84e387..f99d8c78d 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -41,15 +41,19 @@ const bgColorMap = { const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap; $animationStyle: AnimationStyleType; - $height: boolean + $height: boolean; }>` ${(props) => props.$animationStyle} - height: ${props => props.$height ?'100%':'300px'}; + height: ${(props) => (props.$height ? '100%' : '300px')}; overflow-y: scroll; - background-color: ${(props) => bgColorMap[props.$theme] || "#ffffff"}; + background-color: ${(props) => bgColorMap[props.$theme] || '#ffffff'}; border: 1px solid #d7d9e0; border-radius: 4px; padding: 10px; + &::-webkit-scrollbar { + width: 16px; + display: block !important; + } `; let JsonExplorerTmpComp = (function () { From 1e7d1c0c878b5b36db33dec419582961a26ed06a Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 13:48:46 +0500 Subject: [PATCH 03/15] tree style updated --- .../packages/lowcoder/src/constants/themeConstants.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 6f1e4e7a5..7d0b4062e 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -164,6 +164,15 @@ const checkbox = { } } +const tree = { + ...input.inputFieldStyle, + labelStyle: { + borderWidth: '0px', + }, + style: { background: theme.primarySurface } + +} + export const defaultTheme: ThemeDetail = { ...theme, @@ -197,5 +206,6 @@ export const defaultTheme: ThemeDetail = { select: select, multiSelect: select, treeSelect: select, + tree:tree }, }; From 4299c677403f09a735c64ff6a48627d9843cde19 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 18:45:59 +0500 Subject: [PATCH 04/15] translation added --- client/packages/lowcoder/src/i18n/locales/en.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 08e7c7aa8..53c31973c 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -198,7 +198,8 @@ export const en = { "toggleClose": "Enable Close Button", "showMask": "Show Mask", "textOverflow": "Text Overflow", - "scrollbar" : "Show Scrollbars", + "scrollbar": "Show Scrollbars", + "showVerticalScrollbar" : "Show Vertical Scrollbar", "siderScrollbar" : "Show Scrollbars in Sider", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width", From a21a5751a4f98d70fbcd2572576162d08630d42a Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 18:48:53 +0500 Subject: [PATCH 05/15] scrollbar toggle --- .../comps/comps/jsonComp/jsonEditorComp.tsx | 19 +++++++++++++++---- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 10 +++++++++- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 950e110d2..7fbed782a 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -21,13 +21,13 @@ import { import { useExtensions } from "base/codeEditor/extensions"; import { EditorContext } from "comps/editorState"; import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; -import { AutoHeightControl } from "@lowcoder-ee/index.sdk"; +import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk"; /** * JsonEditor Comp */ -const Wrapper = styled.div<{$height: boolean}>` +const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar:boolean}>` background-color: #fff; border: 1px solid #d7d9e0; border-radius: 4px; @@ -35,7 +35,7 @@ const Wrapper = styled.div<{$height: boolean}>` height: ${(props) => (props.$height ? '100%' : '300px')}; &::-webkit-scrollbar { width: 16px; - display:block !important; + display: ${props=>props.$showVerticalScrollbar&&'block !important'}; } `; @@ -71,6 +71,7 @@ const childrenMap = { value: jsonValueExposingStateControl('value', defaultData), onEvent: ChangeEventHandlerControl, autoHeight: AutoHeightControl, + showVerticalScrollbar:BoolControl, label: withDefault(LabelControl, {position: 'column'}), style: styleControl(JsonEditorStyle, 'style'), animationStyle: styleControl(AnimationStyle, 'animationStyle'), @@ -127,7 +128,14 @@ let JsonEditorTmpComp = (function () { return props.label({ style: props.style, animationStyle: props.animationStyle, - children: (editContent.current = "focus")} $height={props.autoHeight}/>, + children: ( + (editContent.current = 'focus')} + $height={props.autoHeight} + $showVerticalScrollbar={props.showVerticalScrollbar} + /> + ), }); }) .setPropertyViewFn((children) => { @@ -148,6 +156,9 @@ let JsonEditorTmpComp = (function () {
{children.autoHeight.propertyView({ label: trans('prop.height') })}
+
+ {children.showVerticalScrollbar.propertyView({label:trans('prop.showVerticalScrollbar')})} +
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index f99d8c78d..7dcb3b0e2 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -42,6 +42,7 @@ const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap; $animationStyle: AnimationStyleType; $height: boolean; + $showVerticalScrollbar:boolean; }>` ${(props) => props.$animationStyle} height: ${(props) => (props.$height ? '100%' : '300px')}; @@ -52,7 +53,7 @@ const JsonExplorerContainer = styled.div<{ padding: 10px; &::-webkit-scrollbar { width: 16px; - display: block !important; + display: ${props=>props.$showVerticalScrollbar&&'block !important'}; } `; @@ -60,6 +61,7 @@ let JsonExplorerTmpComp = (function () { const childrenMap = { value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)), autoHeight: AutoHeightControl, + showVerticalScrollbar:BoolControl, indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, theme: dropdownControl(themeOptions, 'shapeshifter:inverted'), @@ -73,6 +75,7 @@ let JsonExplorerTmpComp = (function () { $height={props.autoHeight} $theme={props.theme as keyof typeof bgColorMap} $animationStyle={props.animationStyle} + $showVerticalScrollbar={props.showVerticalScrollbar} > {children.autoHeight.propertyView({label: trans('prop.height')})} +
+ {children.showVerticalScrollbar.propertyView({ + label: trans('prop.showVerticalScrollbar'), + })} +
{(useContext(EditorContext).editorModeStatus === 'layout' || useContext(EditorContext).editorModeStatus === 'both') && ( <> From da731f2054568cb3fafead4a30e43b94ebb97e72 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 19:32:55 +0500 Subject: [PATCH 06/15] scroll fixed --- .../src/comps/comps/jsonComp/jsonEditorComp.tsx | 12 ++++++------ .../src/comps/comps/jsonComp/jsonExplorerComp.tsx | 8 ++++---- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 7fbed782a..418ea191d 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -31,8 +31,8 @@ const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar:boolean}>` background-color: #fff; border: 1px solid #d7d9e0; border-radius: 4px; - overflow: scroll; - height: ${(props) => (props.$height ? '100%' : '300px')}; + overflow-y: scroll; + height: ${(props) => (props.$height ? '100%' : '200px')}; &::-webkit-scrollbar { width: 16px; display: ${props=>props.$showVerticalScrollbar&&'block !important'}; @@ -70,7 +70,7 @@ function fixOldDataSecond(oldData: any) { const childrenMap = { value: jsonValueExposingStateControl('value', defaultData), onEvent: ChangeEventHandlerControl, - autoHeight: AutoHeightControl, + autoHeight: withDefault(AutoHeightControl,'auto'), showVerticalScrollbar:BoolControl, label: withDefault(LabelControl, {position: 'column'}), style: styleControl(JsonEditorStyle, 'style'), @@ -156,9 +156,9 @@ let JsonEditorTmpComp = (function () {
{children.autoHeight.propertyView({ label: trans('prop.height') })}
-
+ {!children.autoHeight.getView()&&
{children.showVerticalScrollbar.propertyView({label:trans('prop.showVerticalScrollbar')})} -
+
} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> @@ -179,7 +179,7 @@ JsonEditorTmpComp = migrateOldData(JsonEditorTmpComp, fixOldDataSecond); JsonEditorTmpComp = class extends JsonEditorTmpComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 7dcb3b0e2..05d525a64 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -60,7 +60,7 @@ const JsonExplorerContainer = styled.div<{ let JsonExplorerTmpComp = (function () { const childrenMap = { value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)), - autoHeight: AutoHeightControl, + autoHeight: withDefault(AutoHeightControl, 'auto'), showVerticalScrollbar:BoolControl, indent: withDefault(NumberControl, 4), expandToggle: BoolControl.DEFAULT_TRUE, @@ -110,11 +110,11 @@ let JsonExplorerTmpComp = (function () {
{children.autoHeight.propertyView({label: trans('prop.height')})}
-
+ {!children.autoHeight.getView()&&
{children.showVerticalScrollbar.propertyView({ label: trans('prop.showVerticalScrollbar'), })} -
+
} {(useContext(EditorContext).editorModeStatus === 'layout' || useContext(EditorContext).editorModeStatus === 'both') && ( <> @@ -136,7 +136,7 @@ let JsonExplorerTmpComp = (function () { JsonExplorerTmpComp = class extends JsonExplorerTmpComp { override autoHeight(): boolean { - return false; + return this.children.autoHeight.getView(); } }; From 042525a34df5f4304644b0b3fc9741a82f97852a Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 19:54:32 +0500 Subject: [PATCH 07/15] min height --- .../lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 418ea191d..2dfae919f 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -32,7 +32,8 @@ const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar:boolean}>` border: 1px solid #d7d9e0; border-radius: 4px; overflow-y: scroll; - height: ${(props) => (props.$height ? '100%' : '200px')}; + min-height:200px; + height: 100%; &::-webkit-scrollbar { width: 16px; display: ${props=>props.$showVerticalScrollbar&&'block !important'}; From 96c44d3f2a9308f39bca567c15573b09d523cd84 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 20:47:47 +0500 Subject: [PATCH 08/15] min-height removed --- .../lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 2dfae919f..825d5433e 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -32,7 +32,6 @@ const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar:boolean}>` border: 1px solid #d7d9e0; border-radius: 4px; overflow-y: scroll; - min-height:200px; height: 100%; &::-webkit-scrollbar { width: 16px; From 774b2aa6ce2d7a1265a7136f7aeab449d0e78150 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Tue, 6 Aug 2024 20:52:18 +0500 Subject: [PATCH 09/15] height adjusted --- .../lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 05d525a64..fb9b52e05 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -45,7 +45,7 @@ const JsonExplorerContainer = styled.div<{ $showVerticalScrollbar:boolean; }>` ${(props) => props.$animationStyle} - height: ${(props) => (props.$height ? '100%' : '300px')}; + height: 100%; overflow-y: scroll; background-color: ${(props) => bgColorMap[props.$theme] || '#ffffff'}; border: 1px solid #d7d9e0; From 9b7f49babb15c33728bec39f7a3059dfb21e4289 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Wed, 7 Aug 2024 00:28:40 +0500 Subject: [PATCH 10/15] scrollbar comp used --- .../comps/comps/jsonComp/jsonExplorerComp.tsx | 30 ++++++++----------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index fb9b52e05..775c9c932 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -1,4 +1,4 @@ -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { UICompBuilder, withDefault } from "../../generators"; import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import ReactJson, { type ThemeKeys } from "react-json-view"; @@ -41,8 +41,6 @@ const bgColorMap = { const JsonExplorerContainer = styled.div<{ $theme: keyof typeof bgColorMap; $animationStyle: AnimationStyleType; - $height: boolean; - $showVerticalScrollbar:boolean; }>` ${(props) => props.$animationStyle} height: 100%; @@ -51,10 +49,6 @@ const JsonExplorerContainer = styled.div<{ border: 1px solid #d7d9e0; border-radius: 4px; padding: 10px; - &::-webkit-scrollbar { - width: 16px; - display: ${props=>props.$showVerticalScrollbar&&'block !important'}; - } `; let JsonExplorerTmpComp = (function () { @@ -72,21 +66,21 @@ let JsonExplorerTmpComp = (function () { return ( - + + + - ) + ); }) .setPropertyViewFn((children) => { return ( From 8d632f7335d2ace84d8c393ab73cf020df0dfd5c Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Wed, 7 Aug 2024 21:47:07 +0500 Subject: [PATCH 11/15] Scroll Fixed in JSONEditor Comp --- .../comps/comps/jsonComp/jsonEditorComp.tsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 825d5433e..6237c1229 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -1,4 +1,4 @@ -import { Section, sectionNames } from "lowcoder-design"; +import { ScrollBar, Section, sectionNames } from "lowcoder-design"; import { UICompBuilder } from "../../generators"; import { NameConfigHidden, NameConfig, withExposingConfigs } from "../../generators/withExposing"; import { defaultData } from "./jsonConstants"; @@ -27,16 +27,12 @@ import { AutoHeightControl, BoolControl } from "@lowcoder-ee/index.sdk"; * JsonEditor Comp */ -const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar:boolean}>` +const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar: boolean}>` background-color: #fff; border: 1px solid #d7d9e0; border-radius: 4px; - overflow-y: scroll; height: 100%; - &::-webkit-scrollbar { - width: 16px; - display: ${props=>props.$showVerticalScrollbar&&'block !important'}; - } + overflow-y: ${props => (props.$showVerticalScrollbar ? 'scroll' : 'auto')}; `; /** @@ -129,12 +125,17 @@ let JsonEditorTmpComp = (function () { style: props.style, animationStyle: props.animationStyle, children: ( - (editContent.current = 'focus')} - $height={props.autoHeight} - $showVerticalScrollbar={props.showVerticalScrollbar} - /> + + + + (editContent.current = 'focus')} + $height={props.autoHeight} + $showVerticalScrollbar={props.showVerticalScrollbar} + /> + + ), }); }) @@ -157,8 +158,9 @@ let JsonEditorTmpComp = (function () { {children.autoHeight.propertyView({ label: trans('prop.height') })} {!children.autoHeight.getView()&&
- {children.showVerticalScrollbar.propertyView({label:trans('prop.showVerticalScrollbar')})} -
} + {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})} + +} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> From 002c5adceed19e3756e8f2c091c9215fdad20c47 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 8 Aug 2024 01:38:05 +0500 Subject: [PATCH 12/15] editor issue fixed --- .../src/comps/comps/jsonComp/jsonEditorComp.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 6237c1229..256ad5374 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -107,9 +107,16 @@ let JsonEditorTmpComp = (function () { doc: JSON.stringify(props.value.value, null, 2), extensions, }); - view.current = new EditorView({ state, parent: wrapperRef.current }); + view.current = new EditorView({state, parent: wrapperRef.current}); } - }, [wrapperRef.current]); + if (wrapperRef.current&&(props.showVerticalScrollbar||!props.showVerticalScrollbar)) { + const state = EditorState.create({ + doc: JSON.stringify(props.value.value, null, 2), + extensions, + }); + view.current = new EditorView({state, parent: wrapperRef.current}); + } + }, [wrapperRef.current, props.showVerticalScrollbar]); if (wrapperRef.current && view.current && !editContent.current) { const state = EditorState.create({ @@ -125,8 +132,6 @@ let JsonEditorTmpComp = (function () { style: props.style, animationStyle: props.animationStyle, children: ( - - - ), }); }) From 46c6887ff71d16fff3c3f9367e1970e28d2634a9 Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 8 Aug 2024 04:37:22 +0500 Subject: [PATCH 13/15] duplicate editor data fixed --- .../comps/comps/jsonComp/jsonEditorComp.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 256ad5374..97264b6a2 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -80,6 +80,8 @@ let JsonEditorTmpComp = (function () { const wrapperRef = useRef(null); const view = useRef(null); + const initialized = useRef(false); + const state = useRef(null); const editContent = useRef(); const { extensions } = useExtensions({ codeType: "PureJSON", @@ -102,21 +104,20 @@ let JsonEditorTmpComp = (function () { }); useEffect(() => { - if (wrapperRef.current && !view.current) { - const state = EditorState.create({ + if (!initialized.current && wrapperRef.current) { + state.current = EditorState.create({ doc: JSON.stringify(props.value.value, null, 2), extensions, }); - view.current = new EditorView({state, parent: wrapperRef.current}); - } - if (wrapperRef.current&&(props.showVerticalScrollbar||!props.showVerticalScrollbar)) { - const state = EditorState.create({ - doc: JSON.stringify(props.value.value, null, 2), - extensions, - }); - view.current = new EditorView({state, parent: wrapperRef.current}); } }, [wrapperRef.current, props.showVerticalScrollbar]); + + useEffect(() => { + if (state.current&&wrapperRef.current) { + view.current = new EditorView({ state: state.current, parent: wrapperRef.current }); + initialized.current = true; + } + }, [props.showVerticalScrollbar]) if (wrapperRef.current && view.current && !editContent.current) { const state = EditorState.create({ From 80a46ccff5e6dc2475a59f827675bcdd37bf2c2f Mon Sep 17 00:00:00 2001 From: Meenam Afzal Date: Thu, 8 Aug 2024 04:42:56 +0500 Subject: [PATCH 14/15] extra dependency removed --- .../lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 97264b6a2..3faf487a6 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -110,8 +110,8 @@ let JsonEditorTmpComp = (function () { extensions, }); } - }, [wrapperRef.current, props.showVerticalScrollbar]); - + }, [wrapperRef.current]); + useEffect(() => { if (state.current&&wrapperRef.current) { view.current = new EditorView({ state: state.current, parent: wrapperRef.current }); From 0a1c92071558edccf8521c8b01aca5c8dddf5c14 Mon Sep 17 00:00:00 2001 From: MenamAfzal Date: Thu, 8 Aug 2024 12:58:30 +0500 Subject: [PATCH 15/15] build issue resolved --- client/packages/lowcoder/src/i18n/locales/en.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 0c3b7d632..3c39a4cc5 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -199,7 +199,6 @@ export const en = { "showMask": "Show Mask", "textOverflow": "Text Overflow", "scrollbar": "Show Scrollbars", - "showVerticalScrollbar" : "Show Vertical Scrollbar", "siderScrollbar" : "Show Scrollbars in Sider", "siderRight" : "Show sider on the Right", "siderWidth" : "Sider Width",