feat(module: modal): support customized header (#3579)

* feat(module: form): Add Method and FormName parameter for Form (#3608) * Add Method parameter * Add also the FormName parameter * add documentation * update documentation * use Name instead of new FormName --------- Co-authored-by: James Yeung <shunjiey@hotmail.com> * feat(module: select): Add FilterExpression on select for customize how to filter when searching (#3656) * Add FilterExpression on select for customize how to filter when searching * Remove CultureInfo as parameter for filter. Update example and documentation. * Change FilterExpression to send the SelectOptionItem instead of the label to have more options to make the search. * Add test for filterExpression to check is working fine with the default and custom. * feat(module: comment): avatar placement (#3670) * feat(module: tabs): add CreatePage method for reusetabs (#3671) * Update ReuseTabsService.cs pr3660 * Update ReuseTabsService.cs * Update ReuseTabsService.cs * refactor * fix build error --------- Co-authored-by: James Yeung <shunjiey@hotmail.com> * Add Header RenderFragment parameter to dialogs for customizable headers * refactor header * add a demo --------- Co-authored-by: Sebastian Jura <sebajura1234@gmail.com> Co-authored-by: James Yeung <shunjiey@hotmail.com> Co-authored-by: Magehernan <magehernan@gmail.com> Co-authored-by: jxcproject <cazyyan86@163.com>
ant-design-blazor · Mar 1, 2024 · 7be4807 · 7be4807
1 parent ebca047
commit 7be4807
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 62 deletions.
diff --git a/components/modal/config/DialogOptions.cs b/components/modal/config/DialogOptions.cs
@@ -23,7 +23,7 @@ public class DialogOptions : DialogOptionsBase
         public string BodyStyle { get; set; }
 
         /// <summary>
-        /// show ant-modal-closer 
+        /// show ant-modal-closer
         /// </summary>
         public bool Closable { get; set; } = true;
 
@@ -47,13 +47,18 @@ public class DialogOptions : DialogOptionsBase
         /// </summary>
         public bool ConfirmLoading { get; set; }
 
+        /// <summary>
+        /// modal header
+        /// </summary>
+        public RenderFragment Header { get; set; } = DefaultHeader;
+
         /// <summary>
         /// modal footer
         /// </summary>
         public OneOf<string, RenderFragment>? Footer { get; set; } = DefaultFooter;
 
         /// <summary>
-        /// The class name of the container of the modal dialog	
+        /// The class name of the container of the modal dialog
         /// </summary>
         public string WrapClassName { get; set; }
 
@@ -63,7 +68,7 @@ public class DialogOptions : DialogOptionsBase
         public RenderFragment ChildContent { get; set; }
 
         /// <summary>
-        /// the class name of the element of ".ant-modal" 
+        /// the class name of the element of ".ant-modal"
         /// </summary>
         public string ClassName { get; set; }
 
@@ -111,7 +116,6 @@ public class DialogOptions : DialogOptionsBase
 
         #region internal
 
-
         internal string GetHeaderStyle()
         {
             if (Draggable)
@@ -146,6 +150,6 @@ internal string GetWrapClassNameExtended(ModalStatus status)
             return string.Join(' ', classNameArray);
         }
 
-        #endregion
+        #endregion internal
     }
 }
diff --git a/components/modal/config/DialogOptionsBase.cs b/components/modal/config/DialogOptionsBase.cs
@@ -6,6 +6,7 @@
 using System.Collections.Generic;
 using System.Text;
 using System.Threading.Tasks;
+using AntDesign.Internal.ModalDialog;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using OneOf;
@@ -29,13 +30,15 @@ public class DialogOptionsBase
             builder.AddAttribute(2, "Theme", "outline");
             builder.CloseComponent();
         };
+
         internal static readonly RenderFragment DefaultRestoreIcon = (builder) =>
         {
             builder.OpenComponent<Icon>(0);
             builder.AddAttribute(1, "Type", "fullscreen-exit");
             builder.AddAttribute(2, "Theme", "outline");
             builder.CloseComponent();
         };
+
         /// <summary>
         /// default Dialog close icon
         /// </summary>
@@ -47,6 +50,16 @@ public class DialogOptionsBase
             builder.CloseComponent();
         };
 
+        /// <summary>
+        /// default modal header
+        /// </summary>
+
+        internal static readonly RenderFragment DefaultHeader = (builder) =>
+        {
+            builder.OpenComponent<ModalHeader>(0);
+            builder.CloseComponent();
+        };
+
         /// <summary>
         /// default modal footer
         /// </summary>
@@ -56,10 +69,10 @@ public class DialogOptionsBase
             builder.CloseComponent();
         };
 
-        #endregion
+        #endregion static and const
 
         /// <summary>
-        /// class name prefix 
+        /// class name prefix
         /// </summary>
         public string PrefixCls { get; set; } = "ant-modal";
 
@@ -84,7 +97,7 @@ public class DialogOptionsBase
         public ElementReference? GetContainer { get; set; } = null;
 
         /// <summary>
-        /// Whether support press esc to close	
+        /// Whether support press esc to close
         /// </summary>
         public bool Keyboard { get; set; } = true;
 
@@ -99,7 +112,7 @@ public class DialogOptionsBase
         public bool MaskClosable { get; set; }
 
         /// <summary>
-        /// Style for dialog's mask element	
+        /// Style for dialog's mask element
         /// </summary>
         public string MaskStyle { get; set; }
 

diff --git a/components/modal/core/Dialog.razor b/components/modal/core/Dialog.razor
@@ -20,48 +20,15 @@
                  >
                 <div id="@_sentinelStart" tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
                 <div class=@($"{Config.PrefixCls}-content") style="@(Config.Resizable ? "resize:horizontal; overflow: hidden;":"")" id=@($"{Config.PrefixCls}-wrap_{DialogWrapperId}")>
-                    @if (Config.Closable)
+                    @if (Config.Header != null)
                     {
-                        <button type="button" aria-label="Close" class=@($"{Config.PrefixCls}-close") @onclick="@OnCloserClick">
-                            <span class=@($"{Config.PrefixCls}-close-x")>
-                                <span role="img" aria-label="close" class=@($"anticon anticon-close {Config.PrefixCls}-close-icon")>
-                                    @Config.CloseIcon
-                                </span>
-                            </span>
-                        </button>
-                    }
-                    @if (Config.Maximizable)
-                    {
-                        <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(Status == ModalStatus.Default)
-                                    {
-                                        @(Config.MaximizeBtnIcon)
-                                    }
-                                    else
-                                    {
-                                        @(Config.RestoreBtnIcon)
-                                    }
-                                </span>
-                            </span>
-                        </button>
-                    }
-                    @if (Config.TitleTemplate != null)
-                    {
-                        <div @ref="@_dialogHeader" class=@($"{Config.PrefixCls}-header") style="@Config.GetHeaderStyle()">
-                            <div class=@($"{Config.PrefixCls}-title")>
-                                @Config.TitleTemplate
-                            </div>
-                        </div>
-                    }
-                    else if (!string.IsNullOrWhiteSpace(Config.Title))
-                    {
-                        <div @ref="@_dialogHeader" class=@($"{Config.PrefixCls}-header") style="@Config.GetHeaderStyle()">
-                            <div class=@($"{Config.PrefixCls}-title")>
-                                @Config.Title
-                            </div>
-                        </div>
+                        <CascadingValue Value="@Config">
+                            <CascadingValue Name="Parent" Value="@this">
+                                <div @ref="@_dialogHeader" class=@($"{Config.PrefixCls}-header") style="@Config.GetHeaderStyle()">
+                                    @Config.Header
+                                </div>
+                            </CascadingValue>
+                        </CascadingValue>
                     }
                     <div class=@($"{Config.PrefixCls}-body") style="@GetBodyStyle()">
                         @ChildContent
@@ -71,15 +38,15 @@
                         <div class=@($"{Config.PrefixCls}-footer")>
                             <CascadingValue Value="@Config">
                                 @if (Config.Footer.Value.IsT0)
-                            {
-                                @(Config.Footer.Value.AsT0)
-                            }
-                            else
-                            {
-                                @(Config.Footer.Value.AsT1)
-                            }
-                        </CascadingValue>
-                    </div>
+                                {
+                                    @(Config.Footer.Value.AsT0)
+                                }
+                                else
+                                {
+                                    @(Config.Footer.Value.AsT1)
+                                }
+                            </CascadingValue>
+                        </div>
                     }
                 </div>
                 <div id="@_sentinelEnd" tabindex="0" aria-hidden="true" style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>

diff --git a/components/modal/core/Dialog.razor.cs b/components/modal/core/Dialog.razor.cs
@@ -222,7 +222,7 @@ private async Task OnKeyDown(KeyboardEventArgs e)
         /// closer(X) click event
         /// </summary>
         /// <returns></returns>
-        private async Task OnCloserClick()
+        internal async Task OnCloserClick()
         {
             await CloseAsync();
         }
@@ -249,7 +249,7 @@ private async Task CloseAsync()
         /// closer(X) click event
         /// </summary>
         /// <returns></returns>
-        private Task OnMaxBtnClick()
+        internal Task OnMaxBtnClick()
         {
             if (Status == ModalStatus.Default)
             {

diff --git a/components/modal/modalDialog/Modal.razor.cs b/components/modal/modalDialog/Modal.razor.cs
@@ -85,6 +85,12 @@ public partial class Modal
         [Parameter]
         public bool DestroyOnClose { get; set; }
 
+        /// <summary>
+        /// Header content
+        /// </summary>
+        [Parameter]
+        public RenderFragment Header { get; set; } = DialogOptions.DefaultHeader;
+
         /// <summary>
         /// Footer content, set as Footer=null when you don't need default buttons
         /// </summary>
@@ -286,6 +292,7 @@ private DialogOptions BuildDialogOptions()
                 DragInViewport = DragInViewport,
                 CloseIcon = CloseIcon,
                 ConfirmLoading = ConfirmLoading,
+                Header = Header,
                 Footer = Footer,
 
                 GetContainer = GetContainer,

diff --git a/components/modal/modalDialog/ModalHeader.razor b/components/modal/modalDialog/ModalHeader.razor
@@ -0,0 +1,45 @@
+@namespace AntDesign.Internal.ModalDialog
+
+@if (Config.Closable)
+{
+    <button type="button" aria-label="Close" class=@($"{Config.PrefixCls}-close") @onclick="@Parent.OnCloserClick">
+        <span class=@($"{Config.PrefixCls}-close-x")>
+            <span role="img" aria-label="close" class=@($"anticon anticon-close {Config.PrefixCls}-close-icon")>
+                @Config.CloseIcon
+            </span>
+        </span>
+    </button>
+}
+@if (Config.Maximizable)
+{
+    <button type="button" aria-label="Max" class=@($"{Config.PrefixCls}-max-btn") @onclick="@Parent.OnMaxBtnClick">
+        <span class=@($"{Config.PrefixCls}-max-btn-x")>
+            <span role="img" aria-label="close" class=@($"anticon anticon-max {Config.PrefixCls}-max-btn-icon")>
+                @if (Parent.Status == ModalStatus.Default)
+                {
+                    @(Config.MaximizeBtnIcon)
+                }
+                else
+                {
+                    @(Config.RestoreBtnIcon)
+                }
+            </span>
+        </span>
+    </button>
+}
+@if (Config.TitleTemplate != null)
+{
+
+        <div class=@($"{Config.PrefixCls}-title")>
+            @Config.TitleTemplate
+        </div>
+
+}
+else if (!string.IsNullOrWhiteSpace(Config.Title))
+{
+
+        <div class=@($"{Config.PrefixCls}-title")>
+            @Config.Title
+        </div>
+
+}
diff --git a/components/modal/modalDialog/ModalHeader.razor.cs b/components/modal/modalDialog/ModalHeader.razor.cs
@@ -0,0 +1,20 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Text;
+using Microsoft.AspNetCore.Components;
+
+namespace AntDesign.Internal.ModalDialog
+{
+    public partial class ModalHeader
+    {
+        [CascadingParameter]
+        public DialogOptions Config { get; set; }
+
+        [CascadingParameter(Name = "Parent")]
+        public Dialog Parent { get; set; }
+    }
+}
diff --git a/site/AntDesign.Docs/Demos/Components/Modal/demo/Header_.razor b/site/AntDesign.Docs/Demos/Components/Modal/demo/Header_.razor
@@ -0,0 +1,22 @@
+
+<Button Type="primary" OnClick="()=>_visible=true">
+    Open Modal with customized header
+</Button>
+
+<Modal Title="@("Title")" @bind-Visible="@_visible" >
+    <Header>
+        <Icon Type="@IconType.Outline.Edit"></Icon> Edit
+    </Header>
+    <ChildContent>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+    </ChildContent>
+</Modal>
+
+
+@code {
+    bool _visible = false;
+}
diff --git a/site/AntDesign.Docs/Demos/Components/Modal/demo/header.md b/site/AntDesign.Docs/Demos/Components/Modal/demo/header.md
@@ -0,0 +1,18 @@
+---
+order: 2
+title:
+  zh-CN: 自定义头部
+  en-US: Customized Hender
+---
+
+## zh-CN
+
+设置 `Hender` 属性可以自定义消息框的头部。默认头部组件在 [ModelHeader.razor](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/modal/modalDialog/ModalHender.razor)。
+
+另外，如果设置 `Hender` 为 null 可隐藏头部。
+
+## en-US
+
+Set the `Hender` property to customize the header of the Modal. Default header component in [ModelHeader.razor](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/modal/modalDialog/ModalHender.razor).
+
+Otherwise, if `Hender` is set to null, the header can be hidden.
diff --git a/site/AntDesign.Docs/Demos/Components/Modal/doc/index.en-US.md b/site/AntDesign.Docs/Demos/Components/Modal/doc/index.en-US.md
@@ -23,7 +23,8 @@ When requiring users to interact with the application, but without jumping to a
 | CloseIcon         | custom close icon                                            | RenderFragment                | -             |
 | ConfirmLoading    | Whether to apply loading  visual effect for OK button or not | bool                          | false         |
 | DestroyOnClose    | Whether to unmount child  components on onClose              | bool                          | false         |
-| Footer            | Footer content, set as  footer={null} when you don't need default buttons | string\|RenderFragment        | 确定取消按钮  |
+| Header            | Header content, set as Header="null" when you don't need default header      | RenderFragment                | -             |
+| Footer            | Footer content, set as Footer="null" when you don't need default buttons | string\|RenderFragment    | confirm and cancel buttons  |
 | ForceRender       | Force render Modal                                           | bool                          | false         |
 | GetContainer      | Return the mount node for  Modal                             | ElementReference?             | document.body |
 | Keyboard          | Whether support press esc to close                           | bool                          | true          |

diff --git a/site/AntDesign.Docs/Demos/Components/Modal/doc/index.zh-CN.md b/site/AntDesign.Docs/Demos/Components/Modal/doc/index.zh-CN.md
@@ -26,6 +26,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | CloseIcon | 自定义关闭图标 | RenderFragment | - |
 | ConfirmLoading | 确定按钮 loading | bool | false |
 | DestroyOnClose | 关闭时销毁 Modal 里的子元素 | bool | false |
+| Header | 头部内容，当不需要头部时，可以设置为`null` | RenderFragment | - |
 | Footer | 底部内容，当不需要默认底部按钮时，可以设为 `null` | string\|RenderFragment | 确定取消按钮 |
 | ForceRender | 强制渲染 Modal | bool | false |
 | GetContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | ElementReference? | document.body |