vertical and horizontal scrollbar

MenamAfzal · MenamAfzal · commit ec73757787a8 · 2024-08-01T04:15:33.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -186,7 +186,8 @@ export function ListView(props: Props) {
     [children.noOfRows]
   );
   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(
@@ -286,7 +287,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} overflow={autoHeight?'hidden':'scroll'}>
+          <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);
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -49,7 +49,8 @@ const childrenMap = {
   heightUnitOfRow: withDefault(NumberControl, 1),
   container: ContextContainerComp,
   autoHeight: AutoHeightControl,
-  scrollbars: withDefault(BoolControl, false),
+  showVerticalScrollbar: withDefault(BoolControl, false),
+  showHorizontalScrollbar: withDefault(BoolControl, false),
   showBorder: BoolControl,
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
   style: styleControl(ListViewStyle, 'style'),
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -62,9 +62,14 @@ export function listPropertyView(compType: ListCompType) {
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {(!children.autoHeight.getView()) && 
+                children.showVerticalScrollbar.propertyView({
+                label: trans("prop.showVerticalScrollbar"),
+               }  
+              )}
               {(!children.autoHeight.getView() || children.horizontal.getView()) && 
-                children.scrollbars.propertyView({
-                label: trans("prop.scrollbar"),
+                children.showHorizontalScrollbar.propertyView({
+                label: trans("prop.showHorizontalScrollbar"),
                }  
               )}
               {children.horizontal.propertyView({
