Merge pull request #2047 from iamfaran/fix/1290-drawer-modal

[Fix]: #1290 add zindex property for stacking issue

Author: raheeliftikhar5

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

@@ -4,7 +4,7 @@ import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBui
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { PositionControl, LeftRightControl, HorizontalAlignmentControl } from "comps/controls/dropdownControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
@@ -122,6 +122,7 @@ const childrenMap = {
   showMask: withDefault(BoolControl, true),
   toggleClose:withDefault(BoolControl,true),
   escapeClosable: withDefault(BoolControl, true),
+  zIndex: withDefault(NumberControl, Layers.drawer),
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>> & {
@@ -168,6 +169,9 @@ const DrawerPropertyView = React.memo((props: {
       {props.children.escapeClosable.propertyView({
         label: trans("prop.escapeClose"),
       })}
+      {props.children.zIndex.propertyView({
+        label: trans("prop.zIndex"),
+      })}
     </Section>
     <Section name={sectionNames.interaction}>{props.children.onEvent.getPropertyView()}</Section>
     <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
@@ -251,7 +255,7 @@ const DrawerView = React.memo((
           height={!props.autoHeight ? transToPxSize(props.height || DEFAULT_SIZE) : ""}
           onClose={onClose}
           afterOpenChange={afterOpenChange}
-          zIndex={Layers.drawer}
+          zIndex={props.zIndex}
           maskClosable={props.maskClosable}
           mask={true}
           className={clsx(`app-${appID}`, props.className)}

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

@@ -1,7 +1,7 @@
 import { ContainerCompBuilder } from "comps/comps/containerBase/containerCompBuilder";
 import { gridItemCompToGridItems, InnerGrid } from "comps/comps/containerComp/containerView";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
-import { StringControl } from "comps/controls/codeControl";
+import { StringControl, NumberControl } from "comps/controls/codeControl";
 import { booleanExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -117,7 +117,8 @@ const childrenMap = {
   style: styleControl(ModalStyle),
   maskClosable: withDefault(BoolControl, true),
   showMask: withDefault(BoolControl, true),
-  toggleClose:withDefault(BoolControl,true)
+  toggleClose:withDefault(BoolControl,true),
+  zIndex: withDefault(NumberControl, Layers.modal)
 };
 
 const ModalPropertyView = React.memo((props: {
@@ -156,6 +157,9 @@ const ModalPropertyView = React.memo((props: {
       {props.children.toggleClose.propertyView({
         label: trans("prop.toggleClose"),
       })}
+      {props.children.zIndex.propertyView({
+        label: trans("prop.zIndex"),
+      })}
     </Section>
     <Section name={sectionNames.interaction}>{props.children.onEvent.getPropertyView()}</Section>
     <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
@@ -278,7 +282,7 @@ const ModalView = React.memo((
           onCancel={handleCancel}
           afterClose={handleAfterClose}
           afterOpenChange={handleAfterOpenChange}
-          zIndex={Layers.modal}
+          zIndex={props.zIndex}
           modalRender={modalRender}
           mask={props.showMask}
           className={clsx(`app-${appID}`, props.className)}

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

@@ -239,7 +239,8 @@ export const en = {
     "timeZone": "TimeZone",
     "pickerMode": "Picker Mode",
     "customTags": "Allow Custom Tags",
-    "customTagsTooltip": "Allow users to enter custom tags that are not in the options list."
+    "customTagsTooltip": "Allow users to enter custom tags that are not in the options list.",
+    "zIndex": "z-Index"
   },
   "autoHeightProp": {
     "auto": "Auto",