test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-05 05:27:37 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: modal): support the maximization of Modal initialization (#2834)

Browse Source 
* feat: support the maximization of Modal initialization (#2823)

* fix: the lifecycle of MaximizationOnInit

* rename to DefaultMaximized

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
zxyao 2022-11-14 15:28:20 +08:00 committed by GitHub
parent 7ad15664fe
commit 0ed2da0f29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/modal/config/DialogOptions.cs
View File

@ -99,6 +99,11 @@ namespace AntDesign
/// </summary>
public RenderFragment RestoreBtnIcon { get; set; } = DefaultRestoreIcon;
/// <summary>
/// Maximize the dialog during component initialization, and it will ignore the Maximizable value.
/// </summary>
public bool DefaultMaximized { get; set; } = false;
#region internal

6
components/modal/config/ModalOptions.cs
View File

@ -134,6 +134,12 @@ namespace AntDesign
/// </summary>
public RenderFragment RestoreBtnIcon { get; set; } = DialogOptions.DefaultRestoreIcon;
/// <summary>
/// Maximize the Modal during component initialization, and it will ignore the Maximizable value.
/// </summary>
[Parameter]
public bool DefaultMaximized { get; set; } = false;
#region internal
internal async Task DefaultOnCancelOrOk(MouseEventArgs e)

23
components/modal/core/Dialog.razor.cs
View File

@ -261,17 +261,24 @@ namespace AntDesign
{
if (_modalStatus == ModalStatus.Default)
{
_modalStatus = ModalStatus.Max;
SetModalStatus(ModalStatus.Max);
}
else
{
_modalStatus = ModalStatus.Default;
SetModalStatus(ModalStatus.Default);
}
_wrapStyle = CalcWrapStyle();
_modalStyle = CalcModalStyle();
return Task.CompletedTask;
}
private void SetModalStatus(ModalStatus modalStatus)
{
_modalStatus = modalStatus;
_wrapStyle = CalcWrapStyle();
_modalStyle = CalcModalStyle();
}
#region control show and hide class name and style
/// <summary>
@ -387,6 +394,8 @@ namespace AntDesign
#region override
private bool _hasRendered = false;
/// <summary>
///
/// </summary>
@ -396,10 +405,14 @@ namespace AntDesign
//Reduce one rendering when showing and not destroyed
if (Visible)
{
if (!_hasRendered && Config.DefaultMaximized)
{
_hasRendered = true;
SetModalStatus(ModalStatus.Max);
}
if (!_hasDestroy)
{
Show();
//await InvokeStateHasChangedAsync();
}
else
{

11
components/modal/modalDialog/Modal.razor.cs
View File

@ -143,7 +143,7 @@ namespace AntDesign
[Parameter]
public RenderFragment TitleTemplate { get; set; } = null;
#endregion
#endregion title
/// <summary>
/// Whether the modal dialog is visible or not
@ -245,6 +245,12 @@ namespace AntDesign
[Parameter]
public RenderFragment RestoreBtnIcon { get; set; } = DialogOptions.DefaultRestoreIcon;
/// <summary>
/// Maximize the Modal during component initialization, and it will ignore the Maximizable value.
/// </summary>
[Parameter]
public bool DefaultMaximized { get; set; } = false;
#endregion Parameter
#pragma warning disable 649
@ -326,6 +332,7 @@ namespace AntDesign
Maximizable = Maximizable,
MaximizeBtnIcon = MaximizeBtnIcon,
RestoreBtnIcon = RestoreBtnIcon,
DefaultMaximized = DefaultMaximized
};
return options;
@ -362,6 +369,6 @@ namespace AntDesign
await InvokeAsync(StateHasChanged);
}
#endregion
#endregion Sustainable Dialog
}
}

51
components/modal/modalDialog/ModalContainer.razor
View File

@ -5,47 +5,7 @@
@foreach (ModalRef modalRef in _modalRefs)
{
var options = modalRef.Config;
if (options.TitleTemplate != null)
{
<Modal @key="@options"
ModalRef ="@modalRef"
AfterClose="@options.AfterClose"
Style="@options.Style"
BodyStyle="@options.BodyStyle"
CancelText="@options.CancelText"
Centered="@options.Centered"
Closable="@options.Closable"
Draggable="@options.Draggable"
DragInViewport="@options.DragInViewport"
CloseIcon="@options.CloseIcon"
ConfirmLoading="@options.ConfirmLoading"
DestroyOnClose="@options.DestroyOnClose"
Footer="@options.Footer"
GetContainer="@options.GetContainer"
Keyboard="@options.Keyboard"
Mask="@options.Mask"
MaskClosable="@options.MaskClosable"
MaskStyle="@options.MaskStyle"
OkText="@options.OkText"
OkType="@options.OkType"
TitleTemplate="@options.TitleTemplate"
Visible="@options.Visible"
Width="@options.Width"
WrapClassName="@options.WrapClassName"
ZIndex="@options.ZIndex"
OnCancel="@options.OnCancel"
OnOk="@options.OnOk"
OkButtonProps="@options.OkButtonProps"
CancelButtonProps="@options.CancelButtonProps"
Maximizable="@options.Maximizable"
MaximizeBtnIcon="@options.MaximizeBtnIcon"
RestoreBtnIcon="@options.RestoreBtnIcon"
>
@options.Content
</Modal>
}
else
{
<Modal @key="@options"
ModalRef="@modalRef"
AfterClose="@options.AfterClose"
@ -68,6 +28,7 @@
OkText="@options.OkText"
OkType="@options.OkType"
Title="@options.Title"
TitleTemplate="@options.TitleTemplate"
Visible="@options.Visible"
Width="@options.Width"
WrapClassName="@options.WrapClassName"
@ -75,8 +36,12 @@
OnCancel="@options.OnCancel"
OnOk="@options.OnOk"
OkButtonProps="@options.OkButtonProps"
CancelButtonProps="@options.CancelButtonProps">
CancelButtonProps="@options.CancelButtonProps"
Maximizable="@options.Maximizable"
MaximizeBtnIcon="@options.MaximizeBtnIcon"
RestoreBtnIcon="@options.RestoreBtnIcon"
DefaultMaximized="@options.DefaultMaximized"
>
@options.Content
</Modal>
}
}

3
site/AntDesign.Docs/Demos/Components/Modal/demo/Maxable.razor
View File

@ -5,7 +5,8 @@
Visible="@_visible"
OnOk="@HandleOk"
OnCancel="@HandleCancel"
Maximizable="@true">
Maximizable="@true"
DefaultMaximized="@true">
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>

7
site/AntDesign.Docs/Demos/Components/Modal/demo/maxable.md
View File

@ -7,7 +7,9 @@ title:
## zh-CN
允许Modal在浏览器内最大化。
允许Modal在浏览器内最大化.
`Maximizable`参数将会展示 Modal 最大化的按钮；`DefaultMaximized` 参数可以控制在 Modal 初始化的时候最大化。
`Maximizable` 和 `DefaultMaximized` 并不相互耦合，即使 `Maximizable=false`, `DefaultMaximized=true` 也会保证 Modal 初始化的时候最大化。
注意：
1. 如果`Draggable`为true，恢复大小的时候将会重置位置
2. 当Modal最大化的时候被关闭，再次显示的时候会保持最大化的样子
@ -15,6 +17,9 @@ title:
## en-US
Allow Modal to maximize within the browser.
The `Maximizable` parameter will display the button for maximizing Modal, and the `DefaultMaximized` parameter can control the maximization during Modal initialization.
`Maximizable` and `DefaultMaximized` are not coupled with each other. Even if `Maximizable=false` and `DefaultMaximized=true` will ensure that the Modal is maximized during initialization.
Note:
1. If `Draggable` is true, the position will be reset when the size is restored
2. It is turned off when the Modal is maximized, and it will remain maximized when it is displayed again

2
site/AntDesign.Docs/Demos/Components/Modal/doc/index.en-US.md
View File

@ -49,7 +49,7 @@ When requiring users to interact with the application, but without jumping to a
| Maximizable | Whether to display the maximize button | bool | false |
| MaximizeBtnIcon | The icon of the maximize button when the modal is in normal state | RenderFragment | fullscreen |
| RestoreBtnIcon | The icon of the maximize button when the modal is in maximized state | RenderFragment | fullscreen-exit |
| DefaultMaximized | Modal is maximized at initialization | bool | false |
#### Note

1
site/AntDesign.Docs/Demos/Components/Modal/doc/index.zh-CN.md
View File

@ -52,6 +52,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
| Maximizable | 是否显示最大化按钮 | bool | false |
| MaximizeBtnIcon | Modal在正常状态下的最大化按钮icon | RenderFragment | fullscreen |
| RestoreBtnIcon | Modal在最大化状态下的还原按钮icon | RenderFragment | fullscreen-exit |
| DefaultMaximized | Modal 在初始化时即为最大化状态 | bool | false |
#### 注意