doc(Table): add TableToolbarComponent sample code (#2801)

* refactor: 更新接口 * doc: 更新示例 * chore: bump version 8.1.7-beta02
dotnetcore · Jan 14, 2024 · 08d7f5b · 08d7f5b
1 parent aff2752
commit 08d7f5b
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 53 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesToolbar.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesToolbar.razor
@@ -37,16 +37,14 @@
     </Table>
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["TablesToolbarCustomButtonTitle"]"
-           Introduction="@Localizer["TablesToolbarCustomButtonIntro"]"
-           Name="CustomButton">
-    <p>@((MarkupString)Localizer["TablesToolbarCustomButtonDescription"].Value)</p>
-    <ul class="ul-demo mb-3">
+<DemoBlock Title="@Localizer["TablesToolbarCustomButtonTitle"]" Introduction="@Localizer["TablesToolbarCustomButtonIntro"]" Name="CustomButton">
+    <section ignore>@((MarkupString)Localizer["TablesToolbarCustomButtonDescription"].Value)</section>
+    <ul class="ul-demo">
         <li>@((MarkupString)Localizer["TablesToolbarCustomButtonTips1_title"].Value)</li>
         <li>@((MarkupString)Localizer["TablesToolbarCustomButtonTips1_note1"].Value)</li>
         <li>@((MarkupString)Localizer["TablesToolbarCustomButtonTips1_note2"].Value)</li>
     </ul>
-    <p>@((MarkupString)Localizer["TablesToolbarCustomButtonTips2_title"].Value)</p>
+    <section ignore>@((MarkupString)Localizer["TablesToolbarCustomButtonTips2_title"].Value)</section>
     <Table TItem="Foo"
            IsPagination="true" PageItemsSource="@PageItemsSource"
            IsStriped="true" IsBordered="true" IsMultipleSelect="true"
@@ -57,43 +55,64 @@
                                 Color="Color.Primary"
                                 Icon="fa-fw fa-solid fa-floppy-disk"
                                 Text="@Localizer["TablesToolbarCustomButton1"]"
-                                IsAsync OnClickCallback="@DownloadAsync" />
-            <TableToolbarButton TItem="Foo"
-                                Color="Color.Success"
-                                Icon="fa-fw fa-solid fa-pen-to-square"
-                                Text="@Localizer["TablesToolbarCustomButton2"]"
-                                IsAsync OnClickCallback="@DownloadAsync" IsEnableWhenSelectedOneRow="true" />
-            <TableToolbarPopConfirmButton TItem="Foo"
-                                          Color="Color.Success"
-                                          Icon="fa-fw fa-solid fa-pen-to-square"
-                                          Text="@Localizer["TableToolbarPopConfirmButton1"]"
-                                          IsEnableWhenSelectedOneRow="true"
-                                          OnConfirmCallback="DownloadAsync" />
-        </TableToolbarTemplate>
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" />
-            <TableColumn @bind-Field="@context.Address" />
-        </TableColumns>
-    </Table>
-</DemoBlock>
+                                            IsAsync OnClickCallback="@DownloadAsync" />
+             <TableToolbarButton TItem="Foo"
+                                 Color="Color.Success"
+                                 Icon="fa-fw fa-solid fa-pen-to-square"
+                                 Text="@Localizer["TablesToolbarCustomButton2"]"
+                                            IsAsync OnClickCallback="@DownloadAsync" IsEnableWhenSelectedOneRow="true" />
+             <TableToolbarPopConfirmButton TItem="Foo"
+                                           Color="Color.Success"
+                                           Icon="fa-fw fa-solid fa-pen-to-square"
+                                           Text="@Localizer["TableToolbarPopConfirmButton1"]"
+                                           IsEnableWhenSelectedOneRow="true"
+                                           OnConfirmCallback="DownloadAsync" />
+         </TableToolbarTemplate>
+         <TableColumns>
+             <TableColumn @bind-Field="@context.DateTime" Width="180" />
+             <TableColumn @bind-Field="@context.Name" />
+             <TableColumn @bind-Field="@context.Address" />
+         </TableColumns>
+     </Table>
+ </DemoBlock>
 
-<DemoBlock Title="@Localizer["TablesToolbarCustomDisplayButtonTitle"]"
-           Introduction="@Localizer["TablesToolbarCustomDisplayButtonIntro"]"
-           Name="CustomDisplayButton">
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource"
-           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
-           ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowExtendButtons="true"
-           OnQueryAsync="@OnQueryAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" />
-            <TableColumn @bind-Field="@context.Name" Width="100" />
-            <TableColumn @bind-Field="@context.Address" />
-            <TableColumn @bind-Field="@context.Count" />
-        </TableColumns>
-        <TableExtensionToolbarTemplate>
+ <DemoBlock Title="@Localizer["TablesToolbarCustomComponentTitle"]" Introduction="@Localizer["TablesToolbarCustomComponentIntro"]" Name="CustomComponent">
+     <section ignore>@((MarkupString)Localizer["TablesToolbarCustomComponentDescription"].Value)</section>
+     <Table TItem="Foo"
+            IsPagination="true" PageItemsSource="@PageItemsSource"
+            IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+            ShowToolbar="true" ShowDefaultButtons="true" ShowSearch="false" ShowExtendButtons="false"
+            OnQueryAsync="@OnQueryAsync">
+         <TableToolbarBeforeTemplate>
+             <TableToolbarComponent>
+                 <Button Text="@Localizer["TablesToolbarCustomButton1"]" Icon="fa-fw fa-solid fa-floppy-disk"></Button>
+                 <Select Items="_cityItems" @bind-Value="_cityName"></Select>
+             </TableToolbarComponent>
+         </TableToolbarBeforeTemplate>
+         <TableColumns>
+             <TableColumn @bind-Field="@context.DateTime" Width="180" />
+             <TableColumn @bind-Field="@context.Name" />
+             <TableColumn @bind-Field="@context.Address" />
+         </TableColumns>
+     </Table>
+ </DemoBlock>
+
+ <DemoBlock Title="@Localizer["TablesToolbarCustomDisplayButtonTitle"]"
+            Introduction="@Localizer["TablesToolbarCustomDisplayButtonIntro"]"
+            Name="CustomDisplayButton">
+     <Table TItem="Foo"
+            IsPagination="true" PageItemsSource="@PageItemsSource"
+            IsStriped="true" IsBordered="true" IsMultipleSelect="true"
+            ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowExtendButtons="true"
+            OnQueryAsync="@OnQueryAsync" OnDeleteAsync="@OnDeleteAsync">
+         <TableColumns>
+             <TableColumn @bind-Field="@context.DateTime" Width="180" />
+             <TableColumn @bind-Field="@context.Name" Width="100" />
+             <TableColumn @bind-Field="@context.Address" />
+             <TableColumn @bind-Field="@context.Count" />
+         </TableColumns>
+         <TableExtensionToolbarTemplate>
              <ButtonUpload TValue="string" ShowUploadFileList="false" BrowserButtonClass="btn-secondary" />
-        </TableExtensionToolbarTemplate>
-    </Table>
-</DemoBlock>
+         </TableExtensionToolbarTemplate>
+     </Table>
+ </DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesToolbar.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesToolbar.razor.cs
@@ -19,6 +19,14 @@ public partial class TablesToolbar
     [NotNull]
     private List<Foo>? Items { get; set; }
 
+    private readonly List<SelectedItem> _cityItems =
+    [
+        new SelectedItem("Beijing", "北京"),
+        new SelectedItem("Shanghai", "上海")
+    ];
+
+    private string? _cityName;
+
     private static IEnumerable<int> PageItemsSource => new int[]
     {
         2,

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -5192,7 +5192,10 @@
     "TablesToolbarCustomDisplayButtonIntro": "By setting the <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> attribute value to control whether the individual function button is displayed, when <code>ShowDefaultButtons</code> is set to <code> When false</code>, all buttons are not displayed",
     "TablesToolbarCustomButton1": "Download 1",
     "TablesToolbarCustomButton2": "Download 2",
-    "TableToolbarPopConfirmButton1": "Confirm"
+    "TableToolbarPopConfirmButton1": "Confirm",
+    "TablesToolbarCustomComponentTitle": "Custom Component",
+    "TablesToolbarCustomComponentIntro": "Use the <code>TableToolbarComponent</code> component to implement placing the components you need on the toolbar",
+    "TablesToolbarCustomComponentDescription": "The custom component currently does not render when shrunk into a small icon, and will be resolved later when a better solution is available, If you want to place components behind built-in buttons, please use the <code>TableToolbarTemplate</code> template"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesCell": {
     "TablesCellTitle": "Table Cell",

diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -5192,7 +5192,10 @@
     "TablesToolbarCustomDisplayButtonIntro": "通过设置 <code>ShowAddButton</code> <code>ShowEditButton</code> <code>ShowDeleteButton</code> 属性值来控制单独功能按钮是否显示，当 <code>ShowDefaultButtons</code> 设置为 <code>false</code> 时，所有按钮均不显示",
     "TablesToolbarCustomButton1": "下载1",
     "TablesToolbarCustomButton2": "下载2",
-    "TableToolbarPopConfirmButton1": "确认下载"
+    "TableToolbarPopConfirmButton1": "确认下载",
+    "TablesToolbarCustomComponentTitle": "自定义组件",
+    "TablesToolbarCustomComponentIntro": "使用 <code>TableToolbarComponent</code> 组件实现将自己需要的组件放到工具栏上",
+    "TablesToolbarCustomComponentDescription": "自定义组件在收缩成一个小图标时目前不渲染，稍后有更好的方案时再解决，如果想将组件放到内置按钮后面时，请使用 <code>TableToolbarTemplate</code> 模板"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesCell": {
     "TablesCellTitle": "Table 表格",

diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.1.7-beta01</Version>
+    <Version>8.1.7-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/Table/ITableToolbarButton.cs b/src/BootstrapBlazor/Components/Table/ITableToolbarButton.cs
@@ -7,7 +7,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// ITableToolbarButton 接口
 /// </summary>
-public interface ITableToolbarButton<TItem> : IToolbarComponent<TItem>
+public interface ITableToolbarButton<TItem> : IToolbarComponent
 {
     /// <summary>
     /// 获得/设置 选中一行时启用按钮 默认 false 均可用

diff --git a/src/BootstrapBlazor/Components/Table/IToolbarComponent.cs b/src/BootstrapBlazor/Components/Table/IToolbarComponent.cs
@@ -7,7 +7,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// 工具栏按钮接口
 /// </summary>
-public interface IToolbarComponent<TItem>
+public interface IToolbarComponent
 {
     /// <summary>
     /// 获得/设置 是否显示 默认 true 显示

diff --git a/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs b/src/BootstrapBlazor/Components/Table/TableToolbar.razor.cs
@@ -17,7 +17,7 @@ public partial class TableToolbar<TItem> : ComponentBase
     /// <summary>
     /// 获得 Toolbar 按钮集合
     /// </summary>
-    private readonly List<IToolbarComponent<TItem>> _buttons = [];
+    private readonly List<IToolbarComponent> _buttons = [];
 
     private readonly ConcurrentDictionary<ButtonBase, bool> _asyncButtonStateCache = new();
 
@@ -109,10 +109,10 @@ private bool GetDisabled(ButtonBase button)
     /// <summary>
     /// 添加按钮到工具栏方法
     /// </summary>
-    public void AddButton(IToolbarComponent<TItem> button) => _buttons.Add(button);
+    public void AddButton(IToolbarComponent button) => _buttons.Add(button);
 
     /// <summary>
     /// 移除按钮到工具栏方法
     /// </summary>
-    public void RemoveButton(IToolbarComponent<TItem> button) => _buttons.Remove(button);
+    public void RemoveButton(IToolbarComponent button) => _buttons.Remove(button);
 }
diff --git a/src/BootstrapBlazor/Components/Table/TableToolbarComponent.cs b/src/BootstrapBlazor/Components/Table/TableToolbarComponent.cs
@@ -7,7 +7,7 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// Table 工具栏自定义组件
 /// </summary>
-public class TableToolbarComponent<TItem> : ComponentBase, IToolbarComponent<TItem>, IDisposable
+public class TableToolbarComponent<TItem> : ComponentBase, IToolbarComponent, IDisposable
 {
     /// <summary>
     /// <inheritdoc/>