rio/frontend/code/components/headingListItem.ts

import { ComponentBase, ComponentState } from "./componentBase";
import { textStyleToCss } from "../cssUtils";

export type HeadingListItemState = ComponentState & {
    _type_: "HeadingListItem-builtin";
    text?: string;
};

export class HeadingListItemComponent extends ComponentBase {
    state: Required<HeadingListItemState>;

    createElement(): HTMLElement {
        // Create the element
        let element = document.createElement("div");
        element.classList.add("rio-heading-list-item");

        // Apply a style. This could be done with CSS, instead of doing it
        // individually for each component, but these are rare and this preempts
        // duplicate code.
        Object.assign(element.style, textStyleToCss("heading3"));

        return element;
    }

    updateElement(
        deltaState: HeadingListItemState,
        latentComponents: Set<ComponentBase>
    ): void {
        super.updateElement(deltaState, latentComponents);

        if (deltaState.text !== undefined) {
            this.element.textContent = deltaState.text;
        }
    }
}