fix(Message): should clear when use same option (dotnetcore#6513)

* doc: 更新示例

* fix: 防止多次添加相同 Id

* doc: 更新示例

* refactor: 增加取消动画逻辑

* refactor: 更新变量名称

* chore: 增加 null 赋值

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Messages.razor.cs

@@ -33,16 +33,16 @@ private async Task ShowAsyncMessage()
         _option.IsAutoHide = false;
         _option.Delay = 3000;
         _option.Content = Localizer["MessagesAsyncDemoStep1Text"];
-        _option.Color = Color.Info;
+        _option.Color = Color.Primary;
         await MessageService.Show(_option);
 
         await Task.Delay(3000);
         _option.Content = Localizer["MessagesAsyncDemoStep2Text"];
-        _option.IsAutoHide = true;
         _option.Color = Color.Info;
         await MessageService.Show(_option);
 
         await Task.Delay(2000);
+        _option.IsAutoHide = true;
         _option.Content = Localizer["MessagesAsyncDemoStep3Text"];
         _option.Color = Color.Success;
 

src/BootstrapBlazor/Components/Message/Message.razor.js

@@ -14,12 +14,18 @@ export function show(id, msgId) {
         return
     }
 
-    const msgItem = { el, animationId: null }
-    msg.items.push(msgItem)
-    const autoHide = el.getAttribute('data-bb-autohide') === 'true';
+    let msgItem = msg.items.find(i => i.el.id === msgId)
+    if (msgItem === void 0) {
+        msgItem = { el, animationId: null }
+        msg.items.push(msgItem)
+    }
 
+    if (msgItem.animationId) {
+        cancelAnimationFrame(msgItem.animationId);
+    }
+
+    const autoHide = el.getAttribute('data-bb-autohide') === 'true';
     if (autoHide) {
-        // auto close
         const delay = parseInt(el.getAttribute('data-bb-delay'));
         let start = void 0
         const autoCloseAnimation = ts => {
@@ -45,10 +51,8 @@ export function show(id, msgId) {
         const hideHandler = setTimeout(function () {
             clearTimeout(hideHandler);
 
-            // remove Id
             msg.items.pop();
             if (msg.items.length === 0) {
-                // call server method prepare remove dom
                 msg.invoke.invokeMethodAsync(msg.callback);
             }
         }, 500);
@@ -58,9 +62,8 @@ export function show(id, msgId) {
         e.preventDefault();
         e.stopPropagation();
 
-        // trigger on-dismiss event callback
         const alert = e.delegateTarget.closest('.alert');
-        if(alert) {
+        if (alert) {
             const alertId = alert.getAttribute('id');
             msg.invoke.invokeMethodAsync('Dismiss', alertId);
         }
@@ -74,6 +77,7 @@ export function dispose(id) {
         msg.items.forEach(item => {
             if (item.animationId) {
                 cancelAnimationFrame(item.animationId);
+                item.animationId = null;
             }
         });
     }