fix(module: modal): centered conflict maximizable style (#3403)

components/modal/config/DialogOptions.cs

@@ -128,25 +128,15 @@ namespace AntDesign
             }
         }
 
-        internal string GetWrapClassNameExtended(Modal modal = null)
+        internal string GetWrapClassNameExtended(ModalStatus status)
         {
             var classNameArray = new List<string>();
-            if (modal == null)
-            {
-                classNameArray.AddIf(
-                        !string.IsNullOrWhiteSpace(WrapClassName),
-                        WrapClassName)
-                    .AddIf(Centered, $"{PrefixCls}-centered")
-                    .AddIf(Rtl, $"{PrefixCls}-wrap-rtl");
-
-                return string.Join(' ', classNameArray);
-            }
 
             classNameArray.AddIf(
-                    !string.IsNullOrWhiteSpace(modal.WrapClassName),
-                    modal.WrapClassName)
-                .AddIf(modal.Centered, $"{PrefixCls}-centered")
-                .AddIf(modal.Rtl, $"{PrefixCls}-wrap-rtl");
+                    !string.IsNullOrWhiteSpace(WrapClassName),
+                    WrapClassName)
+                .AddIf(Centered && status != ModalStatus.Max, $"{PrefixCls}-centered")
+                .AddIf(Rtl, $"{PrefixCls}-wrap-rtl");
 
             return string.Join(' ', classNameArray);
         }

components/modal/config/ModalStatus.cs

@@ -8,7 +8,7 @@ using System.Text;
 
 namespace AntDesign
 {
-    internal enum ModalStatus
+    public enum ModalStatus
     {
         Default = 0,
         Max = 1,

components/modal/core/Dialog.razor

@@ -7,7 +7,7 @@
         {
             <div class=@($"{Config.PrefixCls}-mask {GetMaskClsName()}") style="@Config.MaskStyle"></div>
         }
-        <div tabindex="-1" class=@($"{Config.PrefixCls}-wrap {Config.GetWrapClassNameExtended()}") role="dialog"
+        <div tabindex="-1" class=@($"{Config.PrefixCls}-wrap {Config.GetWrapClassNameExtended(this.Status)}") role="dialog"
              @onclick="@EventUtil.AsNonRenderingEventHandler(OnMaskClick)"
              @onmouseup="@EventUtil.AsNonRenderingEventHandler(OnMaskMouseUp)"
              @onkeydown="@(EventUtil.AsNonRenderingEventHandler<KeyboardEventArgs>(OnKeyDown))"
@@ -34,7 +34,7 @@
                         <button type="button" aria-label="Max" class=@($"{Config.PrefixCls}-max-btn") @onclick="@OnMaxBtnClick">
                             <span class=@($"{Config.PrefixCls}-max-btn-x")>
                                 <span role="img" aria-label="close" class=@($"anticon anticon-max {Config.PrefixCls}-max-btn-icon")>
-                                    @if(_modalStatus == ModalStatus.Default)
+                                    @if(Status == ModalStatus.Default)
                                     {
                                         @(Config.MaximizeBtnIcon)
                                     }

components/modal/core/Dialog.razor.cs

@@ -79,13 +79,12 @@ namespace AntDesign
         private string CalcModalStyle()
         {
             string style;
-            if (_modalStatus == ModalStatus.Default)
+            if (Status == ModalStatus.Default)
             {
                 style = $"{Config.GetWidth()};";
                 if (Config.Draggable)
                 {
-                    string left = $"margin: 0; padding-bottom:0;";
-                    style += left;
+                    style += "margin: 0; padding-bottom:0;";
                 }
             }
             else
@@ -235,7 +234,7 @@ namespace AntDesign
             }
         }
 
-        private ModalStatus _modalStatus = ModalStatus.Default;
+        public ModalStatus Status { get; private set; } = ModalStatus.Default;
 
         /// <summary>
         /// closer(X) click event
@@ -243,7 +242,7 @@ namespace AntDesign
         /// <returns></returns>
         private Task OnMaxBtnClick()
         {
-            if (_modalStatus == ModalStatus.Default)
+            if (Status == ModalStatus.Default)
             {
                 SetModalStatus(ModalStatus.Max);
             }
@@ -256,7 +255,7 @@ namespace AntDesign
 
         private void SetModalStatus(ModalStatus modalStatus)
         {
-            _modalStatus = modalStatus;
+            Status = modalStatus;
             _wrapStyle = CalcWrapStyle();
             _modalStyle = CalcModalStyle();
         }
@@ -282,7 +281,7 @@ namespace AntDesign
         private string CalcWrapStyle()
         {
             string style;
-            if (_modalStatus == ModalStatus.Default && Config.Draggable)
+            if (Status == ModalStatus.Default && Config.Draggable)
             {
                 style = "display:flex;justify-content: center;";
                 if (Config.Centered)
@@ -367,7 +366,7 @@ namespace AntDesign
         {
             var clsName = Config.ClassName;
             return clsName + _modalAnimationClsName
-                + (_modalStatus == ModalStatus.Max ? " ant-modal-max" : "");
+                + (Status == ModalStatus.Max ? " ant-modal-max" : "");
         }
 
         #endregion build element's class name
@@ -432,7 +431,7 @@ namespace AntDesign
                 }
 
                 // enable drag and drop
-                if (_modalStatus != ModalStatus.Max && Config.Draggable && !_doDraggable)
+                if (Status != ModalStatus.Max && Config.Draggable && !_doDraggable)
                 {
                     _doDraggable = true;
                     await JsInvokeAsync(JSInteropConstants.EnableDraggable, _dialogHeader, _modal, Config.DragInViewport);
@@ -448,7 +447,7 @@ namespace AntDesign
                     await JsInvokeAsync(JSInteropConstants.EnableBodyScroll);
                 }
                 // disable drag and drop
-                if (_modalStatus != ModalStatus.Max && Config.Draggable && _doDraggable)
+                if (Status != ModalStatus.Max && Config.Draggable && _doDraggable)
                 {
                     _doDraggable = false;
                     await JsInvokeAsync(JSInteropConstants.DisableDraggable, _dialogHeader);

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

@@ -6,6 +6,7 @@
        OnOk="@HandleOk"
        OnCancel="@HandleCancel"
        Maximizable="@true"
+       Centered="@true"
        DefaultMaximized="@true">
     <p>Some contents...</p>
     <p>Some contents...</p>