pull from dev

Author: MenamAfzal

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

@@ -41,11 +41,14 @@ const DrawerWrapper = styled.div`
   }
 `;
 
-const StyledDrawer = styled(Drawer)<{$titleAlign?: string}>`
+const StyledDrawer = styled(Drawer)<{$titleAlign?: string, $drawerScrollbar: boolean}>`
   .ant-drawer-header-title {
     margin: 0px 20px !important;
     text-align: ${(props) => props.$titleAlign || "center"};
   }
+  div.ant-drawer-body div.react-grid-layout::-webkit-scrollbar {
+    display: ${(props) => props.$drawerScrollbar ? "block" : "none"};
+  }
 `;
 
 const ButtonStyle = styled(Button)<{$closePosition?: string, $title? :string}>`
@@ -93,6 +96,7 @@ let TmpDrawerComp = (function () {
       titleAlign: HorizontalAlignmentControl,
       horizontalGridCells: SliderControl,
       autoHeight: AutoHeightControl,
+      drawerScrollbar: withDefault(BoolControl, true),
       style: styleControl(DrawerStyle),
       placement: PositionControl,
       closePosition: withDefault(LeftRightControl, "left"),
@@ -137,6 +141,7 @@ let TmpDrawerComp = (function () {
               }}
               title={props.title}
               $titleAlign={props.titleAlign}
+              $drawerScrollbar={props.drawerScrollbar}
               closable={false}
               placement={props.placement}
               open={props.visible.value}
@@ -209,6 +214,7 @@ let TmpDrawerComp = (function () {
           {children.horizontalGridCells.propertyView({
             label: trans('prop.horizontalGridCells'),
           })}
+          {children.drawerScrollbar.propertyView({ label: trans("prop.drawerScrollbar") })}
           {children.maskClosable.propertyView({
             label: trans("prop.maskClosable"),
           })}

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,8 @@ export const en = {
     "showHorizontalScrollbar" : "Show Horizontal Scrollbar",
     "siderScrollbar" : "Show Scrollbars in Sider",
     "mainScrollbar": "Show Scrollbars in main content",
+    "modalScrollbar": "Show Scrollbars in Modal",
+    "drawerScrollbar": "Show Scrollbars in Drawer",
     "siderRight" : "Show sider on the Right",
     "siderWidth" : "Sider Width",
     "siderWidthTooltip" : "Sider width supports percentages (%) and pixels (px).",

translations/locales/en.js

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

translations/locales/en.ts

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