Skip to content

Commit 79fce04

Browse files
ArgoZhangArgoZhang
authored
feat(TreeView): add ShowToolbar parameter (#5628)
* doc: 文档注释更改为英文 * doc: 更新文档注释 * wip: 临时提交 * feat: 增加 TreeViewToolbar 组件 * refactor: 增加渲染逻辑 * refactor: 重构逻辑 * refactor: 增加 RenderToolbar 方法 * refactor: 代码重构 * refactor: 重构 TreeViewToolbar 组件 * fix(PopConfirmButton): 修复开启 Title 后弹窗 UI 不正常问题 * doc: 更新资源文件 * feat: 增加 TreeViewToolbar 组件 * feat: 增加 TreeViewRow 组件提高性能 * feat: 使用 TreeViewRow 组件重构 * refactor: 重构代码 * refactor: 更新逻辑 * style: 增加内置模板样式 * refactor: 更新 OnUpdateCallbackAsync 逻辑 * refactor: 更改为 ToolbarEditButton 组件 * doc: 更新示例文档 * refactor: 增加 NodeIcon ExpandNodeIcon 参数 * doc: 格式化 * refactor: 更改为属性 * refactor: 增加 OnCheckStateChanged 回调方法 * refactor: 更改逻辑判断条件 * test: 增加单元测试 * test: 增加 OnUpdateCallbackAsync 单元测试 * refactor: 判断空条件 * test: 增加单元测试 * refactor: 增加扩展方法提高代码复用 * refactor: 增加 LoadingIcon 参数设置 * doc: 更新文档 * doc: 移除不使用的参数 * doc: 代码格式化
1 parent ce8eecd commit 79fce04

File tree

16 files changed

+676
-296
lines changed

16 files changed

+676
-296
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
Introduction="@Localizer["TreeViewNormalIntro"]"
2828
Name="Normal">
2929
<section ignore>@((MarkupString)Localizer["TreeViewNormalDescription"].Value)</section>
30-
<TreeView Items="@NormalItems" OnTreeItemClick="@OnTreeItemClick" />
30+
<TreeView Items="@NormalItems" OnTreeItemClick="@OnTreeItemClick" ShowToolbar="true"></TreeView>
3131
<ConsoleLogger @ref="Logger1" />
3232
</DemoBlock>
3333

@@ -203,6 +203,16 @@
203203
</div>
204204
</DemoBlock>
205205

206+
<DemoBlock Title="@Localizer["TreeViewShowToolbarTitle"]"
207+
Introduction="@Localizer["TreeViewShowToolbarIntro"]"
208+
Name="ShowToolbar">
209+
<section ignore>
210+
<p>@((MarkupString)Localizer["TreeViewShowToolbarDesc"].Value)</p>
211+
</section>
212+
<TreeView Items="@EditItems" ShowToolbar="true" OnUpdateCallbackAsync="OnUpdateCallbackAsync">
213+
</TreeView>
214+
</DemoBlock>
215+
206216
<AttributeTable Items="@GetAttributes()"></AttributeTable>
207217

208218
<AttributeTable Items="@GetTreeItemAttributes()" Title="@Localizer["TreeViewsAttribute"]"></AttributeTable>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ public sealed partial class TreeViews
3030

3131
private List<TreeViewItem<TreeFoo>> Items { get; } = TreeFoo.GetTreeItems();
3232

33+
private List<TreeViewItem<TreeFoo>> EditItems { get; } = TreeFoo.GetTreeItems();
34+
3335
private bool AutoCheckChildren { get; set; }
3436

3537
private bool AutoCheckParent { get; set; }
@@ -218,6 +220,12 @@ private static async Task<IEnumerable<TreeViewItem<TreeFoo>>> OnExpandVirtualNod
218220
return items;
219221
}
220222

223+
private Task<bool> OnUpdateCallbackAsync(TreeFoo foo, string? text)
224+
{
225+
foo.Text = text;
226+
return Task.FromResult(true);
227+
}
228+
221229
/// <summary>
222230
/// 获得属性方法
223231
/// </summary>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -711,7 +711,10 @@
711711
"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,",
712712
"TreeViewVirtualizeTitle": "Virtualize",
713713
"TreeViewVirtualizeIntro": "Enable virtual scrolling by setting <code>IsVirtualize=\"true\"</code> to support big data",
714-
"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."
714+
"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.",
715+
"TreeViewShowToolbarTitle": "Show Toolbar",
716+
"TreeViewShowToolbarIntro": "Show the toolbar by setting <code>ShowToolbar=\"true\"</code>",
717+
"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"
715718
},
716719
"BootstrapBlazor.Server.Components.Samples.SwitchButtons": {
717720
"SwitchButtonsTitle": "Switch Button state switch button",

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

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

‎src/BootstrapBlazor/Components/TreeView/TreeView.razor‎

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
{
99
if (_init)
1010
{
11-
11+
1212
}
1313
else if (ShowSkeleton)
1414
{
@@ -48,9 +48,7 @@ else
4848
{
4949
<div class="tree-root scroll is-virtual" tabindex="0">
5050
<Virtualize ItemSize="RowHeight" OverscanCount="10" Items="@Rows">
51-
<ItemContent>
52-
@RenderTreeRow(context)
53-
</ItemContent>
51+
@RenderRow(context)
5452
</Virtualize>
5553
</div>
5654
}
@@ -59,41 +57,24 @@ else
5957
<div class="tree-root scroll" tabindex="0">
6058
@foreach (var item in Rows)
6159
{
62-
@RenderTreeRow(item)
60+
@RenderRow(item)
6361
}
6462
</div>
6563
}
6664
</div>
6765
}
6866

6967
@code {
70-
private RenderFragment<TreeViewItem<TItem>> RenderTreeRow => item =>
71-
@<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)">
72-
<div class="tree-content-header"></div>
73-
<div class="tree-content-body">
74-
<DynamicElement TagName="i" class="@GetCaretClassString(item)" TriggerClick="CanTriggerClickNode(item)" OnClick="() => OnToggleNodeAsync(item, true)"></DynamicElement>
75-
<i class="@NodeLoadingClassString"></i>
76-
@if (ShowCheckbox)
77-
{
78-
<Checkbox Value="@item" IsDisabled="GetItemDisabledState(item)"
79-
SkipValidate="true" ShowLabel="false" ShowAfterLabel="false"
80-
State="@item.CheckedState" OnStateChanged="(state, v) => OnCheckStateChanged(item, state)"
81-
OnBeforeStateChanged="@(MaxSelectedCount > 0 ? state => OnBeforeStateChangedCallback(item, state) : null)" ></Checkbox>
82-
}
83-
<DynamicElement class="@GetNodeClassString(item)" TriggerClick="TriggerNodeLabel(item)" OnClick="() => OnClick(item)">
84-
@if (ShowIcon)
85-
{
86-
<i class="@GetIconClassString(item)"></i>
87-
}
88-
@if (item.Template == null)
89-
{
90-
<span class="@GetItemTextClassString(item)">@item.Text</span>
91-
}
92-
else
93-
{
94-
@item.Template(item.Value)
95-
}
96-
</DynamicElement>
97-
</div>
98-
</div>;
68+
RenderFragment RenderRow(TreeViewItem<TItem> item) =>
69+
@<TreeViewRow @key="item" IsActive="GetActive(item)" Index="GetIndex(item)" Item="item"
70+
NodeIcon="@NodeIcon" ExpandNodeIcon="@ExpandNodeIcon" LoadingIcon="@LoadingIcon"
71+
MaxSelectedCount="MaxSelectedCount"
72+
ToolbarEditTitle="@ToolbarEditTitle" ToolbarEditLabelText="@ToolbarEditLabelText"
73+
IsDisabled="IsDisabled" CanExpandWhenDisabled="CanExpandWhenDisabled"
74+
ShowCheckbox="ShowCheckbox" ShowIcon="ShowIcon"
75+
ShowToolbar="ShowToolbar" ShowToolbarCallback="ShowToolbarCallback"
76+
OnToggleNodeAsync="OnToggleNodeAsync" OnClick="OnClick"
77+
OnBeforeStateChangedCallback="OnBeforeStateChangedCallback"
78+
OnCheckStateChanged="OnCheckStateChanged"
79+
OnUpdateCallbackAsync="OnUpdateCallbackAsync" ToolbarTemplate="ToolbarTemplate"></TreeViewRow>;
9980
}

0 commit comments

Comments
 (0)