rio/frontend/code/components/progressBar.ts

import { ColorSet } from '../dataModels';
import { applySwitcheroo } from '../designApplication';
import { ComponentBase, ComponentState } from './componentBase';

export type ProgressBarState = ComponentState & {
    _type_: 'ProgressBar-builtin';
    progress?: number | null;
    color?: ColorSet;
    rounded?: boolean;
};

export class ProgressBarComponent extends ComponentBase {
    state: Required<ProgressBarState>;

    fillElement: HTMLElement;

    createElement(): HTMLElement {
        let element = document.createElement('div');
        element.classList.add('rio-progress-bar');

        element.innerHTML = `
            <div class="rio-progress-bar-inner">
                <div class="rio-progress-bar-track"></div>
                <div class="rio-progress-bar-fill"></div>
            </div>
        `;

        this.fillElement = element.querySelector(
            '.rio-progress-bar-fill'
        ) as HTMLElement;

        return element;
    }

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

        // No progress specified
        if (deltaState.progress === undefined) {
        }

        // Indeterminate progress
        else if (deltaState.progress === null) {
            this.element.classList.add('rio-progress-bar-indeterminate');
        }

        // Known progress
        else {
            let progress = Math.max(0, Math.min(1, deltaState.progress));

            this.element.style.setProperty(
                '--rio-progress-bar-fraction',
                `${progress * 100}%`
            );
            this.element.classList.remove('rio-progress-bar-indeterminate');
        }

        // Apply the color
        //
        // Only apply it to the fill element, so that the track doesn't change
        // color as well.
        if (deltaState.color !== undefined) {
            applySwitcheroo(
                this.fillElement,
                deltaState.color === 'keep' ? 'bump' : deltaState.color
            );
        }

        // Round the corners?
        if (deltaState.rounded === true) {
            this.element.style.setProperty(
                'border-radius',
                'var(--rio-global-corner-radius-small)'
            );
        } else if (deltaState.rounded === false) {
            this.element.style.removeProperty('border-radius');
        }
    }
}