fix: should cache correctly

components/message/demo/unstack.md

@@ -2,7 +2,8 @@
 order: 4
 title:
   zh-CN: 不堆叠
-  en-US: unstack
+  en-US: Unstack
+debug: true
 ---
 
 ## zh-CN
@@ -17,12 +18,15 @@ List the messages without stack.
 import { message, Button } from 'antd';
 
 const success = function () {
-  message.config({
-    stack: false,
-  });
+  message.config({ stack: false });
   message.success('This is a unstack message');
+
+  // Should not affect other demos
+  message.config({ stack: true });
 };
 
-ReactDOM.render(<Button onClick={success}>unstack messages</Button>
-, mountNode);
+ReactDOM.render(
+  <Button onClick={success}>unstack messages</Button>,
+  mountNode
+);
 ````

components/message/index.tsx

@@ -2,38 +2,44 @@ import React from 'react';
 import Notification from 'rc-notification';
 import Icon from '../icon';
 
-let defaultDuration = 1.5;
-let defaultTop;
-let messageInstance;
-let key = 1;
+const messageInstances = {};
 let prefixCls = 'ant-message';
+let defaultTop;
 let defaultStack = true;
 
+let key = 1;
+let defaultDuration = 1.5;
+
 function getMessageInstance() {
-  messageInstance = messageInstance || Notification.newInstance({
-    prefixCls: `${!defaultStack ? `${prefixCls}-unstack ` : ''}${prefixCls}`,
-    transitionName: 'move-up',
-    style: { top: defaultTop }, // 覆盖原来的样式
-  });
-  return messageInstance;
+  const cachedKey = `${prefixCls}-${defaultTop}-${defaultStack}`;
+  if (!messageInstances[cachedKey]) {
+    messageInstances[cachedKey] = Notification.newInstance({
+      prefixCls,
+      className: defaultStack ? '' : `${prefixCls}-unstack`,
+      transitionName: 'move-up',
+      style: { top: defaultTop }, // 覆盖原来的样式
+    });
+  }
+  return messageInstances[cachedKey];
 }
 
 type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
 
+const iconTypeMap = {
+  info: 'info-circle',
+  success: 'check-circle',
+  error: 'cross-circle',
+  warning: 'exclamation-circle',
+  loading: 'loading',
+};
 function notice(
   content: React.ReactNode,
   duration: number = defaultDuration,
   type: NoticeType,
-  onClose?: () => void) {
-  let iconType = ({
-    info: 'info-circle',
-    success: 'check-circle',
-    error: 'cross-circle',
-    warning: 'exclamation-circle',
-    loading: 'loading',
-  })[type];
-
-  let instance = getMessageInstance();
+  onClose?: () => void
+) {
+  const iconType = iconTypeMap[type];
+  const instance = getMessageInstance();
   instance.notice({
     key,
     duration,
@@ -101,9 +107,11 @@ export default {
     }
   },
   destroy() {
-    if (messageInstance) {
-      messageInstance.destroy();
-      messageInstance = null;
+    for (const cachedKey in messageInstances) {
+      if (messageInstances.hasOwnProperty(cachedKey)) {
+        messageInstances[cachedKey].destroy();
+        delete messageInstances[cachedKey];
+      }
     }
   },
 };

components/message/style/index.less

@@ -28,16 +28,13 @@
   }
 
   &-unstack {
-    & .@{message-prefix-cls}-notice {
-      width: 100%;
-      display: block;
+    .@{message-prefix-cls}-notice {
       position: relative;
       margin: 0 auto 10px;
-      height: 34px;
       text-align: center;
     }
 
-    & .@{message-prefix-cls}-notice-content {
+    .@{message-prefix-cls}-notice-content {
       width: auto;
       display: inline-block;
     }