scrollbar added

Author: MenamAfzal

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>;
@@ -62,6 +70,7 @@ export const ScrollBar = ({
   className,
   children,
   style,
+  overflow,
   scrollableNodeProps,
   hideScrollbar = false,
   $hideplaceholder = false,
@@ -72,12 +81,16 @@ export const ScrollBar = ({
   const combinedStyle = { ...style, height }; // Example of combining height with passed style
 
   return hideScrollbar ? (
-    <ScrollBarWrapper className={className}>
+    <ScrollBarWrapper className={className} $overflow={overflow}>
       {children}
     </ScrollBarWrapper>
   ) : (
-    <ScrollBarWrapper className={className}>
-      <SimpleBar style={combinedStyle} scrollableNodeProps={scrollableNodeProps} {...otherProps}>
+    <ScrollBarWrapper className={className} $overflow={overflow}>
+      <SimpleBar
+        style={combinedStyle}
+        scrollableNodeProps={scrollableNodeProps}
+        {...otherProps}
+      >
         {children}
       </SimpleBar>
     </ScrollBarWrapper>

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

@@ -286,7 +286,7 @@ export function ListView(props: Props) {
     <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={!scrollbars} overflow={autoHeight?'hidden':'scroll'}>
             <ReactResizeDetector
               onResize={(width?: number, height?: number) => {
                 if (height) setListHeight(height);