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

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.

Constructors

Constructor

SaveButton

public SaveButton()

Initializes a new instance of this class.

Methods

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

public SaveButton OnClickSpinWhile(Func<Task> actionAsync)

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

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

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.

Method

SaveButton.Render

public HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Save Button

save-button-2-sample.js

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

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);
        }
    }

}

Referenced by

Saving Toast

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

SaveButton.VerifyingWhile

SaveButton.OnClickSpinWhile

SaveButton.Render

Samples

Basic Save Button

Custom State Texts

See also

Referenced by