Tesserae - Saving Toast

SavingToast

Description

A toast notification for save operations

The SavingToast component helps viewing the state of a saving operation (Saving, Saved, Error) with appropriate icons and colors.

API reference

class

SavingToast

public class SavingToast

A toast variant that shows a "saving…" indicator while a long operation is running, swapping to success / error feedback when it completes.

Constructors

Constructor

SavingToast

public SavingToast(string initialMessage)

Initializes a new instance of this class.

Properties

Property

SavingToast.MinimumDisplayTime

public TimeSpan MinimumDisplayTime { get; set; }

Gets or sets the minimum display time.

Methods

Method

SavingToast.Saving

public SavingToast Saving(string message = null, string title = "Saving...")

Configures the component to saving.

Method

SavingToast.Saved

public SavingToast Saved(string message = null, string title = "Saved")

Configures the component to saved.

Method

SavingToast.Error

public SavingToast Error(string message = null, string title = "Error", bool untilDismissed = false)

Gets or sets the validation error message displayed beneath the component.

class

SavingToastHelper

public static class SavingToastHelper

Extension helpers for awaiting a while showing a .

Methods

Method

SavingToastHelper.WithSavingToast<T>

public static async Task<T> WithSavingToast<T>(this Task<T> task, string savingMessage = "Saving...", string savedMessage = "Saved", string errorMessage = "Error")

Awaits the given task while displaying a : the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.

Method

SavingToastHelper.WithSavingToast

public static async Task WithSavingToast(this Task task, string savingMessage = "Saving...", string savedMessage = "Saved", string errorMessage = "Error")

Returns the component configured with the given saving toast.

Samples

Trigger states

saving-toast-triggers-sample.js

using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static async Task ShowMany()
        {
            var toast1 = SavingToast();
            var toast2 = SavingToast();
            var toast3 = SavingToast();
            toast1.Saving("Starting save...");
            toast2.Saving("Starting save...");
            toast3.Saving("Starting save...");
            await Task.Delay(2000);
            toast1.Saved("All done!");
            await Task.Delay(2000);
            toast2.Saved("All done!");
            await Task.Delay(2000);
            toast3.Saved("All done!");
        }

        private static void Main()
        {
            var component = HStack().Children(
                Button("Trigger Saving").OnClick(() => SavingToast().Saving("Saving data...")),
                Button("Trigger Saved" ).OnClick(() => SavingToast().Saved("Data saved successfully!")),
                Button("Trigger Error" ).OnClick(() => SavingToast().Error("Could not save data.")),
                Button("Trigger Error with Close" ).OnClick(() => SavingToast().Error("Could not save data.", untilDismissed: true)),
                Button("Many Toasts").OnClickSpinWhile(() => ShowMany())
            ).Gap(8.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Live Demo

saving-toast-live-sample.js

using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Button("Simulate Save Process").OnClick(async () => {
                var savingToast = SavingToast();
                savingToast.Saving("Starting save...");
                await Task.Delay(2000);
                savingToast.Saved("All done!");
            });

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

SavingToast

Description

API reference

Constructors

SavingToast

Properties

SavingToast.MinimumDisplayTime

Methods

SavingToast.Saving

SavingToast.Saved

SavingToast.Error

Methods

SavingToastHelper.WithSavingToast<T>

SavingToastHelper.WithSavingToast

Samples

Trigger states

Live Demo

See also