From 3d3149d4eb52ea8f8a73f8369eab923985d91a29 Mon Sep 17 00:00:00 2001 From: Mladen Macanovic Date: Fri, 23 Feb 2024 14:20:00 +0100 Subject: [PATCH] wip hiding and showing states --- .../AntDesignClassProvider.cs | 6 ++++- .../BootstrapClassProvider.cs | 6 ++++- .../Bootstrap5ClassProvider.cs | 6 ++++- Source/Blazorise.Bulma/BulmaClassProvider.cs | 6 ++++- .../Providers/FluentUI2ClassProvider.cs | 2 +- .../TailwindClassProvider.cs | 2 +- .../Blazorise/Components/Modal/Modal.razor.cs | 23 +++++++++++++++---- Source/Blazorise/Interfaces/IClassProvider.cs | 2 +- Source/Blazorise/Providers/ClassProvider.cs | 2 +- .../Blazorise/Providers/EmptyClassProvider.cs | 2 +- Source/Blazorise/States/ModalState.cs | 4 ++++ 11 files changed, 47 insertions(+), 14 deletions(-) diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs index 579987b286..f861ced57f 100644 --- a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs +++ b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs @@ -879,7 +879,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ public override string ModalFade() => Fade(); - public override string ModalFade( bool animation ) => animation ? Fade() : null; + public override string ModalFade( bool showing, bool hiding ) => showing + ? Show() + : hiding + ? Fade() + : null; public override string ModalVisible( bool visible ) => null; diff --git a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs index eef3b7d9b8..4db56be7c4 100644 --- a/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs +++ b/Source/Blazorise.Bootstrap/BootstrapClassProvider.cs @@ -889,7 +889,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ public override string ModalFade() => Fade(); - public override string ModalFade( bool animation ) => animation ? Fade() : null; + public override string ModalFade( bool showing, bool hiding ) => showing + ? Show() + : hiding + ? Fade() + : null; public override string ModalVisible( bool visible ) => visible ? Show() : null; diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs index e59aa027f7..345e58d7ae 100644 --- a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs +++ b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs @@ -882,7 +882,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ public override string ModalFade() => Fade(); - public override string ModalFade( bool animation ) => animation ? Fade() : null; + public override string ModalFade( bool showing, bool hiding ) => showing + ? Show() + : hiding + ? Fade() + : null; public override string ModalVisible( bool visible ) => visible ? Show() : null; diff --git a/Source/Blazorise.Bulma/BulmaClassProvider.cs b/Source/Blazorise.Bulma/BulmaClassProvider.cs index 935a51832a..c213bf280c 100644 --- a/Source/Blazorise.Bulma/BulmaClassProvider.cs +++ b/Source/Blazorise.Bulma/BulmaClassProvider.cs @@ -910,7 +910,11 @@ public override string Display( DisplayType displayType, DisplayDefinition displ public override string ModalFade() => Fade(); - public override string ModalFade( bool animation ) => animation ? Fade() : null; + public override string ModalFade( bool showing, bool hiding ) => showing + ? Show() + : hiding + ? Fade() + : null; public override string ModalVisible( bool visible ) => visible ? Active() : null; diff --git a/Source/Blazorise.FluentUI2/Providers/FluentUI2ClassProvider.cs b/Source/Blazorise.FluentUI2/Providers/FluentUI2ClassProvider.cs index a925630d73..9466d82560 100644 --- a/Source/Blazorise.FluentUI2/Providers/FluentUI2ClassProvider.cs +++ b/Source/Blazorise.FluentUI2/Providers/FluentUI2ClassProvider.cs @@ -1017,7 +1017,7 @@ public override string Display( DisplayType displayType, DisplayDefinition displ public override string ModalFade() => "fui-DialogSurface-fade"; - public override string ModalFade( bool animation ) => animation ? "fui-DialogSurface-fade" : null; + public override string ModalFade( bool showing, bool hiding ) => showing || hiding ? "fui-DialogSurface-fade" : null; public override string ModalVisible( bool visible ) => visible ? "fui-DialogSurface-show" : "fui-DialogSurface-hide"; diff --git a/Source/Blazorise.Tailwind/TailwindClassProvider.cs b/Source/Blazorise.Tailwind/TailwindClassProvider.cs index 1a567e1c13..dd6576c86a 100644 --- a/Source/Blazorise.Tailwind/TailwindClassProvider.cs +++ b/Source/Blazorise.Tailwind/TailwindClassProvider.cs @@ -1305,7 +1305,7 @@ public override string AlertColor( Color color ) public override string ModalFade() => "b-modal-fade"; - public override string ModalFade( bool animation ) => animation ? "b-modal-fade" : null; + public override string ModalFade( bool showing, bool hiding ) => hiding ? "b-modal-fade" : null; public override string ModalVisible( bool visible ) => visible ? "flex" : null; diff --git a/Source/Blazorise/Components/Modal/Modal.razor.cs b/Source/Blazorise/Components/Modal/Modal.razor.cs index 43eb7b36c0..d58fba673f 100644 --- a/Source/Blazorise/Components/Modal/Modal.razor.cs +++ b/Source/Blazorise/Components/Modal/Modal.razor.cs @@ -112,7 +112,7 @@ protected override Task OnFirstAfterRenderAsync() protected override void BuildClasses( ClassBuilder builder ) { builder.Append( ClassProvider.Modal() ); - builder.Append( ClassProvider.ModalFade( Animated ) ); + builder.Append( ClassProvider.ModalFade( Animated && State.Showing, Animated && State.Hiding ) ); builder.Append( ClassProvider.ModalVisible( IsVisible ) ); base.BuildClasses( builder ); @@ -408,11 +408,17 @@ public Task BeginAnimation( bool visible ) { if ( visible ) { + state = state with { Showing = true }; + BackdropVisible = ShowBackdrop; - DirtyStyles(); } else - DirtyClasses(); + { + state = state with { Hiding = true }; + } + + DirtyClasses(); + DirtyStyles(); return InvokeAsync( StateHasChanged ); } @@ -421,9 +427,16 @@ public Task BeginAnimation( bool visible ) public Task EndAnimation( bool visible ) { if ( visible ) - DirtyClasses(); + { + state = state with { Showing = false }; + } else - DirtyStyles(); + { + state = state with { Hiding = false }; + } + + DirtyClasses(); + DirtyStyles(); BackdropVisible = ShowBackdrop && visible; diff --git a/Source/Blazorise/Interfaces/IClassProvider.cs b/Source/Blazorise/Interfaces/IClassProvider.cs index 8eeca70b19..c486488ab2 100644 --- a/Source/Blazorise/Interfaces/IClassProvider.cs +++ b/Source/Blazorise/Interfaces/IClassProvider.cs @@ -816,7 +816,7 @@ public interface IClassProvider string ModalFade(); - string ModalFade( bool animation ); + string ModalFade( bool showing, bool hiding ); string ModalVisible( bool visible ); diff --git a/Source/Blazorise/Providers/ClassProvider.cs b/Source/Blazorise/Providers/ClassProvider.cs index 7f39b18705..295715a06a 100644 --- a/Source/Blazorise/Providers/ClassProvider.cs +++ b/Source/Blazorise/Providers/ClassProvider.cs @@ -820,7 +820,7 @@ public virtual string Display( DisplayType displayType, IEnumerable null; - public string ModalFade( bool animation ) => null; + public string ModalFade( bool showing, bool hiding ) => null; public string ModalVisible( bool visible ) => null; diff --git a/Source/Blazorise/States/ModalState.cs b/Source/Blazorise/States/ModalState.cs index 50db2fa82f..5a0e608b4e 100644 --- a/Source/Blazorise/States/ModalState.cs +++ b/Source/Blazorise/States/ModalState.cs @@ -10,6 +10,10 @@ public record ModalState /// public bool Visible { get; init; } + public bool Showing { get; init; } + + public bool Hiding { get; init; } + /// /// Defines the open state of the modal dialog. ///