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.

Namespace: Tesserae

Constructors

Name	Description
SavingToast	Initializes a new instance of this class.

Constructor

SavingToast

public SavingToast(string initialMessage)

Initializes a new instance of this class.

Properties

Name	Description
MinimumDisplayTime	Gets or sets the minimum display time.

Property

SavingToast.MinimumDisplayTime

public TimeSpan MinimumDisplayTime { get; set; }

Gets or sets the minimum display time.

Methods

Name	Description
Saving	Configures the component to saving.
Saved	Configures the component to saved.
Error	Gets or sets the validation error message displayed beneath the component.

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 Task while showing a SavingToast.

Namespace: Tesserae

Methods

Name	Description
WithSavingToast	Awaits the given task while displaying a `SavingToast`: 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

Overload
WithSavingToast<T>(Task<T>, string, string, string)	Awaits the given task while displaying a `SavingToast`: the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.
WithSavingToast(Task, string, string, string)	Returns the component configured with the given saving toast.

WithSavingToast<T>(Task<T>, string, string, string)

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 SavingToast: the toast shows a "saving" indicator while the task is in flight and swaps to a "saved" or "error" message on completion.

Parameters

task Task<T>
savingMessage string
savedMessage string
errorMessage string

WithSavingToast(Task, string, string, string)

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.

Parameters

task Task
savingMessage string
savedMessage string
errorMessage string

Samples

Trigger states

saving-toast-triggers-sample.cs

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.cs

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

WithSavingToast<T>(Task<T>, string, string, string)

Parameters

WithSavingToast(Task, string, string, string)

Parameters

Samples

Trigger states

Live Demo

See also