chore: zIndex

Author: zombieJ

src/DrawerPopup.tsx

@@ -25,6 +25,7 @@ export interface DrawerPopupProps {
  // Root
  rootClassName?: string;
  rootStyle?: React.CSSProperties;
+ zIndex?: number;
 
  // Drawer
  placement?: Placement;
@@ -69,6 +70,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  // Root
  rootClassName,
  rootStyle,
+ zIndex,
 
  // Drawer
  className,
@@ -153,6 +155,12 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  }
  };
 
+ // =========================== zIndex ===========================
+ const zIndexStyle: React.CSSProperties = {};
+ if (zIndex) {
+ zIndexStyle.zIndex = zIndex;
+ }
+
  // ============================ Mask ============================
  const maskNode: React.ReactNode = mask && (
  <CSSMotion key="mask" {...maskMotion} visible={open}>
@@ -167,6 +175,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  style={{
  ...motionMaskStyle,
  ...maskStyle,
+ ...zIndexStyle,
  }}
  onClick={maskClosable && onClose}
  />
@@ -203,6 +212,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
  style={{
  ...wrapperStyle,
  ...contentWrapperStyle,
+ ...zIndexStyle,
  }}
  >
  <CSSMotion

tests/index.spec.tsx

@@ -255,4 +255,17 @@ describe('rc-drawer-menu', () => {
  expect(onClose).not.toHaveBeenCalled();
  });
  });
+
+ it('zIndex', () => {
+ const { container } = render(
+ <Drawer zIndex={93} open getContainer={false} />,
+ );
+
+ expect(container.querySelector('.rc-drawer-mask')).toHaveStyle({
+ zIndex: 93,
+ });
+ expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+ zIndex: 93,
+ });
+ });
 });