AntDesign Toast

Megabit · Feb 23, 2024 · d309be5 · d309be5
1 parent cc69399
commit d309be5
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 32 deletions.
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -953,19 +953,32 @@ public override string OffcanvasFade( bool showing, bool hiding ) => showing
 
     #region Toast
 
-    public override string Toast() => null;
-
-    public override string ToastFade( bool showing, bool hiding ) => null;
+    public override string Toast() => "ant-notification-notice ant-notification-notice-closable";
+    //
+    public override string ToastFade( bool showing, bool hiding ) => showing
+        ? "ant-notification-fade-enter ant-notification-fade-enter-active ant-notification-fade-appear ant-notification-fade-appear-start ant-notification-fade-appear-active ant-notification-fade"
+        : hiding
+            ? "ant-notification-fade-leave ant-notification-fade-leave-start ant-notification-fade-leave-active ant-notification-fade"
+            : null;
 
     public override string ToastVisible( bool visible ) => null;
 
-    public override string ToastHeader() => null;
+    public override string ToastHeader() => "ant-notification-notice-message";
 
-    public override string ToastBody() => null;
+    public override string ToastBody() => "ant-notification-notice-description";
 
-    public override string Toaster() => null;
+    public override string Toaster() => "ant-notification";
 
-    public override string ToasterPlacement( ToasterPlacement placement ) => null;
+    public override string ToasterPlacement( ToasterPlacement placement ) => placement switch
+    {
+        Blazorise.ToasterPlacement.Top => "ant-notification-top",
+        Blazorise.ToasterPlacement.TopStart => "ant-notification-topLeft",
+        Blazorise.ToasterPlacement.TopEnd => "ant-notification-topRight",
+        Blazorise.ToasterPlacement.Bottom => "ant-notification-bottom",
+        Blazorise.ToasterPlacement.BottomStart => "ant-notification-bottomLeft",
+        Blazorise.ToasterPlacement.BottomEnd => "ant-notification-bottomRight",
+        _ => null,
+    };
 
     #endregion
 

diff --git a/Source/Blazorise.AntDesign/AntDesignStyleProvider.cs b/Source/Blazorise.AntDesign/AntDesignStyleProvider.cs
@@ -70,8 +70,8 @@ public override string OffcanvasBackdropAnimationDuration( bool animated, int an
 
     public override string ToastAnimationDuration( bool animated, int animationDuration )
         => animated
-            ? $"transition-duration: {animationDuration}ms"
-            : "transition-duration: unset";
+            ? $"animation-duration: {animationDuration}ms"
+            : "animation-duration: unset";
 
     #endregion
 }
diff --git a/Source/Blazorise.AntDesign/CloseButton.razor b/Source/Blazorise.AntDesign/CloseButton.razor
@@ -1,4 +1,5 @@
-@inherits Blazorise.CloseButton
+@using Blazorise.Utilities
+@inherits Blazorise.CloseButton
 <button @ref="@ElementRef" id="@ElementId" type="button" class="@ClassNames" style="@StyleNames" disabled="@DisabledString" aria-label="Close" @onclick="@ClickHandler" @attributes="@Attributes">
     @if ( ParentAlert != null )
     {
@@ -12,9 +13,19 @@
     {
         <span role="img" aria-label="close" class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span>
     }
+    else if ( ParentToast != null )
+    {
+        <span class="ant-notification-notice-close-x">
+            <span role="img" aria-label="close" class="anticon anticon-close ant-notification-notice-close-icon">
+                <svg fill-rule="evenodd" viewBox="64 64 896 896" focusable="false" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"></path></svg>
+            </span>
+        </span>
+    }
     @ChildContent
 </button>
 
- @code{
+@code {
     [CascadingParameter] protected Offcanvas ParentOffcanvas { get; set; }
- }
+
+    [CascadingParameter] protected Toast ParentToast { get; set; }
+}
diff --git a/Source/Blazorise.AntDesign/CloseButton.razor.cs b/Source/Blazorise.AntDesign/CloseButton.razor.cs
@@ -20,6 +20,9 @@ protected override void BuildClasses( ClassBuilder builder )
         if ( ParentModal != null )
             builder.Append( "ant-modal-close" );
 
+        if ( ParentToast != null )
+            builder.Append( "ant-notification-notice-close" );
+
         base.BuildClasses( builder );
     }
 

diff --git a/Source/Blazorise.AntDesign/Config.cs b/Source/Blazorise.AntDesign/Config.cs
@@ -39,40 +39,40 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
     public static IDictionary<Type, Type> ComponentMap => new Dictionary<Type, Type>
     {
         { typeof( Blazorise.AccordionHeader ), typeof( AntDesign.AccordionHeader ) },
-        { typeof( Blazorise.Addons ), typeof( AntDesign.Addons ) },
         { typeof( Blazorise.Addon ), typeof( AntDesign.Addon ) },
         { typeof( Blazorise.AddonLabel ), typeof( AntDesign.AddonLabel ) },
-        { typeof( Blazorise.AlertMessage ), typeof( AntDesign.AlertMessage ) },
+        { typeof( Blazorise.Addons ), typeof( AntDesign.Addons ) },
         { typeof( Blazorise.AlertDescription ), typeof( AntDesign.AlertDescription ) },
+        { typeof( Blazorise.AlertMessage ), typeof( AntDesign.AlertMessage ) },
         { typeof( Blazorise.Badge ), typeof( AntDesign.Badge ) },
         { typeof( Blazorise.Bar ), typeof( AntDesign.Bar ) },
         { typeof( Blazorise.BarBrand ), typeof( AntDesign.BarBrand ) },
+        { typeof( Blazorise.BarDropdown ), typeof( AntDesign.BarDropdown ) },
+        { typeof( Blazorise.BarDropdownDivider ), typeof( AntDesign.BarDropdownDivider ) },
+        { typeof( Blazorise.BarDropdownItem ), typeof( AntDesign.BarDropdownItem ) },
+        { typeof( Blazorise.BarDropdownMenu ), typeof( AntDesign.BarDropdownMenu ) },
+        { typeof( Blazorise.BarDropdownToggle ), typeof( AntDesign.BarDropdownToggle ) },
+        { typeof( Blazorise.BarEnd ), typeof( AntDesign.BarEnd ) },
         { typeof( Blazorise.BarIcon ), typeof( AntDesign.BarIcon ) },
         { typeof( Blazorise.BarItem ), typeof( AntDesign.BarItem ) },
+        { typeof( Blazorise.BarLink ), typeof( AntDesign.BarLink ) },
         { typeof( Blazorise.BarMenu ), typeof( AntDesign.BarMenu ) },
         { typeof( Blazorise.BarStart ), typeof( AntDesign.BarStart ) },
-        { typeof( Blazorise.BarEnd ), typeof( AntDesign.BarEnd ) },
-        { typeof( Blazorise.BarDropdown ), typeof( AntDesign.BarDropdown ) },
-        { typeof( Blazorise.BarLink ), typeof( AntDesign.BarLink ) },
-        { typeof( Blazorise.BarDropdownMenu ), typeof( AntDesign.BarDropdownMenu ) },
-        { typeof( Blazorise.BarDropdownItem ), typeof( AntDesign.BarDropdownItem ) },
-        { typeof( Blazorise.BarDropdownDivider ), typeof( AntDesign.BarDropdownDivider ) },
-        { typeof( Blazorise.BarDropdownToggle ), typeof( AntDesign.BarDropdownToggle ) },
         { typeof( Blazorise.BarToggler ), typeof( AntDesign.BarToggler ) },
         { typeof( Blazorise.Breadcrumb ), typeof( AntDesign.Breadcrumb ) },
         { typeof( Blazorise.BreadcrumbItem ), typeof( AntDesign.BreadcrumbItem ) },
         { typeof( Blazorise.BreadcrumbLink ), typeof( AntDesign.BreadcrumbLink ) },
-        { typeof( Blazorise.Check<> ), typeof( AntDesign.Check<> ) },
         { typeof( Blazorise.Button ), typeof( AntDesign.Button ) },
         { typeof( Blazorise.CardHeader ), typeof( AntDesign.CardHeader ) },
         { typeof( Blazorise.CardLink ), typeof( AntDesign.CardLink ) },
         { typeof( Blazorise.Carousel ), typeof( AntDesign.Carousel ) },
         { typeof( Blazorise.CarouselSlide ), typeof( AntDesign.CarouselSlide ) },
+        { typeof( Blazorise.Check<> ), typeof( AntDesign.Check<> ) },
         { typeof( Blazorise.CloseButton ), typeof( AntDesign.CloseButton ) },
         { typeof( Blazorise.CollapseHeader ), typeof( AntDesign.CollapseHeader ) },
         { typeof( Blazorise.Dropdown ), typeof( AntDesign.Dropdown ) },
-        { typeof( Blazorise.DropdownMenu ), typeof( AntDesign.DropdownMenu ) },
         { typeof( Blazorise.DropdownItem ), typeof( AntDesign.DropdownItem ) },
+        { typeof( Blazorise.DropdownMenu ), typeof( AntDesign.DropdownMenu ) },
         { typeof( Blazorise.DropdownToggle ), typeof( AntDesign.DropdownToggle ) },
         { typeof( Blazorise.Field ), typeof( AntDesign.Field ) },
         { typeof( Blazorise.FieldBody ), typeof( AntDesign.FieldBody ) },
@@ -83,21 +83,22 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
         { typeof( Blazorise.Offcanvas ), typeof( AntDesign.Offcanvas ) },
         { typeof( Blazorise.OffcanvasHeader ), typeof( AntDesign.OffcanvasHeader ) },
         { typeof( Blazorise.Progress ), typeof( AntDesign.Progress ) },
+        { typeof( Blazorise.Radio<> ), typeof( AntDesign.Radio<> ) },
+        { typeof( Blazorise.Rating ), typeof( AntDesign.Rating ) },
+        { typeof( Blazorise.RatingItem ), typeof( AntDesign.RatingItem ) },
         { typeof( Blazorise.Select<> ), typeof( AntDesign.Select<> ) },
-        { typeof( Blazorise.SelectItem<> ), typeof( AntDesign.SelectItem<> ) },
         { typeof( Blazorise.SelectGroup ), typeof( AntDesign.SelectGroup ) },
-        { typeof( Blazorise.Radio<> ), typeof( AntDesign.Radio<> ) },
+        { typeof( Blazorise.SelectItem<> ), typeof( AntDesign.SelectItem<> ) },
         { typeof( Blazorise.Slider<> ), typeof( AntDesign.Slider<> ) },
+        { typeof( Blazorise.Step ), typeof( AntDesign.Step ) },
         { typeof( Blazorise.Switch<> ), typeof( AntDesign.Switch<> ) },
-        { typeof( Blazorise.Tabs ), typeof( AntDesign.Tabs ) },
         { typeof( Blazorise.Tab ), typeof( AntDesign.Tab ) },
-        { typeof( Blazorise.TabPanel ), typeof( AntDesign.TabPanel ) },
-        { typeof( Blazorise.TabsContent ), typeof( AntDesign.TabsContent ) },
         { typeof( Blazorise.Table ), typeof( AntDesign.Table ) },
         { typeof( Blazorise.TableRowHeader ), typeof( AntDesign.TableRowHeader ) },
+        { typeof( Blazorise.TabPanel ), typeof( AntDesign.TabPanel ) },
+        { typeof( Blazorise.Tabs ), typeof( AntDesign.Tabs ) },
+        { typeof( Blazorise.TabsContent ), typeof( AntDesign.TabsContent ) },
         { typeof( Blazorise.TextEdit ), typeof( AntDesign.TextEdit ) },
-        { typeof( Blazorise.Step ), typeof( AntDesign.Step ) },
-        { typeof( Blazorise.Rating ), typeof( AntDesign.Rating ) },
-        { typeof( Blazorise.RatingItem ), typeof( AntDesign.RatingItem ) },
+        { typeof( Blazorise.Toast ), typeof( AntDesign.Toast ) },
     };
 }
diff --git a/Source/Blazorise.AntDesign/Styles/blazorise.antdesign.scss b/Source/Blazorise.AntDesign/Styles/blazorise.antdesign.scss
@@ -23,6 +23,7 @@
 @import "components/switch";
 @import "components/table";
 @import "components/tabs";
+@import "components/toast";
 
 @import "extensions/snackbar";
 

diff --git a/Source/Blazorise.AntDesign/Styles/components/_toast.scss b/Source/Blazorise.AntDesign/Styles/components/_toast.scss
@@ -0,0 +1,35 @@
+.ant-notification {
+    &-top {
+        inset: 24px auto auto 50%;
+        transform: translateX(-50%);
+    }
+
+    &-topLeft {
+        left: 0px;
+        top: 24px;
+        bottom: auto;
+    }
+
+    &-topRight {
+        right: 0px;
+        top: 24px;
+        bottom: auto;
+    }
+
+    &-bottom {
+        inset: auto auto 24px 50%;
+        transform: translateX(-50%);
+    }
+
+    &-bottomLeft {
+        left: 0px;
+        top: auto;
+        bottom: 24px;
+    }
+
+    &-bottomRight {
+        right: 0px;
+        top: auto;
+        bottom: 24px;
+    }
+}
diff --git a/Source/Blazorise.AntDesign/Toast.razor b/Source/Blazorise.AntDesign/Toast.razor
@@ -0,0 +1,13 @@
+@using System.Text
+@inherits Blazorise.Toast
+<div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" @attributes="@Attributes">
+    <div class="ant-notification-notice-content">
+        <div role="alert">
+            <CascadingValue Value="@this" IsFixed>
+                <CascadingValue Value="@State">
+                    @ChildContent
+                </CascadingValue>
+            </CascadingValue>
+        </div>
+    </div>
+</div>
diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.css
@@ -3492,6 +3492,35 @@ tr.ant-table-row.ant-table-row-selectable:focus[tabindex="0"] {
   overflow-x: auto;
 }
 
+.ant-notification-top {
+  inset: 24px auto auto 50%;
+  transform: translateX(-50%);
+}
+.ant-notification-topLeft {
+  left: 0px;
+  top: 24px;
+  bottom: auto;
+}
+.ant-notification-topRight {
+  right: 0px;
+  top: 24px;
+  bottom: auto;
+}
+.ant-notification-bottom {
+  inset: auto auto 24px 50%;
+  transform: translateX(-50%);
+}
+.ant-notification-bottomLeft {
+  left: 0px;
+  top: auto;
+  bottom: 24px;
+}
+.ant-notification-bottomRight {
+  right: 0px;
+  top: auto;
+  bottom: 24px;
+}
+
 .snackbar-stack {
   z-index: 1009 !important;
 }

diff --git a/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.min.css b/Source/Blazorise.AntDesign/wwwroot/blazorise.antdesign.min.css