🚸 feat(DataTable): update disabled icon color and add disable classna…

…me to tr if not selectable (#2150)
masastack · Sep 14, 2024 · cd86563 · cd86563
1 parent e7de6f4
commit cd86563
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 23 deletions.
diff --git a/src/Masa.Blazor/Components/DataIterator/MDataIterator.razor.cs b/src/Masa.Blazor/Components/DataIterator/MDataIterator.razor.cs
@@ -301,7 +301,7 @@ public void Select(TItem item, bool value = true)
 
     public bool IsSelectable(TItem item)
     {
-        return SelectableKey?.Invoke(item) != false;
+        return SelectableKey?.Invoke(item) is null or true;
     }
 
     public void ToggleSelectAll(bool value)

diff --git a/src/Masa.Blazor/Components/DataTable/MDataTable.razor b/src/Masa.Blazor/Components/DataTable/MDataTable.razor
@@ -250,11 +250,16 @@
 
     private RenderFragment GenDefaultSimpleRow(TItem item, int index) => __builder =>
     {
+        var disabled = IsSelectable(item) == false;
+        var isSelected = IsSelected(item);
+        var isExpanded = IsExpanded(item);
+
         Dictionary<string, object?> parameters = new()
         {
             { nameof(MDataTableRow<TItem>.Headers), ComputedHeaders },
-            { nameof(MDataTableRow<TItem>.IsSelected), (Func<TItem, bool>)IsSelected },
-            { nameof(MDataTableRow<TItem>.IsExpanded), (Func<TItem, bool>)IsExpanded },
+            { nameof(MDataTableRow<TItem>.IsSelected), isSelected },
+            { nameof(MDataTableRow<TItem>.IsExpanded), isExpanded },
+            { nameof(MDataTableRow<TItem>.Disabled), disabled},
             { nameof(MDataTableRow<TItem>.Stripe), Stripe },
             { nameof(MDataTableRow<TItem>.ItemClass), ItemClass },
             { nameof(MDataTableRow<TItem>.Index), index },
@@ -298,8 +303,8 @@
                     index,
                     EventCallback.Factory.Create<bool>(this, val => Expand(item, val)),
                     EventCallback.Factory.Create<bool>(this, val => Select(item, val)),
-                    IsExpanded(item),
-                    IsSelected(item),
+                    isExpanded,
+                    isSelected,
                     ComputedHeaders.ToList(),
                     EventCallback.Factory.Create<MouseEventArgs>(this, e => HandleOnRowClickAsync(e, item)),
                     EventCallback.Factory.Create<MouseEventArgs>(this, e => HandleOnRowDblClickAsync(e, item)),
@@ -315,26 +320,24 @@
                 }
                 else
                 {
-                    var expanded = IsExpanded(item);
-
-                    <MIcon Class="@($"m-data-table__expand-icon {(expanded ? "m-data-table__expand-icon--active" : "")}")"
-                           OnClick="@(() => Expand(item, !expanded))"
+                    <MIcon Class="@($"m-data-table__expand-icon {(isExpanded ? "m-data-table__expand-icon--active" : "")}")"
+                           OnClick="@(() => Expand(item, !isExpanded))"
                            OnClickStopPropagation>
                         @ExpandIcon
                     </MIcon>
                 }
             }
             else if (HasSelect((context)))
             {
-                if (ItemDataTableSelectContent != null)
+            if (ItemDataTableSelectContent != null)
                 {
                     @ItemDataTableSelectContent(CreateExpandOrSelectContext())
                 }
                 else
                 {
                     <MSimpleCheckbox Class="m-data-table__checkbox"
-                                     Value="@IsSelected(item)"
-                                     Disabled="@(!IsSelectable(item))"
+                                     Value="@isSelected"
+                                     Disabled="@disabled"
                                      Color="@(CheckboxColor ?? "")"
                                      ValueChanged="val => Select(item, val)">
                     </MSimpleCheckbox>

diff --git a/src/Masa.Blazor/Components/DataTable/MobileRow/MDataTableMobileRow.razor.cs b/src/Masa.Blazor/Components/DataTable/MobileRow/MDataTableMobileRow.razor.cs
@@ -26,10 +26,13 @@ public partial class MDataTableMobileRow<TItem>
     public RenderFragment<DataTableHeader>? HeaderColContent { get; set; }
 
     [Parameter]
-    public Func<TItem, bool>? IsSelected { get; set; }
+    public bool Disabled { get; set; }
 
     [Parameter]
-    public Func<TItem, bool>? IsExpanded { get; set; }
+    public bool IsSelected { get; set; }
+
+    [Parameter]
+    public bool IsExpanded { get; set; }
 
     [Parameter]
     public Func<TItem, string?>? ItemClass { get; set; }
@@ -46,12 +49,12 @@ protected override IEnumerable<string> BuildComponentClass()
     {
         yield return _row.Name;
 
-        if (IsSelected?.Invoke(Item) is true)
+        if (IsSelected)
         {
             yield return "m-data-table__selected";
         }
 
-        if (IsExpanded?.Invoke(Item) is true)
+        if (IsExpanded)
         {
             yield return "m-data-table__expanded m-data-table__expanded__row";
         }
@@ -61,6 +64,11 @@ protected override IEnumerable<string> BuildComponentClass()
             yield return "stripe";
         }
 
+        if (Disabled)
+        {
+            yield return "m-data-table__disabled";
+        }
+
         yield return ItemClass?.Invoke(Item) ?? "";
 
     }

diff --git a/src/Masa.Blazor/Components/DataTable/Row/MDataTableRow.razor.cs b/src/Masa.Blazor/Components/DataTable/Row/MDataTableRow.razor.cs
@@ -23,10 +23,13 @@ public partial class MDataTableRow<TItem>
     private MasaBlazor MasaBlazor { get; set; } = null!;
 
     [Parameter]
-    public Func<TItem, bool>? IsSelected { get; set; }
+    public bool Disabled { get; set; }
 
     [Parameter]
-    public Func<TItem, bool>? IsExpanded { get; set; }
+    public bool IsSelected { get; set; }
+
+    [Parameter]
+    public bool IsExpanded { get; set; }
 
     [Parameter]
     public Func<TItem, string?>? ItemClass { get; set; }
@@ -38,12 +41,12 @@ public partial class MDataTableRow<TItem>
 
     protected override IEnumerable<string?> BuildComponentClass()
     {
-        if (IsSelected?.Invoke(Item) is true)
+        if (IsSelected)
         {
             yield return "m-data-table__selected";
         }
 
-        if (IsExpanded?.Invoke(Item) is true)
+        if (IsExpanded)
         {
             yield return "m-data-table__expanded m-data-table__expanded__row";
         }
@@ -53,6 +56,11 @@ public partial class MDataTableRow<TItem>
             yield return "stripe";
         }
 
+        if (Disabled)
+        {
+            yield return "m-data-table__disabled";
+        }
+
         yield return ItemClass?.Invoke(Item);
     }
 

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.css
@@ -18173,7 +18173,7 @@ html.overflow-y-hidden {
     opacity: 0.12;
 }
 .theme--light.m-icon.m-icon.m-icon--disabled {
-    color: rgba(0, 0, 0, 0.38) !important;
+    color: rgba(0, 0, 0, 0.24) !important;
 }
 
 .theme--dark.m-icon {
@@ -18183,7 +18183,7 @@ html.overflow-y-hidden {
     opacity: 0.24;
 }
 .theme--dark.m-icon.m-icon.m-icon--disabled {
-    color: rgba(255, 255, 255, 0.5) !important;
+    color: rgba(255, 255, 255, 0.42) !important;
 }
 
 .m-icon.m-icon {

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css