lowcoder-org · FalkWolsky · Sep 17, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 31, 2024
diff --git a/client/packages/lowcoder-design/src/components/ScrollBar.tsx b/client/packages/lowcoder-design/src/components/ScrollBar.tsx
@@ -5,10 +5,15 @@ import { DebouncedFunc } from 'lodash'; // Assuming you're using lodash's Deboun
 
 // import 'simplebar-react/dist/simplebar.min.css';
 
-const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
+const ScrollBarWrapper = styled.div<{
+  $hideplaceholder?: boolean;
+  $overflow?: string;
+}>`
   min-height: 0;
-  height: 100%;
+  height: ${props => props.$overflow? props.$overflow === 'scroll' ? '300px' : '100%':'100%'
+  };
   width: 100%;
+  overflow:${props=>props.$overflow};
 
   .simplebar-scrollbar::before {
     background: rgba(139, 143, 163, 0.5) !important;
@@ -37,7 +42,9 @@ const ScrollBarWrapper = styled.div<{ $hideplaceholder?: boolean }>`
     bottom: 10px;
   }
 
-  ${props => Boolean(props.$hideplaceholder) && `
+  ${(props) =>
+    Boolean(props.$hideplaceholder) &&
+    `
     .simplebar-placeholder {
       display: none !important;
     }
@@ -50,6 +57,7 @@ interface IProps {
   children: React.ReactNode;
   className?: string;
   height?: string;
+  overflow?:string,
   style?: React.CSSProperties; // Add this line to include a style prop
   scrollableNodeProps?: {
     onScroll: DebouncedFunc<(e: any) => void>;
@@ -64,6 +72,7 @@ export const ScrollBar = ({
   className,
   children,
   style,
+  overflow,
   scrollableNodeProps,
   hideScrollbar = false,
   $hideplaceholder = false,

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -81,7 +81,7 @@ function convertOldContainerParams(params: CompParams<any>) {
     // old params
     if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
       const autoHeight = tempParams.value.autoHeight;
-      const scrollbars = tempParams.value.scrollbars;
+      const scrollbars = tempParams.value.showVerticalScrollbar;
       return {
         ...tempParams,
         value: {

diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -18,6 +18,7 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
 import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
 
@@ -29,6 +30,7 @@ const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animati
   rotate: ${(props) => props.$style.rotation};
   background-color: ${(props) => props.$style.background};
   ${props=>props.$animationStyle}
+
 `;
 
 const FooterWrapper = styled.div`
@@ -39,7 +41,8 @@ const FooterWrapper = styled.div`
 `;
 
 const BodyWrapper = styled.div<{ $autoHeight: boolean }>`
-  height: ${(props) => (props.$autoHeight ? "100%" : "calc(100% - 32px)")};
+  overflow: ${(props) => (!props.$autoHeight ? "auto" : "hidden")}; 
+  height: ${(props) => (props.$autoHeight ? "auto" : "calc(100% - 32px)")};
 `;
 
 const FlexWrapper = styled.div` 
@@ -56,8 +59,7 @@ const ListOrientationWrapper = styled.div<{
 }>`
   height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
   display: flex;
-  flex-direction: ${(props) => (props.$isHorizontal && !props.$isGrid ? "row" : "column")};
-  height: 100%;
+  flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")};
 `;
 
 type MinHorizontalWidthContextType = {
@@ -189,7 +191,8 @@ export function ListView(props: Props) {
   );
   const horizontalGridCells = useMemo(() => children.horizontalGridCells.getView(), [children.horizontalGridCells]);
   const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
-  const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]);
+  const showHorizontalScrollbar = useMemo(() => children.showHorizontalScrollbar.getView(), [children.showHorizontalScrollbar]);
+  const showVerticalScrollbar = useMemo(() => children.showVerticalScrollbar.getView(), [children.showVerticalScrollbar])
   const horizontal = useMemo(() => children.horizontal.getView(), [children.horizontal]);
   const minHorizontalWidth = useMemo(() => children.minHorizontalWidth.getView(), [children.minHorizontalWidth]);
   const noOfColumns = useMemo(
@@ -283,12 +286,14 @@ export function ListView(props: Props) {
 
   const childrenProps = childrenToProps(comp.children);
 
+  useMergeCompStyles(childrenProps, comp.dispatch);
+
   // log.debug("renders: ", renders);
   return (
     <BackgroundColorContext.Provider value={style.background}>
       <ListViewWrapper $style={style} $paddingWidth={paddingWidth} $animationStyle={animationStyle}>
         <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={horizontal ? !showHorizontalScrollbar : !showVerticalScrollbar} overflow={autoHeight ? horizontal ? 'scroll' : 'hidden' : 'scroll'}>
             <ReactResizeDetector
               onResize={(width?: number, height?: number) => {
                 if (height) setListHeight(height);
@@ -314,3 +319,4 @@ export function ListView(props: Props) {
     </BackgroundColorContext.Provider>
   );
 }
+
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -50,6 +50,8 @@ const childrenMap = {
   heightUnitOfRow: withDefault(NumberControl, 1),
   container: ContextContainerComp,
   autoHeight: AutoHeightControl,
+  showVerticalScrollbar: withDefault(BoolControl, false),
+  showHorizontalScrollbar: withDefault(BoolControl, false),
   horizontalGridCells: SliderControl,
   scrollbars: withDefault(BoolControl, false),
   showBorder: BoolControl,

diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -65,9 +65,14 @@ export function listPropertyView(compType: ListCompType) {
                 label: trans('prop.horizontalGridCells'),
               })}
               {children.autoHeight.getPropertyView()}
-              {(!children.autoHeight.getView() || children.horizontal.getView()) && 
-                children.scrollbars.propertyView({
-                label: trans("prop.scrollbar"),
+              {(!children.autoHeight.getView()) && !children.horizontal.getView()&&
+                children.showVerticalScrollbar.propertyView({
+                label: trans("prop.showVerticalScrollbar"),
+               }  
+              )}
+              {(children.horizontal.getView()) && 
+                children.showHorizontalScrollbar.propertyView({
+                label: trans("prop.showHorizontalScrollbar"),
                }  
               )}
               {children.horizontal.propertyView({

diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -158,7 +158,7 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
     return [
       this.children.autoHeight.getPropertyView(),
       this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar")}),
-      (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.contentScrollbar") }),
+      (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }),
     ];
   }
 

diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeTriContainer.tsx
@@ -88,7 +88,7 @@ export function ShapeTriContainer(props: TriContainerProps) {
   // const { showHeader, showFooter } = container;
   // When the header and footer are not displayed, the body must be displayed
   const showBody = true;
-  const scrollbars = container.scrollbars;
+  const showVerticalScrollbar = container.showVerticalScrollbar;
 
   const { items: bodyItems, ...otherBodyProps } =
   container.body["0"].children.view.getView();
@@ -120,7 +120,7 @@ export function ShapeTriContainer(props: TriContainerProps) {
               margin: "0px",
               padding: "0px",
             }}
-            hideScrollbar={!scrollbars}
+            hideScrollbar={!showVerticalScrollbar}
           >
             <div style={{ position: "relative", height: "100%" }}>
               <StylesShape 

diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -53,6 +53,7 @@ const childrenMap = {
     1: { layout: {}, items: {} },
   }),
   autoHeight: AutoHeightControl,
+  showVerticalScrollbar: withDefault(BoolControl, false),
   horizontalGridCells: SliderControl,
   scrollbars: withDefault(BoolControl, false),
   placement: withDefault(PositionControl, "top"),
@@ -237,11 +238,11 @@ const TabbedContainer = (props: TabbedContainerProps) => {
     );
     return {
       label,
-      key: tab.key,
+      key: tab.key,                                                                            
       forceRender: true,
       children: (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-          <ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
+          <ScrollBar style={{ height: props.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!props.showVerticalScrollbar} overflow={props.autoHeight ? 'hidden':'scroll'}>
             <ContainerInTab
               layout={containerProps.layout.getView()}
               items={gridItemCompToGridItems(containerProps.items.getView())}
@@ -258,8 +259,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   })
 
   return (
-    <ScrollBar style={{ height: props.autoHeight ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!props.scrollbars}>
-      <div style={{padding: props.style.margin, height: props.autoHeight ? "100%" : "auto"}}>
+      <div style={{padding: props.style.margin, height: props.autoHeight ? "auto" : "100%"}}>
         <BackgroundColorContext.Provider value={headerStyle.headerBackground}>
           <StyledTabs
             $animationStyle={props.animationStyle}
@@ -285,7 +285,6 @@ const TabbedContainer = (props: TabbedContainerProps) => {
           </StyledTabs>
         </BackgroundColorContext.Provider>
       </div>
-    </ScrollBar>
   );
 };
 
@@ -329,8 +328,8 @@ export const TabbedContainerBaseComp = (function () {
                 })}
                 {children.autoHeight.getPropertyView()}
                 {!children.autoHeight.getView() && (
-                  children.scrollbars.propertyView({
-                    label: trans("prop.scrollbar"),
+                  children.showVerticalScrollbar.propertyView({
+                    label: trans("prop.showVerticalScrollbar"),
                   })
                 )}
               </Section>
@@ -465,3 +464,4 @@ export const TabbedContainerComp = withExposingConfigs(TabbedContainerImplComp,
   new NameConfig("selectedTabKey", trans("tabbedContainer.selectedTabKeyDesc")),
   NameConfigHidden,
 ]);
+
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -107,7 +107,7 @@ export function TriContainer(props: TriContainerProps) {
   const { showHeader, showFooter, horizontalGridCells } = container;
   // When the header and footer are not displayed, the body must be displayed
   const showBody = container.showBody || (!showHeader && !showFooter);
-  const scrollbars = container.scrollbars;
+  const showVerticalScrollbar = container.showVerticalScrollbar;
 
   const { items: headerItems, ...otherHeaderProps } = container.header;
   const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
@@ -151,7 +151,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={!showVerticalScrollbar}  overflow={container.autoHeight?'hidden':'scroll'}>
               <BodyInnerGrid
                 $showBorder={showHeader}
                 {...otherBodyProps}

diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -40,6 +40,7 @@ const childrenMap = {
   showBody: BoolControl.DEFAULT_TRUE,
   showFooter: BoolControl,
   autoHeight: AutoHeightControl,
+  showVerticalScrollbar: withDefault(BoolControl, false),
   horizontalGridCells: SliderControl,
   scrollbars: withDefault(BoolControl, false),
   style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}),
@@ -138,7 +139,7 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
   heightPropertyView() {
     return [
       this.children.autoHeight.getPropertyView(),
-      (!this.children.autoHeight.getView()) && this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") })
+      (!this.children.autoHeight.getView()) && this.children.showVerticalScrollbar.propertyView({ label: trans("prop.showVerticalScrollbar") })
     ];
   }
 

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -199,7 +199,9 @@ export const en = {
     "toggleClose": "Enable Close Button",
     "showMask": "Show Mask",
     "textOverflow": "Text Overflow",
-    "scrollbar": "Show Scrollbars",
+    "scrollbar" : "Show Scrollbars",
+    "showVerticalScrollbar" : "Show Vertical Scrollbar",
+    "showHorizontalScrollbar" : "Show Horizontal Scrollbar",
     "siderScrollbar" : "Show Scrollbars in Sider",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
@@ -221,8 +223,6 @@ export const en = {
     "preventOverwriting": "Prevent overwriting styles",
     "color": "Color",
     "horizontalGridCells": "Horizontal Grid Cells",
-    "showHorizontalScrollbar": "Show Horizontal Scrollbar",
-    "showVerticalScrollbar": "Show Vertical Scrollbar",
     "timeZone": "TimeZone",
   },
   "autoHeightProp": {