Tesserae - Save Button

SaveButton

Description

The SaveButton component is a specialized button designed to handle the various states of a saving operation. It automatically manages the visual representation of states such as "Save Pending", "Verifying", "Saving", "Saved", and "Error". This component simplifies the UI logic for save actions by encapsulating the state transitions and appropriate icon/text feedback.

Usage

Instantiate the SaveButton using the constructor. You can customize the text displayed for each state and handle click events. The button's state is controlled programmatically via the SetState method.

save-button-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
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 sampleComponent = new SaveButtonExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SaveButtonExample : IComponent
    {
        public HTMLElement Render()
        {
            SaveButton saveButton = null;
            saveButton = new SaveButton()
                .Configure(saved: "All changes saved!")
                .OnClick(async () =>
                {
                    // Simulate a save operation
                    saveButton.SetState(SaveButton.State.Verifying);
                    await Task.Delay(500);

                    saveButton.SetState(SaveButton.State.Saving);
                    await Task.Delay(1000);

                    saveButton.SetState(SaveButton.State.Saved);

                    // Reset after a delay
                    await Task.Delay(2000);
                    saveButton.SetState(SaveButton.State.PendingSave);
                });

            return Stack().Children(
                TextBlock("Click to save:"),
                saveButton
            ).Render();
        }
    }
}

Enums

SaveState

SavePending: The initial state, button is ready to be clicked (Primary style).
Verifying: Indicates verification is in progress (Spinner, Disabled).
Saving: Indicates saving is in progress (Spinner, Disabled).
Saved: Indicates the save was successful (Success style).
Error: Indicates an error occurred (Danger style).

API reference

class

SaveButton

public class SaveButton : IComponent

A button variant that shows a "saving…" spinner and a confirmation tick while an async save operation is in progress.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
SaveButton	Initializes a new instance of this class.

Constructor

SaveButton

public SaveButton()

Initializes a new instance of this class.

Methods

Name	Description
Configure	Configures the component to configure.
SetState	Sets the state of the component.
NothingToSave	Configures the nothing to save on the component.
Pending	Configures the component to pending.
Verifying	Configures the component to verifying.
Saving	Configures the component to saving.
Saved	Configures the component to saved.
Error	Gets or sets the validation error message displayed beneath the component.
OnClick	Registers a callback invoked when the click event fires.
OnClickSpinWhile	Registers a callback invoked when the click spin while event fires.
VerifyingWhile	Configures the verifying while on the component.
Render	Renders the component's root HTML element.

Method

SaveButton.Configure

public SaveButton Configure(string save = null, string verifying = null, string saving = null, string saved = null, string error = null, string saveHover = null, UIcons saveIcon = UIcons.Disk, UIcons saveHoverIcon = UIcons.Disk, bool pendingPrimary = true)

Configures the component to configure.

Method

SaveButton.SetState

public SaveButton SetState(State state, string message = null)

Sets the state of the component.

Method

SaveButton.NothingToSave

public SaveButton NothingToSave(string message = null)

Configures the nothing to save on the component.

Method

SaveButton.Pending

public SaveButton Pending(string message = null)

Configures the component to pending.

Method

SaveButton.Verifying

public SaveButton Verifying(string message = null)

Configures the component to verifying.

Method

SaveButton.Saving

public SaveButton Saving(string message = null)

Configures the component to saving.

Method

SaveButton.Saved

public SaveButton Saved(string message = null)

Configures the component to saved.

Method

SaveButton.Error

public SaveButton Error(string message = null)

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

Method

SaveButton.OnClick

public SaveButton OnClick(Action action)

Registers a callback invoked when the click event fires.

Method

SaveButton.OnClickSpinWhile

Overload
OnClickSpinWhile(Func<Task>)	Registers a callback invoked when the click spin while event fires.
OnClickSpinWhile(Func<Task>, string, Action<SaveButton, Exception>)	Registers a callback invoked when the click spin while event fires.

OnClickSpinWhile(Func<Task>)

public SaveButton OnClickSpinWhile(Func<Task> actionAsync)

Registers a callback invoked when the click spin while event fires.

Parameters

actionAsync Func<Task>

OnClickSpinWhile(Func<Task>, string, Action<SaveButton, Exception>)

public SaveButton OnClickSpinWhile(Func<Task> action, string text = null, Action<SaveButton, Exception> onError = null)

Registers a callback invoked when the click spin while event fires.

Parameters

action Func<Task>
text string
onError Action<SaveButton, Exception>

Method

SaveButton.VerifyingWhile

public async Task<State> VerifyingWhile(Func<Task<State>> action, string text = null, Action<SaveButton, Exception> onError = null)

Configures the verifying while on the component.

Method

SaveButton.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Save Button

save-button-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
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 btn = new SaveButton()
                .OnClick(() => console.log("Save clicked"));
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }
    }

}

Custom State Texts

save-button-3-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
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 btn = new SaveButton()
                .Configure(save: "Commit", saved: "Committed")
                .OnClick(() => console.log("Commit clicked"));
            document.body.style.overflow = "hidden";
            MountCenteredToBody(btn);
        }
    }

}

SaveButton

Description

Usage

Enums

SaveState

API reference

Constructors

SaveButton

Methods

SaveButton.Configure

SaveButton.SetState

SaveButton.NothingToSave

SaveButton.Pending

SaveButton.Verifying

SaveButton.Saving

SaveButton.Saved

SaveButton.Error

SaveButton.OnClick

SaveButton.OnClickSpinWhile

OnClickSpinWhile(Func<Task>)

Parameters

OnClickSpinWhile(Func<Task>, string, Action<SaveButton, Exception>)

Parameters

SaveButton.VerifyingWhile

SaveButton.Render

Samples

Basic Save Button

Custom State Texts

See also