elixForms/elixforms-web-pages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch to bootstrap italia through AI

Browse Source
This commit is contained in:
pierpaolo.mammi
2026-07-17 09:53:46 +02:00
parent 99a64f1157
commit 4cd22396d9
16 changed files with 345 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/common/src/ElixFormsElement.tsx
+29 -15
View File
@@ -1,14 +1,13 @@
import React, { type JSX } from "react";
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 = "")
{
constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = '') {
if (!labelElement || !inputElement) {
throw new Error("labelElement and inputElement are required.");
throw new Error('labelElement and inputElement are required.');
}
this.label = labelElement;
@@ -16,15 +15,30 @@ export class ElixFormsElement {
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></>);
render(): JSX.Element {
return (
<div className="iuFieldContainer form-group row mb-3 align-items-start">
<div className="attrDisplay_left attrDisplay_label col-sm-4">
<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 col-sm-8">
<div className="iuInputContainer iuTypeString">
<div className="attrDisplay_center">
<div className="attrDisplay_middle">
{this.input}
</div>
</div>
<div className="iuClearContainer">&nbsp;</div>
</div>
</div>
</div>
);
}
}