Modal: Added Main Content Scrollbar

Author: MenamAfzal

client/packages/lowcoder/src/comps/hooks/modalComp.tsx

@@ -29,7 +29,7 @@ const EventOptions = [
   { label: trans("modalComp.close"), value: "close", description: trans("modalComp.closeDesc") },
 ] as const;
 
-const getStyle = (style: ModalStyleType) => {
+const getStyle = (style: ModalStyleType, modalScrollbar: boolean) => {
   return css`
     .ant-modal-content {
       border-radius: ${style.radius};
@@ -49,6 +49,9 @@ const getStyle = (style: ModalStyleType) => {
         background-color: ${style.background};
       }
     }
+    div.ant-modal-body div.react-grid-layout::-webkit-scrollbar {
+      display: ${modalScrollbar ? "block" : "none"};
+    }
     .ant-modal-close {
       inset-inline-end: 10px !important;
       top: 10px;
@@ -80,8 +83,8 @@ function extractMarginValues(style: ModalStyleType) {
   return valuesarray;
 }
 
-const ModalStyled = styled.div<{ $style: ModalStyleType }>`
-  ${(props) => props.$style && getStyle(props.$style)}
+const ModalStyled = styled.div<{ $style: ModalStyleType, $modalScrollbar: boolean }>`
+  ${(props) => props.$style && getStyle(props.$style, props.$modalScrollbar)}
 `;
 
 const ModalWrapper = styled.div`
@@ -105,6 +108,7 @@ let TmpModalComp = (function () {
       autoHeight: AutoHeightControl,
       title: StringControl,
       titleAlign: HorizontalAlignmentControl,
+      modalScrollbar: withDefault(BoolControl, false),
       style: styleControl(ModalStyle),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
@@ -174,7 +178,7 @@ let TmpModalComp = (function () {
                 if (open) props.onEvent("open");
               }}
               zIndex={Layers.modal}
-              modalRender={(node) => <ModalStyled $style={props.style}>{node}</ModalStyled>}
+              modalRender={(node) => <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
               mask={props.showMask}
               className={props.className as string}
               data-testid={props.dataTestId as string}
@@ -203,6 +207,10 @@ let TmpModalComp = (function () {
             label: trans('prop.horizontalGridCells'),
           })}
           {children.autoHeight.getPropertyView()}
+          {!children.autoHeight.getView() && 
+            children.modalScrollbar.propertyView({
+              label: trans("prop.modalScrollbar")
+            })}
           {!children.autoHeight.getView() &&
             children.height.propertyView({
               label: trans("modalComp.modalHeight"),

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

@@ -204,6 +204,7 @@ export const en = {
     "showHorizontalScrollbar" : "Show Horizontal Scrollbar",
     "siderScrollbar" : "Show Scrollbars in Sider",
     "mainScrollbar": "Show Scrollbars in main content",
+    "modalScrollbar": "Show Scrollbars in Modal",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",

translations/locales/en.js

@@ -197,6 +197,7 @@ export const en = {
         "scrollbar": "Show Scrollbars",
         "siderScrollbar": "Show Scrollbars in Sider",
         "mainScrollbar": "Show Scrollbars in main content",
+        "modalScrollbar": "Show Scrollbars in Modal",
         "siderRight": "Show sider on the Right",
         "siderWidth": "Sider Width",
         "siderWidthTooltip": "Sider width supports percentages (%) and pixels (px).",

translations/locales/en.ts

@@ -202,6 +202,7 @@ export const en = {
     "scrollbar": "Show Scrollbars",
     "siderScrollbar" : "Show Scrollbars in Sider",
     "mainScrollbar": "Show Scrollbars in main content",
+    "modalScrollbar": "Show Scrollbars in Modal",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",