feat: 给message组件添加stack全局配置 #3543 (#3548)

components/message/demo/unstack.md

@@ -0,0 +1,28 @@
+---
+order: 4
+title:
+  zh-CN: 不堆叠
+  en-US: unstack
+---
+
+## zh-CN
+
+使每条 message 从上到下排列。
+
+## en-US
+
+List the messages without stack.
+
+````jsx
+import { message, Button } from 'antd';
+
+const success = function () {
+  message.config({
+    stack: false,
+  });
+  message.success('This is a unstack message');
+};
+
+ReactDOM.render(<Button onClick={success}>unstack messages</Button>
+, mountNode);
+````

components/message/index.en-US.md

@@ -37,6 +37,7 @@ Methods for global configuration and destruction are also provided:
 message.config({
   top: 100,
   duration: 2,
+  stack: false,
 });
 ```
 
@@ -44,3 +45,4 @@ message.config({
 |------------|------------------------------------|--------------------------|-------------|
 | top        | distance to top                    | Number                   | 24px        |
 | duration   | time before auto-dismiss,in seconds | Number                   | 1.5         |
+| stack    | list messages with stack  | Boolean                   | true         |

components/message/index.tsx

@@ -7,10 +7,11 @@ let defaultTop;
 let messageInstance;
 let key = 1;
 let prefixCls = 'ant-message';
+let defaultStack = true;
 
 function getMessageInstance() {
   messageInstance = messageInstance || Notification.newInstance({
-    prefixCls,
+    prefixCls: `${!defaultStack ? `${prefixCls}-unstack ` : ''}${prefixCls}`,
     transitionName: 'move-up',
     style: { top: defaultTop }, // 覆盖原来的样式
   });
@@ -61,6 +62,7 @@ export interface ConfigOptions {
   top?: number;
   duration?: number;
   prefixCls?: string;
+  stack?: boolean;
 }
 
 export default {
@@ -94,6 +96,9 @@ export default {
     if (options.prefixCls !== undefined) {
       prefixCls = options.prefixCls;
     }
+    if (options.stack !== undefined) {
+      defaultStack = options.stack;
+    }
   },
   destroy() {
     if (messageInstance) {

components/message/index.zh-CN.md

@@ -38,6 +38,7 @@ title: Message
 message.config({
   top: 100,
   duration: 2,
+  stack: false,
 });
 ```
 
@@ -45,3 +46,4 @@ message.config({
 |------------|--------------------|--------------------------|-------------|
 | top        | 消息距离顶部的位置 | Number                      | 24px        |
 | duration   | 默认自动关闭延时，单位秒 | Number                 | 1.5         |
+| stack      | 是否将消息重叠显示 | Boolean                 | true        |

components/message/style/index.less

@@ -27,6 +27,22 @@
     display: block;
   }
 
+  &-unstack {
+    & .@{message-prefix-cls}-notice {
+      width: 100%;
+      display: block;
+      position: relative;
+      margin: 0 auto 10px;
+      height: 34px;
+      text-align: center;
+    }
+
+    & .@{message-prefix-cls}-notice-content {
+      width: auto;
+      display: inline-block;
+    }
+  }
+
   &-success .@{iconfont-css-prefix} {
     color: @success-color;
   }