From 88d8096f3e727cc2656f9e34d2be8080eddb176e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=89=E5=BC=98?= <guanghong.wsj@alibaba-inc.com>
Date: Mon, 31 Aug 2020 19:09:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Message=20=E4=B8=8D=E8=83=BD=E5=9C=A8=20?=
 =?UTF-8?q?React16=20=E7=9A=84=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F?=
 =?UTF-8?q?=E4=B8=AD=E8=B0=83=E7=94=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/MessageDemo.jsx  |  15 ++++--
 src/Message.jsx       | 119 ++++++++++++++++++++++++++----------------
 tests/Message.spec.js |  25 +++++++--
 3 files changed, 104 insertions(+), 55 deletions(-)

diff --git a/demo/MessageDemo.jsx b/demo/MessageDemo.jsx
index 931fa37..ecf8a07 100644
--- a/demo/MessageDemo.jsx
+++ b/demo/MessageDemo.jsx
@@ -17,7 +17,7 @@ Message.config({
     document.body.appendChild(div);
     return div;
   },
-  // multipleInstance: false,
+  multipleInstance: false,
 });
 
 class Demo extends React.Component {
@@ -26,11 +26,18 @@ class Demo extends React.Component {
     this.state = {};
   }
 
+  componentWillMount() {
+    const hide = Message.mask_loading('loading', 10);
+    setTimeout(() => {
+      hide();
+    }, 3000);
+  }
+
   handleClick(type) {
     Message[type](type, 3);
-    setTimeout(() => {
-       Message.clear();
-    }, 1500);
+  //   setTimeout(() => {
+  //      Message.clear();
+  //   }, 1500);
   }
 
   render() {
diff --git a/src/Message.jsx b/src/Message.jsx
index d35e95a..08c74fb 100644
--- a/src/Message.jsx
+++ b/src/Message.jsx
@@ -17,24 +17,27 @@ function createMessageInstance(options, type) {
   if (messageInstance && messageInstance.destroy) {
     messageInstance.destroy();
   }
-  let notification = null;
-  Notification.newInstance(
-    {
-      prefixCls,
-      className,
-      transitionName: type === 'mask_loading' ? '' : transitionName,
-      getContainer,
-      style: {
-        left: '50%',
-      }, // 覆盖原来的样式
-    },
-    (n) => {
-      notification = n;
-      messageInstance = n;
-    },
-  );
-
-  return notification;
+
+
+  return new Promise((resolve) => {
+    let notification = null;
+    Notification.newInstance(
+      {
+        prefixCls,
+        className,
+        transitionName: type === 'mask_loading' ? '' : transitionName,
+        getContainer,
+        style: {
+          left: '50%',
+        }, // 覆盖原来的样式
+      },
+      (n) => {
+        notification = n;
+        messageInstance = n;
+        resolve(notification);
+      },
+    );
+  });
 }
 
 function incrementCounter() {
@@ -99,38 +102,62 @@ function notice(content, duration = defaultDuration, type, onClose) {
     activeContentStyle = { padding: '23px 38px', backgroundColor: '#fff' };
   }
 
-  instance.notice({
-    key,
-    duration: options ? options.duration : duration,
-    className: options ? options.className : null,
-    style: activeWrapStyle,
-    content: (
-      <div
-        className={classnames({
-          [`${prefixCls}-container ${prefixCls}-container-${type}`]: true,
-          'fn-clear': true,
-        })}
-        style={activeContentStyle}
-      >
-        <i className={iconClass} />
-        <div className={`${prefixCls}-content`}>{options ? options.content : content}</div>
-      </div>
-    ),
-    onClose(...params) {
-      // see https://github.com/uxcore/uxcore-message/issues/17
-      decrementCounter();
-      tryRemoveMessageInstance();
-
-      const callback = (options && options.onClose) || onClose || function noop() {};
-
-      callback(...params);
-    },
-  });
+  const getNoticeFunc = () => {
+    const target = key;
+    return (inst) => {
+      inst.notice({
+        key: target,
+        duration: options ? options.duration : duration,
+        className: options ? options.className : null,
+        style: activeWrapStyle,
+        content: (
+          <div
+            className={classnames({
+              [`${prefixCls}-container ${prefixCls}-container-${type}`]: true,
+              'fn-clear': true,
+            })}
+            style={activeContentStyle}
+          >
+            <i className={iconClass} />
+            <div className={`${prefixCls}-content`}>{options ? options.content : content}</div>
+          </div>
+        ),
+        onClose(...params) {
+          // see https://github.com/uxcore/uxcore-message/issues/17
+          decrementCounter();
+          tryRemoveMessageInstance();
+
+          const callback = (options && options.onClose) || onClose || function noop() {};
+
+          callback(...params);
+        },
+      });
+    };
+  };
+
+  const noticeFunc = getNoticeFunc();
+
+  if (instance.then) {
+    instance.then((inst) => {
+      noticeFunc(inst);
+    });
+  } else {
+    noticeFunc(instance);
+  }
+
 
   return (function removeNotice() {
     const target = key;
     key += 1;
-    return () => instance.removeNotice(target);
+    return () => {
+      if (instance.then) {
+        instance.then((inst) => {
+          inst.removeNotice(target);
+        });
+      } else {
+        instance.removeNotice(target);
+      }
+    };
   }());
 }
 
diff --git a/tests/Message.spec.js b/tests/Message.spec.js
index 08be701..da82c66 100644
--- a/tests/Message.spec.js
+++ b/tests/Message.spec.js
@@ -27,8 +27,25 @@ describe('Message', () => {
       content: 'this is second msg',
       className: 'multi',
     });
-    expect($$('.multi').length).to.be(2);
-    done();
+    setTimeout(() => {
+      expect($$('.multi').length).to.be(2);
+      done();
+    });
+  });
+
+  it('should be able to close by returned handler', (done) => {
+    const hide = Message.mask_loading({
+      content: 'loading',
+      duration: 10,
+      className: 'handler-test',
+    });
+    setTimeout(() => {
+      hide();
+    }, 1000);
+    setTimeout(() => {
+      expect($$('.handler-test').length).to.be(0);
+      done();
+    }, 1500);
   });
 
   it('should call the close callback', (done) => {
@@ -69,9 +86,7 @@ describe('Message', () => {
     });
 
     const instances = Array.prototype.slice.call($$('.uxcore-icon'));
-    const matched = instances.filter(item =>
-      iconArr.indexOf(item.getAttribute('class')) !== -1,
-    );
+    const matched = instances.filter(item => iconArr.indexOf(item.getAttribute('class')) !== -1);
     expect(matched.length).to.be(instances.length);
     done();
   });