From 4c333a01ff0553dcdc3e16abb12ba7c430760d7e Mon Sep 17 00:00:00 2001 From: j4587698 Date: Mon, 4 Dec 2023 15:36:20 +0800 Subject: [PATCH] feat(ImagePreviewer): detach image component (#2475) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 添加单独使用ImagePreviewer的用法 * doc: 格式化文档 * doc: 格式化文档 * test: 更新单元测试 * chore: bump version 8.0.5-beta01 --------- Co-authored-by: Argo-AscioTech --- .../Components/Samples/ImageViewers.razor | 7 +++++++ .../Components/Samples/ImageViewers.razor.cs | 11 ++++++++--- src/BootstrapBlazor.Server/Locales/en.json | 5 ++++- src/BootstrapBlazor.Server/Locales/zh.json | 5 ++++- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- .../ImagePreviewer/ImagePreviewer.razor.cs | 6 ++++++ .../ImagePreviewer/ImagePreviewer.razor.js | 5 +++++ test/UnitTest/Components/ImageTest.cs | 12 +++++++++++- 8 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor index 293e6c634..e019ff503 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor @@ -120,4 +120,11 @@ + + + + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor.cs index 0ff0ed640..89db39f3e 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor.cs @@ -11,6 +11,11 @@ public partial class ImageViewers { private List PreviewList { get; } = new(); + [NotNull] + private ImagePreviewer? ImagePreviewer { get; set; } + + private Task ShowImagePreviewer() => ImagePreviewer.Show(); + /// /// OnInitialized /// @@ -18,11 +23,11 @@ public partial class ImageViewers { base.OnInitialized(); - PreviewList.AddRange(new string[] - { + PreviewList.AddRange( + [ "./images/ImageList1.jpeg", "./images/ImageList2.jpeg" - }); + ]); } private IEnumerable GetAttributes() => new AttributeItem[] diff --git a/src/BootstrapBlazor.Server/Locales/en.json b/src/BootstrapBlazor.Server/Locales/en.json index 964f657f6..d8c9a4058 100644 --- a/src/BootstrapBlazor.Server/Locales/en.json +++ b/src/BootstrapBlazor.Server/Locales/en.json @@ -5417,7 +5417,10 @@ "ImageViewerPlaceHolderTemplateLoadingShow": "When loading show", "ImageViewerErrorTemplateUrlError": "Url The path error", "ImageViewerErrorTemplateCustom": "The custom", - "ImageViewerErrorTemplateLoadFailed": "Load failed" + "ImageViewerErrorTemplateLoadFailed": "Load failed", + "ImagePreviewerTitle": "Use ImagePreviewer Standalone", + "ImagePreviewerIntro": "Pop up the Previewer directly in conjunction with other components like Button", + "ImagePreviewerButton": "Show Previewer" }, "BootstrapBlazor.Server.Components.Samples.Geolocations": { "GeolocationsTitle": "Geolocation", diff --git a/src/BootstrapBlazor.Server/Locales/zh.json b/src/BootstrapBlazor.Server/Locales/zh.json index 5b80e1451..bf7826c51 100644 --- a/src/BootstrapBlazor.Server/Locales/zh.json +++ b/src/BootstrapBlazor.Server/Locales/zh.json @@ -5417,7 +5417,10 @@ "ImageViewerPlaceHolderTemplateLoadingShow": "加载时显示", "ImageViewerErrorTemplateUrlError": "Url 路径错误", "ImageViewerErrorTemplateCustom": "自定义", - "ImageViewerErrorTemplateLoadFailed": "加载失败" + "ImageViewerErrorTemplateLoadFailed": "加载失败", + "ImagePreviewerTitle": "单独使用ImagePreviewer", + "ImagePreviewerIntro": "配合Button等其他组件，直接弹出Previewer", + "ImagePreviewerButton": "显示Previewer" }, "BootstrapBlazor.Server.Components.Samples.Geolocations": { "GeolocationsTitle": "地理定位/移动距离追踪", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index e7d206ea0..43184a191 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 8.0.4 + 8.0.5-beta01 diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs index 454fc998c..fc6d520bb 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs @@ -85,6 +85,12 @@ public partial class ImagePreviewer private bool ShowButtons => PreviewList.Count > 1; + /// + /// 显示图片 + /// + /// + public Task Show(int index = 0) => InvokeVoidAsync("show", Id, index); + /// /// /// diff --git a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js index edc3b4880..07f0266ee 100644 --- a/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js +++ b/src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js @@ -19,6 +19,11 @@ export function update(id, prevList) { viewer.viewer.prevList = prevList } +export function show(id, index) { + const viewer = Data.get(id) + viewer.viewer.show(index) +} + export function dispose(id) { const viewer = Data.get(id) Data.remove(id) diff --git a/test/UnitTest/Components/ImageTest.cs b/test/UnitTest/Components/ImageTest.cs index 51e95f61c..a31b3ba71 100644 --- a/test/UnitTest/Components/ImageTest.cs +++ b/test/UnitTest/Components/ImageTest.cs @@ -117,8 +117,18 @@ public class ImageTest : BootstrapBlazorTestBase { pb.Add(a => a.Url, "https://www.blazor.zone/images/logo.png"); pb.Add(a => a.IsAsync, true); - pb.Add(a => a.PreviewList, new List { "v1", "v2" }); + pb.Add(a => a.PreviewList, ["v1", "v2"]); }); cut.Contains("bb-previewer collapse active"); } + + [Fact] + public void ImagerViewer_Show() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(a => a.PreviewList, ["v1", "v2"]); + }); + cut.Instance.Show(); + } }