Skip to content

Commit

Permalink
feat(blazorui): improve BitButtonGroup component #9463 (#9517)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cyrus-Sushiant
Cyrus-Sushiant authored Dec 20, 2024
1 parent f4382c4 commit 6dc2fca
Show file tree
Hide file tree
Showing 17 changed files with 2,301 additions and 949 deletions.
12 changes: 9 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@
tabindex="@(isEnabled ? 0 : -1)"
disabled="@(isEnabled is false)"
aria-disabled="@(isEnabled is false)"
title="@GetItemTitle(item)"
style="@GetStyle(item)"
class="bit-btg-itm @GetClass(item)">
class="@GetItemClass(item)">
@if (template is not null)
{
@template(item)
Expand All @@ -33,12 +34,17 @@
}
else
{
var iconName = GetIconName(item);
var iconName = GetItemIconName(item);
@if (iconName.HasValue())
{
<i class="bit-icon bit-icon--@iconName" />
}
<span class="bit-btg-btx">@GetText(item)</span>

var text = GetItemText(item);
if (text.HasValue())
{
<span class="bit-btg-btx">@text</span>
}
}
</button>
}
Expand Down
318 changes: 316 additions & 2 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ namespace Bit.BlazorUI;

public partial class BitButtonGroup<TItem> : BitComponentBase where TItem : class
{
private TItem? _toggleItem;
private List<TItem> _items = [];
private IEnumerable<TItem> _oldItems = default!;



/// <summary>
/// The EditContext, which is set if the button is inside an <see cref="EditForm"/>
/// </summary>
Expand All @@ -27,6 +27,11 @@ public partial class BitButtonGroup<TItem> : BitComponentBase where TItem : clas
[Parameter, ResetClassBuilder]
public BitColor? Color { get; set; }

/// <summary>
/// Determines that only the icon should be rendered.
/// </summary>
[Parameter] public bool IconOnly { get; set; }

/// <summary>
/// List of Item, each of which can be a button with different action in the ButtonGroup.
/// </summary>
Expand Down Expand Up @@ -58,6 +63,11 @@ public partial class BitButtonGroup<TItem> : BitComponentBase where TItem : clas
[Parameter, ResetClassBuilder]
public BitSize? Size { get; set; }

/// <summary>
/// Display ButtonGroup with toggle mode enabled for each button.
/// </summary>
[Parameter] public bool Toggled { get; set; }

/// <summary>
/// The visual variant of the button group.
/// </summary>
Expand Down Expand Up @@ -143,7 +153,7 @@ protected override void OnParametersSet()
if (_oldItems is not null && Items.SequenceEqual(_oldItems)) return;

_oldItems = Items;
_items = Items.ToList();
_items = [.. Items];
}


Expand Down Expand Up @@ -175,6 +185,118 @@ private async Task HandleOnItemClick(TItem item)
item.GetValueFromProperty<Action<TItem>?>(NameSelectors.OnClick.Name)?.Invoke(item);
}
}

if (Toggled)
{
if (_toggleItem == item)
{
_toggleItem = null;
}
else
{
_toggleItem = item;
}
}
}

private string? GetItemClass(TItem? item)
{
List<string> classes = ["bit-btg-itm"];

if (GetReversedIcon(item))
{
classes.Add("bit-btg-rvi");
}

if (_toggleItem == item)
{
classes.Add("bit-btg-chk");
}

var classItem = GetClass(item);
if (classItem.HasValue())
{
classes.Add(classItem!);
}

return string.Join(' ', classes);
}

private string? GetItemText(TItem? item)
{
if (IconOnly) return null;

if (Toggled)
{
if (_toggleItem == item)
{
var onText = GetOnText(item);
if (onText.HasValue())
{
return onText;
}
}
else
{
var offText = GetOffText(item);
if (offText.HasValue())
{
return offText;
}
}
}

return GetText(item);
}

private string? GetItemTitle(TItem? item)
{
if (Toggled)
{
if (_toggleItem == item)
{
var onTitle = GetOnTitle(item);
if (onTitle.HasValue())
{
return onTitle;
}
}
else
{
var offTitle = GetOffTitle(item);
if (offTitle.HasValue())
{
return offTitle;
}
}
}

return GetTitle(item);
}

private string? GetItemIconName(TItem? item)
{
if (Toggled)
{
if (_toggleItem == item)
{
var onIconName = GetOnIconName(item);
if (onIconName.HasValue())
{
return onIconName;
}
}
else
{
var offIconName = GetOffIconName(item);
if (offIconName.HasValue())
{
return offIconName;
}
}
}

return GetIconName(item);
}

private string? GetClass(TItem? item)
Expand Down Expand Up @@ -225,6 +347,54 @@ private async Task HandleOnItemClick(TItem item)
return item.GetValueFromProperty<string?>(NameSelectors.IconName.Name);
}

private string? GetOnIconName(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OnIconName;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OnIconName;
}

if (NameSelectors is null) return null;

if (NameSelectors.OnIconName.Selector is not null)
{
return NameSelectors.OnIconName.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OnIconName.Name);
}

private string? GetOffIconName(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OffIconName;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OffIconName;
}

if (NameSelectors is null) return null;

if (NameSelectors.OffIconName.Selector is not null)
{
return NameSelectors.OffIconName.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OffIconName.Name);
}

private bool GetIsEnabled(TItem? item)
{
if (item is null) return false;
Expand Down Expand Up @@ -320,4 +490,148 @@ private bool GetIsEnabled(TItem? item)

return item.GetValueFromProperty<string?>(NameSelectors.Text.Name);
}

private string? GetOnText(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OnText;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OnText;
}

if (NameSelectors is null) return null;

if (NameSelectors.OnText.Selector is not null)
{
return NameSelectors.OnText.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OnText.Name);
}

private string? GetOffText(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OffText;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OffText;
}

if (NameSelectors is null) return null;

if (NameSelectors.OffText.Selector is not null)
{
return NameSelectors.OffText.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OffText.Name);
}

private string? GetTitle(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.Title;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.Title;
}

if (NameSelectors is null) return null;

if (NameSelectors.Title.Selector is not null)
{
return NameSelectors.Title.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.Title.Name);
}

private string? GetOnTitle(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OnTitle;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OnTitle;
}

if (NameSelectors is null) return null;

if (NameSelectors.OnTitle.Selector is not null)
{
return NameSelectors.OnTitle.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OnTitle.Name);
}

private string? GetOffTitle(TItem? item)
{
if (item is null) return null;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.OffTitle;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.OffTitle;
}

if (NameSelectors is null) return null;

if (NameSelectors.OffTitle.Selector is not null)
{
return NameSelectors.OffTitle.Selector!(item);
}

return item.GetValueFromProperty<string?>(NameSelectors.OffTitle.Name);
}

private bool GetReversedIcon(TItem? item)
{
if (item is null) return false;

if (item is BitButtonGroupItem buttonGroupItem)
{
return buttonGroupItem.ReversedIcon;
}

if (item is BitButtonGroupOption buttonGroupOption)
{
return buttonGroupOption.ReversedIcon;
}

if (NameSelectors is null) return false;

if (NameSelectors.ReversedIcon.Selector is not null)
{
return NameSelectors.ReversedIcon.Selector!(item);
}

return item.GetValueFromProperty(NameSelectors.ReversedIcon.Name, false);
}
}
Loading

0 comments on commit 6dc2fca

Please sign in to comment.