Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve BitButtonGroup (#9463) #9517

Merged
merged 1 commit into from
Dec 20, 2024
Merged

Improve BitButtonGroup (#9463) #9517

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor
View file
Open in desktop
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
Open in desktop
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);
}

msynk marked this conversation as resolved.
Show resolved Hide resolved
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
Loading