From b19d7fbc1e9fedefeea62b0a6065d74d7ce827a0 Mon Sep 17 00:00:00 2001
From: Meenam Afzal <meenamafzal1@gmail.com>
Date: Tue, 23 Jul 2024 20:09:45 +0500
Subject: [PATCH] toggle modal close

---
 client/packages/lowcoder/src/comps/hooks/modalComp.tsx | 9 +++++++--
 client/packages/lowcoder/src/i18n/locales/en.ts        | 1 +
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
index 834fe4842..a7e64409a 100644
--- a/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/modalComp.tsx
@@ -105,6 +105,7 @@ let TmpModalComp = (function () {
       style: styleControl(ModalStyle),
       maskClosable: withDefault(BoolControl, true),
       showMask: withDefault(BoolControl, true),
+      toggleClose:withDefault(BoolControl,true)
     },
     (props, dispatch) => {
       const userViewMode = useUserViewMode();
@@ -147,6 +148,7 @@ let TmpModalComp = (function () {
         <BackgroundColorContext.Provider value={props.style.background}>
           <ModalWrapper>
             <StyledModal
+              closable={props.toggleClose}
               height={height}
               resizeHandles={resizeHandles}
               onResizeStop={onResizeStop}
@@ -160,10 +162,10 @@ let TmpModalComp = (function () {
               $titleAlign={props.titleAlign}
               width={width}
               onCancel={(e) => {
-                props.visible.onChange(false);
+                props.toggleClose&&props.visible.onChange(false);
               }}
               afterClose={() => {
-                props.onEvent("close");
+                props.toggleClose&&props.onEvent("close");
               }}
               zIndex={Layers.modal}
               modalRender={(node) => <ModalStyled $style={props.style}>{node}</ModalStyled>}
@@ -208,6 +210,9 @@ let TmpModalComp = (function () {
           {children.showMask.propertyView({
             label: trans("prop.showMask"),
           })}
+          {children.toggleClose.propertyView({
+            label: trans("prop.toggleClose"),
+          })}
         </Section>
         <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
         <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 15bed4897..ffccf2aca 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -195,6 +195,7 @@ export const en = {
     "innerSider" : "Inner Sider",
     "showFooter": "Show Footer",
     "maskClosable": "Click Outside to Close",
+    "toggleClose": "Enable Close Button",
     "showMask": "Show Mask",
     "textOverflow": "Text Overflow",
     "scrollbar" : "Show Scrollbars",