!2450 feat(#I4UPFT): add ShowRadio parameter on Tree component

* doc: 更新参数说明文档 * chore: bump version 6.3.2 * feat: 增加点击 TreeNode 选中 Radio 功能 * doc: 增加显示单选框示例文档 * revert: 撤销示例更改 * doc: 更新注释文档 * feat: Tree 增加 GroupName 参数赋值 * feat: 移除 GroupName 级联参数 * doc: 添加 Tree 单选示例 * feat: 树形组件添加单选功能 * refactor: 指定 Radio 组件泛型类型 * feat: Radio 改为泛型组件
2024-12-02 12:09:59 +08:00 · 2022-02-22 05:07:37 +00:00 · 2022-02-22 05:07:37 +00:00 · 3240d0584c
commit 3240d0584c
parent 0c5fc4c1a7
13 changed files with 139 additions and 69 deletions
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -1416,6 +1416,7 @@
    "Att4": "Whether it is vertically distributed",
    "Att5": "Whether the binding automatically adds an empty value when the type is enumerated",
    "Att6": "Bind the data source",
+    "GroupName": "Group name",
    "Event1": "Call back this method when the check box state changes",
    "Log1": "The component selects the value:",
    "Log2": "The value is displayed:",
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -1419,6 +1419,7 @@
    "Att4": "是否垂直分布",
    "Att5": "绑定可为空枚举类型时是否自动添加空值",
    "Att6": "绑定数据源",
+    "GroupName": "分组名称",
    "Event1": "复选框状态改变时回调此方法",
    "Log1": "组件选中值:",
    "Log2": "显示值:",
--- a/src/BootstrapBlazor.Shared/Samples/Radios.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/Radios.razor.cs
@ -68,49 +68,56 @@ public sealed partial class Radios

    private IEnumerable<AttributeItem> GetAttributes() => new[]
    {
-            new AttributeItem() {
-                Name = "DisplayText",
-                Description = Localizer["Att1"],
-                Type = "string",
-                ValueList = " — ",
-                DefaultValue = "—"
-            },
-            new AttributeItem() {
-                Name = "NullItemText",
-                Description = Localizer["Att2"],
-                Type = "string",
-                ValueList = " — ",
-                DefaultValue = "—"
-            },
-            new AttributeItem() {
-                Name = "IsDisabled",
-                Description = Localizer["Att3"],
-                Type = "boolean",
-                ValueList = "true / false",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "IsVertical",
-                Description = Localizer["Att4"],
-                Type = "boolean",
-                ValueList = "true / false",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "IsAutoAddNullItem",
-                Description = Localizer["Att5"],
-                Type = "boolean",
-                ValueList = "true / false",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "Items",
-                Description = Localizer["Att6"],
-                Type = "IEnumerable<TItem>",
-                ValueList = " — ",
-                DefaultValue = "—"
-            }
-        };
+        new AttributeItem() {
+            Name = "DisplayText",
+            Description = Localizer["Att1"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = "—"
+        },
+        new AttributeItem() {
+            Name = "GroupName",
+            Description = Localizer["GroupName"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = "—"
+        },
+        new AttributeItem() {
+            Name = "NullItemText",
+            Description = Localizer["Att2"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = "—"
+        },
+        new AttributeItem() {
+            Name = "IsDisabled",
+            Description = Localizer["Att3"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "IsVertical",
+            Description = Localizer["Att4"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "IsAutoAddNullItem",
+            Description = Localizer["Att5"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "Items",
+            Description = Localizer["Att6"],
+            Type = "IEnumerable<TItem>",
+            ValueList = " — ",
+            DefaultValue = "—"
+        }
+    };

    /// <summary>
    /// 获得事件方法
@ -118,11 +125,11 @@ public sealed partial class Radios
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
-            new EventItem()
-            {
-                Name = "OnSelectedChanged",
-                Description = Localizer["Event1"],
-                Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
-            }
+        new EventItem()
+        {
+            Name = "OnSelectedChanged",
+            Description = Localizer["Event1"],
+            Type ="Func<IEnumerable<SelectedItem>, TValue, Task>"
+        }
    };
 }
--- a/src/BootstrapBlazor.Shared/Samples/Trees.razor
+++ b/src/BootstrapBlazor.Shared/Samples/Trees.razor
@ -12,7 +12,7 @@
    <BlockLogger @ref="Trace" class="mt-3" />
 </DemoBlock>

-<DemoBlock Title="可选择" Introduction="适用于需要选择层级时使用" Name="Optional">
+<DemoBlock Title="多选框" Introduction="适用于需要选择层级时使用" Name="Checkbox">
    <p>
        通过设置 <code>OnTreeItemChecked</code> 属性监控树形控件节点被勾选时的事件，选中树形控件节点前复选框时下面日志显示选中节点的数据
    </p>
@ -20,6 +20,13 @@
    <BlockLogger @ref="TraceChecked" class="mt-3" />
 </DemoBlock>

+<DemoBlock Title="单选框" Introduction="适用于单选节点" Name="ShowRadio">
+    <p>
+        通过设置 <code>ShowRadio</code> 属性节点前面显示 <code>Radio</code> 组件
+    </p>
+    <Tree Items="@CheckedItems" ShowRadio="true" />
+</DemoBlock>
+
 <DemoBlock Title="禁用状态" Introduction="可将 Tree 的某些节点设置为禁用状态" Name="TreeDisable">
    <p>
        通过设置数据源 <code>TreeItem</code> 对象的 <code>Disabled</code> 属性，来控制此节点是否可以进行勾选动作，设置为 <code>false</code> 时不影响节点展开/收缩功能
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
-    <Version>6.3.2-beta03</Version>
+    <Version>6.3.2</Version>
  </PropertyGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
--- a/src/BootstrapBlazor/Components/Radio/Radio.razor
+++ b/src/BootstrapBlazor/Components/Radio/Radio.razor
@ -1,5 +1,6 @@
@namespace BootstrapBlazor.Components
-@inherits Checkbox<SelectedItem>
+@typeparam TValue
+@inherits Checkbox<TValue>

 <div @attributes="AdditionalAttributes" class="@ClassString" aria-checked="@StateString">
    <input class="@InputClassString" type="radio" name="@GroupName" id="@Id" disabled="@Disabled" checked="@CheckedString" @onclick="@OnClickHandler">
--- a/src/BootstrapBlazor/Components/Radio/Radio.razor.cs
+++ b/src/BootstrapBlazor/Components/Radio/Radio.razor.cs
@ -9,17 +9,22 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// 
 /// </summary>
-public partial class Radio
+public partial class Radio<TValue>
 {
    /// <summary>
-    /// 
+    /// 获得/设置 点击回调方法
    /// </summary>
    [Parameter]
-    public Func<SelectedItem, Task>? OnClick { get; set; }
+    public Func<TValue, Task>? OnClick { get; set; }

-    [CascadingParameter(Name = "GroupName")]
-    [NotNull]
-    private string? GroupName { get; set; }
+    /// <summary>
+    /// 获得/设置 Radio 组名称一般来讲需要设置 默认为 null 未设置
+    /// </summary>
+    [Parameter]
+#if NET6_0_OR_GREATER
+    [EditorRequired]
+#endif
+    public string? GroupName { get; set; }

    private void OnClickHandler()
    {
--- a/src/BootstrapBlazor/Components/Radio/RadioList.razor
+++ b/src/BootstrapBlazor/Components/Radio/RadioList.razor
@ -6,12 +6,10 @@
 {
    <label class="form-label" required="@Required">@DisplayText</label>
 }
-<CascadingValue Value="GroupName" Name="GroupName">
-    <div @attributes="@AdditionalAttributes" class="@GetClassString("radio-list")">
-        @foreach (var item in Items)
-        {
-            <Radio Value="@item" Color="@Color" IsDisabled="@IsDisabled" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" State="@CheckState(item)" OnClick="OnClick" />
-        }
-    </div>
-    @ChildContent
-</CascadingValue>
+<div @attributes="@AdditionalAttributes" class="@GetClassString("radio-list")">
+    @foreach (var item in Items)
+    {
+        <Radio TValue="SelectedItem" Value="@item" Color="@Color" GroupName="@GroupName" IsDisabled="@IsDisabled" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" State="@CheckState(item)" OnClick="OnClick" />
+    }
+</div>
+@ChildContent
--- a/src/BootstrapBlazor/Components/Tree/Tree.js
+++ b/src/BootstrapBlazor/Components/Tree/Tree.js
@ -7,6 +7,16 @@
            }, function () {
                $(this).parent().removeClass('hover');
            });
+
+            // 支持 Radio
+            $el.on('click', '.tree-node', function () {
+                var $node = $(this);
+                var $prev = $node.prev();
+                var $radio = $prev.find('[type="radio"]');
+                if ($radio.attr('disabeld') !== 'disabled') {
+                    $radio.trigger('click');
+                }
+            });
        }
    });
 })(jQuery);
--- a/src/BootstrapBlazor/Components/Tree/Tree.razor
+++ b/src/BootstrapBlazor/Components/Tree/Tree.razor
@ -45,6 +45,13 @@ private RenderFragment<TreeItem> RenderTreeItem => item =>
                      ShowLabel="false" ShowAfterLabel="false"
                      OnStateChanged="(state, v) => OnStateChanged(state, item)" />
        }
+        else if (ShowRadio)
+        {
+            <Radio @bind-Value="@item.Checked" IsDisabled="@item.IsDisabled" SkipValidate="true"
+                   ShowLabel="false" ShowAfterLabel="false" GroupName="@GroupName"
+                   OnClick="p => OnRadioClick(item)" State="@CheckState(item)"
+                   OnStateChanged="(state, v) => OnStateChanged(state, item)" />
+        }
        <div class="tree-node" @onclick="() => OnClick(item)">
            @if (ShowIcon)
            {
--- a/src/BootstrapBlazor/Components/Tree/Tree.razor.cs
+++ b/src/BootstrapBlazor/Components/Tree/Tree.razor.cs
@ -16,6 +16,9 @@ public partial class Tree
    /// </summary>
    private ElementReference TreeElement { get; set; }

+    [NotNull]
+    private string? GroupName { get; set; }
+
    /// <summary>
    /// 获得 按钮样式集合
    /// </summary>
@ -97,6 +100,12 @@ public partial class Tree
    [Parameter]
    public bool ShowCheckbox { get; set; }

+    /// <summary>
+    /// 获得/设置 是否显示 Radio 默认 false 不显示
+    /// </summary>
+    [Parameter]
+    public bool ShowRadio { get; set; }
+
    /// <summary>
    /// 获得/设置 是否显示 Icon 图标 默认 false 不显示
    /// </summary>
@ -121,6 +130,16 @@ public partial class Tree
    [Parameter]
    public Func<TreeItem, Task>? OnExpandNode { get; set; }

+    /// <summary>
+    /// OnInitialized 方法
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        GroupName = this.GetHashCode().ToString();
+    }
+
    /// <summary>
    /// OnParametersSet 方法
    /// </summary>
@ -214,4 +233,18 @@ public partial class Tree
            await OnTreeItemChecked(checkedItems.Where(i => i.Checked).ToList());
        }
    }
+
+    private async Task OnRadioClick(TreeItem item)
+    {
+        item.CascadeSetCheck(item.Checked);
+        if (OnTreeItemChecked != null)
+        {
+            await OnTreeItemChecked.Invoke(new List<TreeItem> { item });
+        }
+    }
+
+    private CheckboxState CheckState(TreeItem item)
+    {
+        return item.Checked ? CheckboxState.Checked : CheckboxState.UnChecked;
+    }
 }
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.bundle.min.js
--- a/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js
+++ b/src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.min.js