Annotations plugin for Roqueform

Manages Roqueform field annotations.

npm install --save-prod @roqueform/annotations-plugin

Overview

🔎 API documentation is available here.

Annotations allow to associate arbitrary data with fields.

import { createField } from 'roqueform';
import { annotationsPlugin } from '@roqueform/annotations-plugin';

const planetField = createField(
  { name: 'Pluto' },
  annotationsPlugin({ isDisabled: false })
);

planetField.at('name').annotations.isDisabled // ⮕ false

Update annotations for a single field:

planetField.annotate({ isDisabled: true });

planetField.annotations.isDisabled // ⮕ true

planetField.at('name').annotations.isDisabled // ⮕ false

Annotate field and all of its children recursively:

planetField.annotate({ isDisabled: true }, { recursive: true });

planetField.annotations.isDisabled // ⮕ true

// 🌕 The child field was annotated along with its parent
planetField.at('name').annotations.isDisabled // ⮕ true

Annotations can be updated using a callback. This is especially useful in conjunction with recursive flag:

planetField.annotate(
  field => {
    // Toggle disabled flag for the field and its children
    return { isDisabled: !field.annotations.isDisabled };
  },
  { recursive: true }
);

Subscribe to annotation changes:

planetField.subscribe('change:annotations', event => {
  event.target.annotations;
  // ⮕ { isDisabled: boolean }
});