fix(toast): refactor to position center. close #1389

components/toast/index.web.tsx

@@ -1,8 +1,7 @@
-/* tslint:disable:no-unused-variable */
 import React from 'react';
-/* tslint:enable:no-unused-variable */
 import Notification from 'rc-notification';
 import Icon from '../icon';
+import classnames from 'classnames';
 
 let messageInstance;
 let prefixCls = 'am-toast';
@@ -14,9 +13,12 @@ function getMessageInstance(mask) {
   }
   messageInstance = (Notification as any).newInstance({
     prefixCls,
-    style: { top: (mask ? 0 : '50%')  },
+    style: { }, // clear rc-notification default style
     transitionName: 'am-fade',
-    className: mask ? `${prefixCls}-mask` : '',
+    className: classnames({
+      [`${prefixCls}-mask`]: mask,
+      [`${prefixCls}-nomask`]: !mask,
+    }),
   });
   return messageInstance;
 }

components/toast/style/index.less

@@ -16,19 +16,26 @@
     justify-content: center;
     align-items: center;
     left: 0;
+    top: 0;
+    .@{toastPrefixCls}-notice {
+      max-width: 50%;
+    }
   }
 
-  &-notice {
-    width: auto;
-    vertical-align: middle;
+  &&-nomask {
     position: absolute;
+    max-width: 50%;
+    width: auto;
     left: 50%;
+    top: 50%;
+    .@{toastPrefixCls}-notice {
+      transform: translateX(-50%) translateY(-50%);
+    }
   }
 
+
+
   &-notice-content {
-    position: relative;
-    right: 50%;
-    display: block;
 
     .@{toastPrefixCls}-text {
       min-width: 1.2rem;

package.json

@@ -44,7 +44,7 @@
     "rc-dialog": "~6.5.7",
     "rc-drawer": "~0.4.9",
     "rc-input-number": "~3.4.13",
-    "rc-notification": "~1.4.1",
+    "rc-notification": "~2.0.0",
     "rc-slider": "~7.0.1",
     "rc-steps": "~2.5.1",
     "rc-swipeout": "~1.3.0",