Skip to content

Commit

Permalink
MudDrawer: Add OverlayAutoClose, use OnClosed instead of OnClick (#9500)
Browse files Browse the repository at this point in the history
ScarletKuro authored Jul 25, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent bf30321 commit 2ad7b78
Showing 6 changed files with 64 additions and 7 deletions.
4 changes: 2 additions & 2 deletions src/MudBlazor.Docs/Pages/Components/Drawer/DrawerPage.razor
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@
<DocsPageSection>
<SectionHeader Title="Temporary">
<Description>
Temporary Drawers can be opened temporarily above all other content until a section is selected or clicked on an overlay.
Temporary Drawers can be opened temporarily above all other content until a section is selected, or until the overlay is clicked if <CodeInline>OverlayAutoClose</CodeInline> is set to true.
</Description>
</SectionHeader>
<SectionContent Code="@nameof(DrawerTemporaryExample)" ShowCode="false">
@@ -40,7 +40,7 @@
<DocsPageSection>
<SectionHeader Title="Persistent">
<Description>
Persistent Drawer is outside of its container. When opened, it forces other contents to change their size.
Persistent Drawer is outside its container. When opened, it forces other contents to change their size.
Persistent Drawer will stay open until the <CodeInline>Open</CodeInline> parameter is set to false again.
</Description>
</SectionHeader>
Original file line number Diff line number Diff line change
@@ -4,21 +4,23 @@
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.End))">End</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Top))">Top</MudButton>
<MudButton Variant="Variant.Text" OnClick="@(() => OpenDrawer(Anchor.Bottom))">Bottom</MudButton>

<MudDrawer @bind-Open="@_open" Anchor="@_anchor" Elevation="1" Variant="@DrawerVariant.Temporary">
<MudSwitch @bind-Value="_overlayAutoClose" Label="Overlay Autoclose" Color="Color.Secondary" />
<MudDrawer @bind-Open="@_open" Anchor="@_anchor" Elevation="1" Variant="@DrawerVariant.Temporary" OverlayAutoClose="@_overlayAutoClose">
<MudDrawerHeader>
<MudText Typo="Typo.h6">My App</MudText>
</MudDrawerHeader>
<MudNavMenu>
<MudNavLink Match="NavLinkMatch.All">Store</MudNavLink>
<MudNavLink Match="NavLinkMatch.All">Library</MudNavLink>
<MudNavLink Match="NavLinkMatch.All">Community</MudNavLink>
<MudNavLink OnClick="_ => _open = false">Close Drawer</MudNavLink>
</MudNavMenu>
</MudDrawer>

@code{
private bool _open;
private Anchor _anchor;
private bool _overlayAutoClose = true;

private void OpenDrawer(Anchor anchor)
{
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@namespace MudBlazor.UnitTests.TestComponents

<MudDrawer @ref="@Drawer" @bind-Open="@_open" Variant="@Variant" Overlay="@Overlay" ClipMode="@ClipMode"></MudDrawer>
<MudDrawer @ref="@Drawer" @bind-Open="@_open" Variant="@Variant" Overlay="@Overlay" OverlayAutoClose="@OverlayAutoClose" ClipMode="@ClipMode"></MudDrawer>
<button @onclick="@HandleButtonClick" />

@code {
@@ -17,5 +17,8 @@
[Parameter]
public DrawerClipMode ClipMode { get; set; }

[Parameter]
public bool OverlayAutoClose { get; set; } = true;

public void HandleButtonClick() => _open = !_open;
}
41 changes: 40 additions & 1 deletion src/MudBlazor.UnitTests/Components/DrawerTest.cs
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@
using System.Threading.Tasks;
using Bunit;
using FluentAssertions;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging.Abstractions;
using Microsoft.JSInterop;
@@ -41,7 +42,7 @@ private BrowserViewportService AddBrowserViewportService(BrowserWindowSize brows

private BrowserViewportService AddBrowserViewportService(int height = 640, int width = 960) => AddBrowserViewportService(new BrowserWindowSize { Height = height, Width = width });

private BrowserWindowSize BreakpointBrowserAssociatedSize(Breakpoint breakpoint)
private static BrowserWindowSize BreakpointBrowserAssociatedSize(Breakpoint breakpoint)
{
return breakpoint switch
{
@@ -70,6 +71,44 @@ public void TemporaryClosed_Open_CheckOpened_Close_CheckClosed()
comp.Instance.Drawer.Open.Should().BeFalse();
}

[Test]
[TestCase(true)]
[TestCase(false)]
public async Task Temporary_OverlayAutoClose(bool overlayAutoClose)
{
_ = AddBrowserViewportService();
var comp = Context.RenderComponent<DrawerTest1>(parameters => parameters
.Add(parameter => parameter.Variant, DrawerVariant.Temporary)
.Add(parameter => parameter.OverlayAutoClose, overlayAutoClose));

// Open the drawer
comp.Find("button").Click();

comp.FindAll("aside.mud-drawer--open.mud-drawer-temporary").Count.Should().Be(1);
comp.FindAll("aside+.mud-overlay-drawer").Count.Should().Be(1);
comp.Instance.Drawer.Open.Should().BeTrue();

// Clicking on the overlay
await comp.Find("div.mud-overlay").ClickAsync(new MouseEventArgs());

if (overlayAutoClose)
{
// Drawer should close
comp.FindAll("aside.mud-drawer--open.mud-drawer-temporary").Count.Should().Be(0);
comp.FindAll("aside.mud-drawer--closed.mud-drawer-temporary").Count.Should().Be(1);
comp.FindAll("aside+.mud-overlay-drawer").Count.Should().Be(0);
comp.Instance.Drawer.Open.Should().BeFalse();
}
else
{
// Drawer should stay open
comp.FindAll("aside.mud-drawer--open.mud-drawer-temporary").Count.Should().Be(1);
comp.FindAll("aside.mud-drawer--closed.mud-drawer-temporary").Count.Should().Be(0);
comp.FindAll("aside+.mud-overlay-drawer").Count.Should().Be(1);
comp.Instance.Drawer.Open.Should().BeTrue();
}
}

[Test]
public void TemporaryClosedWithoutOverlay_Open_CheckOverlay()
{
2 changes: 1 addition & 1 deletion src/MudBlazor/Components/Drawer/MudDrawer.razor
Original file line number Diff line number Diff line change
@@ -8,4 +8,4 @@
</CascadingValue>
</div>
</aside>
<MudOverlay Visible="@OverlayVisible" @onclick="@CloseDrawerAsync" Class="@OverlayClass" DarkBackground="true" LockScroll="false" />
<MudOverlay Visible="@OverlayVisible" AutoClose="@OverlayAutoClose" OnClosed="CloseDrawerAsync" Class="@OverlayClass" DarkBackground="true" LockScroll="false" />
13 changes: 13 additions & 0 deletions src/MudBlazor/Components/Drawer/MudDrawer.razor.cs
Original file line number Diff line number Diff line change
@@ -162,6 +162,19 @@ public MudDrawer()
[Category(CategoryTypes.Drawer.Behavior)]
public bool Overlay { get; set; } = true;

/// <summary>
/// Sets a value indicating whether the overlay should automatically close when clicked.
/// </summary>
/// <remarks>
/// If the <see cref="Variant"/> is set to <see cref="DrawerVariant.Temporary"/>, an overlay will be displayed.
/// When this property is <c>true</c>, clicking on the overlay will close it automatically.
/// When this property is <c>false</c>, the overlay will not close automatically.
/// Defaults to <c>true</c>.
/// </remarks>
[Parameter]
[Category(CategoryTypes.Drawer.Behavior)]
public bool OverlayAutoClose { get; set; } = true;

/// <summary>
/// For mini drawers, opens this drawer when the pointer hovers over it.
/// </summary>

0 comments on commit 2ad7b78

Please sign in to comment.