@inherits DComponentBase
@* daisyUI Dropdown: https://daisyui.com/components/dropdown/ . The open state lives in C# (@bind-IsOpen):
dropdown-open shows the content and dropdown-close keeps the focus-within rule from showing it while closed.
While open, a transparent full-screen layer under the content closes it on an outside click; Escape closes it
too. With Hover the CSS hover rule opens it instead. *@
@Trigger
@if (IsOpen)
{
}
@ChildContent
@code {
[Parameter] public RenderFragment Trigger { get; set; }
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public bool IsOpen { get; set; }
[Parameter] public EventCallback IsOpenChanged { get; set; }
[Parameter] public DDropdownPlacement Placement { get; set; }
[Parameter] public DDropdownAlign Align { get; set; }
/// Open on hover (dropdown-hover) as well as on click.
[Parameter] public bool Hover { get; set; }
/// Close after any click inside the content, e.g. on a menu item.
[Parameter] public bool CloseOnContentClick { get; set; }
[Parameter] public string TriggerClass { get; set; }
[Parameter] public string ContentClass { get; set; }
string CssClass => Cx("dropdown", PlacementClass, AlignClass,
IsOpen ? "dropdown-open" : Hover ? "dropdown-hover" : "dropdown-close", Class);
string PlacementClass => Placement switch
{
DDropdownPlacement.Top => "dropdown-top",
DDropdownPlacement.Left => "dropdown-left",
DDropdownPlacement.Right => "dropdown-right",
_ => null
};
string AlignClass => Align switch
{
DDropdownAlign.Center => "dropdown-center",
DDropdownAlign.End => "dropdown-end",
_ => null
};
Task Toggle() => SetOpen(!IsOpen);
Task Close() => SetOpen(false);
Task OnContentClick() => CloseOnContentClick ? SetOpen(false) : Task.CompletedTask;
Task OnKeyDown(KeyboardEventArgs e) => e.Key == "Escape" && IsOpen ? SetOpen(false) : Task.CompletedTask;
async Task SetOpen(bool isOpen)
{
IsOpen = isOpen;
await IsOpenChanged.InvokeAsync(isOpen);
}
}