Last active
September 26, 2022 21:59
-
-
Save vhugogarcia/5aab9b83eb80a345a81b1090b80412e5 to your computer and use it in GitHub Desktop.
This Popup service helps to create and update the layout of a popup, so it allows running multiple Lottie animations during a process
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using CommunityToolkit.Maui.Views; | |
namespace MauiApp.Services.ToolkitPopup; | |
public class PopupService : IPopupService | |
{ | |
readonly Page page = Application.Current?.MainPage ?? throw new NullReferenceException(); | |
private Popup popup { get; set; } | |
/// <summary> | |
/// Shows a Success state popup | |
/// </summary> | |
/// <param name="message"></param> | |
public void Success(string message = "") | |
{ | |
popup = Init(Constants.AnimationSuccessFile, 1, message, true); | |
Show(); | |
} | |
/// <summary> | |
/// Shows a loading state popup | |
/// </summary> | |
/// <returns></returns> | |
public void Loading(string message = "cargando...") | |
{ | |
popup = Init(Constants.AnimationLoadingFile, -1, message, false); | |
Show(); | |
} | |
/// <summary> | |
/// Hides the popup | |
/// </summary> | |
public void Hide() | |
{ | |
if (popup != null) | |
popup.Close(); | |
popup = null; | |
} | |
private void Show() | |
{ | |
if (popup != null) | |
page.ShowPopup(popup); | |
} | |
/// <summary> | |
/// Updated the popup layout | |
/// </summary> | |
/// <param name="animationSource"></param> | |
/// <param name="animationRepeat"></param> | |
/// <param name="message"></param> | |
/// <param name="canBeDismissed"></param> | |
public void Update(string animationSource, | |
int animationRepeat = -1, | |
string message = "cargando...", | |
bool canBeDismissed = false) | |
{ | |
if (popup == null) | |
return; | |
// Update the popup properties | |
popup.CanBeDismissedByTappingOutsideOfPopup = canBeDismissed; | |
if (popup.Content is VerticalStackLayout) | |
{ | |
// Update the message | |
var layout = (VerticalStackLayout)popup.Content; | |
if (layout.Children.Count > 1 && layout.Children[1] is Label) | |
((Label)layout.Children[1]).Text = message; | |
// Update the animation | |
if (layout.Children.Count > 0 && layout.Children[0] is SKLottieView) | |
{ | |
((SKLottieView)layout.Children[0]).RepeatCount = animationRepeat; | |
((SKLottieView)layout.Children[0]).Source = new SKFileLottieImageSource() | |
{ | |
File = animationSource | |
}; | |
} | |
} | |
} | |
/// <summary> | |
/// Init the popup layout and animation | |
/// </summary> | |
/// <param name="animationSource"></param> | |
/// <param name="message"></param> | |
/// <param name="canBeDismissed"></param> | |
/// <returns></returns> | |
private Popup Init(string animationSource, | |
int animationRepeat = -1, | |
string message = "cargando...", | |
bool canBeDismissed = false) | |
{ | |
try | |
{ | |
if (string.IsNullOrWhiteSpace(animationSource)) | |
throw new Exception("Lottie Animation JSON file name is required."); | |
Popup popupLayout = new() | |
{ | |
CanBeDismissedByTappingOutsideOfPopup = canBeDismissed, | |
Size = new Size(192, 192) | |
}; | |
VerticalStackLayout verticalStackLayout = new() | |
{ | |
StyleClass = new List<string> { "popup-layout" }, | |
Padding = new Thickness(8,8,8,8), | |
}; | |
Label messageLabel = new() | |
{ | |
StyleClass = new List<string> { "popup-message" }, | |
Text = message, | |
HorizontalOptions = LayoutOptions.Center, | |
HorizontalTextAlignment = TextAlignment.Center | |
}; | |
var lottieAnimation = new SKLottieView() | |
{ | |
IsAnimationEnabled = true, | |
HeightRequest = 128, | |
WidthRequest = 128, | |
RepeatCount = animationRepeat, | |
RepeatMode = SKLottieRepeatMode.Restart, | |
HorizontalOptions = LayoutOptions.Center, | |
Source = new SKFileLottieImageSource() | |
{ | |
File = animationSource | |
}, | |
}; | |
verticalStackLayout.Children.Add(lottieAnimation); | |
if (!string.IsNullOrWhiteSpace(message)) | |
verticalStackLayout.Children.Add(messageLabel); | |
popupLayout.Content = verticalStackLayout; | |
return popupLayout; | |
} | |
catch(Exception ex) | |
{ | |
Debug.WriteLine(ex.ToString()); | |
return null; | |
} | |
} | |
} | |
// You can use it on the following way from an MVVM pattern: | |
/* | |
PopupService.Loading("Saving..."); | |
await Task.Delay(2000); | |
PopupService.Update(Constants.AnimationSuccessFile, 0, "Se creo exitosamente tu cuenta"); | |
await Task.Delay(1500); | |
PopupService.Hide(); | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is the result of the Popup Service:
Community.Toolkit.Popups.and.Lottie.mov