Introduce switchable Scrollbar for Module and List View

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -19,6 +19,7 @@ import { defaultTheme } from "comps/controls/styleControlConstants";
 import { checkIsMobile } from "util/commonUtils";
 import { CanvasContainerID } from "constants/domLocators";
 import { CNRootContainer } from "constants/styleSelectors";
+import { ScrollBar } from "lowcoder-design";
 
 const UICompContainer = styled.div<{ $maxWidth?: number; readOnly?: boolean; $bgColor: string }>`
   height: 100%;
@@ -112,7 +113,8 @@ export function CanvasView(props: ContainerBaseProps) {
         $bgColor={bgColor}
       >
         <div>
-          <Profiler id="Panel" onRender={profilerCallback}>
+          <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
+            <Profiler id="Panel" onRender={profilerCallback}>
             <InnerGrid
               containerPadding={rootContainerPadding}
               overflow={rootContainerOverflow}
@@ -123,6 +125,8 @@ export function CanvasView(props: ContainerBaseProps) {
               radius="0px"
             />
           </Profiler>
+          </ScrollBar>
+          
         </div>
       </UICompContainer>
     );

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

@@ -3,7 +3,7 @@ import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
 import _ from "lodash";
 import { ConstructorToView, deferAction } from "lowcoder-core";
-import { HintPlaceHolder, pageItemRender } from "lowcoder-design";
+import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
 import { RefObject, useContext, useEffect, useMemo, useRef } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import styled from "styled-components";
@@ -80,7 +80,7 @@ function ListItem(props: ListItemProps) {
   // }, []);
 
   return (
-    <ContainerInListView
+      <ContainerInListView
       layout={containerProps.layout}
       items={gridItemCompToGridItems(containerProps.items)}
       positionParams={containerProps.positionParams}
@@ -95,7 +95,7 @@ function ListItem(props: ListItemProps) {
       scrollContainerRef={scrollContainerRef}
       overflow={"hidden"}
       minHeight={minHeight}
-      enableGridLines={true}
+      enableGridLines={true}    
     />
   );
 }
@@ -125,6 +125,7 @@ export function ListView(props: Props) {
     [children.noOfRows]
   );
   const autoHeight = useMemo(() => children.autoHeight.getView(), [children.autoHeight]);
+  const scrollbars = useMemo(() => children.scrollbars.getView(), [children.scrollbars]);
   const noOfColumns = useMemo(
     () => Math.max(1, children.noOfColumns.getView()),
     [children.noOfColumns]
@@ -214,14 +215,17 @@ export function ListView(props: Props) {
     <BackgroundColorContext.Provider value={style.background}>
       <ListViewWrapper $style={style} $paddingWidth={paddingWidth}>
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
-          <ReactResizeDetector
-            onResize={(width?: number, height?: number) => {
-              if (height) setListHeight(height);
-            }}
-            observerOptions={{ box: "border-box" }}
-          >
-            <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
-          </ReactResizeDetector>
+          {scrollbars ? (
+            <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }}>
+              <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
+                <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
+              </ReactResizeDetector>}</>
+            </ScrollBar>
+          ) : (
+            <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
+              <div style={{ height: autoHeight ? "auto" : "100%" }}>{renders}</div>
+            </ReactResizeDetector>}</>
+          )}
         </BodyWrapper>
         <FooterWrapper>
           <Pagination size="small" itemRender={pageItemRender} {...pageInfo.pagination} />

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

@@ -48,6 +48,7 @@ const childrenMap = {
   heightUnitOfRow: withDefault(NumberControl, 1),
   container: ContextContainerComp,
   autoHeight: AutoHeightControl,
+  scrollbars: withDefault(BoolControl, false),
   showBorder: BoolControl,
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
   style: styleControl(ListViewStyle),

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

@@ -4,6 +4,7 @@ import { ListViewImplComp } from "./listViewComp";
 import { ListCompType } from "./listViewUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
+import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
 
 type Props = {
   comp: InstanceType<typeof ListViewImplComp>;
@@ -52,9 +53,18 @@ export function listPropertyView(compType: ListCompType) {
           </Section>
         )}
 
+        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          <Section name={sectionNames.interaction}>
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {children.scrollbars.propertyView({
+              label: trans("prop.scrollbar"),
+            })}
             </Section>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}

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

@@ -13,7 +13,7 @@ import {
 } from "lowcoder-core";
 import { RootComp } from "comps/comps/rootComp";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { valueComp, withViewFn } from "comps/generators";
+import { valueComp, withDefault, withViewFn } from "comps/generators";
 import { ToDataType, ToInstanceType } from "comps/generators/multi";
 import { HidableView, UICompBuilder } from "comps/generators/uiCompBuilder";
 import { withExposingRaw } from "comps/generators/withExposing";
@@ -22,7 +22,7 @@ import { getReduceContext, PartialReduceContext, reduceInContext } from "comps/u
 import { API_STATUS_CODES } from "constants/apiConstants";
 import { AppTypeEnum } from "constants/applicationConstants";
 import { GreyTextColor } from "constants/style";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { ReactNode, useEffect, useMemo } from "react";
 import styled from "styled-components";
 import {
@@ -38,6 +38,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { ModuleLoading } from "components/ModuleLoading";
 import { trans } from "i18n";
 import { ParamsConfig, ParamType } from "comps/controls/actionSelector/executeCompTypes";
+import { BoolControl } from "comps/controls/boolControl";
 
 const Wrapper = styled.div`
   height: 100%;
@@ -83,6 +84,7 @@ const childrenMap = {
   inputs: ModuleInputComp,
   events: eventHandlerControl(),
   autoHeight: AutoHeightControl,
+  scrollbars: withDefault(BoolControl, false),
 };
 
 type DataType = ToDataType<ToInstanceType<typeof childrenMap>>;
@@ -121,6 +123,9 @@ class ModuleTmpComp extends ModuleCompBase {
         )}
         <Section name={sectionNames.layout}>
           {!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()}
+          {this.children.scrollbars.propertyView({
+            label: trans("prop.scrollbar"),
+          })}
           {hiddenPropertyView(this.children)}
         </Section>
       </>
@@ -525,9 +530,11 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ExternalEditorContext.Provider value={moduleExternalState}>
-          {comp.moduleRootComp.getView()}
-        </ExternalEditorContext.Provider>
+        <ScrollBar style={{ height: comp.children.scrollbars.getView() ? "100%" : "auto", margin: "0px", padding: "0px" }}>
+          <ExternalEditorContext.Provider value={moduleExternalState}>
+           {comp.moduleRootComp.getView()}
+          </ExternalEditorContext.Provider>
+        </ScrollBar>
       </Wrapper>
     );
   }

client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx

@@ -1,5 +1,5 @@
 import { BoolControl } from "comps/controls/boolControl";
-import { stateComp, UICompBuilder, valueComp } from "comps/generators";
+import { stateComp, UICompBuilder, valueComp, withDefault } from "comps/generators";
 import { NameGenerator } from "comps/utils";
 import { NameAndExposingInfo } from "comps/utils/exposingTypes";
 import { trans } from "i18n";
@@ -11,7 +11,7 @@ import { CompAction, CompActionTypes } from "lowcoder-core";
 import { ReactElement, useContext } from "react";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { JSONValue } from "util/jsonTypes";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import { getAllCompItems, IContainer } from "../containerBase";
 import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
 import { GridItemsType } from "../containerComp/containerView";
@@ -67,7 +67,9 @@ function ModuleLayoutView(props: IProps) {
 
   if (readOnly) {
     return (
-      <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
+      <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
+        <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
+      </ScrollBar>
     );
   }
 
@@ -94,7 +96,8 @@ function ModuleLayoutView(props: IProps) {
   };
 
   return (
-    <CanvasView
+    <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
+      <CanvasView
       layout={layout}
       items={items}
       positionParams={{ ...positionParams, cols: parseInt(defaultGrid) }}
@@ -103,6 +106,7 @@ function ModuleLayoutView(props: IProps) {
       onLayoutChange={onLayoutChange}
       extraHeight="0px"
     />
+    </ScrollBar>
   );
 }
 
@@ -113,7 +117,8 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
     const isRowCountLocked = this.children.autoScaleCompHeight.getView();
     const rowCount = this.children.containerRowCount.getView();
     return (
-      <ModuleLayoutView
+      <div>
+        <ModuleLayoutView
         positionParams={this.children.positionParams.getView()}
         containerSize={this.children.containerSize.getView()}
         containerView={this.children.container.containerView({
@@ -133,6 +138,7 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
           });
         }}
       />
+      </div>
     );
   }
   getPropertyView() {

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

@@ -193,6 +193,7 @@ export const en = {
     "maskClosable": "Click Outside to Close",
     "showMask": "Show Mask",
     "textOverflow": "Text Overflow",
+    "scrollbar" : "Show Scrollbars",
   },
   "autoHeightProp": {
     "auto": "Auto",

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

@@ -185,7 +185,8 @@ prop: {
     showBody: "显示表体",
     showFooter: "显示表尾",
     maskClosable: "点击蒙层关闭",
-    showMask: "显示蒙层"
+    showMask: "显示蒙层",
+    scrollbar: "滚动条",
 },
 autoHeightProp: {
     auto: "自动",