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

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

* fix: the lifecycle of MaximizationOnInit

* rename to DefaultMaximized

Co-authored-by: James Yeung <shunjiey@hotmail.com>

components/modal/config/DialogOptions.cs

@@ -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
 
 

components/modal/config/ModalOptions.cs

@@ -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)

components/modal/core/Dialog.razor.cs

@@ -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
                 {

components/modal/modalDialog/Modal.razor.cs

@@ -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
     }
 }

components/modal/modalDialog/ModalContainer.razor

@@ -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>
 }
-}

site/AntDesign.Docs/Demos/Components/Modal/demo/Maxable.razor

@@ -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>

site/AntDesign.Docs/Demos/Components/Modal/demo/maxable.md

@@ -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

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

@@ -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
 

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

@@ -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 |
 
 
 #### 注意