Connected.Components/Components/Tabs/TabPanel.razor

@namespace Connected.Components
@using Connected.Annotations;
@inherits UIComponent
@implements IAsyncDisposable

@if (Parent?.KeepPanelsAlive == true)
{
    <div @attributes="UserAttributes" class="@Class" style="display:@(Parent?.ActivePanel == this ? "contents" : "none");@Style">
        @ChildContent
    </div>
}
else
{
    @if (Parent?.ActivePanel == this)
    {
        @ChildContent
    }
}

@code {

    private Boolean _disposed;

    [CascadingParameter] private Tabs Parent { get; set; }

    public ElementReference PanelRef;


    /// <summary>
    /// Text will be displayed in the TabPanel as TabTitle.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public string Text { get; set; }

    /// <summary>
    /// Icon placed before the text if set.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public string Icon { get; set; }

    /// <summary>
    /// If true, the tabpanel will be disabled.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Behavior)]
    public bool Disabled { get; set; }

    /// <summary>
    /// Optional information to be showed into a badge
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public object BadgeData { get; set; }

    /// <summary>
    /// Optional information to show the badge as a dot.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Behavior)]
    public bool BadgeDot { get; set; }

    /// <summary>
    /// The color of the badge.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Appearance)]
    public ThemeColor BadgeColor { get; set; } = ThemeColor.Primary;

    /// <summary>
    /// Unique TabPanel ID. Useful for activation when Panels are dynamically generated.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public object ID { get; set; }

    /// <summary>
    /// Raised when tab is clicked
    /// </summary>
    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }

    /// <summary>
    /// Child content of component.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public RenderFragment ChildContent { get; set; }

    /// <summary>
    /// Tab content of component.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public RenderFragment TabContent { get; set; }

    /// <summary>
    /// Tab content wrapper of component. It is used to wrap the content of a tab heading in a user supplied div or component. 
    /// Use @context in the TabWrapperContent to render the tab header within your custom wrapper. 
    /// This is most useful with tooltips, which must wrap the entire content they refer to.
    /// </summary>
    [Parameter] 
    [Category(CategoryTypes.Tabs.Behavior)]
    public RenderFragment<RenderFragment> TabWrapperContent { get; set; }

    /// <summary>
    /// TabPanel Tooltip. It will be ignored if TabContent is provided.
    /// </summary>
    [Parameter]
    [Category(CategoryTypes.Tabs.Behavior)]
    public string ToolTip { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if(firstRender == true && Parent != null)
        {
            await Parent.SetPanelRef(PanelRef);
        }
    }

    protected override void OnInitialized()
    {
        // NOTE: we must not throw here because we need the component to be able to live for the API docs to be able to infer default values
        //if (Parent == null)
        //    throw new ArgumentNullException(nameof(Parent), "TabPanel must exist within a Tabs component");
        base.OnInitialized();

        Parent?.AddPanel(this);
    }

    public async ValueTask DisposeAsync()
    {
        if(_disposed == true) { return;  }

        _disposed = true;
        await Parent?.RemovePanel(this);

    }
}