test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-04 21:17:36 +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
{

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

@ -16,7 +16,7 @@ namespace AntDesign
#region Parameter
/// <summary>
///
///
/// </summary>
[Parameter]
public ModalRef ModalRef { get; set; }
@ -24,7 +24,7 @@ namespace AntDesign
/// <summary>
/// Specify a function that will be called when modal is closed
/// </summary>
[Parameter]
[Parameter]
public Func<Task> AfterClose { get; set; }
/// <summary>
@ -46,7 +46,7 @@ namespace AntDesign
public bool Centered { get; set; }
/// <summary>
/// Whether a close (x) button is visible on top right of the modal dialog or not
/// Whether a close (x) button is visible on top right of the modal dialog or not
/// </summary>
[Parameter]
public bool Closable { get; set; } = true;
@ -82,7 +82,7 @@ namespace AntDesign
public bool DestroyOnClose { get; set; }
/// <summary>
/// Footer content, set as Footer=null when you don't need default buttons
/// Footer content, set as Footer=null when you don't need default buttons
/// </summary>
[Parameter]
public OneOf<string, RenderFragment>? Footer { get; set; } = DialogOptions.DefaultFooter;
@ -94,7 +94,7 @@ namespace AntDesign
public ElementReference? GetContainer { get; set; } = null;
/// <summary>
/// Whether support press esc to close
/// Whether support press esc to close
/// </summary>
[Parameter]
public bool Keyboard { get; set; } = true;
@ -106,13 +106,13 @@ namespace AntDesign
public bool Mask { get; set; } = true;
/// <summary>
/// Whether to close the modal dialog when the mask (area outside the modal) is clicked
/// Whether to close the modal dialog when the mask (area outside the modal) is clicked
/// </summary>
[Parameter]
public bool MaskClosable { get; set; } = true;
/// <summary>
/// Style for modal's mask element
/// Style for modal's mask element
/// </summary>
[Parameter]
public string MaskStyle { get; set; }
@ -143,10 +143,10 @@ namespace AntDesign
[Parameter]
public RenderFragment TitleTemplate { get; set; } = null;
#endregion
#endregion title
/// <summary>
/// Whether the modal dialog is visible or not
/// Whether the modal dialog is visible or not
/// </summary>
[Parameter]
public bool Visible { get; set; }
@ -169,7 +169,7 @@ namespace AntDesign
}
/// <summary>
/// The class name of the container of the modal dialog
/// The class name of the container of the modal dialog
/// </summary>
[Parameter]
public string WrapClassName { get; set; }
@ -181,31 +181,31 @@ namespace AntDesign
public int ZIndex { get; set; } = 1000;
/// <summary>
/// Specify a function that will be called when a user clicks mask, close button on top right or Cancel button
/// Specify a function that will be called when a user clicks mask, close button on top right or Cancel button
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> OnCancel { get; set; }
/// <summary>
/// Specify a function that will be called when a user clicks the OK button
/// Specify a function that will be called when a user clicks the OK button
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> OnOk { get; set; }
/// <summary>
/// The OK button props
/// The OK button props
/// </summary>
[Parameter]
public ButtonProps OkButtonProps { get; set; }
/// <summary>
/// The Cancel button props
/// The Cancel button props
/// </summary>
[Parameter]
public ButtonProps CancelButtonProps { get; set; }
/// <summary>
///
///
/// </summary>
[Parameter]
public RenderFragment ChildContent { get; set; }
@ -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
}
}

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

@ -5,78 +5,43 @@
@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"
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"
Title="@options.Title"
Visible="@options.Visible"
Width="@options.Width"
WrapClassName="@options.WrapClassName"
ZIndex="@options.ZIndex"
OnCancel="@options.OnCancel"
OnOk="@options.OnOk"
OkButtonProps="@options.OkButtonProps"
CancelButtonProps="@options.CancelButtonProps">
@options.Content
</Modal>
}
<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"
Title="@options.Title"
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"
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>

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

@ -7,14 +7,19 @@ title:
## zh-CN
允许Modal在浏览器内最大化。
允许Modal在浏览器内最大化.
`Maximizable`参数将会展示 Modal 最大化的按钮；`DefaultMaximized` 参数可以控制在 Modal 初始化的时候最大化。
`Maximizable` 和 `DefaultMaximized` 并不相互耦合，即使 `Maximizable=false`, `DefaultMaximized=true` 也会保证 Modal 初始化的时候最大化。
注意：
1. 如果`Draggable`为true，恢复大小的时候将会重置位置
2. 当Modal最大化的时候被关闭，再次显示的时候会保持最大化的样子
## en-US
Allow Modal to maximize within the browser.
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 |
#### 注意