Merge pull request #1055 from MenamAfzal/feat/toggle-modal-close

toggle modal close

Author: FalkWolsky

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>

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",