feat(Carousel): add PlayMode parameter (#2252)

* feat: 增加鼠标悬停时暂停播放参数 * doc: 增加说明文档 * feat: 增加 PlayMode 参数 * test: 增加单元测试 * doc: 增加文档 * test: 更新单元测试 * chore: bump version 7.11.1-beta05
dotnetcore · Oct 10, 2023 · 0254d87 · 0254d87
1 parent b2b65c8
commit 0254d87
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 10 deletions.
diff --git a/src/BootstrapBlazor.Shared/Locales/en.json b/src/BootstrapBlazor.Shared/Locales/en.json
@@ -3619,7 +3619,9 @@
     "Images": "Images collection",
     "IsFade": "Whether to fade in and out",
     "Width": "Set the width of the picture",
-    "OnClick": "Click on the image to call back the delegate"
+    "OnClick": "Click on the image to call back the delegate",
+    "HoverPause": "If set to true, pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won’t pause it",
+    "PlayMode": "autoplay the carousel mode"
   },
   "BootstrapBlazor.Shared.Samples.Client": {
     "Title": "Get client connection information",

diff --git a/src/BootstrapBlazor.Shared/Locales/zh.json b/src/BootstrapBlazor.Shared/Locales/zh.json
@@ -3619,7 +3619,9 @@
     "Images": "Images 集合",
     "IsFade": "是否淡入淡出",
     "Width": "设置图片宽度",
-    "OnClick": "点击图片回调委托"
+    "OnClick": "点击图片回调委托",
+    "HoverPause": "鼠标悬停时是否暂停播放",
+    "PlayMode": "自动播放模式"
   },
   "BootstrapBlazor.Shared.Samples.Client": {
     "Title": "获取客户端连接信息",

diff --git a/src/BootstrapBlazor.Shared/Samples/Carousels.razor.cs b/src/BootstrapBlazor.Shared/Samples/Carousels.razor.cs
@@ -39,7 +39,6 @@ private Task OnClick(string imageUrl)
     /// <returns></returns>
     private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
     {
-
         new()
         {
             Name = "Images",
@@ -57,6 +56,14 @@ private Task OnClick(string imageUrl)
             DefaultValue = "false"
         },
         new()
+        {
+            Name = "HoverPause",
+            Description = Localizer["HoverPause"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
         {
             Name = "Width",
             Description = Localizer["Width"],
@@ -71,6 +78,14 @@ private Task OnClick(string imageUrl)
             Type = "Func<string, Task>",
             ValueList = " — ",
             DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "PlayMode",
+            Description = Localizer["PlayMode"],
+            Type = "CarouselPlayMode",
+            ValueList = "AutoPlayOnload|AutoPlayAfterManually|Manually",
+            DefaultValue = "AutoPlayOnload"
         }
     };
 }
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>7.11.1-beta04</Version>
+    <Version>7.11.1-beta05</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Carousel/Carousel.razor b/src/BootstrapBlazor/Components/Carousel/Carousel.razor
@@ -2,7 +2,7 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader]
 
-<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassName" style="@StyleName" data-bs-ride="carousel" data-bs-touch="@DisableTouchSwipingString">
+<div @attributes="@AdditionalAttributes" id="@Id" class="@ClassName" style="@StyleName" data-bs-ride="@PlayMode.ToDescriptionString()" data-bs-touch="@DisableTouchSwipingString" data-bs-pause="@PauseString">
     <CascadingValue Value="this" IsFixed="true">
         @ChildContent
     </CascadingValue>

diff --git a/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs b/src/BootstrapBlazor/Components/Carousel/Carousel.razor.cs
@@ -100,12 +100,26 @@ public partial class Carousel
     [Parameter]
     public string? NextIcon { get; set; }
 
+    /// <summary>
+    /// 获得/设置 鼠标悬停时是否暂停播放 默认 true
+    /// </summary>
+    [Parameter]
+    public bool HoverPause { get; set; } = true;
+
+    /// <summary>
+    /// 获得/设置 自动播放方式 默认 <see cref="CarouselPlayMode.AutoPlayOnload"/>
+    /// </summary>
+    [Parameter]
+    public CarouselPlayMode PlayMode { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
 
     private string? DisableTouchSwipingString => DisableTouchSwiping ? "false" : null;
 
+    private string? PauseString => HoverPause ? "hover" : "false";
+
     /// <summary>
     /// OnParametersSet 方法
     /// </summary>

diff --git a/src/BootstrapBlazor/Enums/CarouselPlayMode.cs b/src/BootstrapBlazor/Enums/CarouselPlayMode.cs
@@ -0,0 +1,31 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Carousel 组件播放方式枚举
+/// </summary>
+public enum CarouselPlayMode
+{
+    /// <summary>
+    /// 加载后自动播放
+    /// </summary>
+    [Description("carousel")]
+    AutoPlayOnload,
+
+    /// <summary>
+    /// 用户点击按钮后自动播放
+    /// </summary>
+    [Description("true")]
+    AutoPlayAfterManually,
+
+    /// <summary>
+    /// 用户控制
+    /// </summary>
+    [Description("false")]
+    Manually
+}
diff --git a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
diff --git a/test/UnitTest/Components/CarouselTest.cs b/test/UnitTest/Components/CarouselTest.cs
@@ -196,4 +196,62 @@ public void CarouselItem_Dispose()
         var cut = Context.RenderComponent<CarouselItem>();
         Assert.Equal("", cut.Markup);
     }
+
+    [Fact]
+    public void Carousel_HoverPause()
+    {
+        var cut = Context.RenderComponent<Carousel>(pb =>
+        {
+            pb.Add(a => a.HoverPause, true);
+            pb.Add(b => b.ChildContent, new RenderFragment(builder =>
+            {
+                builder.OpenComponent<CarouselItem>(0);
+                builder.AddAttribute(1, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-1")));
+                builder.CloseComponent();
+
+                builder.OpenComponent<CarouselItem>(2);
+                builder.AddAttribute(3, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-2")));
+                builder.CloseComponent();
+            }));
+        });
+        cut.Contains("data-bs-pause=\"hover\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.HoverPause, false);
+        });
+        cut.WaitForAssertion(() => cut.Contains("data-bs-pause=\"false\""));
+    }
+
+    [Fact]
+    public void Carousel_PlayMode()
+    {
+        var cut = Context.RenderComponent<Carousel>(pb =>
+        {
+            pb.Add(a => a.PlayMode, CarouselPlayMode.AutoPlayOnload);
+            pb.Add(b => b.ChildContent, new RenderFragment(builder =>
+            {
+                builder.OpenComponent<CarouselItem>(0);
+                builder.AddAttribute(1, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-1")));
+                builder.CloseComponent();
+
+                builder.OpenComponent<CarouselItem>(2);
+                builder.AddAttribute(3, nameof(CarouselItem.ChildContent), new RenderFragment(builder => builder.AddContent(0, "Test-2")));
+                builder.CloseComponent();
+            }));
+        });
+        cut.Contains("data-bs-ride=\"carousel\"");
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.PlayMode, CarouselPlayMode.AutoPlayAfterManually);
+        });
+        cut.WaitForAssertion(() => cut.Contains("data-bs-ride=\"true\""));
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.PlayMode, CarouselPlayMode.Manually);
+        });
+        cut.WaitForAssertion(() => cut.Contains("data-bs-ride=\"false\""));
+    }
 }
diff --git a/test/UnitTest/Components/InputTest.cs b/test/UnitTest/Components/InputTest.cs
@@ -78,7 +78,7 @@ public void Password_Ok()
     }
 
     [Fact]
-    public async Task IsTrim_Ok()
+    public void IsTrim_Ok()
     {
         var val = "    test    ";
         var cut = Context.RenderComponent<BootstrapInput<string>>(builder =>
@@ -88,17 +88,18 @@ public async Task IsTrim_Ok()
         });
         Assert.Equal("", cut.Instance.Value);
         var input = cut.Find("input");
-        await cut.InvokeAsync(() => input.Change(val));
+        cut.InvokeAsync(() => input.Change(val));
         Assert.Equal(val.Trim(), cut.Instance.Value);
 
         cut.SetParametersAndRender(builder =>
         {
             builder.Add(a => a.IsTrim, false);
             builder.Add(a => a.Value, "");
         });
-        Assert.Equal("", cut.Instance.Value);
+        cut.WaitForAssertion(() => Assert.Equal("", cut.Instance.Value));
+
         input = cut.Find("input");
-        await cut.InvokeAsync(() => input.Change(val));
+        cut.InvokeAsync(() => input.Change(val));
         Assert.Equal(val, cut.Instance.Value);
     }