From 455119f46734b0523946f3b6a7e2d2c7da95a7e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matija=20Ko=C5=BEelj?= <matija.kozelj@tompit.net>
Date: Wed, 15 Mar 2023 10:34:34 +0100
Subject: [PATCH] Add TransitionAnimator component to help with transition
 implementations

---
 .../Components/TransitionAnimator.razor       | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 src/Connected.Components/Components/TransitionAnimator.razor

diff --git a/src/Connected.Components/Components/TransitionAnimator.razor b/src/Connected.Components/Components/TransitionAnimator.razor
new file mode 100644
index 0000000..399cfd1
--- /dev/null
+++ b/src/Connected.Components/Components/TransitionAnimator.razor
@@ -0,0 +1,107 @@
+@using Connected.Utilities;
+
+<div class="@ClassList" @ontransitionend="TransitionEnd" @onanimationend="TransitionEnd">
+   @if (ContentVisible)
+   {
+      @ChildContent
+   }
+</div>
+
+<style>
+   .transition-container-component {
+      transition: all @(TransitionDuration)ms;
+   }
+</style>
+
+@code {
+   private bool _visible = false;
+
+   /// <summary>
+   /// The class to append to the container while content is visible and transitioning in
+   /// </summary>
+   [Parameter, EditorRequired]
+   public string? TransitionInClass { get; set; }
+
+   /// <summary>
+   /// The class to append to the container while content is transitioning out and hidden
+   /// </summary>
+   [Parameter, EditorRequired]
+   public string? TransitionOutClass { get; set; }
+
+   /// <summary>
+   /// The class to append to the container to control transitions
+   /// </summary>
+   [Parameter]
+   public string? TransitionContainerClass { get; set; } = "transition-container-component";
+
+   /// <summary>
+   /// Controls the visibility of the child content
+   /// </summary>
+   [Parameter, EditorRequired]
+   public bool Visible { get => _visible; set => StartTransition(value); }
+
+   /// <summary>
+   /// The content to show/hide
+   /// </summary>
+   [Parameter, EditorRequired]
+   public RenderFragment? ChildContent { get; set; }
+
+   /// <summary>
+   /// Indicates a transition has ended. Useful for visual cleanup.
+   /// </summary>
+   [Parameter]
+   public EventCallback TransitionEnded { get; set; }
+
+   /// <summary>
+   /// The duration of transitions in milliseconds.
+   /// </summary>
+   [Parameter]
+   public int TransitionDuration { get; set; } = 2000;
+
+   private bool TransitioningIn { get; set; }
+   
+   private bool TransitioningOut { get; set; }
+
+   private bool ContentVisible { get; set; }
+
+   private CssBuilder ClassList
+   {
+      get
+      {
+         return new CssBuilder(TransitionContainerClass)
+         .AddClass(TransitionInClass, TransitioningIn)
+         .AddClass(TransitionOutClass, TransitioningOut);
+      }
+   }
+
+   private void StartTransition(bool visible)
+   {
+      if (visible == Visible)
+         return;
+
+      _visible = visible;
+
+      TransitioningIn = visible;
+
+      TransitioningOut = !visible;
+
+      if (visible)
+         ContentVisible = true;
+
+      StateHasChanged();
+   }
+
+   private void TransitionEnd()
+   {
+      ContentVisible = Visible;
+      StateHasChanged();
+
+      TransitionEnded.InvokeAsync();
+   }
+
+   protected override void OnInitialized()
+   {
+      base.OnInitialized();
+      ContentVisible = Visible;
+   }
+}