Skip to content

Commit c8c1c49

Browse files
msynkmsynk
authored
fix(blazorui): resolve issues of BitModal #10847 (#10848)
1 parent 9e18e2e commit c8c1c49

File tree

15 files changed

+86
-34
lines changed

15 files changed

+86
-34
lines changed

‎src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@
1313
dir="@Dir?.ToString().ToLower()">
1414
<div style="@Styles?.Left" class="bit-ash-left @Classes?.Left"></div>
1515
<div id="BitAppShell-container" @ref="_containerRef" style="@Styles?.Main" class="bit-ash-main @Classes?.Main">
16-
<BitCascadingValueProvider Values="CascadingValues">
17-
@ChildContent
18-
</BitCascadingValueProvider>
16+
<CascadingValue Name="@BitAppShell.Container" Value="_containerRef">
17+
<BitCascadingValueProvider Values="CascadingValues">
18+
@ChildContent
19+
</BitCascadingValueProvider>
20+
</CascadingValue>
1921
</div>
2022
<div style="@Styles?.Right" class="bit-ash-right @Classes?.Right"></div>
2123
</div>

‎src/BlazorUI/Bit.BlazorUI.Extras/Components/AppShell/BitAppShell.razor.cs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ namespace Bit.BlazorUI;
99
[SuppressMessage("Trimming", "IL2110:Field with 'DynamicallyAccessedMembersAttribute' is accessed via reflection. Trimmer can't guarantee availability of the requirements of the field.", Justification = "<Pending>")]
1010
public partial class BitAppShell : BitComponentBase
1111
{
12+
public const string Container = "BitAppShell.Container";
13+
14+
1215
private bool _locationChanged;
1316
private ElementReference _containerRef = default!;
1417

@@ -59,6 +62,11 @@ public async Task GoToTop(BitScrollBehavior? behavior = null)
5962
await _js.BitExtrasGoToTop(_containerRef, behavior);
6063
}
6164

65+
/// <summary>
66+
/// The element reference to the main container of the ap shell.
67+
/// </summary>
68+
public ElementReference ContainerRef => _containerRef;
69+
6270

6371

6472
protected override string RootElementClass => "bit-ash";

‎src/BlazorUI/Bit.BlazorUI.Extras/Components/ModalService/BitModalService.cs

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,15 @@ public async Task Close(BitModalReference modalRef)
128128

129129
var modal = new RenderFragment(builder =>
130130
{
131-
builder.OpenComponent<BitModal>(0);
131+
var seq = 0;
132+
builder.OpenComponent<BitModal>(seq++);
132133
builder.SetKey(modalReference.Id);
133-
builder.AddComponentParameter(1, nameof(BitModal.IsOpen), true);
134-
builder.AddComponentParameter(2, nameof(BitModal.OnOverlayClick), EventCallback.Factory.Create<MouseEventArgs>(modalReference, () => modalReference.Close()));
135-
builder.AddComponentParameter(3, nameof(BitModal.ChildContent), content);
134+
builder.AddComponentParameter(seq++, nameof(BitModal.IsOpen), true);
135+
if (modalParameters?.Blocking is not true)
136+
{
137+
builder.AddComponentParameter(seq++, nameof(BitModal.OnOverlayClick), EventCallback.Factory.Create<MouseEventArgs>(modalReference, () => modalReference.Close()));
138+
}
139+
builder.AddComponentParameter(seq++, nameof(BitModal.ChildContent), content);
136140
builder.CloseComponent();
137141
});
138142
modalReference.SetModal(modal);

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.razor.cs

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ public partial class BitModal : BitComponentBase
99
private bool _internalIsOpen;
1010
private string _containerId = default!;
1111

12+
13+
1214
[Inject] private IJSRuntime _js { get; set; } = default!;
1315

1416

@@ -105,6 +107,11 @@ public partial class BitModal : BitComponentBase
105107
[Parameter, ResetClassBuilder]
106108
public BitPosition? Position { get; set; }
107109

110+
/// <summary>
111+
/// Set the element reference for which the Modal disables its scroll if applicable.
112+
/// </summary>
113+
[Parameter] public ElementReference? ScrollerElement { get; set; }
114+
108115
/// <summary>
109116
/// Set the element selector for which the Modal disables its scroll if applicable.
110117
/// </summary>
@@ -237,7 +244,14 @@ private async Task ToggleScroll(bool isOpen)
237244
{
238245
if (ModalParameters.AutoToggleScroll is false) return;
239246

240-
_offsetTop = await _js.BitUtilsToggleOverflow(ModalParameters.ScrollerSelector ?? "body", isOpen);
247+
if (modalParameters.ScrollerElement.HasValue)
248+
{
249+
_offsetTop = await _js.BitUtilsToggleOverflow(ModalParameters.ScrollerElement!.Value, isOpen);
250+
}
251+
else
252+
{
253+
_offsetTop = await _js.BitUtilsToggleOverflow(ModalParameters.ScrollerSelector ?? "body", isOpen);
254+
}
241255
}
242256

243257
private void OnSetIsOpen()

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
position: fixed;
1111
font-weight: 400;
1212
align-items: center;
13-
pointer-events: auto;
13+
pointer-events: none;
1414
z-index: $zindex-modal;
1515
justify-content: center;
1616
font-size: spacing(1.75);
@@ -36,12 +36,14 @@
3636
inset: 0;
3737
z-index: 0;
3838
position: absolute;
39+
pointer-events: all;
3940
background-color: $clr-bg-overlay;
4041
}
4142

4243
.bit-mdl-ctn {
4344
max-width: 100%;
4445
position: absolute;
46+
pointer-events: all;
4547
box-sizing: border-box;
4648
background-color: $clr-bg-pri;
4749
box-shadow: $box-shadow-callout;

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModal.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
const element = document.getElementById(containerId)! as HTMLElement;
1111
const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;
12+
if (!element || !dragElement) return;
1213

1314
let x = 0;
1415
let y = 0;
@@ -60,6 +61,7 @@
6061
if (!listeners) return;
6162

6263
const dragElement = document.querySelector(dragElementSelector)! as HTMLElement;
64+
if (!dragElement) return;
6365

6466
dragElement.removeEventListener('pointerdown', listeners['pointerdown']);
6567
dragElement.style.cursor = '';

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Modal/BitModalParameters.cs

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22

33
public class BitModalParameters
44
{
5-
public bool IsEnabled { get { return _modal?.IsEnabled ?? field; } set; } = true;
5+
public bool IsEnabled { get { return _modal?.IsEnabled is false ? false : field; } set; } = true;
66

77
public Dictionary<string, object> HtmlAttributes { get { return _modal?.HtmlAttributes ?? field; } set; } = [];
88

99
public BitDir? Dir { get { return _modal?.Dir ?? field; } set; }
1010

1111

12-
public bool AutoToggleScroll { get { return _modal?.AutoToggleScroll ?? field; } set; }
12+
public bool AutoToggleScroll { get { return _modal?.AutoToggleScroll is true ? true : field; } set; }
1313

14-
public bool AbsolutePosition { get { return _modal?.AbsolutePosition ?? field; } set; }
14+
public bool AbsolutePosition { get { return _modal?.AbsolutePosition is true ? true : field; } set; }
1515

16-
public bool Blocking { get { return _modal?.Blocking ?? field; } set; }
16+
public bool Blocking { get { return _modal?.Blocking is true ? true : field; } set; }
1717

1818
public BitModalClassStyles? Classes { get; set; }
1919

2020
public string? DragElementSelector { get { return _modal?.DragElementSelector ?? field; } set; }
2121

22-
public bool Draggable { get { return _modal?.Draggable ?? field; } set; }
22+
public bool Draggable { get { return _modal?.Draggable is true ? true : field; } set; }
2323

24-
public bool FullHeight { get { return _modal?.FullHeight ?? field; } set; }
24+
public bool FullHeight { get { return _modal?.FullHeight is true ? true : field; } set; }
2525

26-
public bool FullSize { get { return _modal?.FullSize ?? field; } set; }
26+
public bool FullSize { get { return _modal?.FullSize is true ? true : field; } set; }
2727

28-
public bool FullWidth { get { return _modal?.FullWidth ?? field; } set; }
28+
public bool FullWidth { get { return _modal?.FullWidth is true ? true : field; } set; }
2929

3030
public bool? IsAlert { get { return _modal?.IsAlert ?? field; } set; }
3131

32-
public bool Modeless { get { return _modal?.Modeless ?? field; } set; }
32+
public bool Modeless { get { return _modal?.Modeless is true ? true : field; } set; }
3333

3434
public EventCallback<MouseEventArgs> OnDismiss
3535
{
@@ -59,6 +59,8 @@ public EventCallback<MouseEventArgs> OnOverlayClick
5959

6060
public BitPosition? Position { get { return _modal?.Position ?? field; } set; }
6161

62+
public ElementReference? ScrollerElement { get { return _modal?.ScrollerElement ?? field; } set; }
63+
6264
public string? ScrollerSelector { get { return _modal?.ScrollerSelector ?? field; } set; }
6365

6466
public BitModalClassStyles? Styles { get; set; }
@@ -110,6 +112,7 @@ public void SetModal(BitModal modal)
110112
await params2.OnOverlayClick.InvokeAsync();
111113
}),
112114
Position = params1.Position ?? params2.Position,
115+
ScrollerElement = params1.ScrollerElement ?? params2.ScrollerElement,
113116
ScrollerSelector = params1.ScrollerSelector ?? params2.ScrollerSelector,
114117
Styles = BitModalClassStyles.Merge(params1.Styles, params2.Styles),
115118
SubtitleAriaId = params1.SubtitleAriaId ?? params2.SubtitleAriaId,

‎src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/UtilsJsRuntimeExtensions.cs

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,9 @@ internal static ValueTask<float> BitUtilsToggleOverflow(this IJSRuntime jsRuntim
4848
{
4949
return jsRuntime.Invoke<float>("BitBlazorUI.Utils.toggleOverflow", scrollerSelector, isHidden);
5050
}
51+
52+
internal static ValueTask<float> BitUtilsToggleOverflow(this IJSRuntime jsRuntime, ElementReference scrollerElement, bool isHidden)
53+
{
54+
return jsRuntime.Invoke<float>("BitBlazorUI.Utils.toggleOverflow", scrollerElement, isHidden);
55+
}
5156
}

‎src/BlazorUI/Bit.BlazorUI/Scripts/Utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@
9292
} catch (e) { console.error("BitBlazorUI.Utils.setStyle:", e); }
9393
}
9494

95-
public static toggleOverflow(selector: string, isOpen: boolean) {
96-
const element = document.querySelector(selector) as HTMLElement;
95+
public static toggleOverflow(selector: string | HTMLElement, isOpen: boolean) {
96+
const element = selector instanceof HTMLElement ? selector : document.querySelector(selector) as HTMLElement;
9797

9898
if (!element) return 0;
9999

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
<DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
2727
<BitButton OnClick="ShowModal">Show</BitButton>
2828

29-
@* <BitModalContainer ModalParameters="@(new() { AutoToggleScroll = true, Blocking = true })" /> *@
29+
@* <BitModalContainer ModalParameters="@(new() { AutoToggleScroll = true })" /> *@
3030
</DemoExample>
3131
</Examples>
3232
</DemoPage>

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ModalService/BitModalServiceDemo.razor.cs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,19 @@ public partial class BitModalServiceDemo
5353

5454
private async Task ShowModal()
5555
{
56-
await modalService.Show<ModalContent>(new BitModalParameters() { Modeless = true });
56+
await modalService.Show<ModalContent>(new BitModalParameters() { Draggable = true });
5757
}
5858

5959

6060
private readonly string example1RazorCode = @"
6161
<BitButton OnClick=""ShowModal"">Show</BitButton>
6262
63-
<BitModalContainer ModalParameters=""@(new() { AutoToggleScroll = true, Blocking = true })"" />";
63+
<BitModalContainer ModalParameters=""new() { AutoToggleScroll = true }"" />";
6464
private readonly string example1CsharpCode = @"
6565
[AutoInject] private BitModalService modalService = default!;
6666
6767
private async Task ShowModal()
6868
{
69-
await modalService.Show<ModalContent>(new BitModalParameters() { Modeless = true });
69+
await modalService.Show<ModalContent>(new BitModalParameters() { Draggable = true });
7070
}";
7171
}

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
</div>
9797
</BitModal>
9898

99-
<BitModal @bind-IsOpen="isOpenAutoToggleScroll" AutoToggleScroll>
99+
<BitModal @bind-IsOpen="isOpenAutoToggleScroll" AutoToggleScroll ScrollerElement="appShellContainer">
100100
<div class="modal-header">
101101
<span class="modal-header-text">AutoToggleScroll</span>
102102
<BitButton Variant="BitVariant.Text" OnClick="() => isOpenAutoToggleScroll = false" IconName="@BitIconName.ChromeClose" Title="Close" />

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Modal/BitModalDemo.razor.cs

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
public partial class BitModalDemo
44
{
5+
[CascadingParameter(Name = BitAppShell.Container)]
6+
private ElementReference? appShellContainer { get; set; }
7+
8+
9+
510
private readonly List<ComponentParameter> componentParameters =
611
[
712
new()
@@ -119,10 +124,17 @@ public partial class BitModalDemo
119124
Href = "#position-enum",
120125
},
121126
new()
127+
{
128+
Name = "ScrollerElement",
129+
Type = "ElementReference?",
130+
DefaultValue = "null",
131+
Description = "Set the element reference for which the Modal disables its scroll if applicable.",
132+
},
133+
new()
122134
{
123135
Name = "ScrollerSelector",
124-
Type = "string",
125-
DefaultValue = "body",
136+
Type = "string?",
137+
DefaultValue = "null",
126138
Description = "Set the element selector for which the Modal disables its scroll if applicable.",
127139
},
128140
new()

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@inherits LayoutComponentBase
22

33
<BitAppShell @ref="_appShellRef" PersistScroll>
4-
<BitLayout HideNavPanel="_isHomePage" NavPanelWidth="_isNavPanelOpen ? 0 : 14*16" StickyHeader>
4+
<BitLayout HideNavPanel="_isHomePage" NavPanelWidth="_isNavPanelOpen ? 0 : 14 * 16" StickyHeader>
55
<Header>
66
<AppHeader IsHomePage="_isHomePage" OnToggleNavPanel="() => _isNavPanelOpen = true" />
77
</Header>
@@ -25,4 +25,4 @@
2525
</BitLayout>
2626
</BitAppShell>
2727

28-
<BitModalContainer />
28+
<BitModalContainer ModalParameters="@(new() { AutoToggleScroll = true, ScrollerSelector = "#BitAppShell-container" })" />

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/MainLayout.razor.cs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ public partial class MainLayout : IDisposable
77
private bool _isHomePage;
88
private string? _pageTitle;
99
private bool _isNavPanelOpen;
10+
private BitAppShell? _appShellRef;
1011
private Action _unsubscribe = default!;
11-
private BitAppShell _appShellRef = default!;
12+
1213

1314

1415
[AutoInject] private IPubSubService _pubSubService = default!;
@@ -17,10 +18,6 @@ public partial class MainLayout : IDisposable
1718
[AutoInject] private IPrerenderStateService _prerenderStateService = default!;
1819

1920

20-
protected override void OnParametersSet()
21-
{
22-
base.OnParametersSet();
23-
}
2421

2522
protected override void OnInitialized()
2623
{
@@ -44,6 +41,8 @@ protected override void OnInitialized()
4441
});
4542
}
4643

44+
45+
4746
private void OnLocationChanged(object? sender, LocationChangedEventArgs args)
4847
{
4948
SetCurrentUrl();
@@ -57,6 +56,7 @@ private void SetCurrentUrl()
5756
}
5857

5958

59+
6060
public void Dispose()
6161
{
6262
_unsubscribe.Invoke();

0 commit comments

Comments
 (0)