fix: notification prevent interaction on elements which under it (#34716

) * fix: notification prevent interaction on elements which under it close #34700 * fix test case
ant-design · Mar 25, 2022 · 1935ece · 1935ece
1 parent c7553c2
commit 1935ece
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 69 deletions.
diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -188,7 +188,7 @@ Array [
 `;
 
 exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `

diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap
@@ -188,7 +188,7 @@ Array [
 `;
 
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/notification/demo/update.md correctly 1`] = `

diff --git a/components/notification/__tests__/placement.test.js b/components/notification/__tests__/placement.test.js
@@ -41,8 +41,9 @@ describe('Notification.placement', () => {
       });
       style = getStyle($$('.ant-notification-top')[0]);
       expect(style.top).toBe('50px');
-      expect(style.left).toBe('0px');
-      expect(style.right).toBe('0px');
+      expect(style.left).toBe('50%');
+      expect(style.transform).toBe('translateX(-50%)');
+      expect(style.right).toBe('');
       expect(style.bottom).toBe('');
 
       open({
@@ -86,8 +87,9 @@ describe('Notification.placement', () => {
       });
       style = getStyle($$('.ant-notification-bottom')[0]);
       expect(style.top).toBe('');
-      expect(style.left).toBe('0px');
-      expect(style.right).toBe('0px');
+      expect(style.left).toBe('50%');
+      expect(style.transform).toBe('translateX(-50%)');
+      expect(style.right).toBe('');
       expect(style.bottom).toBe('100px');
 
       open({

diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-通知从右上角、右下角、左下角、左上角弹出。
+使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
 
 ## en-US
 
-A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
+A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
 
 ```jsx
 import { Button, notification, Divider, Space } from 'antd';
@@ -34,40 +34,54 @@ const openNotification = placement => {
 };
 
 ReactDOM.render(
-  <div>
+  <>
     <Space>
-      <Button type="primary" onClick={() => openNotification('top')}>
-        <BorderTopOutlined />
+      <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
         top
       </Button>
-      <Button type="primary" onClick={() => openNotification('bottom')}>
-        <BorderBottomOutlined />
+      <Button
+        type="primary"
+        onClick={() => openNotification('bottom')}
+        icon={<BorderBottomOutlined />}
+      >
         bottom
       </Button>
     </Space>
     <Divider />
     <Space>
-      <Button type="primary" onClick={() => openNotification('topLeft')}>
-        <RadiusUpleftOutlined />
+      <Button
+        type="primary"
+        onClick={() => openNotification('topLeft')}
+        icon={<RadiusUpleftOutlined />}
+      >
         topLeft
       </Button>
-      <Button type="primary" onClick={() => openNotification('topRight')}>
-        <RadiusUprightOutlined />
+      <Button
+        type="primary"
+        onClick={() => openNotification('topRight')}
+        icon={<RadiusUprightOutlined />}
+      >
         topRight
       </Button>
     </Space>
     <Divider />
     <Space>
-      <Button type="primary" onClick={() => openNotification('bottomLeft')}>
-        <RadiusBottomleftOutlined />
+      <Button
+        type="primary"
+        onClick={() => openNotification('bottomLeft')}
+        icon={<RadiusBottomleftOutlined />}
+      >
         bottomLeft
       </Button>
-      <Button type="primary" onClick={() => openNotification('bottomRight')}>
-        <RadiusBottomrightOutlined />
+      <Button
+        type="primary"
+        onClick={() => openNotification('bottomRight')}
+        icon={<RadiusBottomrightOutlined />}
+      >
         bottomRight
       </Button>
     </Space>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
@@ -87,8 +87,9 @@ function getPlacementStyle(
   switch (placement) {
     case 'top':
       style = {
-        left: 0,
-        right: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
         top,
         bottom: 'auto',
       };
@@ -109,8 +110,9 @@ function getPlacementStyle(
       break;
     case 'bottom':
       style = {
-        left: 0,
-        right: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        right: 'auto',
         top: 'auto',
         bottom,
       };

diff --git a/components/notification/style/index.less b/components/notification/style/index.less
@@ -16,25 +16,6 @@
   z-index: @zindex-notification;
   margin-right: @notification-margin-edge;
 
-  &-top,
-  &-bottom,
-  &-topLeft,
-  &-bottomLeft {
-    margin-right: 0;
-    margin-left: @notification-margin-edge;
-
-    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
-    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
-      animation-name: NotificationLeftFadeIn;
-    }
-  }
-
-  &-top,
-  &-bottom {
-    margin-right: auto;
-    margin-left: auto;
-  }
-
   &-close-icon {
     font-size: @font-size-base;
     cursor: pointer;
@@ -206,18 +187,6 @@
   }
 }
 
-@keyframes NotificationLeftFadeIn {
-  0% {
-    right: @notification-width;
-    opacity: 0;
-  }
-
-  100% {
-    right: 0;
-    opacity: 1;
-  }
-}
-
 @keyframes NotificationFadeOut {
   0% {
     max-height: 150px;
@@ -235,3 +204,4 @@
 }
 
 @import './rtl';
+@import './placement';
diff --git a/components/notification/style/placement.less b/components/notification/style/placement.less
@@ -0,0 +1,68 @@
+.@{notification-prefix-cls} {
+  &-top,
+  &-bottom {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &-top {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationTopFadeIn;
+    }
+  }
+
+  &-bottom {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationBottomFadeIn;
+    }
+  }
+
+  &-topLeft,
+  &-bottomLeft {
+    margin-right: 0;
+    margin-left: @notification-margin-edge;
+
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationLeftFadeIn;
+    }
+  }
+}
+
+@keyframes NotificationTopFadeIn {
+  0% {
+    margin-top: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationBottomFadeIn {
+  0% {
+    margin-bottom: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-bottom: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationLeftFadeIn {
+  0% {
+    right: @notification-width;
+    opacity: 0;
+  }
+
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}