Editor form

Update dynamics

Many React components mix in the ImmutableRenderMixin, which improves performance under the condition that the state/properties can be checked for changes by means of a shallow equals (see the project's webpage). This is also the case for the components with form elements that make up the editor form: ComponentSpecForm, CMDComponentForm, CMDElementForm and CMDAttributeForm. Hence, all updates on any of the specification or description properties must be carried out in "immutable" fashion. Therefore changes to input elements are handled by propagating an update 'command' (see React Immutability Helpers) up the chain (where the update command gets wrapped into a scoped update command at each higher level) until it reaches the root component, which sends the update command to a Flux action that applies it to the entire spec. The resulting updated spec gets picked up by the ComponentDetailsStore and subsequently all components that require updating are updated.

A similar chain of events takes place when components, elements and attributes are added, moved or removed. Some common methods are defined in the SpecFormUpdateMixin.

Validation

Some elements in the form components are of the type ValidatingTextInput, which is a custom 'decoration' of the react-bootstrap Input component with an added 'validate' property. This property takes a function as its value, which gets evaluated when focus on the input is lost. CMDComponentForm, CMDElementForm and CMDAttributeForm each have their own validate functions. Most validation cases are handled by calling the validateField function in the Validation service object.

Before a 'save (as new)' or 'publish' action is triggered by the EditorForm component, all validating input components are validated (again). If any field does not pass validation, a popup is shown and the action is aborted. For this purpose, validating input components register with a listener made available on the React context when they mount. They also unregister on component unmount.

In addition, global validation on the entire spec is carried out from within the save and publish actions. These actions fail with an error message if the spec does not pass the validation.