Skip to content

Commit ae3029f

Browse files
ArgoZhangArgoZhang
authored
fix(Table): not restore scrollbar after close drawer edit form (#5780)
* wip: 临时提交 * refactor: 增加 RenderBackdrop 方法 * refactor: 增加返回值 * refactor: 支持动画逻辑 * refactor: 修复 Table 关闭抽屉后滚动条消失问题 * refactor: 代码重构 * chore: bump version 9.5.3-beta01 * test: 补充单元测试 * refactor: 移除样式
1 parent eeb045d commit ae3029f

File tree

9 files changed

+90
-35
lines changed

9 files changed

+90
-35
lines changed

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>9.5.2</Version>
4+
<Version>9.5.3-beta01</Version>
55
</PropertyGroup>
66

77
<ItemGroup>

‎src/BootstrapBlazor/Components/Drawer/Drawer.razor‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
data-bb-keyboard="@KeyboardString" data-bb-scroll="@BodyScrollString">
77
@if (ShowBackdrop)
88
{
9-
<div tabindex="-1" class="drawer-backdrop" @onclick="@OnContainerClick">
10-
</div>
9+
@RenderBackdrop()
1110
}
1211
<div tabindex="-1" class="@DrawerClassString" style="@DrawerStyleString" @onclick:stopPropagation>
1312
<div class="drawer-content">

‎src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
namespace BootstrapBlazor.Components;
77

88
/// <summary>
9-
/// Drawer 组件基类
9+
/// Drawer component
1010
/// </summary>
1111
public partial class Drawer
1212
{
@@ -142,6 +142,14 @@ public partial class Drawer
142142

143143
private string? BodyScrollString => BodyScroll ? "true" : null;
144144

145+
private bool _render = true;
146+
147+
/// <summary>
148+
/// <inheritdoc/>
149+
/// </summary>
150+
/// <returns></returns>
151+
protected override bool ShouldRender() => _render;
152+
145153
/// <summary>
146154
/// <inheritdoc/>
147155
/// </summary>
@@ -163,19 +171,29 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
163171
/// <returns></returns>
164172
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(Close));
165173

174+
private RenderFragment RenderBackdrop() => builder =>
175+
{
176+
builder.OpenElement(0, "div");
177+
builder.AddAttribute(10, "class", "drawer-backdrop modal-backdrop fade");
178+
if (IsBackdrop)
179+
{
180+
builder.AddAttribute(20, "onclick", EventCallback.Factory.Create(this, OnContainerClick));
181+
}
182+
builder.CloseElement();
183+
};
184+
166185
/// <summary>
167186
/// 点击背景遮罩方法
168187
/// </summary>
169188
public async Task OnContainerClick()
170189
{
171-
if (IsBackdrop)
190+
if (OnClickBackdrop != null)
172191
{
173-
if (OnClickBackdrop != null)
174-
{
175-
await OnClickBackdrop();
176-
}
177-
await Close();
192+
await OnClickBackdrop();
178193
}
194+
_render = false;
195+
await Close();
196+
_render = true;
179197
}
180198

181199
/// <summary>
@@ -186,6 +204,11 @@ public async Task OnContainerClick()
186204
public async Task Close()
187205
{
188206
IsOpen = false;
207+
var animation = await InvokeAsync<bool>("execute", Id, false);
208+
if (animation)
209+
{
210+
await Task.Delay(300);
211+
}
189212
if (OnCloseAsync != null)
190213
{
191214
await OnCloseAsync();

‎src/BootstrapBlazor/Components/Drawer/Drawer.razor.js‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,8 @@ export function execute(id, open) {
8989
const dw = Data.get(id)
9090
const { el, body } = dw
9191
const drawerBody = el.querySelector('.drawer-body')
92+
const drawerBackdrop = el.querySelector('.drawer-backdrop')
93+
const animationFrame = getComputedStyle(drawerBody).getPropertyValue('transition') !== 'none';
9294

9395
let start = void 0
9496
const show = ts => {
@@ -100,10 +102,17 @@ export function execute(id, open) {
100102
requestAnimationFrame(show);
101103
}
102104
else {
103-
drawerBody.classList.add('show');
104-
el.focus();
105+
showDrawer();
105106
}
106107
}
108+
109+
const showDrawer = () => {
110+
drawerBody.classList.add('show');
111+
if (drawerBackdrop) {
112+
drawerBackdrop.classList.add('show');
113+
}
114+
el.focus();
115+
}
107116

108117
const hide = ts => {
109118
if (start === void 0) {
@@ -114,8 +123,7 @@ export function execute(id, open) {
114123
requestAnimationFrame(hide);
115124
}
116125
else {
117-
el.classList.remove('show')
118-
body.classList.remove('drawer-overflow-hidden')
126+
el.classList.remove('show');
119127
}
120128
}
121129

@@ -126,12 +134,28 @@ export function execute(id, open) {
126134
if (scroll === false) {
127135
body.classList.add('drawer-overflow-hidden');
128136
}
129-
requestAnimationFrame(show)
137+
138+
if (animationFrame) {
139+
requestAnimationFrame(show)
140+
}
141+
else {
142+
showDrawer();
143+
}
130144
}
131145
else if (el.classList.contains('show')) {
132-
drawerBody.classList.remove('show')
133-
requestAnimationFrame(hide)
146+
drawerBody.classList.remove('show');
147+
if (drawerBackdrop) {
148+
drawerBackdrop.classList.remove('show');
149+
}
150+
body.classList.remove('drawer-overflow-hidden');
151+
if (animationFrame) {
152+
requestAnimationFrame(hide)
153+
}
154+
else {
155+
el.classList.remove('show');
156+
}
134157
}
158+
return animationFrame;
135159
}
136160

137161
export function dispose(id) {

‎src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
.drawer {
1+
.drawer {
22
--bb-drawer-bg: var(--bs-body-bg);
33
--bb-drawer-zindex: #{$bb-drawer-zindex};
44
--bb-drawer-body-shadow: #{$bb-drawer-body-shadow};
55
--bb-drawer-body-padding: #{$bb-drawer-body-padding};
66
--bb-drawer-bar-bg: #{$bb-drawer-bar-bg};
77
--bb-drawer-bar-hover-color: #{$bb-drawer-bar-hover-color};
88
--bb-drawer-bar-drag-color: #{$bb-drawer-bar-drag-color};
9-
--bb-drawer-backdrop-bg: #{$bb-drawer-backdrop-bg};
109
--bb-drawer-position: fixed;
1110
position: var(--bb-drawer-position);
1211
top: 0;
@@ -42,23 +41,13 @@
4241
pointer-events: none;
4342
}
4443

45-
.drawer-backdrop {
46-
position: fixed;
47-
left: 0;
48-
right: 0;
49-
top: 0;
50-
bottom: 0;
51-
z-index: 1;
52-
background-color: var(--bb-drawer-backdrop-bg);
53-
}
54-
5544
.drawer-body {
5645
position: absolute;
5746
box-sizing: border-box;
5847
background-color: var(--bb-drawer-bg);
5948
box-shadow: var(--bb-drawer-body-shadow);
6049
transition: transform .3s linear;
61-
z-index: 2;
50+
z-index: 1052;
6251
pointer-events: auto;
6352
display: flex;
6453
padding: var(--bb-drawer-body-padding);
@@ -115,7 +104,7 @@
115104
.drawer-bar {
116105
background-color: var(--bb-drawer-bar-bg);
117106
position: absolute;
118-
z-index: 5;
107+
z-index: 1055;
119108

120109
.drawer-bar-body {
121110
position: absolute;
@@ -188,3 +177,9 @@
188177
.drawer-overflow-hidden {
189178
overflow: hidden;
190179
}
180+
181+
@media (prefers-reduced-motion: reduce) {
182+
.drawer .drawer-body {
183+
transition: none;
184+
}
185+
}

‎src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ private async Task OnCloseAsync(DrawerOption option)
116116
/// Dispose 方法
117117
/// </summary>
118118
/// <param name="disposing"></param>
119-
protected virtual void Dispose(bool disposing)
119+
private void Dispose(bool disposing)
120120
{
121121
if (disposing)
122122
{

‎src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -900,7 +900,14 @@ protected async Task ShowEditDrawer(ItemChangedType changedType)
900900
};
901901
AppendOptions(editOption, changedType);
902902

903-
var option = new DrawerOption() { Class = "drawer-table-edit", Placement = Placement.Right, AllowResize = true, IsBackdrop = true, Width = "600px" };
903+
var option = new DrawerOption()
904+
{
905+
Class = "drawer-table-edit",
906+
Placement = Placement.Right,
907+
AllowResize = true,
908+
IsBackdrop = true,
909+
Width = "600px"
910+
};
904911
if (OnBeforeShowDrawer != null)
905912
{
906913
await OnBeforeShowDrawer(option);

‎src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// :root
1+
// :root
22
$bb-primary-color: #409eff;
33
$bb-primary-color-rgb: 64, 158, 255;
44
$bb-border-focus-color: #86b7fe;
@@ -237,7 +237,6 @@ $bb-drawer-body-padding: 1rem;
237237
$bb-drawer-bar-bg: rgba(var(--bs-body-color-rgb),.12);
238238
$bb-drawer-bar-hover-color: #409eff;
239239
$bb-drawer-bar-drag-color: #0969da;
240-
$bb-drawer-backdrop-bg: rgba(0, 0, 0, 0.5);
241240

242241
// Dropdown
243242
$bb-widget-toggle-color: var(--bs-body-color);

‎test/UnitTest/Components/DrawerTest.cs‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,14 @@ public void BodyScroll_Ok()
207207
cut.Contains("data-bb-scroll=\"true\"");
208208
}
209209

210+
[Fact]
211+
public async Task Close_Ok()
212+
{
213+
Context.JSInterop.Setup<bool>("execute", matcher => true).SetResult(true);
214+
var cut = Context.RenderComponent<Drawer>();
215+
await cut.InvokeAsync(() => cut.Instance.Close());
216+
}
217+
210218
class MockContent : ComponentBase
211219
{
212220
[CascadingParameter(Name = "BodyContext")]

0 commit comments

Comments
 (0)