EN · DE · RU · FR · ES

#2756: propTypes.js

projectforge-webapp/src/utilities/propTypes.js Typdefinitionen / PropTypes-Export · projectforge-webapp/src/utilities/propTypes.js 58 Zeilen · 49 Code · 1 Kommentar · 8 leer
Zentrales Repository für gemeinsam genutzte React-PropTypes-Shape-Definitionen der ProjectForge-Webapp-Komponentenstruktur. Dieses Modul exportiert wiederverwendbare Typvalidatoren für Menüs, Schaltflächen, Farben, Auswahllisten, Tabellenspalten, Badges und dynamische Layout-Inhalte. Durch die Zusammenlegung dieser PropTypes in einem Modul vermeidet die Codebasis Duplikate in Dutzenden von Komponenten, die dieselben Datenstrukturen rendern, und bietet gleichzeitig eine konsistente Laufzeit-Typüberprüfung während der Entwicklung.

Architektur

Entwurfsmuster

Anstatt PropTypes inline in der .propTypes-Deklaration jeder Komponente zu definieren, extrahiert die ProjectForge-Webapp gemeinsam genutzte Shapes in dieses Hilfsmodul. Komponenten importieren spezifische Validatoren (z. B. buttonPropType) und verwenden sie direkt. Dies ist eine Form des „Shared Type Vocabulary“-Musters – es reduziert Abweichungen, wenn dasselbe Konzept (z. B. eine Schaltfläche) in verschiedenen Komponenten leicht unterschiedliche PropTypes erhält.

Exportierte PropTypes

menuItemPropType — minimales Shape mit einem title-String. Wird in Navigations-Dropdowns und Seitenleisten-Menüs verwendet.

buttonPropType — umfassendes Schaltflächen-Shape, das Bootstrap-Varianten abdeckt (primary bis link), optionales id, Klick-Handler, einen CHECKBOX-Subtyp und den checked-Zustand.

colorPropType — aufgezählte Farbstrings, die Bootstrap-4-Farbnamen plus light entsprechen.

selectProps — Select-Input-Shape mit erforderlichem id und options-Array (unterstützt sowohl {value, title}-Objekt-Arrays als auch flache String/Number-Arrays), plus optionalem Label und Farbe.

tableColumnsPropType — Array von Spaltenbeschreibungen mit id und title.

contentPropType — das grundlegende Shape für das DynamicLayout-System: jeder Inhaltsblock benötigt einen type-String (z. B. INPUT, TABLE, LABEL) und einen key-String (eindeutige Kennung innerhalb des Layouts).

Entwicklung: dynamicTypePropType → string

Eine frühere Version dieser Datei definierte einen dynamicTypePropType, der die unterstützten DynamicLayout-Typen aufzählte (CHECKBOX, COL, CUSTOMIZED, FIELDSET, INPUT, LABEL, ROW, SELECT, TABLE, TEXTAREA). Dies wurde später durch ein einfaches PropTypes.string.isRequired ersetzt – eine bewusste Lockerung, die es der serverseitigen Layout-Engine ermöglicht, neue Inhaltstypen einzuführen, ohne dass ein Frontend-PropTypes-Update erforderlich ist, nach dem Open-Closed-Prinzip.

Git-Verlauf

CommitWas hat sich geändert
09fadca1c'light' zur colorPropType-Aufzählung hinzugefügt. Dies war erforderlich, als die Kalenderkonfiguration begann, eine helle Farbvariante für Ereignisquellenstile zu unterstützen, in Anlehnung an die Erweiterung der Bootstrap-Farbpalette.
4b945f64d30eea8132 rückgängig gemacht: Das Feld contentPropType.key wurde wieder auf .isRequired gesetzt. Der Revert deutet darauf hin, dass der optionale Schlüssel dazu führte, dass Layout-Nachschlagevorgänge stillschweigend fehlschlugen – ein erforderlicher Schlüssel zwingt den konsumierenden Code, immer Identifikatoren bereitzustellen.
30eea8132contentPropType.key optional gemacht (.isRequired entfernt), vermutlich um Inline-Inhaltsblöcke zu unterstützen, die keine Persistenz-Identifikatoren benötigen. Dies wurde später rückgängig gemacht.
3763871f8Die dynamicTypePropType-Aufzählung entfernt und contentPropType.type durch ein einfaches PropTypes.string.isRequired ersetzt. Dies öffnete das DynamicLayout-System für beliebige servergesteuerte Inhaltstypen ohne Frontend-Codeänderungen.
ae35f5cc0TABLE zur dynamicTypePropType-Aufzählung hinzugefügt, als die Listenansicht auf das DynamicLayout-Tabellenrendering-System migriert wurde, anstatt eine fest codierte Tabellenkomponente zu verwenden.
a8102b34eSELECT zur dynamicTypePropType-Aufzählung hinzugefügt und das contentPropType-Shape eingeführt. Dies war der grundlegende Commit, der das PropTypes-Modul als gemeinsames Vokabular für das DynamicLayout-System etablierte.