Merge pull request #1091 from MenamAfzal/json-components-height

Json components height

Author: raheeliftikhar5

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";
@@ -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, BoolControl } from "@lowcoder-ee/index.sdk";
 
 /**
  * JsonEditor Comp
  */
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{$height: boolean; $showVerticalScrollbar: boolean}>`
   background-color: #fff;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
-  overflow: auto;
   height: 100%;
+  overflow-y: ${props => (props.$showVerticalScrollbar ? 'scroll' : 'auto')};
 `;
 
 /**
@@ -63,11 +64,13 @@ function fixOldDataSecond(oldData: any) {
 }
 
 const childrenMap = {
-  value: jsonValueExposingStateControl("value", defaultData),
+  value: jsonValueExposingStateControl('value', defaultData),
   onEvent: ChangeEventHandlerControl,
-  label: withDefault(LabelControl, { position: "column" }),
+  autoHeight: withDefault(AutoHeightControl,'auto'),
+  showVerticalScrollbar:BoolControl,
+  label: withDefault(LabelControl, {position: 'column'}),
   style: styleControl(JsonEditorStyle, 'style'),
-  animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   ...formDataChildren,
 };
 
@@ -77,6 +80,8 @@ let JsonEditorTmpComp = (function () {
 
     const wrapperRef = useRef<HTMLDivElement>(null);
     const view = useRef<EditorViewType | null>(null);
+    const initialized = useRef(false);
+    const state = useRef<EditorState | null>(null);
     const editContent = useRef<string>();
     const { extensions } = useExtensions({
       codeType: "PureJSON",
@@ -99,15 +104,21 @@ 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 });
       }
     }, [wrapperRef.current]);
 
+    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({
         doc: JSON.stringify(props.value.value, null, 2),
@@ -121,7 +132,16 @@ let JsonEditorTmpComp = (function () {
     return props.label({
       style: props.style,
       animationStyle: props.animationStyle,
-      children: <Wrapper ref={wrapperRef} onFocus={() => (editContent.current = "focus")} />,
+      children: (
+        <ScrollBar hideScrollbar={!props.showVerticalScrollbar}>
+          <Wrapper
+            ref={wrapperRef}
+            onFocus={() => (editContent.current = 'focus')}
+            $height={props.autoHeight}
+            $showVerticalScrollbar={props.showVerticalScrollbar}
+          />
+        </ScrollBar>
+      ),
     });
   })
     .setPropertyViewFn((children) => {
@@ -139,7 +159,13 @@ let JsonEditorTmpComp = (function () {
               {hiddenPropertyView(children)}
             </Section>
           )}
-
+          <Section name={trans('prop.height')}>
+            {children.autoHeight.propertyView({ label: trans('prop.height') })}
+          </Section>
+          {!children.autoHeight.getView()&&<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") && (
             <>
@@ -160,7 +186,7 @@ JsonEditorTmpComp = migrateOldData(JsonEditorTmpComp, fixOldDataSecond);
 
 JsonEditorTmpComp = class extends JsonEditorTmpComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
 

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";
@@ -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
@@ -44,7 +45,7 @@ const JsonExplorerContainer = styled.div<{
   ${(props) => props.$animationStyle}
   height: 100%;
   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;
@@ -53,6 +54,8 @@ const JsonExplorerContainer = styled.div<{
 let JsonExplorerTmpComp = (function () {
   const childrenMap = {
     value: withDefault(ArrayOrJSONObjectControl, JSON.stringify(defaultData, null, 2)),
+    autoHeight: withDefault(AutoHeightControl, 'auto'),
+    showVerticalScrollbar:BoolControl,
     indent: withDefault(NumberControl, 4),
     expandToggle: BoolControl.DEFAULT_TRUE,
     theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
@@ -66,22 +69,24 @@ let JsonExplorerTmpComp = (function () {
         $theme={props.theme as keyof typeof bgColorMap}
         $animationStyle={props.animationStyle}
       >
-        <ReactJson
-          name={false}
-          src={props.value}
-          theme={props.theme as ThemeKeys}
-          collapsed={!props.expandToggle}
-          displayDataTypes={false}
-          indentWidth={props.indent}
-        />
+        <ScrollBar hideScrollbar={!props.showVerticalScrollbar}>
+          <ReactJson
+            name={false}
+            src={props.value}
+            theme={props.theme as ThemeKeys}
+            collapsed={!props.expandToggle}
+            displayDataTypes={false}
+            indentWidth={props.indent}
+          />
+        </ScrollBar>
       </JsonExplorerContainer>
-    )
+    );
   })
     .setPropertyViewFn((children) => {
       return (
         <>
           <Section name={sectionNames.basic}>
-            {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
+             {children.value.propertyView({ label: trans("export.jsonEditorDesc") })}
           </Section>
 
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
@@ -96,7 +101,14 @@ let JsonExplorerTmpComp = (function () {
               {children.indent.propertyView({ label: trans("jsonExplorer.indent") })}
             </Section>
           )}
-
+          <Section name={trans('prop.height')}>
+            {children.autoHeight.propertyView({label: trans('prop.height')})}
+          </Section>
+          {!children.autoHeight.getView()&&<Section name={sectionNames.layout}>
+            {children.showVerticalScrollbar.propertyView({
+              label: trans('prop.showVerticalScrollbar'),
+            })}
+          </Section>}
           {(useContext(EditorContext).editorModeStatus === 'layout' ||
             useContext(EditorContext).editorModeStatus === 'both') && (
             <>
@@ -118,7 +130,7 @@ let JsonExplorerTmpComp = (function () {
 
 JsonExplorerTmpComp = class extends JsonExplorerTmpComp {
   override autoHeight(): boolean {
-    return false;
+    return this.children.autoHeight.getView();
   }
 };
 

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
   },
 };

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -198,7 +198,7 @@ export const en = {
     "toggleClose": "Enable Close Button",
     "showMask": "Show Mask",
     "textOverflow": "Text Overflow",
-    "scrollbar" : "Show Scrollbars",
+    "scrollbar": "Show Scrollbars",
     "siderScrollbar" : "Show Scrollbars in Sider",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",