Update Scrollbars

Author: FalkWolsky

client/packages/lowcoder-design/src/components/ScrollBar.tsx

@@ -58,20 +58,19 @@ interface IProps {
   hideScrollbar?: boolean;
 }
 
-export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar, ...otherProps }: IProps) => {
+export const ScrollBar = ({ height = "100%", className, children, style, scrollableNodeProps, hideScrollbar = false, ...otherProps }: IProps) => {
   // You can now use the style prop directly or pass it to SimpleBar
   const combinedStyle = { ...style, height }; // Example of combining height with passed style
 
-  return (hideScrollbar ?? false) ? (
+  return hideScrollbar ? (
+    <ScrollBarWrapper className={className}>
+      {children}
+    </ScrollBarWrapper>
+  ) : (
     <ScrollBarWrapper className={className}>
       <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
         {children}
       </SimpleBar>
     </ScrollBarWrapper>
-  )
-  : (
-    <ScrollBarWrapper className={className}>
-      {children}
-    </ScrollBarWrapper>
   );
 };

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -215,7 +215,7 @@ export function ListView(props: Props) {
     <BackgroundColorContext.Provider value={style.background}>
       <ListViewWrapper $style={style} $paddingWidth={paddingWidth}>
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
-          <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={scrollbars}>
+          <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
             <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
               <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
             </ReactResizeDetector>}</>

client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx

@@ -505,6 +505,7 @@ class ModuleTmpComp extends ModuleCompBase {
 const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   const appId = comp.children.appId.getView();
   const error = comp.children.error.getView();
+  const scrollbars = comp.children.scrollbars.getView();
 
   const moduleExternalState: ExternalEditorContextState = useMemo(
     () => ({
@@ -530,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ScrollBar style={{ height: comp.children.scrollbars.getView() ? "100%" : "auto", margin: "0px", padding: "0px" }}>
+        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
           <ExternalEditorContext.Provider value={moduleExternalState}>
            {comp.moduleRootComp.getView()}
           </ExternalEditorContext.Provider>

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -3,7 +3,7 @@ import { JSONObject, JSONValue } from "util/jsonTypes";
 import { CompAction, CompActionTypes, deleteCompAction, wrapChildAction } from "lowcoder-core";
 import { DispatchType, RecordConstructorToView, wrapDispatch } from "lowcoder-core";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { BooleanStateControl, booleanExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
+import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -12,7 +12,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { NameGenerator } from "comps/utils";
-import { ControlNode, Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
 import React, { useCallback, useContext } from "react";
@@ -33,6 +33,7 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design";
+import { BoolControl } from "comps/controls/boolControl";
 
 const EVENT_OPTIONS = [
   {
@@ -50,9 +51,10 @@ const childrenMap = {
     1: { layout: {}, items: {} },
   }),
   autoHeight: AutoHeightControl,
+  scrollbars: withDefault(BoolControl, false),
   onEvent: eventHandlerControl(EVENT_OPTIONS),
   disabled: BoolCodeControl,
-  showHeader: withDefault(BooleanStateControl, "true"),
+  showHeader: withDefault(BoolControl, true),
   style: styleControl(TabContainerStyle),
   headerStyle: styleControl(ContainerHeaderStyle),
   bodyStyle: styleControl(ContainerBodyStyle),
@@ -211,7 +213,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   const editorState = useContext(EditorContext);
   const maxWidth = editorState.getAppSettings().maxWidth;
   const isMobile = checkIsMobile(maxWidth);
-  const showHeader = props.showHeader.value;
+  const showHeader = props.showHeader.valueOf();
   const paddingWidth = isMobile ? 8 : 0;
 
   const tabItems = visibleTabs.map((tab) => {
@@ -236,14 +238,16 @@ const TabbedContainer = (props: TabbedContainerProps) => {
       forceRender: true,
       children: (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-          <ContainerInTab
-            layout={containerProps.layout.getView()}
-            items={gridItemCompToGridItems(containerProps.items.getView())}
-            positionParams={containerProps.positionParams.getView()}
-            dispatch={childDispatch}
-            autoHeight={props.autoHeight}
-            containerPadding={[paddingWidth, 20]}
-          />
+          <ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
+            <ContainerInTab
+              layout={containerProps.layout.getView()}
+              items={gridItemCompToGridItems(containerProps.items.getView())}
+              positionParams={containerProps.positionParams.getView()}
+              dispatch={childDispatch}
+              autoHeight={props.autoHeight}
+              containerPadding={[paddingWidth, 20]}
+            />
+          </ScrollBar>
         </BackgroundColorContext.Provider>
       )
     }
@@ -307,6 +311,11 @@ export const TabbedContainerBaseComp = (function () {
             <>
               <Section name={sectionNames.layout}>
                 {children.autoHeight.getPropertyView()}
+                {!children.autoHeight.getView() && (
+                  children.scrollbars.propertyView({
+                    label: trans("prop.scrollbar"),
+                  })
+                )}
               </Section>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -147,7 +147,7 @@ export function TriContainer(props: TriContainerProps) {
       )}
       {showBody && (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-            <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={scrollbars}>
+            <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
               <BodyInnerGrid
                 $showBorder={showHeader}
                 {...otherBodyProps}

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

@@ -125,12 +125,15 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
       this.children.showHeader.propertyView({ label: trans("prop.showHeader") }),
       this.children.showBody.propertyView({ label: trans("prop.showBody") }),
       this.children.showFooter.propertyView({ label: trans("prop.showFooter") }),
-      (!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") }),
+      
     ];
   }
 
   heightPropertyView() {
-    return this.children.autoHeight.getPropertyView();
+    return [
+      this.children.autoHeight.getPropertyView(),
+      (!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") })
+    ];
   }
 
   stylePropertyView() {