feat(AvatarUpload): preview when click backdrop (#7368)

* refactor(AvatarUpload): Rewrite zoom event，align the current item index.

1. Make the hover style of the delete button more prominent,
2. Rewrite zoom onclick event and set stopPropagation.

* refactor(AvatarUpload): Update unit test

* refactor(AvatarUpload): Refactor the related logic to reduce redundant calculations.

* refactor(AvatarUpload): Update unit test

* refactor(AvatarUpload): Unit test need ok uploadFile, Files search change to use PrevUrl

* refactor(AvatarUpload): Update unit test

* refactor(AvatarUpload): Update unit test

* refactor(AvatarUpload): Update unit test

* refactor: 重构代码

* chore: 更新编码方式

* style: 微调样式

* style: 更新样式

* Revert "refactor(AvatarUpload): Update unit test"

This reverts commit 7e55079.

* Revert "refactor(AvatarUpload): Update unit test"

This reverts commit 7827b37.

* Revert "refactor(AvatarUpload): Update unit test"

This reverts commit 84f274e.

* chore: 重构单元测试

* test: 增加单元测试

* test: 更新单元测试

* chore: bump version 10.1.4

---------

Co-Authored-By: jin momiji <[email protected]>
Co-authored-by: Argo Zhang <[email protected]>

Author: momijijin

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.1.4-beta07</Version>
+    <Version>10.1.4</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TValue
 @inherits UploadBase<TValue>
 
@@ -16,8 +16,9 @@
         {
             <div @key="item" class="@GetItemClassString()" id="@item.ValidateId" style="@ItemStyleString">
                 <Avatar Url="@item.PrevUrl" />
-                <div class="upload-item-actions">
-                    <span class="upload-item-delete" @onclick="@(e => OnFileDelete(item))">
+                <div class="upload-item-actions" @onclick="@(() => Preview(item))">
+                    <span class="upload-item-delete" @onclick="@(e => OnFileDelete(item))"
+                          @onclick:stopPropagation="true">
                         <i class="@DeleteIcon"></i>
                     </span>
                     @if (GetShowProgress(item))

src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
@@ -156,12 +156,24 @@ protected override async Task TriggerOnChanged(UploadFile file)
     /// <returns></returns>
     public async Task Preview()
     {
-        if(ShowPreviewList)
+        if (ShowPreviewList)
         {
             await InvokeVoidAsync("preview", PreviewerId, 0);
         }
     }
 
+    private async Task Preview(UploadFile file)
+    {
+        if (!string.IsNullOrEmpty(file.PrevUrl))
+        {
+            var index = Files.FindIndex(r => r.PrevUrl == file.PrevUrl);
+            if (index != -1)
+            {
+                await InvokeVoidAsync("preview", PreviewerId, index);
+            }
+        }
+    }
+
     private IReadOnlyCollection<ValidationResult> _results = [];
 
     /// <summary>

src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss

@@ -85,7 +85,7 @@
 }
 
 .upload .upload-body.is-list .cancel-icon {
-    margin-left: .5rem;
+    margin-inline-start: .5rem;
     color: var(--bs-danger);
 }
 
@@ -157,6 +157,14 @@
 .upload .upload-body.is-avatar .upload-item:hover .upload-item-actions .upload-item-delete {
     display: block;
     color: var(--bs-danger);
+    padding: 0.25rem;
+    border-radius: var(--bs-border-radius);
+    border: 1px solid var(--bs-danger);
+}
+
+.upload .upload-body.is-avatar .upload-item:hover .upload-item-actions .upload-item-delete:hover {
+    color: var(--bs-white);
+    background-color: var(--bs-danger);
 }
 
 .upload .upload-body.is-avatar .upload-item.is-invalid .upload-item-spin {

test/UnitTest/Components/UploadAvatarTest.cs

@@ -98,6 +98,31 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha
         });
     }
 
+    [Fact]
+    public async Task Preview_Ok()
+    {
+        var cut = Context.Render<AvatarUpload<string>>(pb =>
+        {
+            pb.Add(a => a.DefaultFileList, new List<UploadFile>()
+            {
+                new UploadFile() { PrevUrl = "./sample/preview.jpg" }
+            });
+        });
+
+        var action = cut.Find(".upload-item-actions");
+        await cut.InvokeAsync(() => action.Click());
+
+        cut.Render(pb =>
+        {
+            pb.Add(a => a.DefaultFileList, new List<UploadFile>()
+            {
+                new UploadFile() { PrevUrl = "" }
+            });
+        });
+        action = cut.Find(".upload-item-actions");
+        await cut.InvokeAsync(() => action.Click());
+    }
+
     [Fact]
     public async Task AvatarUpload_ValidateForm_Ok()
     {