Options Menu builder?

[heberleh]

Is there an official Options menu builder? I have found some examples, but it is pretty buggy. I work, but the GUI is lagging and doesn't update. Like clicking a checkbox and it doesn't check it.

I cannot find the source of the code, but it looks like this:

function Settings(props: { children: any }) {
    const [isOpen, setIsOpen] = useState(false);

    let className = "settings-area " + (isOpen ? "" : "tucked-away");
    return (
        <div>
            <div className={className}>{props.children}</div>
            <div
                className="icon-button settings"
                title="Settings"
                onClick={() => setIsOpen(!isOpen)}
            >
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path d="M16 10.66a2.078 2.078 0 0 1-3.63.34h-.47v3.9H9.15l.29-.3-.36-.66-.06-.11-.07-.13-.02-.03a.21.21 0 0 0-.04-.06 1.088 1.088 0 0 0 .08-.31c.03-.01.07-.03.11-.04h.93v-3.15l-.83-.15a3.964 3.964 0 0 1-.43-.11 1.748 1.748 0 0 1 .11-.18l.1-.15.04-.05.02-.05.06-.11.36-.66-.53-.54-.92-.91-.54-.54-.66.37-.11.06-.37.19c-.04-.12-.08-.22-.11-.3l-.01-.02v-.97H2.91v.98l-.1.33-.52-.28-.22-.12H2V5h4v-.26a2.027 2.027 0 0 1-.94-2.25A2.003 2.003 0 1 1 8 4.73V5h3.9v4h.47a1.972 1.972 0 0 1 1.73-1 2.01 2.01 0 0 1 1.9 2.66z"></path>
                    <path d="M8.65 10.88c-.1-.03-.21-.06-.34-.1l-.52-.16a2.044 2.044 0 0 0-.28-.64l.33-.58c.05-.09.11-.19.17-.28l.04-.06.08-.12.06-.11-.91-.91-.11.06-.13.07-.95.5a2.99 2.99 0 0 0-.63-.29l-.11-.57a1.275 1.275 0 0 0-.12-.41l-.05-.17V7H3.92v.11l-.33 1.15c-.23.11-.41.17-.64.29l-.28-.18-.01-.01-.05-.02L2 8.02l-.19-.1h-.05l-.51.56-.34.3.06.11.56 1.09a2.39 2.39 0 0 0-.22.58l-.62.16a3.771 3.771 0 0 1-.69.24v1.27l.11.05 1.2.33c.05.19.16.41.22.58l-.56 1.1-.06.11.85.86h.05l.69-.38.45-.22a2.041 2.041 0 0 0 .58.22l.34 1.02.04.07.01.03h1.26l.05-.1.33-1.02a2.594 2.594 0 0 0 .64-.28l.51.28.68.36.61-.63.19-.19-.06-.11-.05-.05a4.025 4.025 0 0 0-.24-.46l-.28-.58a2.242 2.242 0 0 0 .28-.63l.54-.17a3.388 3.388 0 0 0 .51-.17H9v-1.29a3.502 3.502 0 0 1-.35-.08zm-4.12 2.44a1.82 1.82 0 0 1 0-3.64 1.82 1.82 0 0 1 0 3.64z"></path>
                </svg>
            </div>
        </div>
    );
}

export function renderSettings(components: Components[]) {
    let c = components.map((c, i) => {
        if (c.type == "checkbox") {
            return (
                <span key={i + c.type + c.label}>
                    <label>
                        {c.label}
                        <input
                            type="checkbox"
                            checked={c.property.value<boolean>()!}
                            onChange={(e: any) => {
                                c.property.set(e.target!.checked!);
                            }}
                        ></input>
                    </label>
                </span>
            );
        }

[objerke]

Hi @heberleh, would you mind specifying the buggy examples? We might be able to improve on those. I guess you are talking about the popout and not the context menu?

[heberleh]

I mean the Options/Settings menu, where users change color, axis, etc. In Mods we need to create our own, so they have 2 buttons for Options (original from Spotfire and the one we build for Mod). I updated the post to include the info I have. Any ideas?