elixforms-web-pages/common/src/ElixFormsElement.tsx

import React, { type JSX } from "react";

// Class to encapsulate the label and input elements
export class ElixFormsElement {
    label: JSX.Element;
    input: JSX.Element;
    separator: string;
    constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = "")
    {
        if (!labelElement || !inputElement) {
            throw new Error("labelElement and inputElement are required.");
        }

        this.label = labelElement;
        this.input = inputElement;
        this.separator = separator;
    }

    // Optional: render both elements together
    render() : JSX.Element {
        return (<><div className="iuFieldContainer">
                <div className="attrDisplay_left attrDisplay_label"><div className="iuLabelContainer"><div className="attrDisplay_center"><div className="attrDisplay_middle">
                    {this.label}{this.separator}
                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
                <div className="attrDisplay_right attrDisplay_input"><div className="iuInputContainer iuTypeString"><div className="attrDisplay_center"><div className="attrDisplay_middle">
                    {this.input}
                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
        </div></>);
    }
}