mirror of
				https://github.com/MindWorkAI/AI-Studio.git
				synced 2025-11-04 11:20:20 +00:00 
			
		
		
		
	Added a split button component
This commit is contained in:
		
							parent
							
								
									ea0ead58f8
								
							
						
					
					
						commit
						77513df6cc
					
				
							
								
								
									
										24
									
								
								app/MindWork AI Studio/Components/Blocks/SplitButton.razor
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										24
									
								
								app/MindWork AI Studio/Components/Blocks/SplitButton.razor
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,24 @@
 | 
			
		||||
@typeparam T
 | 
			
		||||
 | 
			
		||||
<MudButtonGroup Color="@this.Color" Variant="Variant.Filled">
 | 
			
		||||
    @if (string.IsNullOrWhiteSpace(this.Icon))
 | 
			
		||||
    {
 | 
			
		||||
        <MudButton OnClick="() => this.OnClick(this.selectedValue)">
 | 
			
		||||
            @this.SelectedValueName()
 | 
			
		||||
        </MudButton>
 | 
			
		||||
    }
 | 
			
		||||
    else
 | 
			
		||||
    {
 | 
			
		||||
        <MudButton StartIcon="@this.Icon" OnClick="() => this.OnClick(this.selectedValue)">
 | 
			
		||||
            @this.SelectedValueName()
 | 
			
		||||
        </MudButton>
 | 
			
		||||
    }
 | 
			
		||||
    <MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;">
 | 
			
		||||
        @foreach(var item in this.Items)
 | 
			
		||||
        {
 | 
			
		||||
            <MudMenuItem OnClick="() => this.SelectItem(item)">
 | 
			
		||||
                @this.NameFunc(item)
 | 
			
		||||
            </MudMenuItem>
 | 
			
		||||
        }
 | 
			
		||||
    </MudMenu>
 | 
			
		||||
</MudButtonGroup>
 | 
			
		||||
@ -0,0 +1,64 @@
 | 
			
		||||
using Microsoft.AspNetCore.Components;
 | 
			
		||||
 | 
			
		||||
namespace AIStudio.Components.Blocks;
 | 
			
		||||
 | 
			
		||||
public partial class SplitButton<T> : ComponentBase
 | 
			
		||||
{
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public Color Color { get; set; } = Color.Default;
 | 
			
		||||
    
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public string Icon { get; set; } = string.Empty;
 | 
			
		||||
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public IReadOnlyCollection<T> Items { get; set; } = [];
 | 
			
		||||
    
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public Func<T, string> NameFunc { get; set; } = _ => string.Empty;
 | 
			
		||||
    
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public T? PreselectedValue { get; set; }
 | 
			
		||||
    
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public Func<T?, Task> OnClick { get; set; } = _ => Task.CompletedTask;
 | 
			
		||||
    
 | 
			
		||||
    /// <summary>
 | 
			
		||||
    /// What happens when the user selects an item by the dropdown?
 | 
			
		||||
    /// Immediate = true means that the OnClick event is triggered immediately
 | 
			
		||||
    /// after the user selects an item. Immediate = false means that the OnClick
 | 
			
		||||
    /// event is triggered only when the user clicks the button.
 | 
			
		||||
    /// </summary>
 | 
			
		||||
    [Parameter]
 | 
			
		||||
    public bool Immediate { get; set; }
 | 
			
		||||
 | 
			
		||||
    #region Overrides of ComponentBase
 | 
			
		||||
 | 
			
		||||
    protected override async Task OnInitializedAsync()
 | 
			
		||||
    {
 | 
			
		||||
        if(this.PreselectedValue is not null)
 | 
			
		||||
            this.selectedValue = this.PreselectedValue;
 | 
			
		||||
        else
 | 
			
		||||
            this.selectedValue = this.Items.FirstOrDefault();
 | 
			
		||||
        
 | 
			
		||||
        await base.OnInitializedAsync();
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #endregion
 | 
			
		||||
 | 
			
		||||
    private T? selectedValue;
 | 
			
		||||
    
 | 
			
		||||
    private string SelectedValueName()
 | 
			
		||||
    {
 | 
			
		||||
        if(this.selectedValue is null)
 | 
			
		||||
            return "Select...";
 | 
			
		||||
        
 | 
			
		||||
        return this.NameFunc(this.selectedValue!);
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    private void SelectItem(T item)
 | 
			
		||||
    {
 | 
			
		||||
        this.selectedValue = item;
 | 
			
		||||
        if(this.Immediate)
 | 
			
		||||
            this.OnClick(this.selectedValue);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user