Tesserae

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

Methods

WithStateTexts(string savePending = null, string verifying = null, string saving = null, string saved = null, string error = null) Customizes the text displayed for each state. • savePending: Text for the pending state (default: "Save"). • verifying: Text for the verifying state (default: "Verifying..."). • saving: Text for the saving state (default: "Saving..."). • saved: Text for the saved state (default: "Saved"). • error: Text for the error state (default: "Error"). Returns the SaveButton instance.
SetState(SaveState state, string message = null) Updates the button to the specified state. • state: The new state (SavePending, Verifying, Saving, Saved, Error). • message: Optional message to override the default text for the state.
OnClick(Action action) Sets the action to be executed when the button is clicked. • action: The callback to execute. Returns the SaveButton instance.
Render() Renders the component to an HTMLElement.

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

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