scrollbar toggle

MenamAfzal · MenamAfzal · commit a21a5751a4f9 · 2024-08-06T18:48:53.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -21,21 +21,21 @@ 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;
   overflow: scroll;
   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: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} $height={props.autoHeight}/>,
+      children: (
+        <Wrapper
+          ref={wrapperRef}
+          onFocus={() => (editContent.current = 'focus')}
+          $height={props.autoHeight}
+          $showVerticalScrollbar={props.showVerticalScrollbar}
+        />
+      ),
     });
   })
     .setPropertyViewFn((children) => {
@@ -148,6 +156,9 @@ let JsonEditorTmpComp = (function () {
           <Section name={trans('prop.height')}>
             {children.autoHeight.propertyView({ label: trans('prop.height') })}
           </Section>
+          <Section name={sectionNames.layout}>
+            {children.showVerticalScrollbar.propertyView({label:trans('prop.showVerticalScrollbar')})}
+          </Section>
           {(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
@@ -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,14 +53,15 @@ const JsonExplorerContainer = styled.div<{
   padding: 10px;
   &::-webkit-scrollbar {
     width: 16px;
-    display: block !important;
+    display: ${props=>props.$showVerticalScrollbar&&'block !important'};
   }
 `;
 
 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}
       >
         <ReactJson
           name={false}
@@ -107,6 +110,11 @@ let JsonExplorerTmpComp = (function () {
           <Section name={trans('prop.height')}>
             {children.autoHeight.propertyView({label: trans('prop.height')})}
           </Section>
+          <Section name={sectionNames.layout}>
+            {children.showVerticalScrollbar.propertyView({
+              label: trans('prop.showVerticalScrollbar'),
+            })}
+          </Section>
           {(useContext(EditorContext).editorModeStatus === 'layout' ||
             useContext(EditorContext).editorModeStatus === 'both') && (
             <>
