EN · DE · RU · FR · ES
← Index · ← File index · ← Prev · Next → · 📄 source

#2756: propTypes.js

projectforge-webapp/src/utilities/propTypes.js Type Definitions / PropTypes Export · projectforge-webapp/src/utilities/propTypes.js 58 lines · 49 code · 1 comments · 8 blank
Central repository of shared React PropTypes shape definitions for the ProjectForge webapp's component tree. This module exports reusable type validators for menus, buttons, colors, select dropdowns, table columns, badges, and dynamic layout content items. By co-locating these PropTypes in one module, the codebase avoids duplication across dozens of components that render the same data shapes, while providing consistent runtime type checking during development.

Architecture

Design Pattern

Rather than defining PropTypes inline within each component's .propTypes declaration, the ProjectForge webapp extracts shared shapes into this utility module. Components import specific validators (e.g., buttonPropType) and use them directly. This is a form of the "shared type vocabulary" pattern — it reduces drift where the same concept (say, a button) gets slightly different PropTypes in different components.

Exported PropTypes

menuItemPropType — minimal shape with a title string. Used in navigation dropdown and sidebar menu components.

buttonPropType — comprehensive button shape covering Bootstrap-style variants (primary through link), optional id, click handler, a CHECKBOX subtype, and checked state.

colorPropType — enumerated color strings matching Bootstrap 4 color names plus light.

selectProps — select input shape with required id and options array (supporting both {value, title} object arrays and flat string/number arrays), plus optional label and color.

tableColumnsPropType — array of column descriptors with id and title.

contentPropType — the foundational shape for the DynamicLayout system: each content block requires a type string (e.g., INPUT, TABLE, LABEL) and a key string (unique identifier within the layout).

Evolution: dynamicTypePropType → string

An earlier version of this file defined a dynamicTypePropType enumerating the set of supported DynamicLayout types (CHECKBOX, COL, CUSTOMIZED, FIELDSET, INPUT, LABEL, ROW, SELECT, TABLE, TEXTAREA). This was later replaced with a plain PropTypes.string.isRequired — a deliberate relaxation that allows the server-side layout engine to introduce new content types without requiring a frontend PropTypes update, following an open-closed design principle.

Git History

CommitWhat changed
09fadca1cAdded 'light' to the colorPropType enum. This was needed when calendar configuration started supporting a light color variant for event source styles, aligning with Bootstrap's color palette expansion.
4b945f64dReverted 30eea8132: restored the contentPropType.key field to .isRequired. The revert suggests the optional key was causing layout lookups to fail silently — a required key forces consumer code to always provide identifiers.
30eea8132Made contentPropType.key optional (removed .isRequired), presumably to support inline content blocks that don't need persistence identifiers. This was later reverted.
3763871f8Removed the dynamicTypePropType enum and replaced contentPropType.type with a plain PropTypes.string.isRequired. This opened the DynamicLayout system to arbitrary server-driven content types without frontend code changes.
ae35f5cc0Added TABLE to the dynamicTypePropType enum when the list view was migrated to use the DynamicLayout table rendering system instead of a hardcoded table component.
a8102b34eAdded SELECT to the dynamicTypePropType enum and introduced the contentPropType shape. This was the foundational commit that established the PropTypes module as a shared vocabulary for the DynamicLayout system.