feat(TreeView): add ShowToolbar parameter

src/BootstrapBlazor.Server/Components/Samples/TreeViews.razor

@@ -27,7 +27,7 @@
            Introduction="@Localizer["TreeViewNormalIntro"]"
            Name="Normal">
     <section ignore>@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</section>
-    <TreeView Items="@NormalItems" OnTreeItemClick="@OnTreeItemClick" />
+    <TreeView Items="@NormalItems" OnTreeItemClick="@OnTreeItemClick" ShowToolbar="true"></TreeView>
     <ConsoleLogger @ref="Logger1" />
 </DemoBlock>
 
@@ -203,6 +203,16 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["TreeViewShowToolbarTitle"]"
+           Introduction="@Localizer["TreeViewShowToolbarIntro"]"
+           Name="ShowToolbar">
+    <section ignore>
+        <p>@((MarkupString)Localizer["TreeViewShowToolbarDesc"].Value)</p>
+    </section>
+    <TreeView Items="@EditItems" ShowToolbar="true" OnUpdateCallbackAsync="OnUpdateCallbackAsync">
+    </TreeView>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()"></AttributeTable>
 
 <AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>

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

@@ -30,6 +30,8 @@ public sealed partial class TreeViews
 
     private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
 
+    private List<TreeViewItem<TreeFoo>> EditItems { get; } = TreeFoo.GetTreeItems();
+
     private bool AutoCheckChildren { get; set; }
 
     private bool AutoCheckParent { get; set; }
@@ -218,6 +220,12 @@ private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandVirtualNod
         return items;
     }
 
+    private Task<bool> OnUpdateCallbackAsync(TreeFoo foo, string? text)
+    {
+        foo.Text = text;
+        return Task.FromResult(true);
+    }
+
     /// <summary>
     /// 获得属性方法
     /// </summary>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -711,7 +711,10 @@
     "TreeViewEnableKeyboardArrowUpDownIntro": "Support keyboard up and down arrow operations by setting <code>EnableKeyboardArrowUpDown=\"true\"</code>. <kbd>ArrowLeft</kbd> collapse the node, <kbd>ArrowRight</kbd> expand the node, <kbd>ArrowUp</kbd> move the node up, <kbd>ArrowDown</kbd> move the node down, <kbd>Space</kbd> select the node,",
     "TreeViewVirtualizeTitle": "Virtualize",
     "TreeViewVirtualizeIntro": "Enable virtual scrolling by setting <code>IsVirtualize=\"true\"</code> to support big data",
-    "TreeViewVirtualizeDescription": "The component uses <code>Virtualize</code> to implement virtual scrolling logic, which reduces the pressure on the browser. However, if there is a lot of tree structure data, such as <b>Select All</b>, all data must be marked, resulting in large data in the memory. This problem has not been solved yet. Currently, this component still puts a lot of pressure on the <b>CPU</b> due to large data."
+    "TreeViewVirtualizeDescription": "The component uses <code>Virtualize</code> to implement virtual scrolling logic, which reduces the pressure on the browser. However, if there is a lot of tree structure data, such as <b>Select All</b>, all data must be marked, resulting in large data in the memory. This problem has not been solved yet. Currently, this component still puts a lot of pressure on the <b>CPU</b> due to large data.",
+    "TreeViewShowToolbarTitle": "Show Toolbar",
+    "TreeViewShowToolbarIntro": "Show the toolbar by setting <code>ShowToolbar=\"true\"</code>",
+    "TreeViewShowToolbarDesc": "After it is turned on, when the mouse hovers over a node, a toolbar icon appears on the right, and the toolbar function can be customized; data is updated by setting the <code>OnUpdateCallbackAsync</code> callback method; the toolbar template is defined by setting <code>ToolbarTemplate</code>, and if not set, the internal default node name template is used"
   },
   "BootstrapBlazor.Server.Components.Samples.SwitchButtons": {
     "SwitchButtonsTitle": "Switch Button state switch button",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -711,7 +711,10 @@
     "TreeViewEnableKeyboardArrowUpDownIntro": "通过设置 <code>EnableKeyboardArrowUpDown=\"true\"</code> 支持键盘上下箭头操作。<kbd>左箭头</kbd> 收起节点，<kbd>右箭头</kbd> 展开节点，<kbd>上箭头</kbd> 向上移动节点，<kbd>下箭头</kbd> 向下移动节点，<kbd>空格</kbd> 选中节点",
     "TreeViewVirtualizeTitle": "虚拟滚动",
     "TreeViewVirtualizeIntro": "通过设置 <code>IsVirtualize=\"true\"</code> 开启虚拟滚动，支持大数据",
-    "TreeViewVirtualizeDescription": "组件内部使用 <code>Virtualize</code> 来实现虚拟滚动逻辑，对浏览器压力会减少很多；但是如果树状结构数据比较多，比如 <b>全选</b> 等操作必须对所有数据进行标记，导致内存中确实有大数据存在，目前还没有解决这个问题，目前此组件由于大数据对 <b>CPU</b> 压力还是比较大的"
+    "TreeViewVirtualizeDescription": "组件内部使用 <code>Virtualize</code> 来实现虚拟滚动逻辑，对浏览器压力会减少很多；但是如果树状结构数据比较多，比如 <b>全选</b> 等操作必须对所有数据进行标记，导致内存中确实有大数据存在，目前还没有解决这个问题，目前此组件由于大数据对 <b>CPU</b> 压力还是比较大的",
+    "TreeViewShowToolbarTitle": "显示工具栏",
+    "TreeViewShowToolbarIntro": "通过设置 <code>ShowToolbar=\"true\"</code> 显示工具栏",
+    "TreeViewShowToolbarDesc": "开启后鼠标悬浮节点时，右侧出现工具栏图标，可自定义工具栏功能；通过设置 <code>OnUpdateCallbackAsync</code> 回调方法进行数据的更新；通过设置 <code>ToolbarTemplate</code> 定义工具栏模板，如未设置时使用内部默认更改节点名称模板"
   },
   "BootstrapBlazor.Server.Components.Samples.SwitchButtons": {
     "SwitchButtonsTitle": "Switch Button 状态切换按钮",

src/BootstrapBlazor/Components/TreeView/TreeView.razor

@@ -8,7 +8,7 @@
 {
     if (_init)
     {
-        
+
     }
     else if (ShowSkeleton)
     {
@@ -48,9 +48,7 @@ else
         {
             <div class="tree-root scroll is-virtual" tabindex="0">
                 <Virtualize ItemSize="RowHeight" OverscanCount="10" Items="@Rows">
-                    <ItemContent>
-                        @RenderTreeRow(context)
-                    </ItemContent>
+                    @RenderRow(context)
                 </Virtualize>
             </div>
         }
@@ -59,41 +57,24 @@ else
             <div class="tree-root scroll" tabindex="0">
                 @foreach (var item in Rows)
                 {
-                    @RenderTreeRow(item)
+                    @RenderRow(item)
                 }
             </div>
         }
     </div>
 }
 
 @code {
-    private RenderFragment<TreeViewItem<TItem>> RenderTreeRow => item =>
-    @<div @key="item" class="@GetContentClassString(item)" data-bb-tree-view-index="@Rows.IndexOf(item)" @oncontextmenu="e => OnContextMenu(e, item)" @oncontextmenu:preventDefault="IsPreventDefault" @ontouchstart="e => OnTouchStart(e, item)" @ontouchend="OnTouchEnd" style="@GetTreeRowStyle(item)">
-        <div class="tree-content-header"></div>
-        <div class="tree-content-body">
-            <DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
-            <i class="@NodeLoadingClassString"></i>
-            @if (ShowCheckbox)
-            {
-                <Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
-                          SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
-                          State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
-                          OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
-            }
-            <DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
-                @if (ShowIcon)
-                {
-                    <i class="@GetIconClassString(item)"></i>
-                }
-                @if (item.Template == null)
-                {
-                    <span class="@GetItemTextClassString(item)">@item.Text</span>
-                }
-                else
-                {
-                    @item.Template(item.Value)
-                }
-            </DynamicElement>
-        </div>
-    </div>;
+    RenderFragment RenderRow(TreeViewItem<TItem> item) =>
+    @<TreeViewRow @key="item" IsActive="GetActive(item)" Index="GetIndex(item)" Item="item"
+                  NodeIcon="@NodeIcon" ExpandNodeIcon="@ExpandNodeIcon" LoadingIcon="@LoadingIcon"
+                  MaxSelectedCount="MaxSelectedCount"
+                  ToolbarEditTitle="@ToolbarEditTitle" ToolbarEditLabelText="@ToolbarEditLabelText"
+                  IsDisabled="IsDisabled" CanExpandWhenDisabled="CanExpandWhenDisabled"
+                  ShowCheckbox="ShowCheckbox" ShowIcon="ShowIcon"
+                  ShowToolbar="ShowToolbar" ShowToolbarCallback="ShowToolbarCallback"
+                  OnToggleNodeAsync="OnToggleNodeAsync" OnClick="OnClick"
+                  OnBeforeStateChangedCallback="OnBeforeStateChangedCallback"
+                  OnCheckStateChanged="OnCheckStateChanged"
+                  OnUpdateCallbackAsync="OnUpdateCallbackAsync" ToolbarTemplate="ToolbarTemplate"></TreeViewRow>;
 }